@marianmeres/stuic 3.48.0 → 3.50.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 (104) hide show
  1. package/AGENTS.md +3 -4
  2. package/API.md +5 -16
  3. package/dist/mcp.js +1 -1
  4. package/dist/themes/css/blue-orange.css +132 -132
  5. package/dist/themes/css/cyan-red.css +132 -132
  6. package/dist/themes/css/cyan-slate.css +132 -132
  7. package/dist/themes/css/emerald-amber-forest.css +132 -132
  8. package/dist/themes/css/emerald-pink.css +132 -132
  9. package/dist/themes/css/fuchsia-emerald.css +132 -132
  10. package/dist/themes/css/gray.css +132 -132
  11. package/dist/themes/css/indigo-amber.css +132 -132
  12. package/dist/themes/css/lime-fuchsia-neon.css +132 -132
  13. package/dist/themes/css/monokai-cyan.css +132 -132
  14. package/dist/themes/css/monokai-green.css +132 -132
  15. package/dist/themes/css/monokai-pink.css +132 -132
  16. package/dist/themes/css/orange-pink-sunset.css +132 -132
  17. package/dist/themes/css/pink-emerald.css +132 -132
  18. package/dist/themes/css/pink-teal.css +132 -132
  19. package/dist/themes/css/purple-yellow.css +132 -132
  20. package/dist/themes/css/rainbow.css +132 -132
  21. package/dist/themes/css/red-blue.css +132 -132
  22. package/dist/themes/css/red-cyan.css +132 -132
  23. package/dist/themes/css/red-sky-slate.css +132 -132
  24. package/dist/themes/css/red-sky.css +132 -132
  25. package/dist/themes/css/rose-teal.css +132 -132
  26. package/dist/themes/css/sky-amber.css +132 -132
  27. package/dist/themes/css/slate-cyan.css +132 -132
  28. package/dist/themes/css/slate-teal-ocean.css +132 -132
  29. package/dist/themes/css/stone-orange-earth.css +132 -132
  30. package/dist/themes/css/stone.css +132 -132
  31. package/dist/themes/css/teal-rose.css +132 -132
  32. package/dist/themes/css/violet-lime.css +132 -132
  33. package/dist/themes/css/violet-rose-dusk.css +132 -132
  34. package/dist/themes/css/zinc.css +132 -132
  35. package/dist/utils/design-tokens.d.ts +2 -47
  36. package/dist/utils/design-tokens.js +2 -204
  37. package/docs/domains/theming.md +9 -10
  38. package/docs/domains/utils.md +2 -2
  39. package/package.json +3 -6
  40. package/dist/themes/blue-orange.d.ts +0 -6
  41. package/dist/themes/blue-orange.js +0 -115
  42. package/dist/themes/css/dds.css +0 -217
  43. package/dist/themes/cyan-red.d.ts +0 -6
  44. package/dist/themes/cyan-red.js +0 -115
  45. package/dist/themes/cyan-slate.d.ts +0 -6
  46. package/dist/themes/cyan-slate.js +0 -115
  47. package/dist/themes/dds.d.ts +0 -6
  48. package/dist/themes/dds.js +0 -134
  49. package/dist/themes/emerald-amber-forest.d.ts +0 -6
  50. package/dist/themes/emerald-amber-forest.js +0 -115
  51. package/dist/themes/emerald-pink.d.ts +0 -6
  52. package/dist/themes/emerald-pink.js +0 -115
  53. package/dist/themes/fuchsia-emerald.d.ts +0 -6
  54. package/dist/themes/fuchsia-emerald.js +0 -115
  55. package/dist/themes/gray.d.ts +0 -6
  56. package/dist/themes/gray.js +0 -115
  57. package/dist/themes/indigo-amber.d.ts +0 -6
  58. package/dist/themes/indigo-amber.js +0 -115
  59. package/dist/themes/lime-fuchsia-neon.d.ts +0 -6
  60. package/dist/themes/lime-fuchsia-neon.js +0 -115
  61. package/dist/themes/monokai-cyan.d.ts +0 -6
  62. package/dist/themes/monokai-cyan.js +0 -117
  63. package/dist/themes/monokai-green.d.ts +0 -6
  64. package/dist/themes/monokai-green.js +0 -117
  65. package/dist/themes/monokai-pink.d.ts +0 -6
  66. package/dist/themes/monokai-pink.js +0 -117
  67. package/dist/themes/orange-pink-sunset.d.ts +0 -6
  68. package/dist/themes/orange-pink-sunset.js +0 -115
  69. package/dist/themes/pink-emerald.d.ts +0 -6
  70. package/dist/themes/pink-emerald.js +0 -115
  71. package/dist/themes/pink-teal.d.ts +0 -6
  72. package/dist/themes/pink-teal.js +0 -115
  73. package/dist/themes/purple-yellow.d.ts +0 -6
  74. package/dist/themes/purple-yellow.js +0 -115
  75. package/dist/themes/rainbow.d.ts +0 -6
  76. package/dist/themes/rainbow.js +0 -120
  77. package/dist/themes/red-blue.d.ts +0 -6
  78. package/dist/themes/red-blue.js +0 -115
  79. package/dist/themes/red-cyan.d.ts +0 -6
  80. package/dist/themes/red-cyan.js +0 -115
  81. package/dist/themes/red-sky-slate.d.ts +0 -6
  82. package/dist/themes/red-sky-slate.js +0 -115
  83. package/dist/themes/red-sky.d.ts +0 -6
  84. package/dist/themes/red-sky.js +0 -115
  85. package/dist/themes/rose-teal.d.ts +0 -6
  86. package/dist/themes/rose-teal.js +0 -115
  87. package/dist/themes/sky-amber.d.ts +0 -6
  88. package/dist/themes/sky-amber.js +0 -115
  89. package/dist/themes/slate-cyan.d.ts +0 -6
  90. package/dist/themes/slate-cyan.js +0 -115
  91. package/dist/themes/slate-teal-ocean.d.ts +0 -6
  92. package/dist/themes/slate-teal-ocean.js +0 -115
  93. package/dist/themes/stone-orange-earth.d.ts +0 -6
  94. package/dist/themes/stone-orange-earth.js +0 -115
  95. package/dist/themes/stone.d.ts +0 -6
  96. package/dist/themes/stone.js +0 -115
  97. package/dist/themes/teal-rose.d.ts +0 -6
  98. package/dist/themes/teal-rose.js +0 -115
  99. package/dist/themes/violet-lime.d.ts +0 -6
  100. package/dist/themes/violet-lime.js +0 -115
  101. package/dist/themes/violet-rose-dusk.d.ts +0 -6
  102. package/dist/themes/violet-rose-dusk.js +0 -115
  103. package/dist/themes/zinc.d.ts +0 -6
  104. package/dist/themes/zinc.js +0 -115
