@marianmeres/design-tokens 1.4.1 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/AGENTS.md +3 -3
  2. package/API.md +4 -2
  3. package/dist/css/amber-olive-safari.css +38 -38
  4. package/dist/css/blue-orange.css +38 -38
  5. package/dist/css/cyan-red.css +38 -38
  6. package/dist/css/cyan-slate.css +38 -38
  7. package/dist/css/emerald-amber-forest.css +38 -38
  8. package/dist/css/emerald-pink.css +38 -38
  9. package/dist/css/fuchsia-emerald.css +38 -38
  10. package/dist/css/gray.css +38 -38
  11. package/dist/css/indigo-amber.css +38 -38
  12. package/dist/css/lime-fuchsia-neon.css +38 -38
  13. package/dist/css/mauve-lime-electric.css +38 -38
  14. package/dist/css/mauve-teal.css +38 -38
  15. package/dist/css/mauve.css +38 -38
  16. package/dist/css/mist-indigo-fjord.css +38 -38
  17. package/dist/css/mist-violet-aurora.css +38 -38
  18. package/dist/css/mist.css +38 -38
  19. package/dist/css/monokai-cyan.css +38 -38
  20. package/dist/css/monokai-green.css +38 -38
  21. package/dist/css/monokai-pink.css +38 -38
  22. package/dist/css/olive-amber-safari.css +38 -38
  23. package/dist/css/olive.css +38 -38
  24. package/dist/css/orange-pink-sunset.css +38 -38
  25. package/dist/css/pink-emerald.css +38 -38
  26. package/dist/css/pink-teal.css +38 -38
  27. package/dist/css/purple-yellow.css +38 -38
  28. package/dist/css/rainbow.css +38 -38
  29. package/dist/css/red-blue.css +38 -38
  30. package/dist/css/red-cyan.css +38 -38
  31. package/dist/css/red-sky-slate.css +38 -38
  32. package/dist/css/red-sky.css +38 -38
  33. package/dist/css/rose-teal.css +38 -38
  34. package/dist/css/sky-amber.css +38 -38
  35. package/dist/css/slate-cyan.css +38 -38
  36. package/dist/css/slate-teal-ocean.css +38 -38
  37. package/dist/css/stone-orange-earth.css +38 -38
  38. package/dist/css/stone.css +38 -38
  39. package/dist/css/taupe-olive-clay.css +38 -38
  40. package/dist/css/taupe-rose-blush.css +38 -38
  41. package/dist/css/taupe.css +38 -38
  42. package/dist/css/teal-rose.css +38 -38
  43. package/dist/css/violet-lime.css +38 -38
  44. package/dist/css/violet-rose-dusk.css +38 -38
  45. package/dist/css/zinc.css +38 -38
  46. package/dist/generate.d.ts +9 -0
  47. package/dist/generate.js +17 -13
  48. package/package.json +1 -1
package/AGENTS.md CHANGED
@@ -55,7 +55,7 @@ Entry points:
55
55
  | --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
56
56
  | `generateCssTokens(schema, prefix, options?)` | Generate token key-value pairs. Third arg: `GenerateOptions` object or `"light"`/`"dark"` shorthand |
57
57
  | `toCssString(tokens, selector?)` | Convert tokens to a CSS declaration block (groups by base color name) |
58
- | `generateThemeCss(schema, prefix, options?)` | Generate complete CSS for light + optional dark mode; supports `cssLayer` wrapping |
58
+ | `generateThemeCss(schema, prefix, options?)` | Generate complete CSS for light + optional dark mode; supports `cssLayer` wrapping and `prettierIgnore` pragma |
59
59
  | `hexToRgb(hex)` | Parse hex to `[r, g, b]` tuple |
60
60
  | `hexToRgbTriplet(hex)` | Convert hex to `"r, g, b"` string |
61
61
 
@@ -83,7 +83,7 @@ Entry points:
83
83
  | `SingleColor` | `string \| ColorValue` |
