@marianmeres/design-tokens 1.6.0 → 1.7.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 (48) hide show
  1. package/AGENTS.md +1 -1
  2. package/API.md +1 -1
  3. package/dist/css/amber-olive-safari.css +21 -20
  4. package/dist/css/blue-orange.css +21 -20
  5. package/dist/css/cyan-red.css +21 -20
  6. package/dist/css/cyan-slate.css +21 -20
  7. package/dist/css/emerald-amber-forest.css +21 -20
  8. package/dist/css/emerald-pink.css +21 -20
  9. package/dist/css/fuchsia-emerald.css +21 -20
  10. package/dist/css/gray.css +21 -20
  11. package/dist/css/indigo-amber.css +21 -20
  12. package/dist/css/lime-fuchsia-neon.css +21 -20
  13. package/dist/css/mauve-lime-electric.css +21 -20
  14. package/dist/css/mauve-teal.css +21 -20
  15. package/dist/css/mauve.css +21 -20
  16. package/dist/css/mist-indigo-fjord.css +21 -20
  17. package/dist/css/mist-violet-aurora.css +21 -20
  18. package/dist/css/mist.css +21 -20
  19. package/dist/css/monokai-cyan.css +21 -20
  20. package/dist/css/monokai-green.css +21 -20
  21. package/dist/css/monokai-pink.css +21 -20
  22. package/dist/css/olive-amber-safari.css +21 -20
  23. package/dist/css/olive.css +21 -20
  24. package/dist/css/orange-pink-sunset.css +21 -20
  25. package/dist/css/pink-emerald.css +21 -20
  26. package/dist/css/pink-teal.css +21 -20
  27. package/dist/css/purple-yellow.css +21 -20
  28. package/dist/css/rainbow.css +21 -20
  29. package/dist/css/red-blue.css +21 -20
  30. package/dist/css/red-cyan.css +21 -20
  31. package/dist/css/red-sky-slate.css +21 -20
  32. package/dist/css/red-sky.css +21 -20
  33. package/dist/css/rose-teal.css +21 -20
  34. package/dist/css/sky-amber.css +21 -20
  35. package/dist/css/slate-cyan.css +21 -20
  36. package/dist/css/slate-teal-ocean.css +21 -20
  37. package/dist/css/stone-orange-earth.css +21 -20
  38. package/dist/css/stone.css +21 -20
  39. package/dist/css/taupe-olive-clay.css +21 -20
  40. package/dist/css/taupe-rose-blush.css +21 -20
  41. package/dist/css/taupe.css +21 -20
  42. package/dist/css/teal-rose.css +21 -20
  43. package/dist/css/violet-lime.css +21 -20
  44. package/dist/css/violet-rose-dusk.css +21 -20
  45. package/dist/css/zinc.css +21 -20
  46. package/dist/generate.d.ts +10 -2
  47. package/dist/generate.js +26 -17
  48. 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, base, var(--{prefix}color-foreground) 10%/20%)` — mode-independent, theme-coherent (avoids OKLCH hue drift through pure black/white). Disable with `deriveStates: false`.
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`.
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) — 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"`
14
+ - `mode` (`"light" | "dark"`, optional) — Controls two things: (a) the `surface-{intent}-foreground` contrast mix (toward `black` in light, `white` in dark), and (b) the direction of **intent** hover/active derivation (toward `black` in light, `white` in dark). **Role** hover/active is mode-independent — it always mixes toward `--{prefix}color-foreground`, which itself flips per mode. 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), var(--stuic-color-foreground) 10%);
5
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
12
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
19
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
26
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
33
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
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%);
34
34
  --stuic-color-success-foreground: #ffffff;
35
35
  --stuic-color-success-foreground-hover: #ffffff;
36
36
  --stuic-color-success-foreground-active: #ffffff;
@@ -94,38 +94,39 @@
94
94
  --stuic-color-ring-active: color-mix(in srgb, #d97706 20%, transparent);
95
95
  }
96
96
 
97
+ /* prettier-ignore */
97
98
  :root.dark {
98
99
  --stuic-color-primary: #f59e0b;
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%);
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%);
101
102
  --stuic-color-primary-foreground: #000000;
