@marianmeres/stuic 3.47.4 → 3.50.0

package/AGENTS.md

@@ -26,7 +26,7 @@ src/lib/
 ├── components/     # 46 UI components
 ├── actions/        # 15 Svelte actions
 ├── utils/          # 43 utility modules
-├── themes/         # 29 theme definitions (.ts) + generated CSS (css/)
+├── themes/         # Generated theme CSS (css/) — definitions from @marianmeres/design-tokens
 ├── icons/          # Icon re-exports
 ├── index.css       # Centralized CSS imports
 └── index.ts        # Main exports
@@ -92,9 +92,8 @@ src/lib/
 | -------------------------------- | ---------------------------------------------------------------------- |
 | `src/lib/index.css`              | CSS entry point                                                        |
 | `src/lib/index.ts`               | JS entry point                                                         |
-| `src/lib/utils/design-tokens.ts` | Theme types + CSS generation (`ThemeSchema`, `generateThemeCss`, etc.) |
-| `src/lib/themes/*.ts`            | Theme definitions (29 themes, `TokenSchema`-typed)                     |
-| `src/lib/themes/css/stone.css`   | Default theme (generated)                                              |
+| `src/lib/utils/design-tokens.ts` | Re-exports from `@marianmeres/design-tokens`                          |
+| `src/lib/themes/css/stone.css`   | Default theme (generated from `@marianmeres/design-tokens/themes`)     |
 | `src/lib/components/Button/`     | Reference component                                                    |
 | `scripts/generate-theme.ts`      | CLI: `pnpm run build:theme:all`                                        |
 

package/API.md

@@ -1711,17 +1711,6 @@ Format a token record as a CSS selector block.
 
 **Returns:** `string` — CSS block string
 
-#### `createDarkOverride(baseTokens, overrides)`
-
-Create a filtered dark mode token set from base tokens and overrides.
-
-**Parameters:**
-
-- `baseTokens` (GeneratedTokens) — Light mode tokens (used as key filter)
-- `overrides` (Partial\<GeneratedTokens\>) — Dark mode values
-
-**Returns:** `GeneratedTokens`
-
 ---
 
 ## Icons
@@ -1879,19 +1868,19 @@ Each component defines customization tokens. Override globally in `:root {}` or
 | property  | `bg`, `text`, `border`, `ring`, `shadow`, `radius`, `padding`        |
 | state     | `hover`, `active`, `focus`, `disabled`, `error`                      |
 
-### Available Themes (29)
+### Available Themes (31)
 
-Default theme: `stone`.
+Default theme: `stone`. Theme definitions come from `@marianmeres/design-tokens`.
 
 ```ts
 // Import pre-built CSS
 import "@marianmeres/stuic/themes/css/blue-orange.css";
 
-// Import theme definition object (to extend/customize)
-import stone from "@marianmeres/stuic/themes/stone";
+// Import theme definition object (from design-tokens package)
+import { stone } from "@marianmeres/design-tokens/themes";
 ```
 
-stone, gray, zinc, dds, blue-orange, cyan-red, cyan-slate, emerald-amber-forest, emerald-pink, fuchsia-emerald, indigo-amber, lime-fuchsia-neon, orange-pink-sunset, pink-emerald, pink-teal, purple-yellow, rainbow, red-blue, red-cyan, red-sky, red-sky-slate, rose-teal, sky-amber, slate-cyan, slate-teal-ocean, stone-orange-earth, teal-rose, violet-lime, violet-rose-dusk
+stone, gray, zinc, blue-orange, cyan-red, cyan-slate, emerald-amber-forest, emerald-pink, fuchsia-emerald, indigo-amber, lime-fuchsia-neon, monokai-cyan, monokai-green, monokai-pink, orange-pink-sunset, pink-emerald, pink-teal, purple-yellow, rainbow, red-blue, red-cyan, red-sky, red-sky-slate, rose-teal, sky-amber, slate-cyan, slate-teal-ocean, stone-orange-earth, teal-rose, violet-lime, violet-rose-dusk
 
 ### Dark Mode
 