84
84
  | `GeneratedTokens` | `Record<string, string>` |
85
85
  | `GenerateOptions` | `{ mode?, deriveStates?, surfaceForegroundContrast? }` |
86
- | `GenerateThemeOptions` | `Omit<GenerateOptions, "mode"> & { cssLayer? }` |
86
+ | `GenerateThemeOptions` | `Omit<GenerateOptions, "mode"> & { cssLayer?, prettierIgnore? }` |
87
87
  | `RolePairedKey` | Required: `"background" \| "muted" \| "surface"` |
88
88
  | `RolePairedOptionalKey` | Optional: `"surface-1"` (all bundled themes ship it) |
89
89
 
@@ -101,7 +101,7 @@ Entry points:
101
101
  1. All public functions must have JSDoc and explicit return types (Deno/JSR requirement)
102
102
  2. Token naming: `--{prefix}color-{key}`, `--{prefix}color-{key}-hover`, etc.
103
103
  3. Prefix is auto-normalized — `"my"` and `"my-"` both produce `--my-color-*`. Empty string produces unprefixed.
104
- 4. Hover/active auto-derived via `color-mix(in oklch, ...)` — light darkens with black, dark lightens with white. Disable with `deriveStates: false`.
104
+ 4. Hover/active auto-derived via `color-mix(in oklch, base, var(--{prefix}color-foreground) 10%/20%)` — mode-independent, theme-coherent (avoids OKLCH hue drift through pure black/white). Disable with `deriveStates: false`.
105
105
  5. Surface-intent tokens derived via `color-mix(in srgb, ...)` from intent + background. Foreground contrast defaults to 50% — tune via `surfaceForegroundContrast`.
106
106
  6. Theme files use `export default` with `ThemeSchema` type annotation. All bundled themes include an optional `surface-1` paired role (extra elevation).
107
107
  7. Formatting: tabs, 90-char line width, 4-space indent width (`deno fmt`)
package/API.md CHANGED
@@ -11,7 +11,7 @@ Generate CSS token key-value pairs from a single-mode token schema.
11
11
  - `schema` (`TokenSchema`) — Color definitions for intent, role paired, and role single colors
12
12
  - `prefix` (`string`) — CSS variable prefix. Auto-normalized: `"my"` and `"my-"` are equivalent. `""` produces unprefixed tokens.
13
13
  - `options` (`GenerateOptions | "light" | "dark"`, optional) — A mode string for quick switching, or an options object. Default: `{}`
14
- - `mode` (`"light" | "dark"`, optional) — Affects auto-derivation direction. Light darkens with black, dark lightens with white. Default: `"light"`
14
+ - `mode` (`"light" | "dark"`, optional) — Controls the `surface-{intent}-foreground` contrast direction (mixes with black in light mode, white in dark mode). Does not affect hover/active derivation, which always mixes toward `--{prefix}color-foreground`. Default: `"light"`
15
15
  - `deriveStates` (`boolean`, optional) — When `false`, missing hover/active fall back to DEFAULT instead of being derived via `color-mix()`. Useful for environments without `color-mix()` support. Default: `true`
16
16
  - `surfaceForegroundContrast` (`number`, optional) — Mix percentage (0–100) used to derive the `surface-{intent}-foreground` token. Higher values increase contrast against the tinted surface background. Default: `50`
17
17
 
@@ -71,6 +71,7 @@ Generate complete CSS for a theme with light mode and optional dark mode.
71
71
  - `prefix` (`string`) — CSS variable prefix (trailing dash optional)
72
72
  - `options` (`GenerateThemeOptions`, optional) — Accepts all `GenerateOptions` (except `mode`, which is set per section) plus:
73
73
  - `cssLayer` (`string`, optional) — Wrap the output in `@layer {name} { ... }`. Useful for CSS cascade control.