102
103
  --stuic-color-primary-foreground-hover: #000000;
103
104
  --stuic-color-primary-foreground-active: #000000;
104
105
 
105
106
  --stuic-color-accent: #abab9c;
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%);
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%);
108
109
  --stuic-color-accent-foreground: #000000;
109
110
  --stuic-color-accent-foreground-hover: #000000;
110
111
  --stuic-color-accent-foreground-active: #000000;
111
112
 
112
113
  --stuic-color-destructive: #ef4444;
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%);
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%);
115
116
  --stuic-color-destructive-foreground: #ffffff;
116
117
  --stuic-color-destructive-foreground-hover: #ffffff;
117
118
  --stuic-color-destructive-foreground-active: #ffffff;
118
119
 
119
120
  --stuic-color-warning: #fbbf24;
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%);
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%);
122
123
  --stuic-color-warning-foreground: #000000;
123
124
  --stuic-color-warning-foreground-hover: #000000;
124
125
  --stuic-color-warning-foreground-active: #000000;
125
126
 
126
127
  --stuic-color-success: #10b981;
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%);
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%);
129
130
  --stuic-color-success-foreground: #ffffff;
130
131
  --stuic-color-success-foreground-hover: #ffffff;
131
132
  --stuic-color-success-foreground-active: #ffffff;
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), var(--stuic-color-foreground) 10%);
5
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
12
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
19
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
26
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
33
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
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%);
34
34
  --stuic-color-success-foreground: #ffffff;
35
35
  --stuic-color-success-foreground-hover: #ffffff;
36
36
  --stuic-color-success-foreground-active: #ffffff;
@@ -94,38 +94,39 @@
94
94
  --stuic-color-ring-active: color-mix(in srgb, #2563eb 20%, transparent);
95
95
  }
96
96
 
97
+ /* prettier-ignore */
97
98
  :root.dark {
98
99
  --stuic-color-primary: #3b82f6;
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%);
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%);
101
102
  --stuic-color-primary-foreground: #ffffff;
102
103
  --stuic-color-primary-foreground-hover: #ffffff;
103
104
  --stuic-color-primary-foreground-active: #ffffff;
104
105
 
105
106
  --stuic-color-accent: #fb923c;
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%);
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%);
108
109
  --stuic-color-accent-foreground: #ffffff;
109
110
  --stuic-color-accent-foreground-hover: #ffffff;
110
111
  --stuic-color-accent-foreground-active: #ffffff;
111
112
 
112
113
  --stuic-color-destructive: #f43f5e;
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%);
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%);
115
116
  --stuic-color-destructive-foreground: #ffffff;
116
117
  --stuic-color-destructive-foreground-hover: #ffffff;
117
118
  --stuic-color-destructive-foreground-active: #ffffff;
118
119
 
119
120
  --stuic-color-warning: #fb923c;
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%);
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%);
122
123
  --stuic-color-warning-foreground: #ffffff;
123
124
  --stuic-color-warning-foreground-hover: #ffffff;
124
125
  --stuic-color-warning-foreground-active: #ffffff;
125
126
 
126
127
  --stuic-color-success: #14b8a6;
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%);
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%);
129
130
  --stuic-color-success-foreground: #ffffff;
130
131
  --stuic-color-success-foreground-hover: #ffffff;
131
132
  --stuic-color-success-foreground-active: #ffffff;
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), var(--stuic-color-foreground) 10%);
5
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
12
- --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
19
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
26
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
33
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
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%);
34
34
  --stuic-color-success-foreground: #ffffff;
35
35
  --stuic-color-success-foreground-hover: #ffffff;
36
36
  --stuic-color-success-foreground-active: #ffffff;
@@ -94,38 +94,39 @@
94
94
  --stuic-color-ring-active: color-mix(in srgb, #0891b2 20%, transparent);
95
95
  }
96
96
 
97
+ /* prettier-ignore */
97
98
  :root.dark {
98
99
  --stuic-color-primary: #06b6d4;
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%);
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%);
101
102
  --stuic-color-primary-foreground: #ffffff;
