@marianmeres/design-tokens 1.7.0 → 1.8.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/README.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 +4 -5
  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, ...)` with a per-bucket strategy: **intent** colors (saturated brand) mix toward `black` / `white` 10%/20% (mode-aware) so saturated hues stay clean; **role** colors (paired + single) mix toward `var(--{prefix}color-foreground)` 10%/20% so low-chroma neutrals don't hue-drift through OKLCH chroma-zero. Disable with `deriveStates: false`.
104
+ 4. Hover/active auto-derived via `color-mix(in oklab, ...)` with a per-bucket strategy: **intent** colors (saturated brand) mix toward `black` / `white` 10%/20% (mode-aware); **role** colors (paired + single) mix toward `var(--{prefix}color-foreground)` 10%/20% for a softer, theme-tinted shift. `oklab` (rectangular) is used rather than `oklch` (polar) because polar hue interpolation collapses to a powerless hue on low-chroma colors mixed toward black/white, painting as a red/mauve shift on near-neutral themes. 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/README.md CHANGED
@@ -122,7 +122,7 @@ const myTheme: ThemeSchema = {
122
122
  const css = generateThemeCss(myTheme, "my-");
123
123
  ```
124
124
 
125
- Hover/active states are auto-derived via `color-mix(in oklch, ...)` when omitted. You can
125
+ Hover/active states are auto-derived via `color-mix(in oklab, ...)` when omitted. You can
126
126
  provide explicit values to override the derivation.
127
127
 
128
128
  ## Bundled themes
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 oklab, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), black 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 oklab, var(--stuic-color-accent), black 10%);
12
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), black 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 oklab, var(--stuic-color-destructive), black 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), black 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 oklab, var(--stuic-color-warning), black 10%);
26
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), black 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 oklab, var(--stuic-color-success), black 10%);
33
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), black 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), var(--stuic-color-foreground) 10%);
55
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
54
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklab, 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), 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%);
60
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklab, 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), var(--stuic-color-foreground) 10%);
75
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
74
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklab, 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), var(--stuic-color-foreground) 10%);
86
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
85
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklab, 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), var(--stuic-color-foreground) 20%);
90
+ --stuic-color-input-active: color-mix(in oklab, 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);
@@ -97,36 +97,36 @@
97
97
  /* prettier-ignore */
98
98
  :root.dark {
99
99
  --stuic-color-primary: #f59e0b;
100
- --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
101
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
100
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), white 10%);
101
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), white 20%);
102
102
  --stuic-color-primary-foreground: #000000;
103
103
  --stuic-color-primary-foreground-hover: #000000;
104
104
  --stuic-color-primary-foreground-active: #000000;
105
105
 
106
106
  --stuic-color-accent: #abab9c;
107
- --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
108
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
107
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), white 10%);
108
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), white 20%);
109
109
  --stuic-color-accent-foreground: #000000;
110
110
  --stuic-color-accent-foreground-hover: #000000;
111
111
  --stuic-color-accent-foreground-active: #000000;
112
112
 
113
113
  --stuic-color-destructive: #ef4444;
114
- --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
115
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
114
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), white 10%);
115
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), white 20%);
116
116
  --stuic-color-destructive-foreground: #ffffff;
117
117
  --stuic-color-destructive-foreground-hover: #ffffff;
118
118
  --stuic-color-destructive-foreground-active: #ffffff;
119
119
 
120
120
  --stuic-color-warning: #fbbf24;
121
- --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
122
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
121
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), white 10%);
122
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), white 20%);
123
123
  --stuic-color-warning-foreground: #000000;
124
124
  --stuic-color-warning-foreground-hover: #000000;
125
125
  --stuic-color-warning-foreground-active: #000000;
126
126
 
127
127
  --stuic-color-success: #10b981;
128
- --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
129
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
128
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), white 10%);
129
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), white 20%);
130
130
  --stuic-color-success-foreground: #ffffff;
131
131
  --stuic-color-success-foreground-hover: #ffffff;
132
132
  --stuic-color-success-foreground-active: #ffffff;
@@ -147,14 +147,14 @@
147
147
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
148
148
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
149
149
  --stuic-color-surface: #474739;
150
- --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
150
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
152
152
  --stuic-color-surface-foreground: #d8d8d0;
153
153
  --stuic-color-surface-foreground-hover: #d8d8d0;
154
154
  --stuic-color-surface-foreground-active: #d8d8d0;
155
155
  --stuic-color-surface-1: #5b5b4b;
156
- --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
- --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
156
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
158
158
  --stuic-color-surface-1-foreground: #e8e8e3;
159
159
  --stuic-color-surface-1-foreground-hover: #e8e8e3;
160
160
  --stuic-color-surface-1-foreground-active: #e8e8e3;