74
+ - `prettierIgnore` (`boolean`, optional) — Prepend a `/* prettier-ignore */` comment so Prettier preserves the generated whitespace alignment when the output is written to a file that later gets formatted. Default: `false`.
74
75
 
75
76
  **Returns:** `string` — Complete CSS with `:root` for light and `:root.dark` for dark mode, optionally wrapped in `@layer`.
76
77
 
@@ -290,10 +291,11 @@ Options passed to `generateCssTokens`. See the function docs above for field mea
290
291
  ```typescript
291
292
  type GenerateThemeOptions = Omit<GenerateOptions, "mode"> & {
292
293
  cssLayer?: string;
294
+ prettierIgnore?: boolean;
293
295
  };
294
296
  ```
295
297
 
296
- Options passed to `generateThemeCss`. Omits `mode` (set automatically per section) and adds `cssLayer` for optional `@layer` wrapping.
298
+ Options passed to `generateThemeCss`. Omits `mode` (set automatically per section) and adds `cssLayer` for optional `@layer` wrapping plus `prettierIgnore` to prepend a `/* prettier-ignore */` pragma for build pipelines that pass the output through Prettier.
297
299
 
298
300
  ---
299
301
 
package/dist/css/amber-olive-safari.css CHANGED
@@ -1,36 +1,36 @@
1
1
  /* prettier-ignore */
2
2
  :root {
3
3
  --stuic-color-primary: #d97706;
4
- --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), black 10%);
5
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), black 20%);
4
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 10%);
5
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
6
6
  --stuic-color-primary-foreground: #ffffff;
7
7
  --stuic-color-primary-foreground-hover: #ffffff;
8
8
  --stuic-color-primary-foreground-active: #ffffff;
9
9
 
10
10
  --stuic-color-accent: #474739;
11
- --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), black 10%);
12
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), black 20%);
11
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 10%);
12
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 20%);
13
13
  --stuic-color-accent-foreground: #ffffff;
14
14
  --stuic-color-accent-foreground-hover: #ffffff;
15
15
  --stuic-color-accent-foreground-active: #ffffff;
16
16
 
17
17
  --stuic-color-destructive: #dc2626;
18
- --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), black 10%);
19
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), black 20%);
18
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
20
20
  --stuic-color-destructive-foreground: #ffffff;
21
21
  --stuic-color-destructive-foreground-hover: #ffffff;
22
22
  --stuic-color-destructive-foreground-active: #ffffff;
23
23
 
24
24
  --stuic-color-warning: #f59e0b;
25
- --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), black 10%);
26
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), black 20%);
25
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 10%);
26
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
27
27
  --stuic-color-warning-foreground: #ffffff;
28
28
  --stuic-color-warning-foreground-hover: #ffffff;
29
29
  --stuic-color-warning-foreground-active: #ffffff;
30
30
 
31
31
  --stuic-color-success: #059669;
32
- --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), black 10%);
33
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), black 20%);
32
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 10%);
33
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
34
34
  --stuic-color-success-foreground: #ffffff;
35
35
  --stuic-color-success-foreground-hover: #ffffff;
36
36
  --stuic-color-success-foreground-active: #ffffff;
@@ -51,14 +51,14 @@
51
51
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 50%);
52
52
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
53
53
  --stuic-color-surface: #e8e8e3;
54
- --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), black 10%);
55
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), black 20%);
54
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
56
56
  --stuic-color-surface-foreground: #1d1d16;
57
57
  --stuic-color-surface-foreground-hover: #1d1d16;
58
58
  --stuic-color-surface-foreground-active: #1d1d16;
59
59
  --stuic-color-surface-1: #d8d8d0;
60
- --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), black 10%);
61
- --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), black 20%);
60
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
62
62
  --stuic-color-surface-1-foreground: #1d1d16;
63
63
  --stuic-color-surface-1-foreground-hover: #1d1d16;
64
64
  --stuic-color-surface-1-foreground-active: #1d1d16;
@@ -71,8 +71,8 @@
71
71
  --stuic-color-background-foreground-active: #1d1d16;
