@marianmeres/stuic 3.0.2 → 3.0.3

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 (43) hide show
  1. package/dist/components/DismissibleMessage/DismissibleMessage.svelte +1 -1
  2. package/dist/components/ThemePreview/index.css +4 -5
  3. package/dist/index.css +1 -1
  4. package/dist/themes/css/emerald-amber-forest.css +253 -0
  5. package/dist/themes/css/lime-fuchsia-neon.css +253 -0
  6. package/dist/themes/css/orange-pink-sunset.css +253 -0
  7. package/dist/themes/css/slate-teal-ocean.css +253 -0
  8. package/dist/themes/css/stone-orange-earth.css +253 -0
  9. package/dist/themes/css/violet-rose-dusk.css +253 -0
  10. package/dist/themes/emerald-amber-forest.d.ts +6 -0
  11. package/dist/themes/emerald-amber-forest.js +175 -0
  12. package/dist/themes/lime-fuchsia-neon.d.ts +6 -0
  13. package/dist/themes/lime-fuchsia-neon.js +175 -0
  14. package/dist/themes/orange-pink-sunset.d.ts +6 -0
  15. package/dist/themes/orange-pink-sunset.js +175 -0
  16. package/dist/themes/slate-teal-ocean.d.ts +6 -0
  17. package/dist/themes/slate-teal-ocean.js +175 -0
  18. package/dist/themes/stone-orange-earth.d.ts +6 -0
  19. package/dist/themes/stone-orange-earth.js +175 -0
  20. package/dist/themes/violet-rose-dusk.d.ts +6 -0
  21. package/dist/themes/violet-rose-dusk.js +175 -0
  22. package/package.json +2 -2
  23. package/dist/base.css +0 -17
  24. /package/dist/themes/{blue-orange.css → css/blue-orange.css} +0 -0
  25. /package/dist/themes/{cyan-red.css → css/cyan-red.css} +0 -0
  26. /package/dist/themes/{cyan-slate.css → css/cyan-slate.css} +0 -0
  27. /package/dist/themes/{emerald-pink.css → css/emerald-pink.css} +0 -0
  28. /package/dist/themes/{fuchsia-emerald.css → css/fuchsia-emerald.css} +0 -0
  29. /package/dist/themes/{gray.css → css/gray.css} +0 -0
  30. /package/dist/themes/{indigo-amber.css → css/indigo-amber.css} +0 -0
  31. /package/dist/themes/{neutral.css → css/neutral.css} +0 -0
  32. /package/dist/themes/{pink-emerald.css → css/pink-emerald.css} +0 -0
  33. /package/dist/themes/{pink-teal.css → css/pink-teal.css} +0 -0
  34. /package/dist/themes/{purple-yellow.css → css/purple-yellow.css} +0 -0
  35. /package/dist/themes/{rainbow.css → css/rainbow.css} +0 -0
  36. /package/dist/themes/{red-blue.css → css/red-blue.css} +0 -0
  37. /package/dist/themes/{red-cyan.css → css/red-cyan.css} +0 -0
  38. /package/dist/themes/{red-sky.css → css/red-sky.css} +0 -0
  39. /package/dist/themes/{rose-teal.css → css/rose-teal.css} +0 -0
  40. /package/dist/themes/{sky-amber.css → css/sky-amber.css} +0 -0
  41. /package/dist/themes/{slate-cyan.css → css/slate-cyan.css} +0 -0
  42. /package/dist/themes/{teal-rose.css → css/teal-rose.css} +0 -0
  43. /package/dist/themes/{violet-lime.css → css/violet-lime.css} +0 -0