102
103
  --stuic-color-primary-foreground-hover: #ffffff;
103
104
  --stuic-color-primary-foreground-active: #ffffff;
104
105
 
105
106
  --stuic-color-accent: #f87171;
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%);
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%);
108
109
  --stuic-color-accent-foreground: #ffffff;
109
110
  --stuic-color-accent-foreground-hover: #ffffff;
110
111
  --stuic-color-accent-foreground-active: #ffffff;
111
112
 
112
113
  --stuic-color-destructive: #ef4444;
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%);
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%);
115
116
  --stuic-color-destructive-foreground: #ffffff;
116
117
  --stuic-color-destructive-foreground-hover: #ffffff;
117
118
  --stuic-color-destructive-foreground-active: #ffffff;
118
119
 
119
120
  --stuic-color-warning: #fb923c;
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%);
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%);
122
123
  --stuic-color-warning-foreground: #ffffff;
123
124
  --stuic-color-warning-foreground-hover: #ffffff;
124
125
  --stuic-color-warning-foreground-active: #ffffff;
125
126
 
126
127
  --stuic-color-success: #14b8a6;
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%);
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%);
129
130
  --stuic-color-success-foreground: #ffffff;
130
131
  --stuic-color-success-foreground-hover: #ffffff;
131
132
  --stuic-color-success-foreground-active: #ffffff;
package/dist/css/cyan-slate.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), var(--stuic-color-foreground) 10%);
5
- --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), var(--stuic-color-foreground) 20%);
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%);
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: #64748b;
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%);
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%);
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), var(--stuic-color-foreground) 10%);
19
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
26
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
33
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
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%);
34
34
  --stuic-color-success-foreground: #ffffff;
35
35
  --stuic-color-success-foreground-hover: #ffffff;
36
36
  --stuic-color-success-foreground-active: #ffffff;
@@ -94,38 +94,39 @@
94
94
  --stuic-color-ring-active: color-mix(in srgb, #0891b2 20%, transparent);
95
95
  }
96
96
 
97
+ /* prettier-ignore */
97
98
  :root.dark {
98
99
  --stuic-color-primary: #06b6d4;
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%);
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%);
101
102
  --stuic-color-primary-foreground: #ffffff;
102
103
  --stuic-color-primary-foreground-hover: #ffffff;
103
104
  --stuic-color-primary-foreground-active: #ffffff;
104
105
 
105
106
  --stuic-color-accent: #94a3b8;
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%);
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%);
108
109
  --stuic-color-accent-foreground: #ffffff;
109
110
  --stuic-color-accent-foreground-hover: #ffffff;
110
111
  --stuic-color-accent-foreground-active: #ffffff;
111
112
 
112
113
  --stuic-color-destructive: #f43f5e;
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%);
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%);
115
116
  --stuic-color-destructive-foreground: #ffffff;
116
117
  --stuic-color-destructive-foreground-hover: #ffffff;
117
118
  --stuic-color-destructive-foreground-active: #ffffff;
118
119
 
119
120
  --stuic-color-warning: #fbbf24;
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%);
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%);
122
123
  --stuic-color-warning-foreground: #000000;
123
124
  --stuic-color-warning-foreground-hover: #000000;
124
125
  --stuic-color-warning-foreground-active: #000000;
125
126
 
126
127
  --stuic-color-success: #14b8a6;
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%);
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%);
129
130
  --stuic-color-success-foreground: #ffffff;
130
131
  --stuic-color-success-foreground-hover: #ffffff;
131
132
  --stuic-color-success-foreground-active: #ffffff;
package/dist/css/emerald-amber-forest.css CHANGED
@@ -1,36 +1,36 @@
1
1
  /* prettier-ignore */
2
2
  :root {
3
3
  --stuic-color-primary: #047857;
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%);
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%);
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: #d97706;
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%);
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%);
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), var(--stuic-color-foreground) 10%);
19
- --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
26
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
33
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
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%);
34
34
  --stuic-color-success-foreground: #ffffff;
35
35
  --stuic-color-success-foreground-hover: #ffffff;
36
36
  --stuic-color-success-foreground-active: #ffffff;