72
72
 
73
73
  --stuic-color-muted: #f4f4f0;
74
- --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), black 10%);
75
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), black 20%);
74
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
76
76
  --stuic-color-muted-foreground: #7c7c67;
77
77
  --stuic-color-muted-foreground-hover: #7c7c67;
78
78
  --stuic-color-muted-foreground-active: #7c7c67;
@@ -82,12 +82,12 @@
82
82
  --stuic-color-foreground-active: #1d1d16;
83
83
 
84
84
  --stuic-color-border: #d8d8d0;
85
- --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), black 10%);
86
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), black 20%);
85
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
87
87
 
88
88
  --stuic-color-input: #fbfbf9;
89
89
  --stuic-color-input-hover: #f4f4f0;
90
- --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), black 20%);
90
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
91
91
 
92
92
  --stuic-color-ring: color-mix(in srgb, #d97706 20%, transparent);
93
93
  --stuic-color-ring-hover: color-mix(in srgb, #d97706 20%, transparent);
@@ -96,36 +96,36 @@
96
96
 
97
97
  :root.dark {
98
98
  --stuic-color-primary: #f59e0b;
99
- --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
100
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
99
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 10%);
100
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
101
101
  --stuic-color-primary-foreground: #000000;
102
102
  --stuic-color-primary-foreground-hover: #000000;
103
103
  --stuic-color-primary-foreground-active: #000000;
104
104
 
105
105
  --stuic-color-accent: #abab9c;
106
- --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
107
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
106
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 10%);
107
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 20%);
108
108
  --stuic-color-accent-foreground: #000000;
109
109
  --stuic-color-accent-foreground-hover: #000000;
110
110
  --stuic-color-accent-foreground-active: #000000;
111
111
 
112
112
  --stuic-color-destructive: #ef4444;
113
- --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
114
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
113
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 10%);
114
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
115
115
  --stuic-color-destructive-foreground: #ffffff;
116
116
  --stuic-color-destructive-foreground-hover: #ffffff;
117
117
  --stuic-color-destructive-foreground-active: #ffffff;
118
118
 
119
119
  --stuic-color-warning: #fbbf24;
120
- --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
121
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
120
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 10%);
121
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
122
122
  --stuic-color-warning-foreground: #000000;
123
123
  --stuic-color-warning-foreground-hover: #000000;
124
124
  --stuic-color-warning-foreground-active: #000000;
125
125
 
126
126
  --stuic-color-success: #10b981;
127
- --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
128
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
127
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 10%);
128
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
129
129
  --stuic-color-success-foreground: #ffffff;
130
130
  --stuic-color-success-foreground-hover: #ffffff;
131
131
  --stuic-color-success-foreground-active: #ffffff;
@@ -146,14 +146,14 @@
146
146
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
147
147
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
148
148
  --stuic-color-surface: #474739;
149
- --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), white 10%);
150
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), white 20%);
149
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
150
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
151
151
  --stuic-color-surface-foreground: #d8d8d0;
152
152
  --stuic-color-surface-foreground-hover: #d8d8d0;
153
153
  --stuic-color-surface-foreground-active: #d8d8d0;
154
154
  --stuic-color-surface-1: #5b5b4b;
155
- --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), white 10%);
156
- --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), white 20%);
155
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
156
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
157
157
  --stuic-color-surface-1-foreground: #e8e8e3;
158
158
  --stuic-color-surface-1-foreground-hover: #e8e8e3;
159
159
  --stuic-color-surface-1-foreground-active: #e8e8e3;
@@ -166,8 +166,8 @@
166
166
  --stuic-color-background-foreground-active: #fbfbf9;
167
167
 
168
168
  --stuic-color-muted: #2b2b22;
169
- --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), white 10%);
170
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), white 20%);
169
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
170
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
171
171
  --stuic-color-muted-foreground: #abab9c;
172
172
  --stuic-color-muted-foreground-hover: #abab9c;