package/AGENTS.md CHANGED
@@ -26,7 +26,7 @@ src/lib/
26
26
  ├── components/ # 46 UI components
27
27
  ├── actions/ # 15 Svelte actions
28
28
  ├── utils/ # 43 utility modules
29
- ├── themes/ # 29 theme definitions (.ts) + generated CSS (css/)
29
+ ├── themes/ # Generated theme CSS (css/) — definitions from @marianmeres/design-tokens
30
30
  ├── icons/ # Icon re-exports
31
31
  ├── index.css # Centralized CSS imports
32
32
  └── index.ts # Main exports
@@ -92,9 +92,8 @@ src/lib/
92
92
  | -------------------------------- | ---------------------------------------------------------------------- |
93
93
  | `src/lib/index.css` | CSS entry point |
94
94
  | `src/lib/index.ts` | JS entry point |
95
- | `src/lib/utils/design-tokens.ts` | Theme types + CSS generation (`ThemeSchema`, `generateThemeCss`, etc.) |
96
- | `src/lib/themes/*.ts` | Theme definitions (29 themes, `TokenSchema`-typed) |
97
- | `src/lib/themes/css/stone.css` | Default theme (generated) |
95
+ | `src/lib/utils/design-tokens.ts` | Re-exports from `@marianmeres/design-tokens` |
96
+ | `src/lib/themes/css/stone.css` | Default theme (generated from `@marianmeres/design-tokens/themes`) |
98
97
  | `src/lib/components/Button/` | Reference component |