@@ -94,38 +94,39 @@
94
94
  --stuic-color-ring-active: color-mix(in srgb, #047857 20%, transparent);
95
95
  }
96
96
 
97
+ /* prettier-ignore */
97
98
  :root.dark {
98
99
  --stuic-color-primary: #10b981;
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%);
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%);
101
102
  --stuic-color-primary-foreground: #ffffff;
102
103
  --stuic-color-primary-foreground-hover: #ffffff;
103
104
  --stuic-color-primary-foreground-active: #ffffff;
104
105
 
105
106
  --stuic-color-accent: #f59e0b;
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%);
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%);
108
109
  --stuic-color-accent-foreground: #000000;
109
110
  --stuic-color-accent-foreground-hover: #000000;
110
111
  --stuic-color-accent-foreground-active: #000000;
111
112
 
112
113
  --stuic-color-destructive: #ef4444;
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%);
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%);
115
116
  --stuic-color-destructive-foreground: #ffffff;
116
117
  --stuic-color-destructive-foreground-hover: #ffffff;
117
118
  --stuic-color-destructive-foreground-active: #ffffff;
118
119
 
119
120
  --stuic-color-warning: #fbbf24;
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%);
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%);
122
123
  --stuic-color-warning-foreground: #000000;
123
124
  --stuic-color-warning-foreground-hover: #000000;
124
125
  --stuic-color-warning-foreground-active: #000000;
125
126
 
126
127
  --stuic-color-success: #10b981;
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%);
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%);
129
130
  --stuic-color-success-foreground: #ffffff;
130
131
  --stuic-color-success-foreground-hover: #ffffff;
131
132
  --stuic-color-success-foreground-active: #ffffff;
package/dist/css/emerald-pink.css CHANGED
@@ -1,36 +1,36 @@
1
1
  /* prettier-ignore */
2
2
  :root {
3
3
  --stuic-color-primary: #059669;
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%);
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%);
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: #ec4899;
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%);
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%);
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: #db2777;
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%);
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%);
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), var(--stuic-color-foreground) 10%);
26
- --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), var(--stuic-color-foreground) 20%);
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%);
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), var(--stuic-color-foreground) 10%);
33
- --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), var(--stuic-color-foreground) 20%);
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%);
34
34
  --stuic-color-success-foreground: #ffffff;
35
35
  --stuic-color-success-foreground-hover: #ffffff;
36
36
  --stuic-color-success-foreground-active: #ffffff;
@@ -94,38 +94,39 @@
94
94
  --stuic-color-ring-active: color-mix(in srgb, #059669 20%, transparent);
95
95
  }
96
96
 
97
+ /* prettier-ignore */
97
98
  :root.dark {
98
99
  --stuic-color-primary: #10b981;
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%);
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%);
101
102
  --stuic-color-primary-foreground: #ffffff;
102
103
  --stuic-color-primary-foreground-hover: #ffffff;
103
104
  --stuic-color-primary-foreground-active: #ffffff;
104
105
 
105
106
  --stuic-color-accent: #f472b6;
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%);
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%);
108
109
  --stuic-color-accent-foreground: #ffffff;
109
110
  --stuic-color-accent-foreground-hover: #ffffff;
110
111
  --stuic-color-accent-foreground-active: #ffffff;
111
112
 
112
113
  --stuic-color-destructive: #ec4899;
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%);
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%);
115
116
  --stuic-color-destructive-foreground: #ffffff;
116
117
  --stuic-color-destructive-foreground-hover: #ffffff;
117
118
  --stuic-color-destructive-foreground-active: #ffffff;
118
119
 
119
120
  --stuic-color-warning: #fbbf24;
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%);
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%);
122
123
  --stuic-color-warning-foreground: #000000;
123
124
  --stuic-color-warning-foreground-hover: #000000;
124
125
  --stuic-color-warning-foreground-active: #000000;
125
126
 
126
127
  --stuic-color-success: #10b981;
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%);
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%);
129
130
  --stuic-color-success-foreground: #ffffff;
130
131
  --stuic-color-success-foreground-hover: #ffffff;
131
132
  --stuic-color-success-foreground-active: #ffffff;