@djangocfg/ui-core 2.1.394 → 2.1.397

package/src/styles/theme/dark.css

@@ -14,29 +14,29 @@
 
 .dark {
   /* Base colors - True black background with subtle grays */
-  --background: 0 0% 4%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 8%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 12%;
-  --popover-foreground: 0 0% 98%;
+  --background: hsl(0 0% 4%);
+  --foreground: hsl(0 0% 98%);
+  --card: hsl(0 0% 8%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 12%);
+  --popover-foreground: hsl(0 0% 98%);
   /* Exact brand: #00d9ff (same HSL as :root light primary) */
-  --primary: 189 100% 50%;
+  --primary: hsl(189 100% 50%);
   /* Dark label on bright cyan — stronger contrast than white on #00d9ff */
-  --primary-foreground: 0 0% 9%;
+  --primary-foreground: hsl(0 0% 9%);
   /* Secondary: dark elevated surface + light label (matches typical shadcn dark “secondary” role) */
-  --secondary: 0 0% 16%;
-  --secondary-foreground: 0 0% 96%;
-  --muted: 0 0% 10%;
-  --muted-foreground: 0 0% 60%;
+  --secondary: hsl(0 0% 16%);
+  --secondary-foreground: hsl(0 0% 96%);
+  --muted: hsl(0 0% 10%);
+  --muted-foreground: hsl(0 0% 60%);
   /* Cyan-tinted elevated surface */
-  --accent: 189 18% 17%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 84% 60%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 15%;
-  --input: 0 0% 15%;
-  --ring: 189 100% 50%;
+  --accent: hsl(189 18% 17%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 15%);
+  --input: hsl(0 0% 15%);
+  --ring: hsl(189 100% 50%);
   --shadow-card: none;
 
   /* Code surface — see light.css for the rationale. On dark we want
@@ -44,22 +44,20 @@
    * `--popover` (12%); 9% sits in the sweet spot — visible block but
    * not a heavy "second card" feel. Inline code uses the same hue at
    * a touch lighter so chips read as recessed, not as buttons. */
-  --code: 0 0% 9%;
-  --code-foreground: 0 0% 92%;
-  --code-border: 0 0% 18%;
-  --code-inline: 0 0% 14%;
-  --code-inline-foreground: 0 0% 92%;
-
+  --code: hsl(0 0% 9%);
+  --code-foreground: hsl(0 0% 92%);
+  --code-border: hsl(0 0% 18%);
+  --code-inline: hsl(0 0% 14%);
+  --code-inline-foreground: hsl(0 0% 92%);
   /* Sidebar Dark Theme - Darker black sidebar */
-  --sidebar-background: 0 0% 0%;
-  --sidebar-foreground: 0 0% 98%;
-  --sidebar-primary: 189 100% 50%;
-  --sidebar-primary-foreground: 0 0% 9%;
-  --sidebar-accent: 189 14% 12%;
-  --sidebar-accent-foreground: 0 0% 98%;
-  --sidebar-border: 0 0% 15%;
-  --sidebar-ring: 189 100% 50%;
-
+  --sidebar-background: hsl(0 0% 0%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(189 100% 50%);
+  --sidebar-primary-foreground: hsl(0 0% 9%);
+  --sidebar-accent: hsl(189 14% 12%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 15%);
+  --sidebar-ring: hsl(189 100% 50%);
   /* ── Status surfaces (dark) ──────────────────────────────────────
    * Dark variants: dim backgrounds (~8-12% lightness) so banners
    * don't blow out against the near-black page. Foreground raised
@@ -67,29 +65,25 @@
    * ─────────────────────────────────────────────────────────────── */
 
   /* Warning — amber */
-  --warning: 38 92% 50%;
-  --warning-background: 38 80% 10%;
-  --warning-foreground: 38 90% 75%;
-  --warning-border: 38 60% 30%;
-
+  --warning: hsl(38 92% 50%);
+  --warning-background: hsl(38 80% 10%);
+  --warning-foreground: hsl(38 90% 75%);
+  --warning-border: hsl(38 60% 30%);
   /* Success — green */
-  --success: 142 60% 45%;
-  --success-background: 142 60% 8%;
-  --success-foreground: 142 70% 70%;
-  --success-border: 142 50% 25%;
-
+  --success: hsl(142 60% 45%);
+  --success-background: hsl(142 60% 8%);
+  --success-foreground: hsl(142 70% 70%);
+  --success-border: hsl(142 50% 25%);
   /* Destructive surface */
-  --destructive-background: 0 80% 10%;
-  --destructive-border: 0 70% 30%;
-
+  --destructive-background: hsl(0 80% 10%);
+  --destructive-border: hsl(0 70% 30%);
   /* Info — blue-cyan */
-  --info: 200 80% 55%;
-  --info-background: 200 80% 8%;
-  --info-foreground: 200 80% 75%;
-  --info-border: 200 60% 25%;
-
+  --info: hsl(200 80% 55%);
+  --info-background: hsl(200 80% 8%);
+  --info-foreground: hsl(200 80% 75%);
+  --info-border: hsl(200 60% 25%);
   /* Surface gradient dark */
-  --surface-gradient: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0.8));
+  --surface-gradient: linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--background) 80%, transparent));
 
   /* Chart colors — chart-1 aligned with brand */
   --chart-1: 189 100% 50%;

