@marianmeres/design-tokens 1.4.1 → 1.5.0

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 (47) hide show
  1. package/AGENTS.md +1 -1
  2. package/API.md +1 -1
  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.js +13 -12
  47. package/package.json +1 -1
package/AGENTS.md CHANGED
@@ -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
 
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);