173
173
  --stuic-color-muted-foreground-active: #abab9c;
@@ -177,12 +177,12 @@
177
177
  --stuic-color-foreground-active: #fbfbf9;
178
178
 
179
179
  --stuic-color-border: #5b5b4b;
180
- --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), white 10%);
181
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), white 20%);
180
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
181
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
182
182
 
183
183
  --stuic-color-input: #1d1d16;
184
184
  --stuic-color-input-hover: #2b2b22;
185
- --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), white 20%);
185
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
186
186
 
187
187
  --stuic-color-ring: color-mix(in srgb, #f59e0b 25%, transparent);
188
188
  --stuic-color-ring-hover: color-mix(in srgb, #f59e0b 25%, transparent);
package/dist/css/blue-orange.css CHANGED
@@ -1,36 +1,36 @@
1
1
  /* prettier-ignore */
2
2
  :root {
3
3
  --stuic-color-primary: #2563eb;
4
- --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), black 10%);
5
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), black 20%);
4
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 10%);
5
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
6
6
  --stuic-color-primary-foreground: #ffffff;
7
7
  --stuic-color-primary-foreground-hover: #ffffff;
8
8
  --stuic-color-primary-foreground-active: #ffffff;
9
9
 
10
10
  --stuic-color-accent: #f97316;
11
- --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), black 10%);
12
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), black 20%);
11
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 10%);
12
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 20%);
13
13
  --stuic-color-accent-foreground: #ffffff;
14
14
  --stuic-color-accent-foreground-hover: #ffffff;
15
15
  --stuic-color-accent-foreground-active: #ffffff;
16
16
 
17
17
  --stuic-color-destructive: #e11d48;
18
- --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), black 10%);
19
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), black 20%);
18
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
20
20
  --stuic-color-destructive-foreground: #ffffff;
21
21
  --stuic-color-destructive-foreground-hover: #ffffff;
22
22
  --stuic-color-destructive-foreground-active: #ffffff;
23
23
 
24
24
  --stuic-color-warning: #f97316;
25
- --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), black 10%);
26
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), black 20%);
25
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 10%);
26
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
27
27
  --stuic-color-warning-foreground: #ffffff;
28
28
  --stuic-color-warning-foreground-hover: #ffffff;
29
29
  --stuic-color-warning-foreground-active: #ffffff;
30
30
 
31
31
  --stuic-color-success: #0d9488;
32
- --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), black 10%);
33
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), black 20%);
32
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 10%);
33
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
34
34
  --stuic-color-success-foreground: #ffffff;
35
35
  --stuic-color-success-foreground-hover: #ffffff;
36
36
  --stuic-color-success-foreground-active: #ffffff;
@@ -51,14 +51,14 @@
51
51
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 50%);
52
52
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
53
53
  --stuic-color-surface: #e7e5e4;
54
- --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), black 10%);
55
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), black 20%);
54
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
56
56
  --stuic-color-surface-foreground: #1c1917;
57
57
  --stuic-color-surface-foreground-hover: #1c1917;
58
58
  --stuic-color-surface-foreground-active: #1c1917;
59
59
  --stuic-color-surface-1: #d6d3d1;
60
- --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), black 10%);
61
- --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), black 20%);
60
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
62
62
  --stuic-color-surface-1-foreground: #1c1917;
63
63
  --stuic-color-surface-1-foreground-hover: #1c1917;
64
64
  --stuic-color-surface-1-foreground-active: #1c1917;
@@ -71,8 +71,8 @@
71
71
  --stuic-color-background-foreground-active: #1c1917;
72
72
 
73
73
  --stuic-color-muted: #f5f5f4;
74
- --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), black 10%);
75
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), black 20%);
74
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
76
76
  --stuic-color-muted-foreground: #78716c;
77
77
  --stuic-color-muted-foreground-hover: #78716c;
78
78
  --stuic-color-muted-foreground-active: #78716c;
