Merge pull request #452 from shairez/pr-fluffy-docs

Author: shairez

apps/website/package.json

@@ -3,7 +3,7 @@
   "description": "The Qwik UI Website",
   "private": true,
   "dependencies": {
-    "@qwik-ui/cva": "workspace:*",
+    "@qwik-ui/utils": "workspace:*",
     "@qwik-ui/headless": "workspace:*",
     "@qwik-ui/tailwind": "workspace:*",
     "@qwik-ui/fluffy": "workspace:*",

apps/website/public/images/qwik-ui-fluffy-creature-screen.webp

@@ -15,12 +15,12 @@ export const statusByComponent: ComponentKitsStatuses = {
     Alert: ComponentStatus.Planned,
     Badge: ComponentStatus.Planned,
     Breadcrumb: ComponentStatus.Planned,
-    Button: ComponentStatus.Planned,
+    Button: ComponentStatus.Beta,
     'Button Group': ComponentStatus.Planned,
     Card: ComponentStatus.Planned,
     Carousel: ComponentStatus.Planned,
     Checkbox: ComponentStatus.Planned,
-    Collapse: ComponentStatus.Planned,
+    Combobox: ComponentStatus.Planned,
     Drawer: ComponentStatus.Planned,
     Input: ComponentStatus.Planned,
     'Input Phone': ComponentStatus.Planned,

apps/website/public/images/qwik-ui-fluffy-creature.webp

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

apps/website/public/images/qwik-ui-headless-hero.webp

@@ -3,20 +3,20 @@
     --color-background: hsl(0, 0%, 100%);
     --color-foreground: hsl(263, 84%, 5%);
 
-    --color-primary: hsl(263, 84%, 35%);
+    --color-primary: hsl(263, 56%, 52%);
     --color-primary-foreground: hsl(0, 0%, 100%);
 
-    --color-secondary: hsl(197, 93%, 25%);
+    --color-secondary: hsl(202, 91%, 52%);
     --color-secondary-foreground: hsl(0, 0%, 100%);
 
     --color-muted: hsl(210, 40%, 96%);
     --color-muted-foreground: hsl(263, 16%, 47%);
 
-    --color-accent: hsl(210, 40%, 96%);
+    --color-accent: hsl(0, 0%, 83%);
     --color-accent-foreground: hsl(263, 47%, 11%);
 
     --color-destructive: hsl(0, 84%, 60%);
-    --color-destructive-foreground: hsl(263, 40%, 98%);
+    --color-destructive-foreground: hsl(0, 0%, 100%);
 
     --color-card: hsl(0, 0%, 100%);
     --color-card-foreground: hsl(263, 84%, 5%);
@@ -28,7 +28,7 @@
 
     --color-input: hsl(263, 32%, 91%);
 
-    --color-ring: hsl(263, 84%, 25%);
+    --color-ring: hsl(263, 18%, 61%);
 
     --border-radius: 0.375rem;
   }
@@ -37,19 +37,19 @@
     --color-background: hsl(263, 84%, 5%);
     --color-foreground: hsl(263, 40%, 98%);
 
-    --color-primary: hsl(263 40% 98%);
-    --color-primary-foreground: hsl(263 47.4% 11.2%);
+    --color-primary: hsl(263, 70%, 58%);
+    --color-primary-foreground: hsl(190 40% 98%);
 
-    --color-secondary: hsl(197 32.6% 17.5%);
+    --color-secondary: hsl(202, 97%, 55%);
     --color-secondary-foreground: hsl(190 40% 98%);
 
     --color-muted: hsl(218 32.6% 17.5%);
     --color-muted-foreground: hsl(263 20.2% 65.1%);
 
-    --color-accent: hsl(263 32.6% 17.5%);
-    --color-accent-foreground: hsl(263 40% 98%);
+    --color-accent: hsl(0, 0%, 26%);
+    --color-accent-foreground: hsl(263 32.6% 17.5%);
 
-    --color-destructive: hsl(0 62.8% 30.6%);
+    --color-destructive: hsl(0, 70%, 41%);
     --color-destructive-foreground: hsl(263 40% 98%);
 
     --color-card: hsl(263 84% 4.9%);

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

@@ -7,20 +7,20 @@
     --color-background: 0 0% 100%;
     --color-foreground: 263 84% 5%;
 
-    --color-primary: 263 84% 35%;
+    --color-primary: 263 56% 52%;
     --color-primary-foreground: 0 0% 100%;
 
-    --color-secondary: 197 93% 25%;
+    --color-secondary: 202 91% 52%;
     --color-secondary-foreground: 0 0% 100%;
 
     --color-muted: 210 40% 96%;
     --color-muted-foreground: 263 16% 47%;
 
-    --color-accent: 210 40% 96%;
+    --color-accent: 0 0% 89%;
     --color-accent-foreground: 263 47% 11%;
 
     --color-destructive: 0 84% 60%;
-    --color-destructive-foreground: 263 40% 98%;
+    --color-destructive-foreground: 263 0% 100%;
 
     --color-card: 0 0% 100%;
     --color-card-foreground: 263 84% 5%;
@@ -32,39 +32,39 @@
 
     --color-input: 263 32% 91%;
 
-    --color-ring: 263 84% 25%;
+    --color-ring: 263 18% 61%;
 
     --border-radius: 0.375rem;
 
-    --shiki-color-text: theme('colors.white');
-    --shiki-token-constant: theme('colors.emerald.300');
-    --shiki-token-string: theme('colors.emerald.300');
-    --shiki-token-comment: theme('colors.zinc.500');
-    --shiki-token-keyword: theme('colors.sky.300');
-    --shiki-token-parameter: theme('colors.pink.300');
-    --shiki-token-function: theme('colors.violet.300');
-    --shiki-token-string-expression: theme('colors.emerald.300');
-    --shiki-token-punctuation: theme('colors.zinc.200');
+    --shiki-color-text: theme('colors.black');
+    --shiki-token-constant: theme('colors.emerald.800');
+    --shiki-token-string: theme('colors.emerald.700');
+    --shiki-token-comment: theme('colors.zinc.700');
+    --shiki-token-keyword: theme('colors.sky.600');
+    --shiki-token-parameter: theme('colors.pink.700');
+    --shiki-token-function: theme('colors.purple.700');
+    --shiki-token-string-expression: theme('colors.emerald.700');
+    --shiki-token-punctuation: theme('colors.zinc.700');
   }
 
   .dark {
     /* previous 263 84% 5%  */
     --color-background: 222 47% 11%;
     --color-foreground: 263 40% 98%;
 
-    --color-primary: 263 40% 98%;
-    --color-primary-foreground: 263 47.4% 11.2%;
+    --color-primary: 263 70% 58%;
+    --color-primary-foreground: 190 40% 98%;
 
-    --color-secondary: 197 32.6% 17.5%;
+    --color-secondary: 202 97% 55%;
     --color-secondary-foreground: 190 40% 98%;
 
     --color-muted: 218 32.6% 17.5%;
     --color-muted-foreground: 263 20.2% 65.1%;
 
-    --color-accent: 263 32.6% 17.5%;
+    --color-accent: 0 0% 23%;
     --color-accent-foreground: 263 40% 98%;
 
-    --color-destructive: 0 62.8% 30.6%;
+    --color-destructive: 0 70% 40%;
     --color-destructive-foreground: 263 40% 98%;
 
     --color-card: 263 84% 4.9%;
@@ -78,6 +78,16 @@
     --color-input: 263 32.6% 17.5%;
 
     --color-ring: 263 26.8% 83.9%;
+
+    --shiki-color-text: theme('colors.white');
+    --shiki-token-constant: theme('colors.emerald.300');
+    --shiki-token-string: theme('colors.emerald.300');
+    --shiki-token-comment: theme('colors.zinc.500');
+    --shiki-token-keyword: theme('colors.sky.300');
+    --shiki-token-parameter: theme('colors.pink.300');
+    --shiki-token-function: theme('colors.violet.300');
+    --shiki-token-string-expression: theme('colors.emerald.300');
+    --shiki-token-punctuation: theme('colors.zinc.200');
   }
 }
 

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

@@ -0,0 +1,14 @@
+export const ClipboardCheck = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="#bab4b46e"
+    class="bi bi-clipboard2-check"
+    viewBox="0 0 16 16"
+  >
+    <path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5h3Z" />
+    <path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12Z" />
+    <path d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3Z" />
+  </svg>
+);

apps/website/src/colors.debug.css

@@ -0,0 +1,15 @@
+export const CopyIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="#bab4b46e"
+    class="bi bi-copy"
+    viewBox="0 0 16 16"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z"
+    />
+  </svg>
+);