package/src/styles/theme/light.css

@@ -11,27 +11,27 @@
 
 :root {
   /* Base colors - Clean white with neutral grays */
-  --background: 0 0% 94%;
-  --foreground: 0 0% 9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 9%;
+  --background: hsl(0 0% 94%);
+  --foreground: hsl(0 0% 9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 9%);
   /* Interactive primary on white (~#0989aa): readable white-on-fill + calmer than neon */
-  --primary: 192 90% 35%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 0 0% 9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 96%;
-  --muted-foreground: 0 0% 45%;
+  --primary: hsl(192 90% 35%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(0 0% 9%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 96%);
+  --muted-foreground: hsl(0 0% 45%);
   /* Subtle cyan-tinted hover surface (not gray-only) */
-  --accent: 192 18% 94%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84% 60%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 90%;
-  --input: 0 0% 90%;
-  --ring: 192 90% 35%;
+  --accent: hsl(192 18% 94%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0 84% 60%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 90%);
+  --input: hsl(0 0% 90%);
+  --ring: hsl(192 90% 35%);
   --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
 
   /* Code surface — used by markdown code fences, terminal blocks,
@@ -44,22 +44,20 @@
    * for body legibility. Border keeps the panel anchored.
    * Inline code shares the same surface for chip-on-chip cohesion.
    */
-  --code: 0 0% 96%;
-  --code-foreground: 0 0% 12%;
-  --code-border: 0 0% 88%;
-  --code-inline: 0 0% 93%;
-  --code-inline-foreground: 0 0% 14%;
-
+  --code: hsl(0 0% 96%);
+  --code-foreground: hsl(0 0% 12%);
+  --code-border: hsl(0 0% 88%);
+  --code-inline: hsl(0 0% 93%);
+  --code-inline-foreground: hsl(0 0% 14%);
   /* Sidebar Light Theme - Subtle gray background */
-  --sidebar-background: 0 0% 97%;
-  --sidebar-foreground: 0 0% 9%;
-  --sidebar-primary: 192 90% 35%;
-  --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 189 16% 95%;
-  --sidebar-accent-foreground: 0 0% 9%;
-  --sidebar-border: 0 0% 90%;
-  --sidebar-ring: 192 90% 35%;
-
+  --sidebar-background: hsl(0 0% 97%);
+  --sidebar-foreground: hsl(0 0% 9%);
+  --sidebar-primary: hsl(192 90% 35%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(189 16% 95%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(0 0% 90%);
+  --sidebar-ring: hsl(192 90% 35%);
   /* ── Status surfaces ─────────────────────────────────────────────
    * Each status has 4 tokens: icon/accent color, page background,
    * readable foreground text, and border ring.
@@ -68,29 +66,25 @@
    * ─────────────────────────────────────────────────────────────── */
 
   /* Warning — amber */
-  --warning: 38 92% 50%;
-  --warning-background: 48 100% 96%;
-  --warning-foreground: 26 90% 25%;
-  --warning-border: 38 70% 65%;
-
+  --warning: hsl(38 92% 50%);
+  --warning-background: hsl(48 100% 96%);
+  --warning-foreground: hsl(26 90% 25%);
+  --warning-border: hsl(38 70% 65%);
   /* Success — green */
-  --success: 142 71% 45%;
-  --success-background: 138 76% 97%;
-  --success-foreground: 140 60% 20%;
-  --success-border: 142 60% 65%;
-
+  --success: hsl(142 71% 45%);
+  --success-background: hsl(138 76% 97%);
+  --success-foreground: hsl(140 60% 20%);
+  --success-border: hsl(142 60% 65%);
   /* Destructive surface (separate from the filled button token) */
-  --destructive-background: 0 100% 97%;
-  --destructive-border: 0 84% 70%;
-
+  --destructive-background: hsl(0 100% 97%);
+  --destructive-border: hsl(0 84% 70%);
   /* Info — blue-cyan (brand-adjacent) */
-  --info: 200 90% 40%;
-  --info-background: 200 100% 97%;
-  --info-foreground: 200 80% 20%;
-  --info-border: 200 80% 65%;
-
+  --info: hsl(200 90% 40%);
+  --info-background: hsl(200 100% 97%);
+  --info-foreground: hsl(200 80% 20%);
+  --info-border: hsl(200 80% 65%);
   /* Surface gradient */
-  --surface-gradient: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0.8));
+  --surface-gradient: linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--background) 80%, transparent));
 
   /* Chart colors — chart-1 aligned with brand hue */
   --chart-1: 192 90% 35%;