@@ -82,12 +82,12 @@
82
82
  --stuic-color-foreground-active: #1c1917;
83
83
 
84
84
  --stuic-color-border: #d6d3d1;
85
- --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), black 10%);
86
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), black 20%);
85
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
87
87
 
88
88
  --stuic-color-input: #ffffff;
89
89
  --stuic-color-input-hover: #fafaf9;
90
- --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), black 20%);
90
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
91
91
 
92
92
  --stuic-color-ring: color-mix(in srgb, #2563eb 20%, transparent);
93
93
  --stuic-color-ring-hover: color-mix(in srgb, #2563eb 20%, transparent);
@@ -96,36 +96,36 @@
96
96
 
97
97
  :root.dark {
98
98
  --stuic-color-primary: #3b82f6;
99
- --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
100
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
99
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 10%);
100
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
101
101
  --stuic-color-primary-foreground: #ffffff;
102
102
  --stuic-color-primary-foreground-hover: #ffffff;
103
103
  --stuic-color-primary-foreground-active: #ffffff;
104
104
 
105
105
  --stuic-color-accent: #fb923c;
106
- --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
107
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
106
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 10%);
107
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 20%);
108
108
  --stuic-color-accent-foreground: #ffffff;
109
109
  --stuic-color-accent-foreground-hover: #ffffff;
110
110
  --stuic-color-accent-foreground-active: #ffffff;
111
111
 
112
112
  --stuic-color-destructive: #f43f5e;
113
- --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
114
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
113
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 10%);
114
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
115
115
  --stuic-color-destructive-foreground: #ffffff;
116
116
  --stuic-color-destructive-foreground-hover: #ffffff;
117
117
  --stuic-color-destructive-foreground-active: #ffffff;
118
118
 
119
119
  --stuic-color-warning: #fb923c;
120
- --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
121
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
120
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 10%);
121
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
122
122
  --stuic-color-warning-foreground: #ffffff;
123
123
  --stuic-color-warning-foreground-hover: #ffffff;
124
124
  --stuic-color-warning-foreground-active: #ffffff;
125
125
 
126
126
  --stuic-color-success: #14b8a6;
127
- --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
128
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
127
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 10%);
128
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
129
129
  --stuic-color-success-foreground: #ffffff;
130
130
  --stuic-color-success-foreground-hover: #ffffff;
131
131
  --stuic-color-success-foreground-active: #ffffff;
@@ -146,14 +146,14 @@
146
146
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
147
147
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
148
148
  --stuic-color-surface: #44403c;
149
- --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), white 10%);
150
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), white 20%);
149
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
150
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
151
151
  --stuic-color-surface-foreground: #d6d3d1;
152
152
  --stuic-color-surface-foreground-hover: #d6d3d1;
153
153
  --stuic-color-surface-foreground-active: #d6d3d1;
154
154
  --stuic-color-surface-1: #57534e;
155
- --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), white 10%);
156
- --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), white 20%);
155
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
156
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
157
157
  --stuic-color-surface-1-foreground: #e7e5e4;
158
158
  --stuic-color-surface-1-foreground-hover: #e7e5e4;
159
159
  --stuic-color-surface-1-foreground-active: #e7e5e4;
@@ -166,8 +166,8 @@
166
166
  --stuic-color-background-foreground-active: #fafaf9;
167
167
 
168
168
  --stuic-color-muted: #292524;
169
- --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), white 10%);
170
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), white 20%);
169
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
170
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
171
171
  --stuic-color-muted-foreground: #a8a29e;
172
172
  --stuic-color-muted-foreground-hover: #a8a29e;
173
173
  --stuic-color-muted-foreground-active: #a8a29e;
@@ -177,12 +177,12 @@
177
177
  --stuic-color-foreground-active: #fafaf9;
178
178
 
179
179
  --stuic-color-border: #44403c;
180
- --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), white 10%);
181
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), white 20%);
180
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
181
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
182
182
 