package/dist/themes/css/orange-pink-sunset.css ADDED
@@ -0,0 +1,253 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: var(--color-orange-600, #737373);
4
+
5
+ --stuic-color-primary-hover: var(--color-orange-700, #737373);
6
+ --stuic-color-primary-active: var(--color-orange-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);
10
+
11
+ --stuic-color-accent: var(--color-pink-500, #737373);
12
+
13
+ --stuic-color-accent-hover: var(--color-pink-600, #737373);
14
+ --stuic-color-accent-active: var(--color-pink-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);
18
+
19
+ --stuic-color-destructive: var(--color-red-600, #737373);
20
+
21
+ --stuic-color-destructive-hover: var(--color-red-700, #737373);
22
+ --stuic-color-destructive-active: var(--color-red-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);
26
+
27
+ --stuic-color-warning: var(--color-amber-500, #737373);
28
+
29
+ --stuic-color-warning-hover: var(--color-amber-600, #737373);
30
+ --stuic-color-warning-active: var(--color-amber-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);
34
+
35
+ --stuic-color-success: var(--color-emerald-600, #737373);
36
+
37
+ --stuic-color-success-hover: var(--color-emerald-700, #737373);
38
+ --stuic-color-success-active: var(--color-emerald-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);
42
+
43
+ --stuic-color-info: var(--color-sky-500, #737373);
44
+
45
+ --stuic-color-info-hover: var(--color-sky-600, #737373);
46
+ --stuic-color-info-active: var(--color-sky-700, #737373);
47
+ --stuic-color-info-foreground: var(--color-white, #ffffff);
48
+ --stuic-color-info-foreground-hover: var(--color-white, #ffffff);
49
+ --stuic-color-info-foreground-active: var(--color-white, #ffffff);
50
+
51
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
52
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 10%);
53
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
54
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
55
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 10%);
56
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
57
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
58
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 10%);
59
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
60
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
61
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 10%);
62
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
63
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
64
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 10%);
65
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
66
+ --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
+ --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
+ --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
+ --stuic-color-surface-hover: var(--color-amber-100, #737373);
70
+ --stuic-color-surface-active: var(--color-amber-200, #737373);
71
+ --stuic-color-surface-foreground: var(--color-stone-900, #737373);
72
+ --stuic-color-surface-foreground-hover: var(--color-stone-900, #737373);
73
+ --stuic-color-surface-foreground-active: var(--color-stone-900, #737373);
74
+
75
+ --stuic-color-background: var(--color-orange-50, #737373);
76
+
77
+ --stuic-color-background-hover: var(--color-orange-50, #737373);
78
+ --stuic-color-background-active: var(--color-orange-50, #737373);
79
+ --stuic-color-background-foreground: var(--color-stone-900, #737373);
80
+ --stuic-color-background-foreground-hover: var(--color-stone-900, #737373);
81
+ --stuic-color-background-foreground-active: var(--color-stone-900, #737373);
82
+
83
+ --stuic-color-surface: var(--color-amber-50, #737373);
84
+
85
+ --stuic-color-surface-1: var(--color-amber-100, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-amber-200, #737373);
87
+ --stuic-color-surface-1-active: var(--color-amber-300, #737373);
88
+ --stuic-color-surface-1-foreground: var(--color-stone-900, #737373);
89
+ --stuic-color-surface-1-foreground-hover: var(--color-stone-900, #737373);
90
+ --stuic-color-surface-1-foreground-active: var(--color-stone-900, #737373);
91
+
92
+ --stuic-color-surface-2: var(--color-amber-200, #737373);
93
+ --stuic-color-surface-2-hover: var(--color-amber-300, #737373);
94
+ --stuic-color-surface-2-active: var(--color-amber-400, #737373);
95
+ --stuic-color-surface-2-foreground: var(--color-stone-900, #737373);
96
+ --stuic-color-surface-2-foreground-hover: var(--color-stone-900, #737373);
97
+ --stuic-color-surface-2-foreground-active: var(--color-stone-900, #737373);
98
+
99
+ --stuic-color-muted: var(--color-amber-100, #737373);
100
+
101
+ --stuic-color-muted-hover: var(--color-amber-200, #737373);
102
+ --stuic-color-muted-active: var(--color-amber-300, #737373);
103
+ --stuic-color-muted-foreground: var(--color-stone-500, #737373);
104
+ --stuic-color-muted-foreground-hover: var(--color-stone-500, #737373);
105
+ --stuic-color-muted-foreground-active: var(--color-stone-500, #737373);
106
+
107
+ --stuic-color-foreground: var(--color-stone-900, #737373);
108
+
109
+ --stuic-color-foreground-hover: var(--color-stone-900, #737373);
110
+ --stuic-color-foreground-active: var(--color-stone-900, #737373);
111
+
112
+ --stuic-color-border: var(--color-amber-200, #737373);
113
+
114
+ --stuic-color-border-hover: var(--color-amber-300, #737373);
115
+ --stuic-color-border-active: var(--color-amber-400, #737373);
116
+
117
+ --stuic-color-input: var(--color-white, #ffffff);
118
+
119
+ --stuic-color-input-hover: var(--color-orange-50, #737373);
120
+ --stuic-color-input-active: var(--color-white, #ffffff);
121
+
122
+ --stuic-color-ring: color-mix(in srgb, var(--color-orange-600) 20%, transparent);
123
+
124
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-orange-600) 20%, transparent);
125
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-orange-600) 20%, transparent);
126
+ }
127
+
128
+ /* prettier-ignore */
129
+ :root.dark {
130
+ --stuic-color-primary: var(--color-orange-500, #737373);
131
+
132
+ --stuic-color-primary-hover: var(--color-orange-400, #737373);
133
+ --stuic-color-primary-active: var(--color-orange-300, #737373);
134
+ --stuic-color-primary-foreground: var(--color-black, #000000);
135
+ --stuic-color-primary-foreground-hover: var(--color-black, #000000);
136
+ --stuic-color-primary-foreground-active: var(--color-black, #000000);
137
+
138
+ --stuic-color-accent: var(--color-pink-400, #737373);
139
+
140
+ --stuic-color-accent-hover: var(--color-pink-300, #737373);
141
+ --stuic-color-accent-active: var(--color-pink-200, #737373);
142
+ --stuic-color-accent-foreground: var(--color-white, #ffffff);
143
+ --stuic-color-accent-foreground-hover: var(--color-white, #ffffff);
144
+ --stuic-color-accent-foreground-active: var(--color-white, #ffffff);
145
+
146
+ --stuic-color-destructive: var(--color-red-500, #737373);
147
+
148
+ --stuic-color-destructive-hover: var(--color-red-400, #737373);
149
+ --stuic-color-destructive-active: var(--color-red-300, #737373);
150
+ --stuic-color-destructive-foreground: var(--color-white, #ffffff);
151
+ --stuic-color-destructive-foreground-hover: var(--color-white, #ffffff);
152
+ --stuic-color-destructive-foreground-active: var(--color-white, #ffffff);
153
+
154
+ --stuic-color-warning: var(--color-amber-400, #737373);
155
+
156
+ --stuic-color-warning-hover: var(--color-amber-300, #737373);
157
+ --stuic-color-warning-active: var(--color-amber-200, #737373);
158
+ --stuic-color-warning-foreground: var(--color-black, #000000);
159
+ --stuic-color-warning-foreground-hover: var(--color-black, #000000);
160
+ --stuic-color-warning-foreground-active: var(--color-black, #000000);
161
+
162
+ --stuic-color-success: var(--color-emerald-500, #737373);
163
+
164
+ --stuic-color-success-hover: var(--color-emerald-400, #737373);
165
+ --stuic-color-success-active: var(--color-emerald-300, #737373);
166
+ --stuic-color-success-foreground: var(--color-white, #ffffff);
167
+ --stuic-color-success-foreground-hover: var(--color-white, #ffffff);
168
+ --stuic-color-success-foreground-active: var(--color-white, #ffffff);
169
+
170
+ --stuic-color-info: var(--color-sky-400, #737373);
171
+
172
+ --stuic-color-info-hover: var(--color-sky-300, #737373);
173
+ --stuic-color-info-active: var(--color-sky-200, #737373);
174
+ --stuic-color-info-foreground: var(--color-black, #000000);
175
+ --stuic-color-info-foreground-hover: var(--color-black, #000000);
176
+ --stuic-color-info-foreground-active: var(--color-black, #000000);
177
+
178
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
179
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 10%);
180
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
181
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
182
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 10%);
183
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
184
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
185
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
186
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
187
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
188
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 10%);
189
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
190
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
191
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
192
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
193
+ --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
194
+ --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), white 10%);
195
+ --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
196
+ --stuic-color-surface-hover: var(--color-stone-800, #737373);
197
+ --stuic-color-surface-active: var(--color-stone-700, #737373);
198
+ --stuic-color-surface-foreground: var(--color-stone-100, #737373);
199
+ --stuic-color-surface-foreground-hover: var(--color-stone-100, #737373);
200
+ --stuic-color-surface-foreground-active: var(--color-stone-100, #737373);
201
+
202
+ --stuic-color-background: var(--color-stone-950, #737373);
203
+
204
+ --stuic-color-background-hover: var(--color-stone-950, #737373);
205
+ --stuic-color-background-active: var(--color-stone-950, #737373);
206
+ --stuic-color-background-foreground: var(--color-stone-50, #737373);
207
+ --stuic-color-background-foreground-hover: var(--color-stone-50, #737373);
208
+ --stuic-color-background-foreground-active: var(--color-stone-50, #737373);
209
+
210
+ --stuic-color-surface: var(--color-stone-900, #737373);
211
+
212
+ --stuic-color-surface-1: var(--color-stone-800, #737373);
213
+ --stuic-color-surface-1-hover: var(--color-stone-700, #737373);
214
+ --stuic-color-surface-1-active: var(--color-stone-600, #737373);
215
+ --stuic-color-surface-1-foreground: var(--color-stone-100, #737373);
216
+ --stuic-color-surface-1-foreground-hover: var(--color-stone-100, #737373);
217
+ --stuic-color-surface-1-foreground-active: var(--color-stone-100, #737373);
218
+
219
+ --stuic-color-surface-2: var(--color-stone-700, #737373);
220
+ --stuic-color-surface-2-hover: var(--color-stone-600, #737373);
221
+ --stuic-color-surface-2-active: var(--color-stone-500, #737373);
222
+ --stuic-color-surface-2-foreground: var(--color-stone-100, #737373);
223
+ --stuic-color-surface-2-foreground-hover: var(--color-stone-100, #737373);
224
+ --stuic-color-surface-2-foreground-active: var(--color-stone-100, #737373);
225
+
226
+ --stuic-color-muted: var(--color-stone-800, #737373);
227
+
228
+ --stuic-color-muted-hover: var(--color-stone-700, #737373);
229
+ --stuic-color-muted-active: var(--color-stone-600, #737373);
230
+ --stuic-color-muted-foreground: var(--color-stone-500, #737373);
231
+ --stuic-color-muted-foreground-hover: var(--color-stone-500, #737373);
232
+ --stuic-color-muted-foreground-active: var(--color-stone-500, #737373);
233
+
234
+ --stuic-color-foreground: var(--color-stone-50, #737373);
235
+
236
+ --stuic-color-foreground-hover: var(--color-stone-50, #737373);
237
+ --stuic-color-foreground-active: var(--color-stone-50, #737373);
238
+
239
+ --stuic-color-border: var(--color-stone-700, #737373);
240
+
241
+ --stuic-color-border-hover: var(--color-stone-600, #737373);
242
+ --stuic-color-border-active: var(--color-stone-500, #737373);
243
+
244
+ --stuic-color-input: var(--color-stone-900, #737373);
245
+
246
+ --stuic-color-input-hover: var(--color-stone-800, #737373);
247
+ --stuic-color-input-active: var(--color-stone-900, #737373);
248
+
249
+ --stuic-color-ring: color-mix(in srgb, var(--color-orange-500) 25%, transparent);
250
+
251
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-orange-500) 25%, transparent);
252
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-orange-500) 25%, transparent);
253
+ }
package/dist/themes/css/slate-teal-ocean.css ADDED
@@ -0,0 +1,253 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: var(--color-slate-700, #737373);
4
+
5
+ --stuic-color-primary-hover: var(--color-slate-800, #737373);
6
+ --stuic-color-primary-active: var(--color-slate-900, #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);
10
+
11
+ --stuic-color-accent: var(--color-teal-500, #737373);
12
+
13
+ --stuic-color-accent-hover: var(--color-teal-600, #737373);
14
+ --stuic-color-accent-active: var(--color-teal-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);
18
+
19
+ --stuic-color-destructive: var(--color-red-600, #737373);
20
+
21
+ --stuic-color-destructive-hover: var(--color-red-700, #737373);
22
+ --stuic-color-destructive-active: var(--color-red-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);
26
+
27
+ --stuic-color-warning: var(--color-amber-500, #737373);
28
+
29
+ --stuic-color-warning-hover: var(--color-amber-600, #737373);
30
+ --stuic-color-warning-active: var(--color-amber-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);
34
+
35
+ --stuic-color-success: var(--color-teal-600, #737373);
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);
42
+
43
+ --stuic-color-info: var(--color-cyan-500, #737373);
44
+
45
+ --stuic-color-info-hover: var(--color-cyan-600, #737373);
46
+ --stuic-color-info-active: var(--color-cyan-700, #737373);
47
+ --stuic-color-info-foreground: var(--color-white, #ffffff);
48
+ --stuic-color-info-foreground-hover: var(--color-white, #ffffff);
49
+ --stuic-color-info-foreground-active: var(--color-white, #ffffff);
50
+
51
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
52
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 10%);
53
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
54
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
55
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 10%);
56
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
57
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
58
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 10%);
59
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
60
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
61
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 10%);
62
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
63
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
64
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 10%);
65
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
66
+ --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
67
+ --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), black 10%);
68
+ --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
69
+ --stuic-color-surface-hover: var(--color-slate-200, #737373);
70
+ --stuic-color-surface-active: var(--color-slate-300, #737373);
71
+ --stuic-color-surface-foreground: var(--color-slate-900, #737373);
72
+ --stuic-color-surface-foreground-hover: var(--color-slate-900, #737373);
73
+ --stuic-color-surface-foreground-active: var(--color-slate-900, #737373);
74
+
75
+ --stuic-color-background: var(--color-slate-50, #737373);
76
+
77
+ --stuic-color-background-hover: var(--color-slate-50, #737373);
78
+ --stuic-color-background-active: var(--color-slate-50, #737373);
79
+ --stuic-color-background-foreground: var(--color-slate-900, #737373);
80
+ --stuic-color-background-foreground-hover: var(--color-slate-900, #737373);
81
+ --stuic-color-background-foreground-active: var(--color-slate-900, #737373);
82
+
83
+ --stuic-color-surface: var(--color-slate-100, #737373);
84
+
85
+ --stuic-color-surface-1: var(--color-slate-200, #737373);
86
+ --stuic-color-surface-1-hover: var(--color-slate-300, #737373);
87
+ --stuic-color-surface-1-active: var(--color-slate-400, #737373);
88
+ --stuic-color-surface-1-foreground: var(--color-slate-900, #737373);
89
+ --stuic-color-surface-1-foreground-hover: var(--color-slate-900, #737373);
90
+ --stuic-color-surface-1-foreground-active: var(--color-slate-900, #737373);
91
+
92
+ --stuic-color-surface-2: var(--color-slate-300, #737373);
93
+ --stuic-color-surface-2-hover: var(--color-slate-400, #737373);
94
+ --stuic-color-surface-2-active: var(--color-slate-500, #737373);
95
+ --stuic-color-surface-2-foreground: var(--color-slate-900, #737373);
96
+ --stuic-color-surface-2-foreground-hover: var(--color-slate-900, #737373);
97
+ --stuic-color-surface-2-foreground-active: var(--color-slate-900, #737373);
98
+
99
+ --stuic-color-muted: var(--color-slate-200, #737373);
100
+
101
+ --stuic-color-muted-hover: var(--color-slate-300, #737373);
102
+ --stuic-color-muted-active: var(--color-slate-400, #737373);
103
+ --stuic-color-muted-foreground: var(--color-slate-500, #737373);
104
+ --stuic-color-muted-foreground-hover: var(--color-slate-500, #737373);
105
+ --stuic-color-muted-foreground-active: var(--color-slate-500, #737373);
106
+
107
+ --stuic-color-foreground: var(--color-slate-900, #737373);
108
+
109
+ --stuic-color-foreground-hover: var(--color-slate-900, #737373);
110
+ --stuic-color-foreground-active: var(--color-slate-900, #737373);
111
+
112
+ --stuic-color-border: var(--color-slate-300, #737373);
113
+
114
+ --stuic-color-border-hover: var(--color-slate-400, #737373);
115
+ --stuic-color-border-active: var(--color-slate-500, #737373);
116
+
117
+ --stuic-color-input: var(--color-white, #ffffff);
118
+
119
+ --stuic-color-input-hover: var(--color-slate-50, #737373);
120
+ --stuic-color-input-active: var(--color-white, #ffffff);
121
+
122
+ --stuic-color-ring: color-mix(in srgb, var(--color-teal-500) 20%, transparent);
123
+
124
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-teal-500) 20%, transparent);
125
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-teal-500) 20%, transparent);
126
+ }
127
+
128
+ /* prettier-ignore */
129
+ :root.dark {
130
+ --stuic-color-primary: var(--color-slate-400, #737373);
131
+
132
+ --stuic-color-primary-hover: var(--color-slate-300, #737373);
133
+ --stuic-color-primary-active: var(--color-slate-200, #737373);
134
+ --stuic-color-primary-foreground: var(--color-slate-950, #737373);
135
+ --stuic-color-primary-foreground-hover: var(--color-slate-950, #737373);
136
+ --stuic-color-primary-foreground-active: var(--color-slate-950, #737373);
137
+
138
+ --stuic-color-accent: var(--color-teal-400, #737373);
139
+
140
+ --stuic-color-accent-hover: var(--color-teal-300, #737373);
141
+ --stuic-color-accent-active: var(--color-teal-200, #737373);
142
+ --stuic-color-accent-foreground: var(--color-white, #ffffff);
143
+ --stuic-color-accent-foreground-hover: var(--color-white, #ffffff);
144
+ --stuic-color-accent-foreground-active: var(--color-white, #ffffff);
145
+
146
+ --stuic-color-destructive: var(--color-red-500, #737373);
147
+
148
+ --stuic-color-destructive-hover: var(--color-red-400, #737373);
149
+ --stuic-color-destructive-active: var(--color-red-300, #737373);
150
+ --stuic-color-destructive-foreground: var(--color-white, #ffffff);
151
+ --stuic-color-destructive-foreground-hover: var(--color-white, #ffffff);
152
+ --stuic-color-destructive-foreground-active: var(--color-white, #ffffff);
153
+
154
+ --stuic-color-warning: var(--color-amber-400, #737373);
155
+
156
+ --stuic-color-warning-hover: var(--color-amber-300, #737373);
157
+ --stuic-color-warning-active: var(--color-amber-200, #737373);
158
+ --stuic-color-warning-foreground: var(--color-black, #000000);
159
+ --stuic-color-warning-foreground-hover: var(--color-black, #000000);
160
+ --stuic-color-warning-foreground-active: var(--color-black, #000000);
161
+
162
+ --stuic-color-success: var(--color-teal-500, #737373);
163
+
164
+ --stuic-color-success-hover: var(--color-teal-400, #737373);
165
+ --stuic-color-success-active: var(--color-teal-300, #737373);
166
+ --stuic-color-success-foreground: var(--color-white, #ffffff);
167
+ --stuic-color-success-foreground-hover: var(--color-white, #ffffff);
168
+ --stuic-color-success-foreground-active: var(--color-white, #ffffff);
169
+
170
+ --stuic-color-info: var(--color-cyan-400, #737373);
171
+
172
+ --stuic-color-info-hover: var(--color-cyan-300, #737373);
173
+ --stuic-color-info-active: var(--color-cyan-200, #737373);
174
+ --stuic-color-info-foreground: var(--color-black, #000000);
175
+ --stuic-color-info-foreground-hover: var(--color-black, #000000);
176
+ --stuic-color-info-foreground-active: var(--color-black, #000000);
177
+
178
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
179
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 10%);
180
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
181
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
182
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 10%);
183
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
184
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
185
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 10%);
186
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
187
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
188
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 10%);
189
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
190
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
191
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 10%);
192
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
193
+ --stuic-color-surface-info: color-mix(in srgb, var(--stuic-color-info) 15%, var(--stuic-color-background));
194
+ --stuic-color-surface-info-foreground: color-mix(in srgb, var(--stuic-color-info), white 10%);
195
+ --stuic-color-surface-info-border: color-mix(in srgb, var(--stuic-color-info) 30%, var(--stuic-color-background));
196
+ --stuic-color-surface-hover: var(--color-slate-800, #737373);
197
+ --stuic-color-surface-active: var(--color-slate-700, #737373);
198
+ --stuic-color-surface-foreground: var(--color-slate-100, #737373);
199
+ --stuic-color-surface-foreground-hover: var(--color-slate-100, #737373);
200
+ --stuic-color-surface-foreground-active: var(--color-slate-100, #737373);
201
+
202
+ --stuic-color-background: var(--color-slate-950, #737373);
203
+
204
+ --stuic-color-background-hover: var(--color-slate-950, #737373);
205
+ --stuic-color-background-active: var(--color-slate-950, #737373);
206
+ --stuic-color-background-foreground: var(--color-slate-50, #737373);
207
+ --stuic-color-background-foreground-hover: var(--color-slate-50, #737373);
208
+ --stuic-color-background-foreground-active: var(--color-slate-50, #737373);
209
+
210
+ --stuic-color-surface: var(--color-slate-900, #737373);
211
+
212
+ --stuic-color-surface-1: var(--color-slate-800, #737373);
213
+ --stuic-color-surface-1-hover: var(--color-slate-700, #737373);
214
+ --stuic-color-surface-1-active: var(--color-slate-600, #737373);
215
+ --stuic-color-surface-1-foreground: var(--color-slate-100, #737373);
216
+ --stuic-color-surface-1-foreground-hover: var(--color-slate-100, #737373);
217
+ --stuic-color-surface-1-foreground-active: var(--color-slate-100, #737373);
218
+
219
+ --stuic-color-surface-2: var(--color-slate-700, #737373);
220
+ --stuic-color-surface-2-hover: var(--color-slate-600, #737373);
221
+ --stuic-color-surface-2-active: var(--color-slate-500, #737373);
222
+ --stuic-color-surface-2-foreground: var(--color-slate-100, #737373);
223
+ --stuic-color-surface-2-foreground-hover: var(--color-slate-100, #737373);
224
+ --stuic-color-surface-2-foreground-active: var(--color-slate-100, #737373);
225
+
226
+ --stuic-color-muted: var(--color-slate-800, #737373);
227
+
228
+ --stuic-color-muted-hover: var(--color-slate-700, #737373);
229
+ --stuic-color-muted-active: var(--color-slate-600, #737373);
230
+ --stuic-color-muted-foreground: var(--color-slate-500, #737373);
231
+ --stuic-color-muted-foreground-hover: var(--color-slate-500, #737373);
232
+ --stuic-color-muted-foreground-active: var(--color-slate-500, #737373);
233
+
234
+ --stuic-color-foreground: var(--color-slate-50, #737373);
235
+
236
+ --stuic-color-foreground-hover: var(--color-slate-50, #737373);
237
+ --stuic-color-foreground-active: var(--color-slate-50, #737373);
238
+
239
+ --stuic-color-border: var(--color-slate-700, #737373);
240
+
241
+ --stuic-color-border-hover: var(--color-slate-600, #737373);
242
+ --stuic-color-border-active: var(--color-slate-500, #737373);
243
+
244
+ --stuic-color-input: var(--color-slate-900, #737373);
245
+
246
+ --stuic-color-input-hover: var(--color-slate-800, #737373);
247
+ --stuic-color-input-active: var(--color-slate-900, #737373);
248
+
249
+ --stuic-color-ring: color-mix(in srgb, var(--color-teal-400) 25%, transparent);
250
+
251
+ --stuic-color-ring-hover: color-mix(in srgb, var(--color-teal-400) 25%, transparent);
252
+ --stuic-color-ring-active: color-mix(in srgb, var(--color-teal-400) 25%, transparent);
253
+ }