package/src/styles/theme/tokens.css

@@ -1,130 +1,145 @@
 /**
  * Tailwind CSS v4 Theme Tokens
  *
- * Defines custom properties that Tailwind utilities can use
- * @theme directive registers these for Tailwind v4
+ * Two-block layout:
+ *
+ *   @theme inline { --color-X: var(--X); }   ← color references
+ *   @theme        { --spacing-N: …;     }    ← raw values
+ *
+ * `@theme inline` keeps `--color-*` as *references* into `:root` /
+ * `.dark` so Tailwind's opacity modifier (`bg-card/40`, `bg-foreground/5`)
+ * resolves via `color-mix(in oklab, var(--color-X) 40%, transparent)`.
+ * The legacy `@theme { --color-X: hsl(var(--X)); }` shape baked the
+ * value into a global variable and broke every opacity modifier —
+ * consumers had to write inline `style={{ backgroundColor: 'hsl(... / 0.4)' }}`
+ * workarounds. After this refactor, those workarounds are redundant.
+ *
+ * Pairs with `light.css` / `dark.css` where every `--token` is now a
+ * fully-wrapped CSS color (`hsl(0 0% 94%)`, not bare `0 0% 94%`).
  */
 
-@theme {
-  /* Default breakpoints - mobile-first responsive design */
-  --breakpoint-sm: 40rem;    /* 640px */
-  --breakpoint-md: 48rem;    /* 768px */
-  --breakpoint-lg: 64rem;    /* 1024px */
-  --breakpoint-xl: 80rem;    /* 1280px */
-  --breakpoint-2xl: 96rem;   /* 1536px */
+@theme inline {
+  /* Base semantic tokens — references into :root / .dark */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
 
-  /* Register semantic color tokens for Tailwind utilities */
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --color-black: #000000;
-  --color-white: #ffffff;
-  /* Status surfaces — warning / success / destructive / info */
-  --color-warning: hsl(var(--warning));
-  --color-warning-background: hsl(var(--warning-background));
-  --color-warning-foreground: hsl(var(--warning-foreground));
-  --color-warning-border: hsl(var(--warning-border));
+  /* Status surfaces */
+  --color-warning: var(--warning);
+  --color-warning-background: var(--warning-background);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-border: var(--warning-border);
 
-  --color-success: hsl(var(--success));
-  --color-success-background: hsl(var(--success-background));
-  --color-success-foreground: hsl(var(--success-foreground));
-  --color-success-border: hsl(var(--success-border));
+  --color-success: var(--success);
+  --color-success-background: var(--success-background);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-border: var(--success-border);
 
-  --color-destructive-background: hsl(var(--destructive-background));
-  --color-destructive-border: hsl(var(--destructive-border));
+  --color-destructive-background: var(--destructive-background);
+  --color-destructive-border: var(--destructive-border);
 
-  --color-info: hsl(var(--info));
-  --color-info-background: hsl(var(--info-background));
-  --color-info-foreground: hsl(var(--info-foreground));
-  --color-info-border: hsl(var(--info-border));
+  --color-info: var(--info);
+  --color-info-background: var(--info-background);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-border: var(--info-border);
 
-  /* Code surface tokens — single source of truth for any "this is
-   * code, not prose" panel (markdown fences, inline code, terminal
-   * blocks). See light.css / dark.css for the per-theme values. */
-  --color-code: hsl(var(--code));
-  --color-code-foreground: hsl(var(--code-foreground));
-  --color-code-border: hsl(var(--code-border));
-  --color-code-inline: hsl(var(--code-inline));
-  --color-code-inline-foreground: hsl(var(--code-inline-foreground));
+  /* Code surface */
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-border: var(--code-border);
+  --color-code-inline: var(--code-inline);
+  --color-code-inline-foreground: var(--code-inline-foreground);
 
-  /* Sidebar colors */
-  --color-sidebar-background: hsl(var(--sidebar-background));
-  /* Shorthand used by shadcn sidebar (`bg-sidebar` / `text-sidebar`) — same surface as sidebar-background */
-  --color-sidebar: hsl(var(--sidebar-background));
-  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
-  --color-sidebar-primary: hsl(var(--sidebar-primary));
-  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
-  --color-sidebar-accent: hsl(var(--sidebar-accent));
-  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
-  --color-sidebar-border: hsl(var(--sidebar-border));
-  --color-sidebar-ring: hsl(var(--sidebar-ring));
+  /* Sidebar */
+  --color-sidebar-background: var(--sidebar-background);
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@theme {
+  /* Static palette anchors — not themed */
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  /* Breakpoints — mobile-first */
+  --breakpoint-sm: 40rem;    /* 640px */
+  --breakpoint-md: 48rem;    /* 768px */
+  --breakpoint-lg: 64rem;    /* 1024px */
+  --breakpoint-xl: 80rem;    /* 1280px */
+  --breakpoint-2xl: 96rem;   /* 1536px */
 
-  /* Spacing scale - required for all spacing utilities to work */
-  --spacing: 0.25rem; /* Base unit: 4px */
+  /* Spacing scale — required for all spacing utilities */
+  --spacing: 0.25rem;
   --spacing-0: 0;
   --spacing-px: 1px;
-  --spacing-0\.5: 0.125rem;  /* 2px */
-  --spacing-1: 0.25rem;   /* 4px */
-  --spacing-1\.5: 0.375rem;  /* 6px */
-  --spacing-2: 0.5rem;    /* 8px */
-  --spacing-2\.5: 0.625rem;  /* 10px */
-  --spacing-3: 0.75rem;   /* 12px */
-  --spacing-3\.5: 0.875rem;  /* 14px */
-  --spacing-4: 1rem;      /* 16px */
-  --spacing-5: 1.25rem;   /* 20px */
-  --spacing-6: 1.5rem;    /* 24px */
-  --spacing-7: 1.75rem;   /* 28px */
-  --spacing-8: 2rem;      /* 32px */
-  --spacing-9: 2.25rem;   /* 36px */
-  --spacing-10: 2.5rem;   /* 40px */
-  --spacing-11: 2.75rem;  /* 44px */
-  --spacing-12: 3rem;     /* 48px */
-  --spacing-13: 3.25rem;  /* 52px */
-  --spacing-14: 3.5rem;   /* 56px */
-  --spacing-16: 4rem;     /* 64px */
-  --spacing-20: 5rem;     /* 80px */
-  --spacing-24: 6rem;     /* 96px */
-  --spacing-28: 7rem;     /* 112px */
-  --spacing-32: 8rem;     /* 128px */
-  --spacing-36: 9rem;     /* 144px */
-  --spacing-40: 10rem;    /* 160px */
-  --spacing-44: 11rem;    /* 176px */
-  --spacing-48: 12rem;    /* 192px */
-  --spacing-52: 13rem;    /* 208px */
-  --spacing-56: 14rem;    /* 224px */
-  --spacing-60: 15rem;    /* 240px */
-  --spacing-64: 16rem;    /* 256px */
-  --spacing-72: 18rem;    /* 288px */
-  --spacing-80: 20rem;    /* 320px */
-  --spacing-96: 24rem;    /* 384px */
+  --spacing-0\.5: 0.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-1\.5: 0.375rem;
+  --spacing-2: 0.5rem;
+  --spacing-2\.5: 0.625rem;
+  --spacing-3: 0.75rem;
+  --spacing-3\.5: 0.875rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-13: 3.25rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-32: 8rem;
+  --spacing-36: 9rem;
+  --spacing-40: 10rem;
+  --spacing-44: 11rem;
+  --spacing-48: 12rem;
+  --spacing-52: 13rem;
+  --spacing-56: 14rem;
+  --spacing-60: 15rem;
+  --spacing-64: 16rem;
+  --spacing-72: 18rem;
+  --spacing-80: 20rem;
+  --spacing-96: 24rem;
 
-  /* Gap utilities - required for gap-* classes to work */
-  --gap-9: 2.25rem; /* 36px */
-  --gap-10: 2.5rem;  /* 40px */
-  --gap-11: 2.75rem; /* 44px */
-  --gap-12: 3rem;    /* 48px */
-  --gap-14: 3.5rem;  /* 56px */
-  --gap-16: 4rem;    /* 64px */
-  --gap-20: 5rem;    /* 80px */
-  --gap-24: 6rem;    /* 96px */
+  /* Gap utilities */
+  --gap-9: 2.25rem;
+  --gap-10: 2.5rem;
+  --gap-11: 2.75rem;
+  --gap-12: 3rem;
+  --gap-14: 3.5rem;
+  --gap-16: 4rem;
+  --gap-20: 5rem;
+  --gap-24: 6rem;
 
-  /* Blur utilities - required for backdrop-blur-* classes to work */
+  /* Blur (backdrop-blur-*) */
   --blur-xs: 4px;
   --blur-sm: 8px;
   --blur-md: 12px;
@@ -136,7 +151,7 @@
   /* Custom width utilities */
   --width-dropdown: 500px;
 
-  /* Z-index scale for stacking context */
+  /* Z-index scale */
   --z-index-0: 0;
   --z-index-10: 10;
   --z-index-20: 20;
@@ -153,7 +168,7 @@
   --z-index-9999: 9999;
   --z-index-auto: auto;
 
-  /* Custom animations for smooth floating effects */
+  /* Floating animations */
   --animate-float: float 20s ease-in-out infinite;
   --animate-float-slow: float 25s ease-in-out infinite;
   --animate-float-x: float-x 18s ease-in-out infinite;

package/src/styles/utilities.css

@@ -54,7 +54,7 @@
   position: absolute;
   width: 2.25rem;
   height: 2.25rem;
-  background-color: hsl(var(--muted));
+  background-color: var(--muted);
   border-radius: 9999px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-weight: 500;
@@ -64,7 +64,7 @@
   align-items: center;
   justify-content: center;
   text-indent: -1px;
-  border: 4px solid hsl(var(--background));
+  border: 4px solid var(--background);
   content: counter(step);
 }
 
@@ -213,16 +213,54 @@
  * Requires `isolation: isolate` and a background image/color on a parent.
  */
 
-/* macOS Vibrancy — strong blur, 72% opacity, high saturation */
+/**
+ * macOS Vibrancy / Liquid Glass — strong blur + high saturation over a
+ * 72% translucent base. The blur+saturate combo is the Apple-standard
+ * recipe (Sequoia / Tahoe 26 use the same values). 72% opacity keeps
+ * enough background bleed-through to read content underneath.
+ *
+ * Use on: sidebars, popovers, sheet headers, command palette overlays.
+ * Requires: container parent must be non-transparent (otherwise nothing
+ * to blur). Avoid stacking multiple `.glass-macos` — blur compounds.
+ */
 .glass-macos {
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
-  background-color: hsl(var(--background) / 0.72);
+  background-color: color-mix(in oklab, var(--background) 72%, transparent);
 }
 
-/* Windows 11 Mica / Acrylic — deeper blur, softer opacity */
+/**
+ * Windows 11 Mica / Acrylic — wider/softer blur over an 85% base.
+ * Mica = wallpaper-tinted material; Acrylic = stronger blur on top.
+ * This recipe targets Acrylic (the closer-to-Apple flavour).
+ */
 .glass-win11 {
   backdrop-filter: blur(60px) saturate(125%);
   -webkit-backdrop-filter: blur(60px) saturate(125%);
-  background-color: hsl(var(--background) / 0.85);
+  background-color: color-mix(in oklab, var(--background) 85%, transparent);
+}
+
+/**
+ * Liquid Glass variants — Apple's macOS 26 / iOS 26 design language.
+ * Thinner blur, brighter base, subtle inner highlight via box-shadow.
+ * Designed for floating chrome (Dock, navbar, FAB chips).
+ */
+.glass-liquid {
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  background-color: color-mix(in oklab, var(--card) 60%, transparent);
+  border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
+  box-shadow:
+    0 8px 32px color-mix(in oklab, var(--foreground) 12%, transparent),
+    inset 0 1px 0 color-mix(in oklab, var(--foreground) 6%, transparent);
+}
+
+/**
+ * Lighter glass for headers / status bars where strong blur would be
+ * too heavy. 8px blur is the macOS NavBar / TitleBar default.
+ */
+.glass-header {
+  backdrop-filter: blur(8px) saturate(160%);
+  -webkit-backdrop-filter: blur(8px) saturate(160%);
+  background-color: color-mix(in oklab, var(--background) 80%, transparent);
 }

package/src/styles/presets/themes/catppuccin.ts

@@ -1,38 +0,0 @@
-import type { ThemePreset } from './types';
-
-export const catppuccinPreset: ThemePreset = {
-  light: {
-    background: '220 23% 95%', foreground: '234 16% 35%',
-    card: '220 23% 97%', 'card-foreground': '234 16% 35%',
-    popover: '220 23% 97%', 'popover-foreground': '234 16% 35%',
-    primary: '217 92% 66%', 'primary-foreground': '0 0% 9%',
-    secondary: '267 84% 71%', 'secondary-foreground': '0 0% 9%',
-    muted: '220 23% 92%', 'muted-foreground': '234 16% 65%',
-    accent: '189 71% 63%', 'accent-foreground': '234 16% 35%',
-    destructive: '343 81% 65%', 'destructive-foreground': '0 0% 98%',
-    border: '220 23% 85%', input: '220 23% 85%', ring: '217 92% 66%',
-    radius: '0.75rem',
-    'sidebar-background': '220 23% 93%', 'sidebar-foreground': '234 16% 35%',
-    'sidebar-primary': '217 92% 66%', 'sidebar-primary-foreground': '0 0% 9%',
-    'sidebar-accent': '220 23% 91%', 'sidebar-accent-foreground': '234 16% 35%',
-    'sidebar-border': '220 23% 85%', 'sidebar-ring': '217 92% 66%',
-    'chart-1': '217 92% 66%', 'chart-2': '115 54% 66%', 'chart-3': '262 83% 58%', 'chart-4': '41 86% 73%', 'chart-5': '343 81% 65%',
-  },
-  dark: {
-    background: '240 21% 15%', foreground: '226 64% 88%',
-    card: '240 21% 19%', 'card-foreground': '226 64% 88%',
-    popover: '240 21% 19%', 'popover-foreground': '226 64% 88%',
-    primary: '217 92% 76%', 'primary-foreground': '0 0% 9%',
-    secondary: '267 84% 81%', 'secondary-foreground': '0 0% 9%',
-    muted: '240 21% 21%', 'muted-foreground': '226 64% 68%',
-    accent: '189 71% 73%', 'accent-foreground': '226 64% 88%',
-    destructive: '343 81% 75%', 'destructive-foreground': '0 0% 98%',
-    border: '240 21% 28%', input: '240 21% 28%', ring: '217 92% 76%',
-    radius: '0.75rem',
-    'sidebar-background': '240 21% 13%', 'sidebar-foreground': '226 64% 88%',
-    'sidebar-primary': '217 92% 76%', 'sidebar-primary-foreground': '0 0% 9%',
-    'sidebar-accent': '240 21% 11%', 'sidebar-accent-foreground': '226 64% 88%',
-    'sidebar-border': '240 21% 28%', 'sidebar-ring': '217 92% 76%',
-    'chart-1': '217 92% 76%', 'chart-2': '115 54% 76%', 'chart-3': '262 83% 58%', 'chart-4': '41 86% 83%', 'chart-5': '343 81% 75%',
-  },
-};