183
183
  --stuic-color-input: #1c1917;
184
184
  --stuic-color-input-hover: #292524;
185
- --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), white 20%);
185
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
186
186
 
187
187
  --stuic-color-ring: color-mix(in srgb, #60a5fa 25%, transparent);
188
188
  --stuic-color-ring-hover: color-mix(in srgb, #60a5fa 25%, transparent);
package/dist/css/cyan-red.css CHANGED
@@ -1,36 +1,36 @@
1
1
  /* prettier-ignore */
2
2
  :root {
3
3
  --stuic-color-primary: #0891b2;
4
- --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), black 10%);
5
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), black 20%);
4
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 10%);
5
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
6
6
  --stuic-color-primary-foreground: #ffffff;
7
7
  --stuic-color-primary-foreground-hover: #ffffff;
8
8
  --stuic-color-primary-foreground-active: #ffffff;
9
9
 
10
10
  --stuic-color-accent: #ef4444;
11
- --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), black 10%);
12
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), black 20%);
11
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 10%);
12
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 20%);
13
13
  --stuic-color-accent-foreground: #ffffff;
14
14
  --stuic-color-accent-foreground-hover: #ffffff;
15
15
  --stuic-color-accent-foreground-active: #ffffff;
16
16
 
17
17
  --stuic-color-destructive: #dc2626;
18
- --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), black 10%);
19
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), black 20%);
18
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
20
20
  --stuic-color-destructive-foreground: #ffffff;
21
21
  --stuic-color-destructive-foreground-hover: #ffffff;
22
22
  --stuic-color-destructive-foreground-active: #ffffff;
23
23
 
24
24
  --stuic-color-warning: #f97316;
25
- --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), black 10%);
26
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), black 20%);
25
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 10%);
26
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
27
27
  --stuic-color-warning-foreground: #ffffff;
28
28
  --stuic-color-warning-foreground-hover: #ffffff;
29
29
  --stuic-color-warning-foreground-active: #ffffff;
30
30
 
31
31
  --stuic-color-success: #0d9488;
32
- --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), black 10%);
33
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), black 20%);
32
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 10%);
33
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
34
34
  --stuic-color-success-foreground: #ffffff;
35
35
  --stuic-color-success-foreground-hover: #ffffff;
36
36
  --stuic-color-success-foreground-active: #ffffff;
@@ -51,14 +51,14 @@
51
51
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 50%);
52
52
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
53
53
  --stuic-color-surface: #e7e5e4;
54
- --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), black 10%);
55
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), black 20%);
54
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
56
56
  --stuic-color-surface-foreground: #1c1917;
57
57
  --stuic-color-surface-foreground-hover: #1c1917;
58
58
  --stuic-color-surface-foreground-active: #1c1917;
59
59
  --stuic-color-surface-1: #d6d3d1;
60
- --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), black 10%);
61
- --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), black 20%);
60
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
62
62
  --stuic-color-surface-1-foreground: #1c1917;
63
63
  --stuic-color-surface-1-foreground-hover: #1c1917;
64
64
  --stuic-color-surface-1-foreground-active: #1c1917;
@@ -71,8 +71,8 @@
71
71
  --stuic-color-background-foreground-active: #1c1917;
72
72
 
73
73
  --stuic-color-muted: #f5f5f4;
74
- --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), black 10%);
75
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), black 20%);
74
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
76
76
  --stuic-color-muted-foreground: #78716c;
77
77
  --stuic-color-muted-foreground-hover: #78716c;
78
78
  --stuic-color-muted-foreground-active: #78716c;
@@ -82,12 +82,12 @@
82
82
  --stuic-color-foreground-active: #1c1917;
83
83
 
84
84
  --stuic-color-border: #d6d3d1;
85
- --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), black 10%);
86
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), black 20%);
85
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
87
87
 
88
88
  --stuic-color-input: #ffffff;
89
89
  --stuic-color-input-hover: #fafaf9;