@@ -167,8 +167,8 @@
167
167
  --stuic-color-background-foreground-active: #fbfbf9;
168
168
 
169
169
  --stuic-color-muted: #2b2b22;
170
- --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
170
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
172
172
  --stuic-color-muted-foreground: #abab9c;
173
173
  --stuic-color-muted-foreground-hover: #abab9c;
174
174
  --stuic-color-muted-foreground-active: #abab9c;
@@ -178,12 +178,12 @@
178
178
  --stuic-color-foreground-active: #fbfbf9;
179
179
 
180
180
  --stuic-color-border: #5b5b4b;
181
- --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
181
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
183
183
 
184
184
  --stuic-color-input: #1d1d16;
185
185
  --stuic-color-input-hover: #2b2b22;
186
- --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
186
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
187
187
 
188
188
  --stuic-color-ring: color-mix(in srgb, #f59e0b 25%, transparent);
189
189
  --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 oklab, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), black 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 oklab, var(--stuic-color-accent), black 10%);
12
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), black 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 oklab, var(--stuic-color-destructive), black 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), black 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 oklab, var(--stuic-color-warning), black 10%);
26
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), black 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 oklab, var(--stuic-color-success), black 10%);
33
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), black 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), var(--stuic-color-foreground) 10%);
55
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
54
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklab, 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), 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%);
60
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklab, 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), var(--stuic-color-foreground) 10%);
75
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
74
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklab, 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), var(--stuic-color-foreground) 10%);
86
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
85
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklab, 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), var(--stuic-color-foreground) 20%);
90
+ --stuic-color-input-active: color-mix(in oklab, 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);
@@ -97,36 +97,36 @@
97
97
  /* prettier-ignore */
98
98
  :root.dark {
99
99
  --stuic-color-primary: #3b82f6;
100
- --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
101
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
100
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), white 10%);
101
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), white 20%);
102
102
  --stuic-color-primary-foreground: #ffffff;
103
103
  --stuic-color-primary-foreground-hover: #ffffff;
104
104
  --stuic-color-primary-foreground-active: #ffffff;
105
105
 
106
106
  --stuic-color-accent: #fb923c;
107
- --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
108
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
107
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), white 10%);
108
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), white 20%);
109
109
  --stuic-color-accent-foreground: #ffffff;
110
110
  --stuic-color-accent-foreground-hover: #ffffff;
111
111
  --stuic-color-accent-foreground-active: #ffffff;
112
112
 
113
113
  --stuic-color-destructive: #f43f5e;
114
- --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
115
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
114
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), white 10%);
115
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), white 20%);
116
116
  --stuic-color-destructive-foreground: #ffffff;
117
117
  --stuic-color-destructive-foreground-hover: #ffffff;
118
118
  --stuic-color-destructive-foreground-active: #ffffff;
119
119
 
120
120
  --stuic-color-warning: #fb923c;
121
- --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
122
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
121
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), white 10%);
122
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), white 20%);
123
123
  --stuic-color-warning-foreground: #ffffff;
124
124
  --stuic-color-warning-foreground-hover: #ffffff;
125
125
  --stuic-color-warning-foreground-active: #ffffff;
126
126
 
127
127
  --stuic-color-success: #14b8a6;
128
- --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
129
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
128
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), white 10%);
129
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), white 20%);
130
130
  --stuic-color-success-foreground: #ffffff;
131
131
  --stuic-color-success-foreground-hover: #ffffff;
132
132
  --stuic-color-success-foreground-active: #ffffff;
@@ -147,14 +147,14 @@
147
147
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
148
148
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
149
149
  --stuic-color-surface: #44403c;
150
- --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
150
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
152
152
  --stuic-color-surface-foreground: #d6d3d1;
153
153
  --stuic-color-surface-foreground-hover: #d6d3d1;
154
154
  --stuic-color-surface-foreground-active: #d6d3d1;
155
155
  --stuic-color-surface-1: #57534e;
156
- --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
- --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
156
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
158
158
  --stuic-color-surface-1-foreground: #e7e5e4;
159
159
  --stuic-color-surface-1-foreground-hover: #e7e5e4;
160
160
  --stuic-color-surface-1-foreground-active: #e7e5e4;
@@ -167,8 +167,8 @@
167
167
  --stuic-color-background-foreground-active: #fafaf9;
168
168
 
169
169
  --stuic-color-muted: #292524;
170
- --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
170
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
172
172
  --stuic-color-muted-foreground: #a8a29e;
173
173
  --stuic-color-muted-foreground-hover: #a8a29e;
174
174
  --stuic-color-muted-foreground-active: #a8a29e;
@@ -178,12 +178,12 @@
178
178
  --stuic-color-foreground-active: #fafaf9;
