WIP: fluffy improvements

Author: shairez

apps/website/src/routes/_components/header/header.tsx

@@ -47,30 +47,30 @@ export default component$(
     return (
       <header
         class={[
-          `fixed top-0 w-full h-20 md:h-20 z-20 md:bg-[var(--color-bg)] flex gap-8 p-4 items-center`,
-          `ease-in-out duration-300`,
+          `fixed top-0 z-20 flex h-20 w-full items-center gap-8 p-4 md:h-20 md:bg-[var(--color-bg)]`,
+          `duration-300 ease-in-out`,
           rootStore.isSidebarOpened
             ? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
             : 'bg-[var(--color-bg)]',
           showBottomBorder ? `border-b-[1px] border-slate-300 dark:border-slate-600` : ``
         ]}
       >
-        <section class="flex flex-col md:flex-row gap-1 md:gap-8 mr-auto">
+        <section class="mr-auto flex flex-col gap-1 md:flex-row md:gap-8">
           <a href="/" class="lg:ml-8">
             <Logo />
           </a>
 
           {showVersion && (
             <div data-tip="Qwik-UI Version" class="mr-auto">
-              <div class="flex flex-row gap-1 ml-2 md:mt-1 md:flex-col text-xs md:text-sm">
+              <div class="ml-2 flex flex-row gap-1 text-xs md:mt-1 md:flex-col md:text-sm">
                 <span> {kitSignal.value?.name} Kit </span>
                 <span> v.{kitSignal.value?.version} </span>
               </div>
             </div>
           )}
         </section>
 
-        <nav class="hidden lg:flex gap-4">
+        <nav class="hidden gap-4 lg:flex">
           <a href="/about">About</a>
           <a href="/docs/headless/introduction">Headless Kit</a>
           {rootStore.featureFlags?.showFluffy && (

apps/website/src/routes/docs/fluffy/(components)/button/index.tsx

@@ -18,7 +18,7 @@ export default component$(() => {
         <h2>Fluffy Example</h2>
 
         <div>
-          <Button intent="default">I'm from Fluffy</Button>
+          <Button>I'm from Fluffy</Button>
         </div>
 
         <h2>Basic Example</h2>

apps/website/tailwind.config.cjs

@@ -22,6 +22,33 @@ module.exports = {
         'depth-dark': 'var(--dark-shadow-elevation-medium)'
       },
       colors: {
+        'qwik-blue': {
+          50: 'hsl(204, 100%, 96%)',
+          100: 'hsl(203, 100%, 94%)',
+          200: 'hsl(199, 97%, 86%)',
+          300: 'hsl(198, 100%, 74%)',
+          400: 'hsl(197, 97%, 60%)',
+          500: 'hsl(197, 93%, 53%)',
+          600: 'hsl(199, 100%, 40%)',
+          700: 'hsl(200, 100%, 32%)',
+          800: 'hsl(200, 94%, 25%)',
+          900: 'hsl(201, 84%, 17%)',
+          950: 'hsl(204, 83%, 9%)'
+        },
+        'qwik-purple': {
+          50: 'hsl(260, 100%, 90%)',
+          100: 'hsl(262, 83%, 91%)',
+          200: 'hsl(259, 85%, 92%)',
+          300: 'hsl(261, 87%, 85%)',
+          400: 'hsl(263, 84%, 73%)',
+          500: 'hsl(266, 83%, 66%)',
+          600: 'hsl(270, 77%, 58%)',
+          700: 'hsl(272, 64%, 50%)',
+          800: 'hsl(271, 64%, 42%)',
+          900: 'hsl(272, 62%, 30%)',
+          950: 'hsl(269, 67%, 13%)'
+        },
+
         primary: {
           DEFAULT: 'var(--color-primary)',
           forground: 'var(--color-primary)',

packages/kit-fluffy/src/components/button/button.tsx

@@ -46,18 +46,23 @@ import { Slot, component$ } from '@builder.io/qwik';
 import { cva, type AddVariantPropsTo } from '@qwik-ui/cva';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  `inline-flex items-center justify-center rounded-md 
+  text-sm font-medium ring-offset-background transition-colors
+  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+  focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,
   {
     variants: {
       intent: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         link: 'text-primary underline-offset-4 hover:underline'
       },
+      look: {
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground'
+      },
       size: {
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
@@ -66,7 +71,7 @@ export const buttonVariants = cva(
       }
     },
     defaultVariants: {
-      intent: 'default',
+      intent: 'primary',
       size: 'default'
     }
   }