package/dist/mcp.d.ts

@@ -0,0 +1,2 @@
+import type { McpToolDefinition } from "jsr:@marianmeres/mcp-server/types";
+export declare const tools: McpToolDefinition[];

package/dist/mcp.js

@@ -0,0 +1,69 @@
+import { z } from "npm:zod";
+import { generateThemeCss } from "./utils/design-tokens.js";
+import { hexToOklch, hexToRgb } from "./utils/colors.js";
+import { generateAvatarColors } from "./utils/avatar-colors.js";
+export const tools = [
+    {
+        name: "generate-theme-css",
+        description: "Generate complete STUIC CSS custom properties from a theme schema. " +
+            "Accepts a ThemeSchema JSON with light (required) and dark (optional) TokenSchema objects. " +
+            "Each TokenSchema defines intent colors (primary, accent, destructive, warning, success) " +
+            "and role colors (background, muted, surface, foreground, border, input, ring). " +
+            "Auto-derives hover/active states via color-mix() and generates surface tints.",
+        params: {
+            schema: z
+                .string()
+                .describe("ThemeSchema as JSON string. Structure: " +
+                '{ "light": { "colors": { "intent": { "primary": { "DEFAULT": "var(--color-stone-800)", "foreground": "var(--color-white)" }, ... }, ' +
+                '"role": { "paired": { "background": { "DEFAULT": "...", "foreground": "..." }, ... }, ' +
+                '"single": { "foreground": "...", "border": "...", "input": "...", "ring": "..." } } } }, "dark": { ... } }'),
+            prefix: z
+                .string()
+                .default("stuic-")
+                .describe("CSS variable prefix (default: 'stuic-')"),
+        },
+        handler: async ({ schema, prefix }) => {
+            const parsed = JSON.parse(schema);
+            return generateThemeCss(parsed, prefix);
+        },
+    },
+    {
+        name: "hex-to-oklch",
+        description: "Convert a CSS HEX color to oklch() format. Useful for perceptually uniform color manipulation in modern CSS.",
+        params: {
+            hex: z
+                .string()
+                .describe('HEX color string, e.g. "#ff0000", "ff0000", "#f00"'),
+        },
+        handler: async ({ hex }) => {
+            return hexToOklch(hex);
+        },
+    },
+    {
+        name: "hex-to-rgb",
+        description: "Convert a CSS HEX color to RGB components. Returns JSON with r, g, b values (0-255).",
+        params: {
+            hex: z
+                .string()
+                .describe('HEX color string, e.g. "#ff0000", "ff0000", "#f00"'),
+        },
+        handler: async ({ hex }) => {
+            const rgb = hexToRgb(hex);
+            if (!rgb)
+                return "Error: Invalid HEX color format";
+            return JSON.stringify(rgb);
+        },
+    },
+    {
+        name: "generate-avatar-colors",
+        description: "Generate deterministic pastel background and contrasting text colors from any string identifier (user ID, email, name). Same input always produces the same harmonious color pair.",
+        params: {
+            source: z
+                .string()
+                .describe("String identifier to generate colors from (e.g. email, user ID)"),
+        },
+        handler: async ({ source }) => {
+            return JSON.stringify(generateAvatarColors(source));
+        },
+    },
+];

package/dist/themes/css/blue-orange.css

