@marianmeres/design-tokens 1.0.4 → 1.1.3

package/AGENTS.md

@@ -4,6 +4,8 @@
 - **Stack**: Deno / TypeScript
 - **Run**: `deno task test` | **Watch**: `deno task test:watch`
 - **Build (npm)**: `deno task npm:build`
+- **Build (CSS)**: `deno task css:build` (generates pre-built CSS files + updates deno.json exports)
+- **Build (preview)**: `deno task preview:build`
 - **Publish**: `deno task publish` (JSR + npm)
 - **Format**: `deno fmt` (tabs, 90 chars, indent 4)
 
@@ -13,10 +15,11 @@ CSS custom property generator for design token systems. Takes a structured
 `ThemeSchema` (light + optional dark mode) and produces CSS `--custom-property`
 declarations with automatic hover/active state derivation via `color-mix()`.
 
-Three entry points:
+Entry points:
 - `.` — core generation functions, types, color palette
 - `./reboot` — Bootstrap Reboot `--bs-*` variable bridge
-- `./themes` — 31 pre-built theme definitions
+- `./themes` — 42 pre-built theme definitions
+- `./css/*.css` — pre-built CSS files with `stuic-` prefix (npm only, not on JSR)
 
 ## Project Structure
 
@@ -26,13 +29,16 @@ Three entry points:
   types.ts            — core type definitions (ThemeSchema, TokenSchema, etc.)
   generate.ts         — token generation + CSS output (generateCssTokens, toCssString, generateThemeCss)
   utils.ts            — hex color parsing (hexToRgb, hexToRgbTriplet)
-  colors.ts           — complete Tailwind v3 color palette (hex values)
+  colors.ts           — Tailwind color palette (v3 + v4.2 additions: taupe, mauve, mist, olive)
   reboot-bridge.ts    — Bootstrap Reboot --bs-* variable mapping
   /themes
     mod.ts            — re-exports all theme definitions
     *.ts              — individual theme files (default export: ThemeSchema)
+/css                  — pre-built CSS files (generated by scripts/build-css.ts)
 /tests                — test files (deno test --allow-read)
