WIP: first experiment of fluffy

Author: shairez

.github/actions/test/action.yml

@@ -44,9 +44,9 @@ runs:
     #     storybookBuildDir: dist/storybook/headless
     #     zip: true
 
-    # - name: Build Tailwind Theme
+    # - name: Build the fluffy kit
     #   shell: bash
-    #   run: npx nx build tailwind
+    #   run: npx nx build fluffy
 
     # - name: Build
     #   shell: bash

.vscode/settings.json

@@ -1,4 +1,8 @@
 {
   "git.pullTags": false,
-  "conventionalCommits.scopes": ["tailwind"]
+  "conventionalCommits.scopes": ["fluffy", "headless", "docs"],
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }

CODING_STANDARDS.md

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority';
+
+export const button = cva(
+  [
+    'font-semibold no-underline gap-2 p-3 rounded-md',
+    'border-base-200 text-base-content no-underline outline-base-content'
+  ],
+  {
+    variants: {
+      intent: {
+        primary: ['bg-red-500']
+      }
+    },
+    defaultVariants: {
+      intent: 'primary'
+    }
+  }
+);

apps/website/public/images/kit-cta-tailwind.png renamed to apps/website/public/images/kit-cta-fluffy.png

@@ -2,6 +2,6 @@ export interface AppState {
   mode: 'light' | 'dark';
   isSidebarOpened: boolean;
   featureFlags?: {
-    showTailwind?: boolean;
+    showFluffy?: boolean;
   };
 }

apps/website/src/_fluffy/button/button.ts

@@ -5,12 +5,12 @@ export interface ComponentsStatusesMap {
 }
 
 export type ComponentKitsStatuses = {
-  tailwind: ComponentsStatusesMap;
+  fluffy: ComponentsStatusesMap;
   headless: ComponentsStatusesMap;
 };
 
 export const statusByComponent: ComponentKitsStatuses = {
-  tailwind: {
+  fluffy: {
     Accordion: ComponentStatus.Planned,
     Alert: ComponentStatus.Planned,
     Badge: ComponentStatus.Planned,

apps/website/src/_state/app-state.type.ts

@@ -1,5 +1,5 @@
 export enum KitName {
   HEADLESS = 'healdess',
-  TAILWIND = 'tailwind',
+  FLUFFY = 'fluffy',
   NO_KIT = 'no-kit'
 }

apps/website/src/_state/component-statuses.ts

@@ -32,7 +32,7 @@ export default component$(() => {
     mode: 'light',
     isSidebarOpened: false,
     featureFlags: {
-      showTailwind: import.meta.env.DEV
+      showFluffy: import.meta.env.DEV
     }
   });
 

apps/website/src/_state/kit-name.type.ts

@@ -5,7 +5,7 @@ import { version as headlessVersion } from '../../../../../../packages/kit-headl
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { KitName } from 'apps/website/src/_state/kit-name.type';
 import { useRootStore } from 'apps/website/src/_state/use-root-store';
-import { version as tailwindVersion } from '../../../../../../packages/kit-tailwind/package.json';
+import { version as fluffyVersion } from '../../../../../../packages/kit-fluffy/package.json';
 import { useSelectedKit } from '../../docs/use-selected-kit';
 import { CloseIcon } from '../icons/CloseIcon';
 import { GitHubIcon } from '../icons/GitHubIcon';
@@ -32,10 +32,10 @@ export default component$(
           version: headlessVersion
         };
       }
-      if (selectedKitSig.value === KitName.TAILWIND) {
+      if (selectedKitSig.value === KitName.FLUFFY) {
         return {
-          name: 'Tailwind',
-          version: tailwindVersion
+          name: 'Fluffy',
+          version: fluffyVersion
         };
       }
     });
@@ -73,8 +73,8 @@ export default component$(
         <nav class="hidden lg:flex gap-4">
           <a href="/about">About</a>
           <a href="/docs/headless/introduction">Headless Kit</a>
-          {rootStore.featureFlags?.showTailwind && (
-            <a href="/docs/tailwind/introduction">Tailwind Kit</a>
+          {rootStore.featureFlags?.showFluffy && (
+            <a href="/docs/fluffy/introduction">Fluffy (styled) Kit</a>
           )}
           <a href="https://discord.gg/PVWUUejrez" target="_blank">
             Community