@@ -1,44 +1,44 @@
 /* prettier-ignore */
 :root {
-	--stuic-color-primary:                        var(--color-blue-600, #737373);
+	--stuic-color-primary:                        #2563eb;
 
-	--stuic-color-primary-hover:                  var(--color-blue-700, #737373);
-	--stuic-color-primary-active:                 var(--color-blue-800, #737373);
-	--stuic-color-primary-foreground:             var(--color-white, #ffffff);
-	--stuic-color-primary-foreground-hover:       var(--color-white, #ffffff);
-	--stuic-color-primary-foreground-active:      var(--color-white, #ffffff);
+	--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:                         var(--color-orange-500, #737373);
+	--stuic-color-accent:                         #f97316;
 
-	--stuic-color-accent-hover:                   var(--color-orange-600, #737373);
-	--stuic-color-accent-active:                  var(--color-orange-700, #737373);
-	--stuic-color-accent-foreground:              var(--color-white, #ffffff);
-	--stuic-color-accent-foreground-hover:        var(--color-white, #ffffff);
-	--stuic-color-accent-foreground-active:       var(--color-white, #ffffff);
+	--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:                    var(--color-rose-600, #737373);
+	--stuic-color-destructive:                    #e11d48;
 
-	--stuic-color-destructive-hover:              var(--color-rose-700, #737373);
-	--stuic-color-destructive-active:             var(--color-rose-800, #737373);
-	--stuic-color-destructive-foreground:         var(--color-white, #ffffff);
-	--stuic-color-destructive-foreground-hover:   var(--color-white, #ffffff);
-	--stuic-color-destructive-foreground-active:  var(--color-white, #ffffff);
+	--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:                        var(--color-orange-500, #737373);
+	--stuic-color-warning:                        #f97316;
 
-	--stuic-color-warning-hover:                  var(--color-orange-600, #737373);
-	--stuic-color-warning-active:                 var(--color-orange-700, #737373);
-	--stuic-color-warning-foreground:             var(--color-white, #ffffff);
-	--stuic-color-warning-foreground-hover:       var(--color-white, #ffffff);
-	--stuic-color-warning-foreground-active:      var(--color-white, #ffffff);
+	--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:                        var(--color-teal-600, #737373);
+	--stuic-color-success:                        #0d9488;
 
-	--stuic-color-success-hover:                  var(--color-teal-700, #737373);
-	--stuic-color-success-active:                 var(--color-teal-800, #737373);
-	--stuic-color-success-foreground:             var(--color-white, #ffffff);
-	--stuic-color-success-foreground-hover:       var(--color-white, #ffffff);
-	--stuic-color-success-foreground-active:      var(--color-white, #ffffff);
+	--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%);
@@ -55,99 +55,99 @@
 	--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:                  var(--color-stone-300, #737373);
-	--stuic-color-surface-active:                 var(--color-stone-400, #737373);
-	--stuic-color-surface-foreground:             var(--color-stone-900, #737373);
-	--stuic-color-surface-foreground-hover:       var(--color-stone-900, #737373);
-	--stuic-color-surface-foreground-active:      var(--color-stone-900, #737373);
+	--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:                     var(--color-white, #ffffff);
+	--stuic-color-background:                     #ffffff;
 
-	--stuic-color-background-hover:               var(--color-white, #ffffff);
-	--stuic-color-background-active:              var(--color-white, #ffffff);
-	--stuic-color-background-foreground:          var(--color-stone-900, #737373);
-	--stuic-color-background-foreground-hover:    var(--color-stone-900, #737373);
-	--stuic-color-background-foreground-active:   var(--color-stone-900, #737373);
+	--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:                          var(--color-stone-100, #737373);
+	--stuic-color-muted:                          #f5f5f4;
 
-	--stuic-color-muted-hover:                    var(--color-stone-200, #737373);
-	--stuic-color-muted-active:                   var(--color-stone-300, #737373);
-	--stuic-color-muted-foreground:               var(--color-stone-500, #737373);
-	--stuic-color-muted-foreground-hover:         var(--color-stone-500, #737373);
-	--stuic-color-muted-foreground-active:        var(--color-stone-500, #737373);
+	--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:                        var(--color-stone-200, #737373);
+	--stuic-color-surface:                        #e7e5e4;
 
-	--stuic-color-surface-1:                      var(--color-stone-300, #737373);
-	--stuic-color-surface-1-hover:                var(--color-stone-400, #737373);
-	--stuic-color-surface-1-active:               var(--color-stone-500, #737373);
-	--stuic-color-surface-1-foreground:           var(--color-stone-900, #737373);
-	--stuic-color-surface-1-foreground-hover:     var(--color-stone-900, #737373);
-	--stuic-color-surface-1-foreground-active:    var(--color-stone-900, #737373);
+	--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:                     var(--color-stone-900, #737373);
+	--stuic-color-foreground:                     #1c1917;
 
-	--stuic-color-foreground-hover:               var(--color-stone-900, #737373);
-	--stuic-color-foreground-active:              var(--color-stone-900, #737373);
+	--stuic-color-foreground-hover:               #1c1917;
+	--stuic-color-foreground-active:              #1c1917;
 
-	--stuic-color-border:                         var(--color-stone-300, #737373);
+	--stuic-color-border:                         #d6d3d1;
 
-	--stuic-color-border-hover:                   var(--color-stone-400, #737373);
-	--stuic-color-border-active:                  var(--color-stone-500, #737373);
+	--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:                          var(--color-white, #ffffff);
+	--stuic-color-input:                          #ffffff;
 
-	--stuic-color-input-hover:                    var(--color-stone-50, #737373);
-	--stuic-color-input-active:                   var(--color-white, #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, var(--color-blue-600) 20%, transparent);
+	--stuic-color-ring:                           color-mix(in srgb, #2563eb 20%, transparent);
 
-	--stuic-color-ring-hover:                     color-mix(in srgb, var(--color-blue-600) 20%, transparent);
-	--stuic-color-ring-active:                    color-mix(in srgb, var(--color-blue-600) 20%, transparent);
+	--stuic-color-ring-hover:                     color-mix(in srgb, #2563eb 20%, transparent);
+	--stuic-color-ring-active:                    color-mix(in srgb, #2563eb 20%, transparent);
 }
 
 /* prettier-ignore */
 :root.dark {
-	--stuic-color-primary:                        var(--color-blue-500, #737373);
+	--stuic-color-primary:                        #3b82f6;
 
-	--stuic-color-primary-hover:                  var(--color-blue-400, #737373);
-	--stuic-color-primary-active:                 var(--color-blue-300, #737373);
-	--stuic-color-primary-foreground:             var(--color-white, #ffffff);
-	--stuic-color-primary-foreground-hover:       var(--color-white, #ffffff);
-	--stuic-color-primary-foreground-active:      var(--color-white, #ffffff);
+	--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:                         var(--color-orange-400, #737373);
+	--stuic-color-accent:                         #fb923c;
 
-	--stuic-color-accent-hover:                   var(--color-orange-300, #737373);
-	--stuic-color-accent-active:                  var(--color-orange-200, #737373);
-	--stuic-color-accent-foreground:              var(--color-white, #ffffff);
-	--stuic-color-accent-foreground-hover:        var(--color-white, #ffffff);
-	--stuic-color-accent-foreground-active:       var(--color-white, #ffffff);
+	--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:                    var(--color-rose-500, #737373);
+	--stuic-color-destructive:                    #f43f5e;
 
-	--stuic-color-destructive-hover:              var(--color-rose-400, #737373);
-	--stuic-color-destructive-active:             var(--color-rose-300, #737373);
-	--stuic-color-destructive-foreground:         var(--color-white, #ffffff);
-	--stuic-color-destructive-foreground-hover:   var(--color-white, #ffffff);
-	--stuic-color-destructive-foreground-active:  var(--color-white, #ffffff);
+	--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:                        var(--color-orange-400, #737373);
+	--stuic-color-warning:                        #fb923c;
 
-	--stuic-color-warning-hover:                  var(--color-orange-300, #737373);
-	--stuic-color-warning-active:                 var(--color-orange-200, #737373);
-	--stuic-color-warning-foreground:             var(--color-white, #ffffff);
-	--stuic-color-warning-foreground-hover:       var(--color-white, #ffffff);
-	--stuic-color-warning-foreground-active:      var(--color-white, #ffffff);
+	--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:                        var(--color-teal-500, #737373);
+	--stuic-color-success:                        #14b8a6;
 
-	--stuic-color-success-hover:                  var(--color-teal-400, #737373);
-	--stuic-color-success-active:                 var(--color-teal-300, #737373);
-	--stuic-color-success-foreground:             var(--color-white, #ffffff);
-	--stuic-color-success-foreground-hover:       var(--color-white, #ffffff);
-	--stuic-color-success-foreground-active:      var(--color-white, #ffffff);
+	--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%);
@@ -164,54 +164,54 @@
 	--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:                  var(--color-stone-600, #737373);
-	--stuic-color-surface-active:                 var(--color-stone-500, #737373);
-	--stuic-color-surface-foreground:             var(--color-stone-300, #737373);
-	--stuic-color-surface-foreground-hover:       var(--color-stone-300, #737373);
-	--stuic-color-surface-foreground-active:      var(--color-stone-300, #737373);
+	--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:                     var(--color-stone-900, #737373);
+	--stuic-color-background:                     #1c1917;
 
-	--stuic-color-background-hover:               var(--color-stone-900, #737373);
-	--stuic-color-background-active:              var(--color-stone-900, #737373);
-	--stuic-color-background-foreground:          var(--color-stone-50, #737373);
-	--stuic-color-background-foreground-hover:    var(--color-stone-50, #737373);
-	--stuic-color-background-foreground-active:   var(--color-stone-50, #737373);
+	--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:                          var(--color-stone-800, #737373);
+	--stuic-color-muted:                          #292524;
 
-	--stuic-color-muted-hover:                    var(--color-stone-700, #737373);
-	--stuic-color-muted-active:                   var(--color-stone-600, #737373);
-	--stuic-color-muted-foreground:               var(--color-stone-400, #737373);
-	--stuic-color-muted-foreground-hover:         var(--color-stone-400, #737373);
-	--stuic-color-muted-foreground-active:        var(--color-stone-400, #737373);
+	--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:                        var(--color-stone-700, #737373);
+	--stuic-color-surface:                        #44403c;
 
-	--stuic-color-surface-1:                      var(--color-stone-600, #737373);
-	--stuic-color-surface-1-hover:                var(--color-stone-500, #737373);
-	--stuic-color-surface-1-active:               var(--color-stone-400, #737373);
-	--stuic-color-surface-1-foreground:           var(--color-stone-200, #737373);
-	--stuic-color-surface-1-foreground-hover:     var(--color-stone-200, #737373);
-	--stuic-color-surface-1-foreground-active:    var(--color-stone-200, #737373);
+	--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:                     var(--color-stone-50, #737373);
+	--stuic-color-foreground:                     #fafaf9;
 
-	--stuic-color-foreground-hover:               var(--color-stone-50, #737373);
-	--stuic-color-foreground-active:              var(--color-stone-50, #737373);
+	--stuic-color-foreground-hover:               #fafaf9;
+	--stuic-color-foreground-active:              #fafaf9;
 
-	--stuic-color-border:                         var(--color-stone-700, #737373);
+	--stuic-color-border:                         #44403c;
 
-	--stuic-color-border-hover:                   var(--color-stone-600, #737373);
-	--stuic-color-border-active:                  var(--color-stone-500, #737373);
+	--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:                          var(--color-stone-900, #737373);
+	--stuic-color-input:                          #1c1917;
 
-	--stuic-color-input-hover:                    var(--color-stone-800, #737373);
-	--stuic-color-input-active:                   var(--color-stone-700, #737373);
+	--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, var(--color-blue-400) 25%, transparent);
+	--stuic-color-ring:                           color-mix(in srgb, #60a5fa 25%, transparent);
 
-	--stuic-color-ring-hover:                     color-mix(in srgb, var(--color-blue-400) 25%, transparent);
-	--stuic-color-ring-active:                    color-mix(in srgb, var(--color-blue-400) 25%, transparent);
+	--stuic-color-ring-hover:                     color-mix(in srgb, #60a5fa 25%, transparent);
+	--stuic-color-ring-active:                    color-mix(in srgb, #60a5fa 25%, transparent);
 }