-/scripts              — npm build script
+/scripts
+  build-npm.ts        — npm package build (also copies css/ into dist)
+  build-css.ts        — generates css/*.css from all themes with "stuic-" prefix
 /theme-preview-builder — HTML preview tool
 ```
 
@@ -66,7 +72,7 @@ Three entry points:
 ### Constants
 | Export | Purpose |
 |--------|---------|
-| `colors` | Complete Tailwind v3 hex palette (`colors.blue[600]`) |
+| `colors` | Tailwind hex palette including v4.2 additions (`colors.blue[600]`, `colors.mauve[500]`) |
 
 ## Critical Conventions
 
@@ -77,9 +83,17 @@ Three entry points:
 5. Theme files use `export default` with `ThemeSchema` type annotation
 6. Formatting: tabs, 90-char line width, 4-space indent width (`deno fmt`)
 
+## Adding a New Theme
+
+1. Create `src/themes/{name}.ts` with `export default` of `ThemeSchema`
+2. Add re-export in `src/themes/mod.ts` (alphabetical order)
+3. Run `deno task css:build` to regenerate CSS files
+4. Run `deno task preview:build` to rebuild the preview tool
+5. If the theme uses new color families, update `COLOR_FAMILIES` in `theme-preview-builder/index.html`
+
 ## Before Making Changes
 
 - [ ] Read existing patterns in similar files
-- [ ] Run `deno task test` — all 37 tests must pass
+- [ ] Run `deno task test` — all tests must pass
 - [ ] Follow `deno fmt` conventions
 - [ ] Ensure new exports have JSDoc + explicit return types

package/API.md

@@ -251,13 +251,20 @@ type RoleSingleKey = "foreground" | "border" | "input" | "ring";
 
 ### `colors`
 
-Complete Tailwind CSS v3 color palette as hex values. Contains `black`, `white`, and 22 color scales (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) each with shades 50–950.
+Tailwind CSS color palette as hex values. Contains `black`, `white`, and 26 color scales each with shades 50–950:
+
+- **Neutrals**: slate, gray, zinc, neutral, stone
+- **Earthy/muted (v4.2)**: taupe, mauve, mist, olive
+- **Warm**: red, orange, amber, yellow
+- **Cool**: lime, green, emerald, teal, cyan, sky, blue, indigo
+- **Vibrant**: violet, purple, fuchsia, pink, rose
 
 ```typescript
 import { colors } from "@marianmeres/design-tokens";
 
 colors.blue[600]   // → "#2563eb"
-colors.white        // → "#ffffff"
+colors.mauve[500]  // → "#79697b"
+colors.white       // → "#ffffff"
 ```
 
 ---
@@ -266,6 +273,20 @@ colors.white        // → "#ffffff"
 
 *Import from `@marianmeres/design-tokens/themes`*
 
-31 pre-built `ThemeSchema` definitions, each with light + dark mode:
+42 pre-built `ThemeSchema` definitions, each with light + dark mode:
+
+`blueOrange`, `cyanRed`, `cyanSlate`, `emeraldAmberForest`, `emeraldPink`, `fuchsiaEmerald`, `gray`, `indigoAmber`, `limeFuchsiaNeon`, `mauve`, `mauveLimeElectric`, `mauveTeal`, `mist`, `mistIndigoFjord`, `mistVioletAurora`, `monokaiCyan`, `monokaiGreen`, `monokaiPink`, `olive`, `oliveAmberSafari`, `orangePinkSunset`, `pinkEmerald`, `pinkTeal`, `purpleYellow`, `rainbow`, `redBlue`, `redCyan`, `redSky`, `redSkySlate`, `roseTeal`, `skyAmber`, `slateCyan`, `slateTealOcean`, `stone`, `taupe`, `taupeOliveClay`, `taupeRoseBlush`, `stoneOrangeEarth`, `tealRose`, `violetLime`, `violetRoseDusk`, `zinc`
+
+---
+
+## Pre-built CSS
+
+*npm only — not available on JSR*
+
+All bundled themes are also distributed as pre-built CSS files using the `stuic-` prefix. Import via `@marianmeres/design-tokens/css/{theme-name}.css`.
+
+```typescript
+import "@marianmeres/design-tokens/css/mauve-teal.css";
+```
 
-`blueOrange`, `cyanRed`, `cyanSlate`, `emeraldAmberForest`, `emeraldPink`, `fuchsiaEmerald`, `gray`, `indigoAmber`, `limeFuchsiaNeon`, `monokaiCyan`, `monokaiGreen`, `monokaiPink`, `orangePinkSunset`, `pinkEmerald`, `pinkTeal`, `purpleYellow`, `rainbow`, `redBlue`, `redCyan`, `redSky`, `redSkySlate`, `roseTeal`, `skyAmber`, `slateCyan`, `slateTealOcean`, `stone`, `stoneOrangeEarth`, `tealRose`, `violetLime`, `violetRoseDusk`, `zinc`
+Available files: `blue-orange.css`, `cyan-red.css`, `mauve-teal.css`, `mist-indigo-fjord.css`, `taupe-rose-blush.css`, etc. (one per bundled theme)

package/README.md

@@ -53,9 +53,22 @@ const css = generateThemeCss(theme, "my-");
 // → :root { --my-color-primary: #2563eb; ... }
 ```
 
+## Pre-built CSS
+
+All bundled themes are available as pre-built CSS files with the `stuic-` prefix (npm only):
+
+```html
+<link rel="stylesheet" href="node_modules/@marianmeres/design-tokens/css/mauve-teal.css">
+```
+
+Or via bundler import:
+```ts
+import "@marianmeres/design-tokens/css/mauve-teal.css";
+```
+
 ## Creating a custom theme
 
-Use the bundled `colors` map (complete Tailwind v3 palette) to avoid looking up hex values:
+Use the bundled `colors` map (Tailwind palette including v4.2 additions) to avoid looking up hex values:
 
 ```ts
 import { colors, generateThemeCss } from "@marianmeres/design-tokens";

package/dist/colors.d.ts

@@ -64,6 +64,19 @@ export declare const colors: {
         readonly 900: "#171717";
         readonly 950: "#0a0a0a";
     };
+    readonly olive: {
+        readonly 50: "#fbfbf9";
+        readonly 100: "#f4f4f0";
+        readonly 200: "#e8e8e3";
+        readonly 300: "#d8d8d0";
+        readonly 400: "#abab9c";
+        readonly 500: "#7c7c67";
+        readonly 600: "#5b5b4b";
+        readonly 700: "#474739";
+        readonly 800: "#2b2b22";
+        readonly 900: "#1d1d16";
+        readonly 950: "#0c0c09";
+    };
     readonly stone: {
         readonly 50: "#fafaf9";
         readonly 100: "#f5f5f4";
@@ -77,6 +90,19 @@ export declare const colors: {
         readonly 900: "#1c1917";
         readonly 950: "#0c0a09";
     };
+    readonly taupe: {
+        readonly 50: "#fbfaf9";
+        readonly 100: "#f3f1f1";
+        readonly 200: "#e8e4e3";
+        readonly 300: "#d8d2d0";
+        readonly 400: "#aba09c";
+        readonly 500: "#7c6d67";
+        readonly 600: "#5b4f4b";
+        readonly 700: "#473c39";
+        readonly 800: "#2b2422";
+        readonly 900: "#1d1816";
+        readonly 950: "#0c0a09";
+    };
     readonly red: {
         readonly 50: "#fef2f2";
         readonly 100: "#fee2e2";
@@ -142,6 +168,32 @@ export declare const colors: {
         readonly 900: "#365314";
         readonly 950: "#1a2e05";
     };
+    readonly mauve: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f3f1f3";
+        readonly 200: "#e7e4e7";
+        readonly 300: "#d7d0d7";
+        readonly 400: "#a89ea9";
+        readonly 500: "#79697b";
+        readonly 600: "#594c5b";
+        readonly 700: "#463947";
+        readonly 800: "#2a212c";
+        readonly 900: "#1d161e";
+        readonly 950: "#0c090c";
+    };
+    readonly mist: {
+        readonly 50: "#f9fbfb";
+        readonly 100: "#f1f3f3";
+        readonly 200: "#e3e7e8";
+        readonly 300: "#d0d6d8";
+        readonly 400: "#9ca8ab";
+        readonly 500: "#67787c";
+        readonly 600: "#4b585b";
+        readonly 700: "#394447";
+        readonly 800: "#22292b";
+        readonly 900: "#161b1d";
+        readonly 950: "#090b0c";
+    };
     readonly green: {
         readonly 50: "#f0fdf4";
         readonly 100: "#dcfce7";

package/dist/colors.js

@@ -64,6 +64,19 @@ export const colors = {
         900: "#171717",
         950: "#0a0a0a",
     },
+    olive: {
+        50: "#fbfbf9",
+        100: "#f4f4f0",
+        200: "#e8e8e3",
+        300: "#d8d8d0",
+        400: "#abab9c",
+        500: "#7c7c67",
+        600: "#5b5b4b",
+        700: "#474739",
+        800: "#2b2b22",
+        900: "#1d1d16",
+        950: "#0c0c09",
+    },
     stone: {
         50: "#fafaf9",
         100: "#f5f5f4",
@@ -77,6 +90,19 @@ export const colors = {
         900: "#1c1917",
         950: "#0c0a09",
     },
+    taupe: {
+        50: "#fbfaf9",
+        100: "#f3f1f1",
+        200: "#e8e4e3",
+        300: "#d8d2d0",
+        400: "#aba09c",
+        500: "#7c6d67",
+        600: "#5b4f4b",
+        700: "#473c39",
+        800: "#2b2422",
+        900: "#1d1816",
+        950: "#0c0a09",
+    },
     red: {
         50: "#fef2f2",
         100: "#fee2e2",
@@ -142,6 +168,32 @@ export const colors = {
         900: "#365314",
         950: "#1a2e05",
     },
+    mauve: {
+        50: "#fafafa",
+        100: "#f3f1f3",
+        200: "#e7e4e7",
+        300: "#d7d0d7",
+        400: "#a89ea9",
+        500: "#79697b",
+        600: "#594c5b",
+        700: "#463947",
+        800: "#2a212c",
+        900: "#1d161e",
+        950: "#0c090c",
+    },
+    mist: {
+        50: "#f9fbfb",
+        100: "#f1f3f3",
+        200: "#e3e7e8",
+        300: "#d0d6d8",
+        400: "#9ca8ab",
+        500: "#67787c",
+        600: "#4b585b",
+        700: "#394447",
+        800: "#22292b",
+        900: "#161b1d",
+        950: "#090b0c",
+    },
     green: {
         50: "#f0fdf4",
         100: "#dcfce7",

package/dist/css/blue-orange.css

@@ -0,0 +1,215 @@
+:root {
+	--stuic-color-primary:                        #2563eb;
+
+	--stuic-color-primary-hover:                  color-mix(in oklch, var(--stuic-color-primary), black 10%);
+	--stuic-color-primary-active:                 color-mix(in oklch, var(--stuic-color-primary), black 20%);
+	--stuic-color-primary-foreground:             #ffffff;
+	--stuic-color-primary-foreground-hover:       #ffffff;
+	--stuic-color-primary-foreground-active:      #ffffff;
+
+	--stuic-color-accent:                         #f97316;
+
+	--stuic-color-accent-hover:                   color-mix(in oklch, var(--stuic-color-accent), black 10%);
+	--stuic-color-accent-active:                  color-mix(in oklch, var(--stuic-color-accent), black 20%);
+	--stuic-color-accent-foreground:              #ffffff;
+	--stuic-color-accent-foreground-hover:        #ffffff;
+	--stuic-color-accent-foreground-active:       #ffffff;
+
+	--stuic-color-destructive:                    #e11d48;
+
+	--stuic-color-destructive-hover:              color-mix(in oklch, var(--stuic-color-destructive), black 10%);
+	--stuic-color-destructive-active:             color-mix(in oklch, var(--stuic-color-destructive), black 20%);
+	--stuic-color-destructive-foreground:         #ffffff;
+	--stuic-color-destructive-foreground-hover:   #ffffff;
+	--stuic-color-destructive-foreground-active:  #ffffff;
+
+	--stuic-color-warning:                        #f97316;
+
+	--stuic-color-warning-hover:                  color-mix(in oklch, var(--stuic-color-warning), black 10%);
+	--stuic-color-warning-active:                 color-mix(in oklch, var(--stuic-color-warning), black 20%);
+	--stuic-color-warning-foreground:             #ffffff;
+	--stuic-color-warning-foreground-hover:       #ffffff;
+	--stuic-color-warning-foreground-active:      #ffffff;
+
+	--stuic-color-success:                        #0d9488;
+
+	--stuic-color-success-hover:                  color-mix(in oklch, var(--stuic-color-success), black 10%);
+	--stuic-color-success-active:                 color-mix(in oklch, var(--stuic-color-success), black 20%);
+	--stuic-color-success-foreground:             #ffffff;
+	--stuic-color-success-foreground-hover:       #ffffff;
+	--stuic-color-success-foreground-active:      #ffffff;
+
+	--stuic-color-surface-primary:                color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
+	--stuic-color-surface-primary-foreground:     color-mix(in srgb, var(--stuic-color-primary), black 10%);
+	--stuic-color-surface-primary-border:         color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
+	--stuic-color-surface-accent:                 color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
+	--stuic-color-surface-accent-foreground:      color-mix(in srgb, var(--stuic-color-accent), black 10%);
+	--stuic-color-surface-accent-border:          color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
+	--stuic-color-surface-destructive:            color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
+	--stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 10%);
+	--stuic-color-surface-destructive-border:     color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
+	--stuic-color-surface-warning:                color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
+	--stuic-color-surface-warning-foreground:     color-mix(in srgb, var(--stuic-color-warning), black 10%);
+	--stuic-color-surface-warning-border:         color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
+	--stuic-color-surface-success:                color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
+	--stuic-color-surface-success-foreground:     color-mix(in srgb, var(--stuic-color-success), black 10%);
+	--stuic-color-surface-success-border:         color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
+	--stuic-color-surface-hover:                  color-mix(in oklch, var(--stuic-color-surface), black 10%);
+	--stuic-color-surface-active:                 color-mix(in oklch, var(--stuic-color-surface), black 20%);
+	--stuic-color-surface-foreground:             #1c1917;
+	--stuic-color-surface-foreground-hover:       #1c1917;
+	--stuic-color-surface-foreground-active:      #1c1917;
+
+	--stuic-color-background:                     #ffffff;
+
+	--stuic-color-background-hover:               #ffffff;
+	--stuic-color-background-active:              #ffffff;
+	--stuic-color-background-foreground:          #1c1917;
+	--stuic-color-background-foreground-hover:    #1c1917;
+	--stuic-color-background-foreground-active:   #1c1917;
+
+	--stuic-color-muted:                          #f5f5f4;
+
+	--stuic-color-muted-hover:                    color-mix(in oklch, var(--stuic-color-muted), black 10%);
+	--stuic-color-muted-active:                   color-mix(in oklch, var(--stuic-color-muted), black 20%);
+	--stuic-color-muted-foreground:               #78716c;
+	--stuic-color-muted-foreground-hover:         #78716c;
+	--stuic-color-muted-foreground-active:        #78716c;
+
+	--stuic-color-surface:                        #e7e5e4;
+
+	--stuic-color-surface-1:                      #d6d3d1;
+	--stuic-color-surface-1-hover:                color-mix(in oklch, var(--stuic-color-surface-1), black 10%);
+	--stuic-color-surface-1-active:               color-mix(in oklch, var(--stuic-color-surface-1), black 20%);
+	--stuic-color-surface-1-foreground:           #1c1917;
+	--stuic-color-surface-1-foreground-hover:     #1c1917;
+	--stuic-color-surface-1-foreground-active:    #1c1917;
+
+	--stuic-color-foreground:                     #1c1917;
+
+	--stuic-color-foreground-hover:               #1c1917;
+	--stuic-color-foreground-active:              #1c1917;
+
+	--stuic-color-border:                         #d6d3d1;
+
+	--stuic-color-border-hover:                   color-mix(in oklch, var(--stuic-color-border), black 10%);
+	--stuic-color-border-active:                  color-mix(in oklch, var(--stuic-color-border), black 20%);
+
+	--stuic-color-input:                          #ffffff;
+
+	--stuic-color-input-hover:                    #fafaf9;
+	--stuic-color-input-active:                   color-mix(in oklch, var(--stuic-color-input), black 20%);
+
+	--stuic-color-ring:                           color-mix(in srgb, #2563eb 20%, transparent);
+
+	--stuic-color-ring-hover:                     color-mix(in srgb, #2563eb 20%, transparent);
+	--stuic-color-ring-active:                    color-mix(in srgb, #2563eb 20%, transparent);
+}
+
+:root.dark {
+	--stuic-color-primary:                        #3b82f6;
+
+	--stuic-color-primary-hover:                  color-mix(in oklch, var(--stuic-color-primary), white 10%);
+	--stuic-color-primary-active:                 color-mix(in oklch, var(--stuic-color-primary), white 20%);
+	--stuic-color-primary-foreground:             #ffffff;
+	--stuic-color-primary-foreground-hover:       #ffffff;
+	--stuic-color-primary-foreground-active:      #ffffff;
+
+	--stuic-color-accent:                         #fb923c;
+
+	--stuic-color-accent-hover:                   color-mix(in oklch, var(--stuic-color-accent), white 10%);
+	--stuic-color-accent-active:                  color-mix(in oklch, var(--stuic-color-accent), white 20%);
+	--stuic-color-accent-foreground:              #ffffff;
+	--stuic-color-accent-foreground-hover:        #ffffff;
+	--stuic-color-accent-foreground-active:       #ffffff;
+
+	--stuic-color-destructive:                    #f43f5e;
+
+	--stuic-color-destructive-hover:              color-mix(in oklch, var(--stuic-color-destructive), white 10%);
+	--stuic-color-destructive-active:             color-mix(in oklch, var(--stuic-color-destructive), white 20%);
+	--stuic-color-destructive-foreground:         #ffffff;
+	--stuic-color-destructive-foreground-hover:   #ffffff;
+	--stuic-color-destructive-foreground-active:  #ffffff;
+
+	--stuic-color-warning:                        #fb923c;
+
+	--stuic-color-warning-hover:                  color-mix(in oklch, var(--stuic-color-warning), white 10%);
+	--stuic-color-warning-active:                 color-mix(in oklch, var(--stuic-color-warning), white 20%);
+	--stuic-color-warning-foreground:             #ffffff;
+	--stuic-color-warning-foreground-hover:       #ffffff;
+	--stuic-color-warning-foreground-active:      #ffffff;
+
+	--stuic-color-success:                        #14b8a6;
+
+	--stuic-color-success-hover:                  color-mix(in oklch, var(--stuic-color-success), white 10%);
+	--stuic-color-success-active:                 color-mix(in oklch, var(--stuic-color-success), white 20%);
+	--stuic-color-success-foreground:             #ffffff;
+	--stuic-color-success-foreground-hover:       #ffffff;
+	--stuic-color-success-foreground-active:      #ffffff;
+
+	--stuic-color-surface-primary:                color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
+	--stuic-color-surface-primary-foreground:     color-mix(in srgb, var(--stuic-color-primary), white 10%);
+	--stuic-color-surface-primary-border:         color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
+	--stuic-color-surface-accent:                 color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
+	--stuic-color-surface-accent-foreground:      color-mix(in srgb, var(--stuic-color-accent), white 10%);
+	--stuic-color-surface-accent-border:          color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
+	--stuic-color-surface-destructive:            color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
+	--stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
+	--stuic-color-surface-destructive-border:     color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
+	--stuic-color-surface-warning:                color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
+	--stuic-color-surface-warning-foreground:     color-mix(in srgb, var(--stuic-color-warning), white 10%);
+	--stuic-color-surface-warning-border:         color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
+	--stuic-color-surface-success:                color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
+	--stuic-color-surface-success-foreground:     color-mix(in srgb, var(--stuic-color-success), white 10%);
+	--stuic-color-surface-success-border:         color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
+	--stuic-color-surface-hover:                  color-mix(in oklch, var(--stuic-color-surface), white 10%);
+	--stuic-color-surface-active:                 color-mix(in oklch, var(--stuic-color-surface), white 20%);
+	--stuic-color-surface-foreground:             #d6d3d1;
+	--stuic-color-surface-foreground-hover:       #d6d3d1;
+	--stuic-color-surface-foreground-active:      #d6d3d1;
+
+	--stuic-color-background:                     #1c1917;
+
+	--stuic-color-background-hover:               #1c1917;
+	--stuic-color-background-active:              #1c1917;
+	--stuic-color-background-foreground:          #fafaf9;
+	--stuic-color-background-foreground-hover:    #fafaf9;
+	--stuic-color-background-foreground-active:   #fafaf9;
+
+	--stuic-color-muted:                          #292524;
+
+	--stuic-color-muted-hover:                    color-mix(in oklch, var(--stuic-color-muted), white 10%);
+	--stuic-color-muted-active:                   color-mix(in oklch, var(--stuic-color-muted), white 20%);
+	--stuic-color-muted-foreground:               #a8a29e;
+	--stuic-color-muted-foreground-hover:         #a8a29e;
+	--stuic-color-muted-foreground-active:        #a8a29e;
+
+	--stuic-color-surface:                        #44403c;
+
+	--stuic-color-surface-1:                      #57534e;
+	--stuic-color-surface-1-hover:                color-mix(in oklch, var(--stuic-color-surface-1), white 10%);
+	--stuic-color-surface-1-active:               color-mix(in oklch, var(--stuic-color-surface-1), white 20%);
+	--stuic-color-surface-1-foreground:           #e7e5e4;
+	--stuic-color-surface-1-foreground-hover:     #e7e5e4;
+	--stuic-color-surface-1-foreground-active:    #e7e5e4;
+
+	--stuic-color-foreground:                     #fafaf9;
+
+	--stuic-color-foreground-hover:               #fafaf9;
+	--stuic-color-foreground-active:              #fafaf9;
+
+	--stuic-color-border:                         #44403c;
+
+	--stuic-color-border-hover:                   color-mix(in oklch, var(--stuic-color-border), white 10%);
+	--stuic-color-border-active:                  color-mix(in oklch, var(--stuic-color-border), white 20%);
+
+	--stuic-color-input:                          #1c1917;
+
+	--stuic-color-input-hover:                    #292524;
+	--stuic-color-input-active:                   color-mix(in oklch, var(--stuic-color-input), white 20%);
+
+	--stuic-color-ring:                           color-mix(in srgb, #60a5fa 25%, transparent);
+
+	--stuic-color-ring-hover:                     color-mix(in srgb, #60a5fa 25%, transparent);
+	--stuic-color-ring-active:                    color-mix(in srgb, #60a5fa 25%, transparent);
+}