179
179
 
180
180
  --stuic-color-border: #44403c;
181
- --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
181
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
183
183
 
184
184
  --stuic-color-input: #1c1917;
185
185
  --stuic-color-input-hover: #292524;
186
- --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
186
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
187
187
 
188
188
  --stuic-color-ring: color-mix(in srgb, #60a5fa 25%, transparent);
189
189
  --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 oklab, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), black 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 oklab, var(--stuic-color-accent), black 10%);
12
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), black 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 oklab, var(--stuic-color-destructive), black 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), black 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 oklab, var(--stuic-color-warning), black 10%);
26
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), black 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 oklab, var(--stuic-color-success), black 10%);
33
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), black 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), var(--stuic-color-foreground) 10%);
55
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
54
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklab, 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), 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%);
60
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklab, 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), var(--stuic-color-foreground) 10%);
75
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
74
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklab, 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), var(--stuic-color-foreground) 10%);
86
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
85
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklab, 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), var(--stuic-color-foreground) 20%);
90
+ --stuic-color-input-active: color-mix(in oklab, 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);
@@ -97,36 +97,36 @@
97
97
  /* prettier-ignore */
98
98
  :root.dark {
99
99
  --stuic-color-primary: #06b6d4;
100
- --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
101
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
100
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), white 10%);
101
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), white 20%);
102
102
  --stuic-color-primary-foreground: #ffffff;
103
103
  --stuic-color-primary-foreground-hover: #ffffff;
104
104
  --stuic-color-primary-foreground-active: #ffffff;
105
105
 
106
106
  --stuic-color-accent: #f87171;
107
- --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
108
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
107
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), white 10%);
108
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), white 20%);
109
109
  --stuic-color-accent-foreground: #ffffff;
110
110
  --stuic-color-accent-foreground-hover: #ffffff;
111
111
  --stuic-color-accent-foreground-active: #ffffff;
112
112
 
113
113
  --stuic-color-destructive: #ef4444;
114
- --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
115
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
114
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), white 10%);
115
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), white 20%);
116
116
  --stuic-color-destructive-foreground: #ffffff;
117
117
  --stuic-color-destructive-foreground-hover: #ffffff;
118
118
  --stuic-color-destructive-foreground-active: #ffffff;
119
119
 
120
120
  --stuic-color-warning: #fb923c;
121
- --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
122
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
121
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), white 10%);
122
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), white 20%);
123
123
  --stuic-color-warning-foreground: #ffffff;
124
124
  --stuic-color-warning-foreground-hover: #ffffff;
125
125
  --stuic-color-warning-foreground-active: #ffffff;
126
126
 
127
127
  --stuic-color-success: #14b8a6;
128
- --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
129
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
128
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), white 10%);
129
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), white 20%);
130
130
  --stuic-color-success-foreground: #ffffff;
131
131
  --stuic-color-success-foreground-hover: #ffffff;
132
132
  --stuic-color-success-foreground-active: #ffffff;
@@ -147,14 +147,14 @@
147
147
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
148
148
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
149
149
  --stuic-color-surface: #44403c;
150
- --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
- --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
150
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
152
152
  --stuic-color-surface-foreground: #d6d3d1;
153
153
  --stuic-color-surface-foreground-hover: #d6d3d1;
154
154
  --stuic-color-surface-foreground-active: #d6d3d1;
155
155
  --stuic-color-surface-1: #57534e;
156
- --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
- --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
156
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
158
158
  --stuic-color-surface-1-foreground: #e7e5e4;
159
159
  --stuic-color-surface-1-foreground-hover: #e7e5e4;
160
160
  --stuic-color-surface-1-foreground-active: #e7e5e4;
@@ -167,8 +167,8 @@
167
167
  --stuic-color-background-foreground-active: #fafaf9;
168
168
 
169
169
  --stuic-color-muted: #292524;
170
- --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
- --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
170
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
172
172
  --stuic-color-muted-foreground: #a8a29e;
173
173
  --stuic-color-muted-foreground-hover: #a8a29e;
174
174
  --stuic-color-muted-foreground-active: #a8a29e;
@@ -178,12 +178,12 @@
178
178
  --stuic-color-foreground-active: #fafaf9;
179
179
 
180
180
  --stuic-color-border: #44403c;
181
- --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
- --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
181
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
183
183
 
184
184
  --stuic-color-input: #1c1917;
185
185
  --stuic-color-input-hover: #292524;
186
- --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
186
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
187
187
 
188
188
  --stuic-color-ring: color-mix(in srgb, #22d3ee 25%, transparent);
189
189
  --stuic-color-ring-hover: color-mix(in srgb, #22d3ee 25%, transparent);