90
- --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), black 20%);
90
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
91
91
 
92
92
  --stuic-color-ring: color-mix(in srgb, #0891b2 20%, transparent);
93
93
  --stuic-color-ring-hover: color-mix(in srgb, #0891b2 20%, transparent);
@@ -96,36 +96,36 @@
96
96
 
97
97
  :root.dark {
98
98
  --stuic-color-primary: #06b6d4;
99
- --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
100
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
99
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 10%);
100
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
101
101
  --stuic-color-primary-foreground: #ffffff;
102
102
  --stuic-color-primary-foreground-hover: #ffffff;
103
103
  --stuic-color-primary-foreground-active: #ffffff;
104
104
 
105
105
  --stuic-color-accent: #f87171;
106
- --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
107
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
106
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 10%);
107
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 20%);
108
108
  --stuic-color-accent-foreground: #ffffff;
109
109
  --stuic-color-accent-foreground-hover: #ffffff;
110
110
  --stuic-color-accent-foreground-active: #ffffff;
111
111
 
112
112
  --stuic-color-destructive: #ef4444;
113
- --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
114
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
113
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 10%);
114
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
115
115
  --stuic-color-destructive-foreground: #ffffff;
116
116
  --stuic-color-destructive-foreground-hover: #ffffff;
117
117
  --stuic-color-destructive-foreground-active: #ffffff;
118
118
 
119
119
  --stuic-color-warning: #fb923c;
120
- --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
121
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
120
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 10%);
121
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
122
122
  --stuic-color-warning-foreground: #ffffff;
123
123
  --stuic-color-warning-foreground-hover: #ffffff;
124
124
  --stuic-color-warning-foreground-active: #ffffff;
125
125
 
126
126
  --stuic-color-success: #14b8a6;
127
- --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
128
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
127
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 10%);
128
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
129
129
  --stuic-color-success-foreground: #ffffff;
130
130
  --stuic-color-success-foreground-hover: #ffffff;
131
131
  --stuic-color-success-foreground-active: #ffffff;
@@ -146,14 +146,14 @@
146
146
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
147
147
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
148
148
  --stuic-color-surface: #44403c;
149
- --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), white 10%);
150
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), white 20%);
149
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
150
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
151
151
  --stuic-color-surface-foreground: #d6d3d1;
152
152
  --stuic-color-surface-foreground-hover: #d6d3d1;
153
153
  --stuic-color-surface-foreground-active: #d6d3d1;
154
154
  --stuic-color-surface-1: #57534e;
155
- --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), white 10%);
156
- --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), white 20%);
155
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
156
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
157
157
  --stuic-color-surface-1-foreground: #e7e5e4;
158
158
  --stuic-color-surface-1-foreground-hover: #e7e5e4;
159
159
  --stuic-color-surface-1-foreground-active: #e7e5e4;
@@ -166,8 +166,8 @@
166
166
  --stuic-color-background-foreground-active: #fafaf9;
167
167
 
168
168
  --stuic-color-muted: #292524;
169
- --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), white 10%);
170
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), white 20%);
169
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
170
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
171
171
  --stuic-color-muted-foreground: #a8a29e;
172
172
  --stuic-color-muted-foreground-hover: #a8a29e;
173
173
  --stuic-color-muted-foreground-active: #a8a29e;
@@ -177,12 +177,12 @@
177
177
  --stuic-color-foreground-active: #fafaf9;
178
178
 
179
179
  --stuic-color-border: #44403c;
180
- --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), white 10%);
181
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), white 20%);
180
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
181
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
182
182
 
183
183
  --stuic-color-input: #1c1917;
184
184
  --stuic-color-input-hover: #292524;
185
- --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), white 20%);
185
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
186
186
 
187
187
  --stuic-color-ring: color-mix(in srgb, #22d3ee 25%, transparent);
188
188
  --stuic-color-ring-hover: color-mix(in srgb, #22d3ee 25%, transparent);