99
98
  | `scripts/generate-theme.ts` | CLI: `pnpm run build:theme:all` |
100
99
 
package/API.md CHANGED
@@ -1711,17 +1711,6 @@ Format a token record as a CSS selector block.
1711
1711
 
1712
1712
  **Returns:** `string` — CSS block string
1713
1713
 
1714
- #### `createDarkOverride(baseTokens, overrides)`
1715
-
1716
- Create a filtered dark mode token set from base tokens and overrides.
1717
-
1718
- **Parameters:**
1719
-
1720
- - `baseTokens` (GeneratedTokens) — Light mode tokens (used as key filter)
1721
- - `overrides` (Partial\<GeneratedTokens\>) — Dark mode values
1722
-
1723
- **Returns:** `GeneratedTokens`
1724
-
1725
1714
  ---
1726
1715
 
1727
1716
  ## Icons
@@ -1879,19 +1868,19 @@ Each component defines customization tokens. Override globally in `:root {}` or
1879
1868
  | property | `bg`, `text`, `border`, `ring`, `shadow`, `radius`, `padding` |
1880
1869
  | state | `hover`, `active`, `focus`, `disabled`, `error` |
1881
1870
 
1882
- ### Available Themes (29)
1871
+ ### Available Themes (31)
1883
1872
 
1884
- Default theme: `stone`.
1873
+ Default theme: `stone`. Theme definitions come from `@marianmeres/design-tokens`.
1885
1874
 
1886
1875
  ```ts
1887
1876
  // Import pre-built CSS
1888
1877
  import "@marianmeres/stuic/themes/css/blue-orange.css";
1889
1878
 
1890
- // Import theme definition object (to extend/customize)
1891
- import stone from "@marianmeres/stuic/themes/stone";
1879
+ // Import theme definition object (from design-tokens package)
1880
+ import { stone } from "@marianmeres/design-tokens/themes";
1892
1881
  ```
1893
1882
 
1894
- stone, gray, zinc, dds, blue-orange, cyan-red, cyan-slate, emerald-amber-forest, emerald-pink, fuchsia-emerald, indigo-amber, lime-fuchsia-neon, orange-pink-sunset, pink-emerald, pink-teal, purple-yellow, rainbow, red-blue, red-cyan, red-sky, red-sky-slate, rose-teal, sky-amber, slate-cyan, slate-teal-ocean, stone-orange-earth, teal-rose, violet-lime, violet-rose-dusk
1883
+ stone, gray, zinc, blue-orange, cyan-red, cyan-slate, emerald-amber-forest, emerald-pink, fuchsia-emerald, indigo-amber, lime-fuchsia-neon, monokai-cyan, monokai-green, monokai-pink, orange-pink-sunset, pink-emerald, pink-teal, purple-yellow, rainbow, red-blue, red-cyan, red-sky, red-sky-slate, rose-teal, sky-amber, slate-cyan, slate-teal-ocean, stone-orange-earth, teal-rose, violet-lime, violet-rose-dusk
1895
1884
 
1896
1885
  ### Dark Mode
1897
1886
 
