@marianmeres/design-tokens 1.16.0 → 1.17.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 (12) hide show
  1. package/dist/css/coral-amber.css +284 -0
  2. package/dist/css/mint-graphite.css +284 -0
  3. package/dist/css/night-candy.css +284 -0
  4. package/dist/themes/coral-amber.d.ts +4 -0
  5. package/dist/themes/coral-amber.js +148 -0
  6. package/dist/themes/mint-graphite.d.ts +4 -0
  7. package/dist/themes/mint-graphite.js +148 -0
  8. package/dist/themes/mod.d.ts +7 -1
  9. package/dist/themes/mod.js +15 -0
  10. package/dist/themes/night-candy.d.ts +4 -0
  11. package/dist/themes/night-candy.js +148 -0
  12. package/package.json +1 -1
package/dist/css/coral-amber.css ADDED
@@ -0,0 +1,284 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: #c0442b;
4
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), black 20%);
6
+ --stuic-color-primary-foreground: #ffffff;
7
+ --stuic-color-primary-foreground-hover: #ffffff;
8
+ --stuic-color-primary-foreground-active: #ffffff;
9
+
10
+ --stuic-color-accent: #f5c264;
11
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), black 10%);
12
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), black 20%);
13
+ --stuic-color-accent-foreground: #2a1c15;
14
+ --stuic-color-accent-foreground-hover: #2a1c15;
15
+ --stuic-color-accent-foreground-active: #2a1c15;
16
+
17
+ --stuic-color-destructive: #dc2626;
18
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), black 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), black 20%);
20
+ --stuic-color-destructive-foreground: #ffffff;
21
+ --stuic-color-destructive-foreground-hover: #ffffff;
22
+ --stuic-color-destructive-foreground-active: #ffffff;
23
+
24
+ --stuic-color-warning: #f59e0b;
25
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), black 10%);
26
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), black 20%);
27
+ --stuic-color-warning-foreground: #ffffff;
28
+ --stuic-color-warning-foreground-hover: #ffffff;
29
+ --stuic-color-warning-foreground-active: #ffffff;
30
+
31
+ --stuic-color-success: #059669;
32
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), black 10%);
33
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), black 20%);
34
+ --stuic-color-success-foreground: #ffffff;
35
+ --stuic-color-success-foreground-hover: #ffffff;
36
+ --stuic-color-success-foreground-active: #ffffff;
37
+
38
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
39
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 50%);
40
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
41
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
42
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 50%);
43
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
44
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
45
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 50%);
46
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
47
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
48
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 50%);
49
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
50
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
51
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 50%);
52
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
53
+ --stuic-color-surface: #f3dccd;
54
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
56
+ --stuic-color-surface-foreground: #2a1c15;
57
+ --stuic-color-surface-foreground-hover: #2a1c15;
58
+ --stuic-color-surface-foreground-active: #2a1c15;
59
+ --stuic-color-surface-1: #ecceba;
60
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
62
+ --stuic-color-surface-1-foreground: #2a1c15;
63
+ --stuic-color-surface-1-foreground-hover: #2a1c15;
64
+ --stuic-color-surface-1-foreground-active: #2a1c15;
65
+
66
+ --stuic-color-background: #fdf3ec;
67
+ --stuic-color-background-hover: #fdf3ec;
68
+ --stuic-color-background-active: #fdf3ec;
69
+ --stuic-color-background-foreground: #2a1c15;
70
+ --stuic-color-background-foreground-hover: #2a1c15;
71
+ --stuic-color-background-foreground-active: #2a1c15;
72
+
73
+ --stuic-color-muted: #f9e8dd;
74
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
76
+ --stuic-color-muted-foreground: #8a6a58;
77
+ --stuic-color-muted-foreground-hover: #8a6a58;
78
+ --stuic-color-muted-foreground-active: #8a6a58;
79
+
80
+ --stuic-color-foreground: #2a1c15;
81
+ --stuic-color-foreground-hover: #2a1c15;
82
+ --stuic-color-foreground-active: #2a1c15;
83
+
84
+ --stuic-color-border: #ecceba;
85
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
87
+
88
+ --stuic-color-input: #ffffff;
89
+ --stuic-color-input-hover: #fdf3ec;
90
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
91
+
92
+ --stuic-color-ring: rgba(192, 68, 43, 0.2);
93
+ --stuic-color-ring-hover: rgba(192, 68, 43, 0.2);
94
+ --stuic-color-ring-active: rgba(192, 68, 43, 0.2);
95
+ }
96
+
97
+ /* prettier-ignore */
98
+ :root.dark {
99
+ --stuic-color-primary: #cf5136;
100
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), white 10%);
101
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), white 20%);
102
+ --stuic-color-primary-foreground: #ffffff;
103
+ --stuic-color-primary-foreground-hover: #ffffff;
104
+ --stuic-color-primary-foreground-active: #ffffff;
105
+
106
+ --stuic-color-accent: #f5c264;
107
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), white 10%);
108
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), white 20%);
109
+ --stuic-color-accent-foreground: #221610;
110
+ --stuic-color-accent-foreground-hover: #221610;
111
+ --stuic-color-accent-foreground-active: #221610;
112
+
113
+ --stuic-color-destructive: #ef4444;
114
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), white 10%);
115
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), white 20%);
116
+ --stuic-color-destructive-foreground: #ffffff;
117
+ --stuic-color-destructive-foreground-hover: #ffffff;
118
+ --stuic-color-destructive-foreground-active: #ffffff;
119
+
120
+ --stuic-color-warning: #fbbf24;
121
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), white 10%);
122
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), white 20%);
123
+ --stuic-color-warning-foreground: #000000;
124
+ --stuic-color-warning-foreground-hover: #000000;
125
+ --stuic-color-warning-foreground-active: #000000;
126
+
127
+ --stuic-color-success: #10b981;
128
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), white 10%);
129
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), white 20%);
130
+ --stuic-color-success-foreground: #000000;
131
+ --stuic-color-success-foreground-hover: #000000;
132
+ --stuic-color-success-foreground-active: #000000;
133
+
134
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
135
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 50%);
136
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
137
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
138
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 50%);
139
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
140
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
141
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 50%);
142
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
143
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
144
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 50%);
145
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
146
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
147
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
148
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
149
+ --stuic-color-surface: #453024;
150
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
152
+ --stuic-color-surface-foreground: #d3b8a6;
153
+ --stuic-color-surface-foreground-hover: #d3b8a6;
154
+ --stuic-color-surface-foreground-active: #d3b8a6;
155
+ --stuic-color-surface-1: #5a4133;
156
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
158
+ --stuic-color-surface-1-foreground: #e8d5c8;
159
+ --stuic-color-surface-1-foreground-hover: #e8d5c8;
160
+ --stuic-color-surface-1-foreground-active: #e8d5c8;
161
+
162
+ --stuic-color-background: #221610;
163
+ --stuic-color-background-hover: #221610;
164
+ --stuic-color-background-active: #221610;
165
+ --stuic-color-background-foreground: #fbf1ea;
166
+ --stuic-color-background-foreground-hover: #fbf1ea;
167
+ --stuic-color-background-foreground-active: #fbf1ea;
168
+
169
+ --stuic-color-muted: #33221a;
170
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
172
+ --stuic-color-muted-foreground: #b0917d;
173
+ --stuic-color-muted-foreground-hover: #b0917d;
174
+ --stuic-color-muted-foreground-active: #b0917d;
175
+
176
+ --stuic-color-foreground: #fbf1ea;
177
+ --stuic-color-foreground-hover: #fbf1ea;
178
+ --stuic-color-foreground-active: #fbf1ea;
179
+
180
+ --stuic-color-border: #453024;
181
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
183
+
184
+ --stuic-color-input: #221610;
185
+ --stuic-color-input-hover: #33221a;
186
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
187
+
188
+ --stuic-color-ring: rgba(207, 81, 54, 0.25);
189
+ --stuic-color-ring-hover: rgba(207, 81, 54, 0.25);
190
+ --stuic-color-ring-active: rgba(207, 81, 54, 0.25);
191
+ }
192
+
193
+ /* prettier-ignore */
194
+ @supports not (color: color-mix(in oklab, red, blue)) {
195
+ :root {
196
+ --stuic-color-primary-hover: #a73a24;
197
+ --stuic-color-primary-active: #8e301d;
198
+
199
+ --stuic-color-accent-hover: #d5a856;
200
+ --stuic-color-accent-active: #b68f48;
201
+
202
+ --stuic-color-destructive-hover: #bf2020;
203
+ --stuic-color-destructive-active: #a31919;
204
+
205
+ --stuic-color-warning-hover: #d58908;
206
+ --stuic-color-warning-active: #b67406;
207
+
208
+ --stuic-color-success-hover: #04825a;
209
+ --stuic-color-success-active: #036e4c;
210
+
211
+ --stuic-color-surface-primary: #f4d9cf;
212
+ --stuic-color-surface-primary-foreground: #602216;
213
+ --stuic-color-surface-primary-border: #ebbeb2;
214
+ --stuic-color-surface-accent: #fcecd8;
215
+ --stuic-color-surface-accent-foreground: #7b6132;
216
+ --stuic-color-surface-accent-border: #fbe4c3;
217
+ --stuic-color-surface-destructive: #f8d4ce;
218
+ --stuic-color-surface-destructive-foreground: #6e1313;
219
+ --stuic-color-surface-destructive-border: #f3b5b1;
220
+ --stuic-color-surface-warning: #fce6ca;
221
+ --stuic-color-surface-warning-foreground: #7b4f06;
222
+ --stuic-color-surface-warning-border: #fbdaa9;
223
+ --stuic-color-surface-success: #d8e5d8;
224
+ --stuic-color-surface-success-foreground: #034b35;
225
+ --stuic-color-surface-success-border: #b3d7c5;
226
+ --stuic-color-surface-hover: #ddc6b8;
227
+ --stuic-color-surface-active: #c7b1a4;
228
+ --stuic-color-surface-1-hover: #d6baa7;
229
+ --stuic-color-surface-1-active: #c1a695;
230
+
231
+ --stuic-color-muted-hover: #e2d1c6;
232
+ --stuic-color-muted-active: #cbbab0;
233
+
234
+ --stuic-color-border-hover: #d6baa7;
235
+ --stuic-color-border-active: #c1a695;
236
+
237
+ --stuic-color-input-active: #d0ccca;
238
+ }
239
+
240
+ :root.dark {
241
+ --stuic-color-primary-hover: #d6644b;
242
+ --stuic-color-primary-active: #dd7760;
243
+
244
+ --stuic-color-accent-hover: #f6c876;
245
+ --stuic-color-accent-active: #f7cf87;
246
+
247
+ --stuic-color-destructive-hover: #f45c57;
248
+ --stuic-color-destructive-active: #f8716a;
249
+
250
+ --stuic-color-warning-hover: #fcc64c;
251
+ --stuic-color-warning-active: #fccd66;
252
+
253
+ --stuic-color-success-hover: #43c08d;
254
+ --stuic-color-success-active: #5fc899;
255
+
256
+ --stuic-color-surface-primary: #3c1f16;
257
+ --stuic-color-surface-primary-foreground: #e7a89b;
258
+ --stuic-color-surface-primary-border: #56281b;
259
+ --stuic-color-surface-accent: #42301d;
260
+ --stuic-color-surface-accent-foreground: #fae1b2;
261
+ --stuic-color-surface-accent-border: #614a29;
262
+ --stuic-color-surface-destructive: #411d18;
263
+ --stuic-color-surface-destructive-foreground: #f7a2a2;
264
+ --stuic-color-surface-destructive-border: #602420;
265
+ --stuic-color-surface-warning: #432f13;
266
+ --stuic-color-surface-warning-foreground: #fddf92;
267
+ --stuic-color-surface-warning-border: #634916;
268
+ --stuic-color-surface-success: #1f2e21;
269
+ --stuic-color-surface-success-foreground: #88dcc0;
270
+ --stuic-color-surface-success-border: #1d4732;
271
+ --stuic-color-surface-hover: #554135;
272
+ --stuic-color-surface-active: #665247;
273
+ --stuic-color-surface-1-hover: #695143;
274
+ --stuic-color-surface-1-active: #786154;
275
+
276
+ --stuic-color-muted-hover: #45342b;
277
+ --stuic-color-muted-active: #57463e;
278
+
279
+ --stuic-color-border-hover: #554135;
280
+ --stuic-color-border-active: #665247;
281
+
282
+ --stuic-color-input-active: #483b35;
283
+ }
284
+ }
package/dist/css/mint-graphite.css ADDED
@@ -0,0 +1,284 @@
1
+ /* prettier-ignore */
2
+ :root {
3
+ --stuic-color-primary: #2f7d5b;
4
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), black 10%);
5
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), black 20%);
6
+ --stuic-color-primary-foreground: #ffffff;
7
+ --stuic-color-primary-foreground-hover: #ffffff;
8
+ --stuic-color-primary-foreground-active: #ffffff;
9
+
10
+ --stuic-color-accent: #fadf93;
11
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), black 10%);
12
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), black 20%);
13
+ --stuic-color-accent-foreground: #17211c;
14
+ --stuic-color-accent-foreground-hover: #17211c;
15
+ --stuic-color-accent-foreground-active: #17211c;
16
+
17
+ --stuic-color-destructive: #dc2626;
18
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), black 10%);
19
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), black 20%);
20
+ --stuic-color-destructive-foreground: #ffffff;
21
+ --stuic-color-destructive-foreground-hover: #ffffff;
22
+ --stuic-color-destructive-foreground-active: #ffffff;
23
+
24
+ --stuic-color-warning: #f59e0b;
25
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), black 10%);
26
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), black 20%);
27
+ --stuic-color-warning-foreground: #ffffff;
28
+ --stuic-color-warning-foreground-hover: #ffffff;
29
+ --stuic-color-warning-foreground-active: #ffffff;
30
+
31
+ --stuic-color-success: #059669;
32
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), black 10%);
33
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), black 20%);
34
+ --stuic-color-success-foreground: #ffffff;
35
+ --stuic-color-success-foreground-hover: #ffffff;
36
+ --stuic-color-success-foreground-active: #ffffff;
37
+
38
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
39
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), black 50%);
40
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
41
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
42
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), black 50%);
43
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
44
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
45
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), black 50%);
46
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
47
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
48
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), black 50%);
49
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
50
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
51
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), black 50%);
52
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
53
+ --stuic-color-surface: #d7e5dc;
54
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
55
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
56
+ --stuic-color-surface-foreground: #17211c;
57
+ --stuic-color-surface-foreground-hover: #17211c;
58
+ --stuic-color-surface-foreground-active: #17211c;
59
+ --stuic-color-surface-1: #c6d9ce;
60
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
61
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
62
+ --stuic-color-surface-1-foreground: #17211c;
63
+ --stuic-color-surface-1-foreground-hover: #17211c;
64
+ --stuic-color-surface-1-foreground-active: #17211c;
65
+
66
+ --stuic-color-background: #eef5f0;
67
+ --stuic-color-background-hover: #eef5f0;
68
+ --stuic-color-background-active: #eef5f0;
69
+ --stuic-color-background-foreground: #17211c;
70
+ --stuic-color-background-foreground-hover: #17211c;
71
+ --stuic-color-background-foreground-active: #17211c;
72
+
73
+ --stuic-color-muted: #e4eee8;
74
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
75
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
76
+ --stuic-color-muted-foreground: #6b7f74;
77
+ --stuic-color-muted-foreground-hover: #6b7f74;
78
+ --stuic-color-muted-foreground-active: #6b7f74;
79
+
80
+ --stuic-color-foreground: #17211c;
81
+ --stuic-color-foreground-hover: #17211c;
82
+ --stuic-color-foreground-active: #17211c;
83
+
84
+ --stuic-color-border: #c6d9ce;
85
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
86
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
87
+
88
+ --stuic-color-input: #ffffff;
89
+ --stuic-color-input-hover: #eef5f0;
90
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
91
+
92
+ --stuic-color-ring: rgba(47, 125, 91, 0.2);
93
+ --stuic-color-ring-hover: rgba(47, 125, 91, 0.2);
94
+ --stuic-color-ring-active: rgba(47, 125, 91, 0.2);
95
+ }
96
+
97
+ /* prettier-ignore */
98
+ :root.dark {
99
+ --stuic-color-primary: #4fb287;
100
+ --stuic-color-primary-hover: color-mix(in oklab, var(--stuic-color-primary), white 10%);
101
+ --stuic-color-primary-active: color-mix(in oklab, var(--stuic-color-primary), white 20%);
102
+ --stuic-color-primary-foreground: #17191a;
103
+ --stuic-color-primary-foreground-hover: #17191a;
104
+ --stuic-color-primary-foreground-active: #17191a;
105
+
106
+ --stuic-color-accent: #fadf93;
107
+ --stuic-color-accent-hover: color-mix(in oklab, var(--stuic-color-accent), white 10%);
108
+ --stuic-color-accent-active: color-mix(in oklab, var(--stuic-color-accent), white 20%);
109
+ --stuic-color-accent-foreground: #17191a;
110
+ --stuic-color-accent-foreground-hover: #17191a;
111
+ --stuic-color-accent-foreground-active: #17191a;
112
+
113
+ --stuic-color-destructive: #ef4444;
114
+ --stuic-color-destructive-hover: color-mix(in oklab, var(--stuic-color-destructive), white 10%);
115
+ --stuic-color-destructive-active: color-mix(in oklab, var(--stuic-color-destructive), white 20%);
116
+ --stuic-color-destructive-foreground: #ffffff;
117
+ --stuic-color-destructive-foreground-hover: #ffffff;
118
+ --stuic-color-destructive-foreground-active: #ffffff;
119
+
120
+ --stuic-color-warning: #fbbf24;
121
+ --stuic-color-warning-hover: color-mix(in oklab, var(--stuic-color-warning), white 10%);
122
+ --stuic-color-warning-active: color-mix(in oklab, var(--stuic-color-warning), white 20%);
123
+ --stuic-color-warning-foreground: #000000;
124
+ --stuic-color-warning-foreground-hover: #000000;
125
+ --stuic-color-warning-foreground-active: #000000;
126
+
127
+ --stuic-color-success: #10b981;
128
+ --stuic-color-success-hover: color-mix(in oklab, var(--stuic-color-success), white 10%);
129
+ --stuic-color-success-active: color-mix(in oklab, var(--stuic-color-success), white 20%);
130
+ --stuic-color-success-foreground: #000000;
131
+ --stuic-color-success-foreground-hover: #000000;
132
+ --stuic-color-success-foreground-active: #000000;
133
+
134
+ --stuic-color-surface-primary: color-mix(in srgb, var(--stuic-color-primary) 15%, var(--stuic-color-background));
135
+ --stuic-color-surface-primary-foreground: color-mix(in srgb, var(--stuic-color-primary), white 50%);
136
+ --stuic-color-surface-primary-border: color-mix(in srgb, var(--stuic-color-primary) 30%, var(--stuic-color-background));
137
+ --stuic-color-surface-accent: color-mix(in srgb, var(--stuic-color-accent) 15%, var(--stuic-color-background));
138
+ --stuic-color-surface-accent-foreground: color-mix(in srgb, var(--stuic-color-accent), white 50%);
139
+ --stuic-color-surface-accent-border: color-mix(in srgb, var(--stuic-color-accent) 30%, var(--stuic-color-background));
140
+ --stuic-color-surface-destructive: color-mix(in srgb, var(--stuic-color-destructive) 15%, var(--stuic-color-background));
141
+ --stuic-color-surface-destructive-foreground: color-mix(in srgb, var(--stuic-color-destructive), white 50%);
142
+ --stuic-color-surface-destructive-border: color-mix(in srgb, var(--stuic-color-destructive) 30%, var(--stuic-color-background));
143
+ --stuic-color-surface-warning: color-mix(in srgb, var(--stuic-color-warning) 15%, var(--stuic-color-background));
144
+ --stuic-color-surface-warning-foreground: color-mix(in srgb, var(--stuic-color-warning), white 50%);
145
+ --stuic-color-surface-warning-border: color-mix(in srgb, var(--stuic-color-warning) 30%, var(--stuic-color-background));
146
+ --stuic-color-surface-success: color-mix(in srgb, var(--stuic-color-success) 15%, var(--stuic-color-background));
147
+ --stuic-color-surface-success-foreground: color-mix(in srgb, var(--stuic-color-success), white 50%);
148
+ --stuic-color-surface-success-border: color-mix(in srgb, var(--stuic-color-success) 30%, var(--stuic-color-background));
149
+ --stuic-color-surface: #383c3b;
150
+ --stuic-color-surface-hover: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 10%);
151
+ --stuic-color-surface-active: color-mix(in oklab, var(--stuic-color-surface), var(--stuic-color-foreground) 20%);
152
+ --stuic-color-surface-foreground: #c0c4c2;
153
+ --stuic-color-surface-foreground-hover: #c0c4c2;
154
+ --stuic-color-surface-foreground-active: #c0c4c2;
155
+ --stuic-color-surface-1: #4a4f4d;
156
+ --stuic-color-surface-1-hover: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 10%);
157
+ --stuic-color-surface-1-active: color-mix(in oklab, var(--stuic-color-surface-1), var(--stuic-color-foreground) 20%);
158
+ --stuic-color-surface-1-foreground: #dcdedd;
159
+ --stuic-color-surface-1-foreground-hover: #dcdedd;
160
+ --stuic-color-surface-1-foreground-active: #dcdedd;
161
+
162
+ --stuic-color-background: #17191a;
163
+ --stuic-color-background-hover: #17191a;
164
+ --stuic-color-background-active: #17191a;
165
+ --stuic-color-background-foreground: #f4f5f5;
166
+ --stuic-color-background-foreground-hover: #f4f5f5;
167
+ --stuic-color-background-foreground-active: #f4f5f5;
168
+
169
+ --stuic-color-muted: #262a29;
170
+ --stuic-color-muted-hover: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 10%);
171
+ --stuic-color-muted-active: color-mix(in oklab, var(--stuic-color-muted), var(--stuic-color-foreground) 20%);
172
+ --stuic-color-muted-foreground: #9aa09d;
173
+ --stuic-color-muted-foreground-hover: #9aa09d;
174
+ --stuic-color-muted-foreground-active: #9aa09d;
175
+
176
+ --stuic-color-foreground: #f4f5f5;
177
+ --stuic-color-foreground-hover: #f4f5f5;
178
+ --stuic-color-foreground-active: #f4f5f5;
179
+
180
+ --stuic-color-border: #383c3b;
181
+ --stuic-color-border-hover: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 10%);
182
+ --stuic-color-border-active: color-mix(in oklab, var(--stuic-color-border), var(--stuic-color-foreground) 20%);
183
+
184
+ --stuic-color-input: #17191a;
185
+ --stuic-color-input-hover: #262a29;
186
+ --stuic-color-input-active: color-mix(in oklab, var(--stuic-color-input), var(--stuic-color-foreground) 20%);
187
+
188
+ --stuic-color-ring: rgba(79, 178, 135, 0.25);
189
+ --stuic-color-ring-hover: rgba(79, 178, 135, 0.25);
190
+ --stuic-color-ring-active: rgba(79, 178, 135, 0.25);
191
+ }
192
+
193
+ /* prettier-ignore */
194
+ @supports not (color: color-mix(in oklab, red, blue)) {
195
+ :root {
196
+ --stuic-color-primary-hover: #276c4e;
197
+ --stuic-color-primary-active: #205b41;
198
+
199
+ --stuic-color-accent-hover: #d9c27f;
200
+ --stuic-color-accent-active: #baa56c;
201
+
202
+ --stuic-color-destructive-hover: #bf2020;
203
+ --stuic-color-destructive-active: #a31919;
204
+
205
+ --stuic-color-warning-hover: #d58908;
206
+ --stuic-color-warning-active: #b67406;
207
+
208
+ --stuic-color-success-hover: #04825a;
209
+ --stuic-color-success-active: #036e4c;
210
+
211
+ --stuic-color-surface-primary: #d1e3da;
212
+ --stuic-color-surface-primary-foreground: #183f2e;
213
+ --stuic-color-surface-primary-border: #b5d1c3;
214
+ --stuic-color-surface-accent: #f0f2e2;
215
+ --stuic-color-surface-accent-foreground: #7d704a;
216
+ --stuic-color-surface-accent-border: #f2eed4;
217
+ --stuic-color-surface-destructive: #ebd6d2;
218
+ --stuic-color-surface-destructive-foreground: #6e1313;
219
+ --stuic-color-surface-destructive-border: #e9b7b3;
220
+ --stuic-color-surface-warning: #efe8ce;
221
+ --stuic-color-surface-warning-foreground: #7b4f06;
222
+ --stuic-color-surface-warning-border: #f0dbab;
223
+ --stuic-color-surface-success: #cbe7dc;
224
+ --stuic-color-surface-success-foreground: #034b35;
225
+ --stuic-color-surface-success-border: #a8d9c8;
226
+ --stuic-color-surface-hover: #c1cfc6;
227
+ --stuic-color-surface-active: #acb9b1;
228
+ --stuic-color-surface-1-hover: #b2c4ba;
229
+ --stuic-color-surface-1-active: #9fb0a6;
230
+
231
+ --stuic-color-muted-hover: #cdd7d1;
232
+ --stuic-color-muted-active: #b6c0ba;
233
+
234
+ --stuic-color-border-hover: #b2c4ba;
235
+ --stuic-color-border-active: #9fb0a6;
236
+
237
+ --stuic-color-input-active: #cbcdcc;
238
+ }
239
+
240
+ :root.dark {
241
+ --stuic-color-primary-hover: #64ba93;
242
+ --stuic-color-primary-active: #77c29e;
243
+
244
+ --stuic-color-accent-hover: #fbe29f;
245
+ --stuic-color-accent-active: #fbe6aa;
246
+
247
+ --stuic-color-destructive-hover: #f45c57;
248
+ --stuic-color-destructive-active: #f8716a;
249
+
250
+ --stuic-color-warning-hover: #fcc64c;
251
+ --stuic-color-warning-active: #fccd66;
252
+
253
+ --stuic-color-success-hover: #43c08d;
254
+ --stuic-color-success-active: #5fc899;
255
+
256
+ --stuic-color-surface-primary: #1f302a;
257
+ --stuic-color-surface-primary-foreground: #a7d9c3;
258
+ --stuic-color-surface-primary-border: #28473b;
259
+ --stuic-color-surface-accent: #39372c;
260
+ --stuic-color-surface-accent-foreground: #fdefc9;
261
+ --stuic-color-surface-accent-border: #5b543e;
262
+ --stuic-color-surface-destructive: #371f20;
263
+ --stuic-color-surface-destructive-foreground: #f7a2a2;
264
+ --stuic-color-surface-destructive-border: #582627;
265
+ --stuic-color-surface-warning: #39321c;
266
+ --stuic-color-surface-warning-foreground: #fddf92;
267
+ --stuic-color-surface-warning-border: #5b4b1d;
268
+ --stuic-color-surface-success: #163129;
269
+ --stuic-color-surface-success-foreground: #88dcc0;
270
+ --stuic-color-surface-success-border: #154939;
271
+ --stuic-color-surface-hover: #484c4b;
272
+ --stuic-color-surface-active: #5a5d5c;
273
+ --stuic-color-surface-1-hover: #595e5c;
274
+ --stuic-color-surface-1-active: #696d6c;
275
+
276
+ --stuic-color-muted-hover: #373b3a;
277
+ --stuic-color-muted-active: #4a4d4d;
278
+
279
+ --stuic-color-border-hover: #484c4b;
280
+ --stuic-color-border-active: #5a5d5c;
281
+
282
+ --stuic-color-input-active: #3c3e3f;
283
+ }
284
+ }