package/dist/mcp.js CHANGED
@@ -9,7 +9,7 @@ export const tools = [
9
9
  "Accepts a ThemeSchema JSON with light (required) and dark (optional) TokenSchema objects. " +
10
10
  "Each TokenSchema defines intent colors (primary, accent, destructive, warning, success) " +
11
11
  "and role colors (background, muted, surface, foreground, border, input, ring). " +
12
- "Auto-derives hover/active states from Tailwind shade scales and generates surface tints.",
12
+ "Auto-derives hover/active states via color-mix() and generates surface tints.",
13
13
  params: {
14
14
  schema: z
15
15
  .string()
package/dist/themes/css/blue-orange.css CHANGED
@@ -1,44 +1,44 @@
1
1
  /* prettier-ignore */
2
2
  :root {
3
- --stuic-color-primary: var(--color-blue-600, #737373);
3
+ --stuic-color-primary: #2563eb;
4
4
 
5
- --stuic-color-primary-hover: var(--color-blue-700, #737373);
6
- --stuic-color-primary-active: var(--color-blue-800, #737373);
7
- --stuic-color-primary-foreground: var(--color-white, #ffffff);
8
- --stuic-color-primary-foreground-hover: var(--color-white, #ffffff);
9
- --stuic-color-primary-foreground-active: var(--color-white, #ffffff);
5
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), black 10%);
6
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), black 20%);
7
+ --stuic-color-primary-foreground: #ffffff;
8
+ --stuic-color-primary-foreground-hover: #ffffff;
9
+ --stuic-color-primary-foreground-active: #ffffff;
10
10
 
11
- --stuic-color-accent: var(--color-orange-500, #737373);
11
+ --stuic-color-accent: #f97316;
12
12
 
13
- --stuic-color-accent-hover: var(--color-orange-600, #737373);
14
- --stuic-color-accent-active: var(--color-orange-700, #737373);
15
- --stuic-color-accent-foreground: var(--color-white, #ffffff);
16
- --stuic-color-accent-foreground-hover: var(--color-white, #ffffff);
17
- --stuic-color-accent-foreground-active: var(--color-white, #ffffff);
13
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), black 10%);
14
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), black 20%);
15
+ --stuic-color-accent-foreground: #ffffff;
16
+ --stuic-color-accent-foreground-hover: #ffffff;
17
+ --stuic-color-accent-foreground-active: #ffffff;
18
18
 
19
- --stuic-color-destructive: var(--color-rose-600, #737373);
19
+ --stuic-color-destructive: #e11d48;
20
20
 
21
- --stuic-color-destructive-hover: var(--color-rose-700, #737373);
22
- --stuic-color-destructive-active: var(--color-rose-800, #737373);
23
- --stuic-color-destructive-foreground: var(--color-white, #ffffff);
24
- --stuic-color-destructive-foreground-hover: var(--color-white, #ffffff);
25
- --stuic-color-destructive-foreground-active: var(--color-white, #ffffff);
21
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), black 10%);
22
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), black 20%);
23
+ --stuic-color-destructive-foreground: #ffffff;
24
+ --stuic-color-destructive-foreground-hover: #ffffff;
25
+ --stuic-color-destructive-foreground-active: #ffffff;
26
26
 
27
- --stuic-color-warning: var(--color-orange-500, #737373);
27
+ --stuic-color-warning: #f97316;
28
28
 
29
- --stuic-color-warning-hover: var(--color-orange-600, #737373);
30
- --stuic-color-warning-active: var(--color-orange-700, #737373);
31
- --stuic-color-warning-foreground: var(--color-white, #ffffff);
32
- --stuic-color-warning-foreground-hover: var(--color-white, #ffffff);
33
- --stuic-color-warning-foreground-active: var(--color-white, #ffffff);
29
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), black 10%);
30
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), black 20%);
31
+ --stuic-color-warning-foreground: #ffffff;
32
+ --stuic-color-warning-foreground-hover: #ffffff;
33
+ --stuic-color-warning-foreground-active: #ffffff;
34
34
 
35
- --stuic-color-success: var(--color-teal-600, #737373);
35
+ --stuic-color-success: #0d9488;
36
36
 
37
- --stuic-color-success-hover: var(--color-teal-700, #737373);
38
- --stuic-color-success-active: var(--color-teal-800, #737373);
39
- --stuic-color-success-foreground: var(--color-white, #ffffff);
40
- --stuic-color-success-foreground-hover: var(--color-white, #ffffff);
41
- --stuic-color-success-foreground-active: var(--color-white, #ffffff);
37
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), black 10%);
38
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), black 20%);
39
+ --stuic-color-success-foreground: #ffffff;
40
+ --stuic-color-success-foreground-hover: #ffffff;
41
+ --stuic-color-success-foreground-active: #ffffff;
42
42
 
43
43
  --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
44
44
  --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 10%);
@@ -55,99 +55,99 @@
55
55
  --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
56
56
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 10%);
57
57
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
58
- --stuic-color-surface-hover: var(--color-stone-300, #737373);
59
- --stuic-color-surface-active: var(--color-stone-400, #737373);
60
- --stuic-color-surface-foreground: var(--color-stone-900, #737373);
61
- --stuic-color-surface-foreground-hover: var(--color-stone-900, #737373);
62
- --stuic-color-surface-foreground-active: var(--color-stone-900, #737373);
58
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), black 10%);
59
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), black 20%);
60
+ --stuic-color-surface-foreground: #1c1917;
61
+ --stuic-color-surface-foreground-hover: #1c1917;
62
+ --stuic-color-surface-foreground-active: #1c1917;
63
63
 
64
- --stuic-color-background: var(--color-white, #ffffff);
64
+ --stuic-color-background: #ffffff;
65
65
 
66
- --stuic-color-background-hover: var(--color-white, #ffffff);
67
- --stuic-color-background-active: var(--color-white, #ffffff);
68
- --stuic-color-background-foreground: var(--color-stone-900, #737373);
69
- --stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
70
- --stuic-color-background-foreground-active: var(--color-stone-900, #737373);
66
+ --stuic-color-background-hover: #ffffff;
67
+ --stuic-color-background-active: #ffffff;
68
+ --stuic-color-background-foreground: #1c1917;
69
+ --stuic-color-background-foreground-hover: #1c1917;
70
+ --stuic-color-background-foreground-active: #1c1917;
71
71
 
72
- --stuic-color-muted: var(--color-stone-100, #737373);
72
+ --stuic-color-muted: #f5f5f4;
73
73
 
74
- --stuic-color-muted-hover: var(--color-stone-200, #737373);
75
- --stuic-color-muted-active: var(--color-stone-300, #737373);
76
- --stuic-color-muted-foreground: var(--color-stone-500, #737373);
77
- --stuic-color-muted-foreground-hover: var(--color-stone-500, #737373);
78
- --stuic-color-muted-foreground-active: var(--color-stone-500, #737373);
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%);
76
+ --stuic-color-muted-foreground: #78716c;
77
+ --stuic-color-muted-foreground-hover: #78716c;
78
+ --stuic-color-muted-foreground-active: #78716c;
79
79
 
80
- --stuic-color-surface: var(--color-stone-200, #737373);
80
+ --stuic-color-surface: #e7e5e4;
81
81
 
82
- --stuic-color-surface-1: var(--color-stone-300, #737373);
83
- --stuic-color-surface-1-hover: var(--color-stone-400, #737373);
84
- --stuic-color-surface-1-active: var(--color-stone-500, #737373);
85
- --stuic-color-surface-1-foreground: var(--color-stone-900, #737373);
86
- --stuic-color-surface-1-foreground-hover: var(--color-stone-900, #737373);
87
- --stuic-color-surface-1-foreground-active: var(--color-stone-900, #737373);
82
+ --stuic-color-surface-1: #d6d3d1;
83
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), black 10%);
84
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), black 20%);
85
+ --stuic-color-surface-1-foreground: #1c1917;
86
+ --stuic-color-surface-1-foreground-hover: #1c1917;
87
+ --stuic-color-surface-1-foreground-active: #1c1917;
88
88
 
89
- --stuic-color-foreground: var(--color-stone-900, #737373);
89
+ --stuic-color-foreground: #1c1917;
90
90
 
91
- --stuic-color-foreground-hover: var(--color-stone-900, #737373);
92
- --stuic-color-foreground-active: var(--color-stone-900, #737373);
91
+ --stuic-color-foreground-hover: #1c1917;
92
+ --stuic-color-foreground-active: #1c1917;
93
93
 
94
- --stuic-color-border: var(--color-stone-300, #737373);
94
+ --stuic-color-border: #d6d3d1;
95
95
 
96
- --stuic-color-border-hover: var(--color-stone-400, #737373);
97
- --stuic-color-border-active: var(--color-stone-500, #737373);
96
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), black 10%);
97
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), black 20%);
98
98
 
99
- --stuic-color-input: var(--color-white, #ffffff);
99
+ --stuic-color-input: #ffffff;
100
100
 
101
- --stuic-color-input-hover: var(--color-stone-50, #737373);
102
- --stuic-color-input-active: var(--color-white, #ffffff);
101
+ --stuic-color-input-hover: #fafaf9;
102
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), black 20%);
103
103
 
104
- --stuic-color-ring: color-mix(in srgb, var(--color-blue-600) 20%, transparent);
104
+ --stuic-color-ring: color-mix(in srgb, #2563eb 20%, transparent);
105
105
 
106
- --stuic-color-ring-hover: color-mix(in srgb, var(--color-blue-600) 20%, transparent);
107
- --stuic-color-ring-active: color-mix(in srgb, var(--color-blue-600) 20%, transparent);
106
+ --stuic-color-ring-hover: color-mix(in srgb, #2563eb 20%, transparent);
107
+ --stuic-color-ring-active: color-mix(in srgb, #2563eb 20%, transparent);
108
108
  }
109
109
 
110
110
  /* prettier-ignore */
111
111
  :root.dark {
112
- --stuic-color-primary: var(--color-blue-500, #737373);
112
+ --stuic-color-primary: #3b82f6;
113
113
 
114
- --stuic-color-primary-hover: var(--color-blue-400, #737373);
115
- --stuic-color-primary-active: var(--color-blue-300, #737373);
116
- --stuic-color-primary-foreground: var(--color-white, #ffffff);
117
- --stuic-color-primary-foreground-hover: var(--color-white, #ffffff);
118
- --stuic-color-primary-foreground-active: var(--color-white, #ffffff);
114
+ --stuic-color-primary-hover: color-mix(in oklch, var(--stuic-color-primary), white 10%);
115
+ --stuic-color-primary-active: color-mix(in oklch, var(--stuic-color-primary), white 20%);
116
+ --stuic-color-primary-foreground: #ffffff;
117
+ --stuic-color-primary-foreground-hover: #ffffff;
118
+ --stuic-color-primary-foreground-active: #ffffff;
119
119
 
120
- --stuic-color-accent: var(--color-orange-400, #737373);
120
+ --stuic-color-accent: #fb923c;
121
121
 
122
- --stuic-color-accent-hover: var(--color-orange-300, #737373);
123
- --stuic-color-accent-active: var(--color-orange-200, #737373);
124
- --stuic-color-accent-foreground: var(--color-white, #ffffff);
125
- --stuic-color-accent-foreground-hover: var(--color-white, #ffffff);
126
- --stuic-color-accent-foreground-active: var(--color-white, #ffffff);
122
+ --stuic-color-accent-hover: color-mix(in oklch, var(--stuic-color-accent), white 10%);
123
+ --stuic-color-accent-active: color-mix(in oklch, var(--stuic-color-accent), white 20%);
124
+ --stuic-color-accent-foreground: #ffffff;
125
+ --stuic-color-accent-foreground-hover: #ffffff;
126
+ --stuic-color-accent-foreground-active: #ffffff;
127
127
 
128
- --stuic-color-destructive: var(--color-rose-500, #737373);
128
+ --stuic-color-destructive: #f43f5e;
129
129
 
130
- --stuic-color-destructive-hover: var(--color-rose-400, #737373);
131
- --stuic-color-destructive-active: var(--color-rose-300, #737373);
132
- --stuic-color-destructive-foreground: var(--color-white, #ffffff);
133
- --stuic-color-destructive-foreground-hover: var(--color-white, #ffffff);
134
- --stuic-color-destructive-foreground-active: var(--color-white, #ffffff);
130
+ --stuic-color-destructive-hover: color-mix(in oklch, var(--stuic-color-destructive), white 10%);
131
+ --stuic-color-destructive-active: color-mix(in oklch, var(--stuic-color-destructive), white 20%);
132
+ --stuic-color-destructive-foreground: #ffffff;
133
+ --stuic-color-destructive-foreground-hover: #ffffff;
134
+ --stuic-color-destructive-foreground-active: #ffffff;
135
135
 
136
- --stuic-color-warning: var(--color-orange-400, #737373);
136
+ --stuic-color-warning: #fb923c;
137
137
 
138
- --stuic-color-warning-hover: var(--color-orange-300, #737373);
139
- --stuic-color-warning-active: var(--color-orange-200, #737373);
140
- --stuic-color-warning-foreground: var(--color-white, #ffffff);
141
- --stuic-color-warning-foreground-hover: var(--color-white, #ffffff);
142
- --stuic-color-warning-foreground-active: var(--color-white, #ffffff);
138
+ --stuic-color-warning-hover: color-mix(in oklch, var(--stuic-color-warning), white 10%);
139
+ --stuic-color-warning-active: color-mix(in oklch, var(--stuic-color-warning), white 20%);
140
+ --stuic-color-warning-foreground: #ffffff;
141
+ --stuic-color-warning-foreground-hover: #ffffff;
142
+ --stuic-color-warning-foreground-active: #ffffff;
143
143
 
144
- --stuic-color-success: var(--color-teal-500, #737373);
144
+ --stuic-color-success: #14b8a6;
145
145
 
146
- --stuic-color-success-hover: var(--color-teal-400, #737373);
147
- --stuic-color-success-active: var(--color-teal-300, #737373);
148
- --stuic-color-success-foreground: var(--color-white, #ffffff);
149
- --stuic-color-success-foreground-hover: var(--color-white, #ffffff);
150
- --stuic-color-success-foreground-active: var(--color-white, #ffffff);
146
+ --stuic-color-success-hover: color-mix(in oklch, var(--stuic-color-success), white 10%);
147
+ --stuic-color-success-active: color-mix(in oklch, var(--stuic-color-success), white 20%);
148
+ --stuic-color-success-foreground: #ffffff;
149
+ --stuic-color-success-foreground-hover: #ffffff;
150
+ --stuic-color-success-foreground-active: #ffffff;
151
151
 
152
152
  --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
153
153
  --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 10%);
@@ -164,54 +164,54 @@
164
164
  --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
165
165
  --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
166
166
  --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
167
- --stuic-color-surface-hover: var(--color-stone-600, #737373);
168
- --stuic-color-surface-active: var(--color-stone-500, #737373);
169
- --stuic-color-surface-foreground: var(--color-stone-300, #737373);
170
- --stuic-color-surface-foreground-hover: var(--color-stone-300, #737373);
171
- --stuic-color-surface-foreground-active: var(--color-stone-300, #737373);
167
+ --stuic-color-surface-hover: color-mix(in oklch, var(--stuic-color-surface), white 10%);
168
+ --stuic-color-surface-active: color-mix(in oklch, var(--stuic-color-surface), white 20%);
169
+ --stuic-color-surface-foreground: #d6d3d1;
170
+ --stuic-color-surface-foreground-hover: #d6d3d1;
171
+ --stuic-color-surface-foreground-active: #d6d3d1;
172
172
 
173
- --stuic-color-background: var(--color-stone-900, #737373);
173
+ --stuic-color-background: #1c1917;
174
174
 
175
- --stuic-color-background-hover: var(--color-stone-900, #737373);
176
- --stuic-color-background-active: var(--color-stone-900, #737373);
177
- --stuic-color-background-foreground: var(--color-stone-50, #737373);
178
- --stuic-color-background-foreground-hover: var(--color-stone-50, #737373);
179
- --stuic-color-background-foreground-active: var(--color-stone-50, #737373);
175
+ --stuic-color-background-hover: #1c1917;
176
+ --stuic-color-background-active: #1c1917;
177
+ --stuic-color-background-foreground: #fafaf9;
178
+ --stuic-color-background-foreground-hover: #fafaf9;
179
+ --stuic-color-background-foreground-active: #fafaf9;
180
180
 
181
- --stuic-color-muted: var(--color-stone-800, #737373);
181
+ --stuic-color-muted: #292524;
182
182
 
183
- --stuic-color-muted-hover: var(--color-stone-700, #737373);
184
- --stuic-color-muted-active: var(--color-stone-600, #737373);
185
- --stuic-color-muted-foreground: var(--color-stone-400, #737373);
186
- --stuic-color-muted-foreground-hover: var(--color-stone-400, #737373);
187
- --stuic-color-muted-foreground-active: var(--color-stone-400, #737373);
183
+ --stuic-color-muted-hover: color-mix(in oklch, var(--stuic-color-muted), white 10%);
184
+ --stuic-color-muted-active: color-mix(in oklch, var(--stuic-color-muted), white 20%);
185
+ --stuic-color-muted-foreground: #a8a29e;
186
+ --stuic-color-muted-foreground-hover: #a8a29e;
187
+ --stuic-color-muted-foreground-active: #a8a29e;
188
188
 
189
- --stuic-color-surface: var(--color-stone-700, #737373);
189
+ --stuic-color-surface: #44403c;
190
190
 
191
- --stuic-color-surface-1: var(--color-stone-600, #737373);
192
- --stuic-color-surface-1-hover: var(--color-stone-500, #737373);
193
- --stuic-color-surface-1-active: var(--color-stone-400, #737373);
194
- --stuic-color-surface-1-foreground: var(--color-stone-200, #737373);
195
- --stuic-color-surface-1-foreground-hover: var(--color-stone-200, #737373);
196
- --stuic-color-surface-1-foreground-active: var(--color-stone-200, #737373);
191
+ --stuic-color-surface-1: #57534e;
192
+ --stuic-color-surface-1-hover: color-mix(in oklch, var(--stuic-color-surface-1), white 10%);
193
+ --stuic-color-surface-1-active: color-mix(in oklch, var(--stuic-color-surface-1), white 20%);
194
+ --stuic-color-surface-1-foreground: #e7e5e4;
195
+ --stuic-color-surface-1-foreground-hover: #e7e5e4;
196
+ --stuic-color-surface-1-foreground-active: #e7e5e4;
197
197
 
198
- --stuic-color-foreground: var(--color-stone-50, #737373);
198
+ --stuic-color-foreground: #fafaf9;
199
199
 
200
- --stuic-color-foreground-hover: var(--color-stone-50, #737373);
201
- --stuic-color-foreground-active: var(--color-stone-50, #737373);
200
+ --stuic-color-foreground-hover: #fafaf9;
201
+ --stuic-color-foreground-active: #fafaf9;
202
202
 
203
- --stuic-color-border: var(--color-stone-700, #737373);
203
+ --stuic-color-border: #44403c;
204
204
 
205
- --stuic-color-border-hover: var(--color-stone-600, #737373);
206
- --stuic-color-border-active: var(--color-stone-500, #737373);
205
+ --stuic-color-border-hover: color-mix(in oklch, var(--stuic-color-border), white 10%);
206
+ --stuic-color-border-active: color-mix(in oklch, var(--stuic-color-border), white 20%);
207
207
 
208
- --stuic-color-input: var(--color-stone-900, #737373);
208
+ --stuic-color-input: #1c1917;
209
209
 
210
- --stuic-color-input-hover: var(--color-stone-800, #737373);
211
- --stuic-color-input-active: var(--color-stone-700, #737373);
210
+ --stuic-color-input-hover: #292524;
211
+ --stuic-color-input-active: color-mix(in oklch, var(--stuic-color-input), white 20%);
212
212
 
213
- --stuic-color-ring: color-mix(in srgb, var(--color-blue-400) 25%, transparent);
213
+ --stuic-color-ring: color-mix(in srgb, #60a5fa 25%, transparent);
214
214
 
215
- --stuic-color-ring-hover: color-mix(in srgb, var(--color-blue-400) 25%, transparent);
216
- --stuic-color-ring-active: color-mix(in srgb, var(--color-blue-400) 25%, transparent);
215
+ --stuic-color-ring-hover: color-mix(in srgb, #60a5fa 25%, transparent);
216
+ --stuic-color-ring-active: color-mix(in srgb, #60a5fa 25%, transparent);
217
217
  }