@parrot-co/parrot-ui 0.1.31 → 1.0.0-beta.1

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 (19) hide show
  1. package/dist/colors.css +571 -0
  2. package/dist/dark.css +606 -0
  3. package/dist/index.d.mts +932 -0
  4. package/dist/index.d.ts +932 -0
  5. package/dist/index.js +4727 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +4625 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/dist/styles.css +3197 -0
  10. package/dist/theme.css +67 -0
  11. package/package.json +68 -59
  12. package/src/theme.css +67 -0
  13. package/dist/main.js +0 -4586
  14. package/dist/main.js.map +0 -1
  15. package/dist/module.js +0 -4517
  16. package/dist/module.js.map +0 -1
  17. package/dist/types.d.ts +0 -596
  18. package/dist/types.d.ts.map +0 -1
  19. package/styles.css +0 -1
package/dist/dark.css ADDED
@@ -0,0 +1,606 @@
1
+ /*
2
+ GENERATED by scripts/gen-colors.ts — do not edit by hand.
3
+ Regenerate: bun run gen:colors
4
+ These are PRIVATE role tones (--c-*); components read --variant-* (variants.css).
5
+ */
6
+
7
+ /* ——— Dark theme (opt-in): @import "@parrot-co/parrot-ui/dark.css" ——— */
8
+
9
+ [data-theme="dark"] {
10
+ color-scheme: dark;
11
+
12
+ --color-gray-50: oklch(13% 0.028 261.692);
13
+ --color-gray-100: oklch(21% 0.034 264.665);
14
+ --color-gray-200: oklch(27.8% 0.033 256.848);
15
+ --color-gray-300: oklch(37.3% 0.034 259.733);
16
+ --color-gray-400: oklch(44.6% 0.03 256.802);
17
+ --color-gray-500: oklch(55.1% 0.027 264.364);
18
+ --color-gray-600: oklch(70.7% 0.022 261.325);
19
+ --color-gray-700: oklch(87.2% 0.01 258.338);
20
+ --color-gray-800: oklch(92.8% 0.006 264.531);
21
+ --color-gray-900: oklch(96.7% 0.003 264.542);
22
+ --color-gray-950: oklch(98.5% 0.002 247.839);
23
+
24
+ --color-surface: oklch(18% 0.01 265);
25
+ --color-surface-raised: oklch(22% 0.012 265);
26
+ --color-surface-sunken: oklch(15% 0.008 265);
27
+ --color-surface-hover: oklch(27% 0.012 265);
28
+ --color-overlay: color-mix(in oklch, black 65%, transparent);
29
+
30
+ --color-border: oklch(32% 0.012 265);
31
+ --color-border-muted: color-mix(in oklch, white 12%, transparent);
32
+ --color-border-subtle: color-mix(in oklch, white 7%, transparent);
33
+
34
+ --color-primary: var(--color-blue-500);
35
+ --color-accent: var(--color-violet-500);
36
+ --color-success: var(--color-emerald-500);
37
+ --color-warning: var(--color-amber-400);
38
+ --color-critical: var(--color-red-500);
39
+ --color-info: var(--color-sky-500);
40
+ }
41
+
42
+ /* ——— Tailwind palette ——— */
43
+
44
+ [data-theme="dark"] [data-color="red"] {
45
+ --c-solid: var(--color-red-500);
46
+ --c-solid-hover: var(--color-red-400);
47
+ --c-solid-active: var(--color-red-300);
48
+ --c-bg-subtle: var(--color-red-950);
49
+ --c-bg-muted: var(--color-red-900);
50
+ --c-bg-pastel: var(--color-red-800);
51
+ --c-bg-strong: var(--color-red-700);
52
+ --c-text: var(--color-red-400);
53
+ --c-text-strong: var(--color-red-300);
54
+ --c-border: var(--color-red-800);
55
+ --c-on-solid: white;
56
+ }
57
+
58
+ [data-theme="dark"] [data-color="orange"] {
59
+ --c-solid: var(--color-orange-500);
60
+ --c-solid-hover: var(--color-orange-400);
61
+ --c-solid-active: var(--color-orange-300);
62
+ --c-bg-subtle: var(--color-orange-950);
63
+ --c-bg-muted: var(--color-orange-900);
64
+ --c-bg-pastel: var(--color-orange-800);
65
+ --c-bg-strong: var(--color-orange-700);
66
+ --c-text: var(--color-orange-400);
67
+ --c-text-strong: var(--color-orange-300);
68
+ --c-border: var(--color-orange-800);
69
+ --c-on-solid: white;
70
+ }
71
+
72
+ [data-theme="dark"] [data-color="amber"] {
73
+ --c-solid: var(--color-amber-500);
74
+ --c-solid-hover: var(--color-amber-400);
75
+ --c-solid-active: var(--color-amber-300);
76
+ --c-bg-subtle: var(--color-amber-950);
77
+ --c-bg-muted: var(--color-amber-900);
78
+ --c-bg-pastel: var(--color-amber-800);
79
+ --c-bg-strong: var(--color-amber-700);
80
+ --c-text: var(--color-amber-400);
81
+ --c-text-strong: var(--color-amber-300);
82
+ --c-border: var(--color-amber-800);
83
+ --c-on-solid: var(--color-amber-950);
84
+ }
85
+
86
+ [data-theme="dark"] [data-color="yellow"] {
87
+ --c-solid: var(--color-yellow-500);
88
+ --c-solid-hover: var(--color-yellow-400);
89
+ --c-solid-active: var(--color-yellow-300);
90
+ --c-bg-subtle: var(--color-yellow-950);
91
+ --c-bg-muted: var(--color-yellow-900);
92
+ --c-bg-pastel: var(--color-yellow-800);
93
+ --c-bg-strong: var(--color-yellow-700);
94
+ --c-text: var(--color-yellow-400);
95
+ --c-text-strong: var(--color-yellow-300);
96
+ --c-border: var(--color-yellow-800);
97
+ --c-on-solid: var(--color-yellow-950);
98
+ }
99
+
100
+ [data-theme="dark"] [data-color="lime"] {
101
+ --c-solid: var(--color-lime-500);
102
+ --c-solid-hover: var(--color-lime-400);
103
+ --c-solid-active: var(--color-lime-300);
104
+ --c-bg-subtle: var(--color-lime-950);
105
+ --c-bg-muted: var(--color-lime-900);
106
+ --c-bg-pastel: var(--color-lime-800);
107
+ --c-bg-strong: var(--color-lime-700);
108
+ --c-text: var(--color-lime-400);
109
+ --c-text-strong: var(--color-lime-300);
110
+ --c-border: var(--color-lime-800);
111
+ --c-on-solid: var(--color-lime-950);
112
+ }
113
+
114
+ [data-theme="dark"] [data-color="green"] {
115
+ --c-solid: var(--color-green-500);
116
+ --c-solid-hover: var(--color-green-400);
117
+ --c-solid-active: var(--color-green-300);
118
+ --c-bg-subtle: var(--color-green-950);
119
+ --c-bg-muted: var(--color-green-900);
120
+ --c-bg-pastel: var(--color-green-800);
121
+ --c-bg-strong: var(--color-green-700);
122
+ --c-text: var(--color-green-400);
123
+ --c-text-strong: var(--color-green-300);
124
+ --c-border: var(--color-green-800);
125
+ --c-on-solid: white;
126
+ }
127
+
128
+ [data-theme="dark"] [data-color="emerald"] {
129
+ --c-solid: var(--color-emerald-500);
130
+ --c-solid-hover: var(--color-emerald-400);
131
+ --c-solid-active: var(--color-emerald-300);
132
+ --c-bg-subtle: var(--color-emerald-950);
133
+ --c-bg-muted: var(--color-emerald-900);
134
+ --c-bg-pastel: var(--color-emerald-800);
135
+ --c-bg-strong: var(--color-emerald-700);
136
+ --c-text: var(--color-emerald-400);
137
+ --c-text-strong: var(--color-emerald-300);
138
+ --c-border: var(--color-emerald-800);
139
+ --c-on-solid: white;
140
+ }
141
+
142
+ [data-theme="dark"] [data-color="teal"] {
143
+ --c-solid: var(--color-teal-500);
144
+ --c-solid-hover: var(--color-teal-400);
145
+ --c-solid-active: var(--color-teal-300);
146
+ --c-bg-subtle: var(--color-teal-950);
147
+ --c-bg-muted: var(--color-teal-900);
148
+ --c-bg-pastel: var(--color-teal-800);
149
+ --c-bg-strong: var(--color-teal-700);
150
+ --c-text: var(--color-teal-400);
151
+ --c-text-strong: var(--color-teal-300);
152
+ --c-border: var(--color-teal-800);
153
+ --c-on-solid: white;
154
+ }
155
+
156
+ [data-theme="dark"] [data-color="cyan"] {
157
+ --c-solid: var(--color-cyan-500);
158
+ --c-solid-hover: var(--color-cyan-400);
159
+ --c-solid-active: var(--color-cyan-300);
160
+ --c-bg-subtle: var(--color-cyan-950);
161
+ --c-bg-muted: var(--color-cyan-900);
162
+ --c-bg-pastel: var(--color-cyan-800);
163
+ --c-bg-strong: var(--color-cyan-700);
164
+ --c-text: var(--color-cyan-400);
165
+ --c-text-strong: var(--color-cyan-300);
166
+ --c-border: var(--color-cyan-800);
167
+ --c-on-solid: white;
168
+ }
169
+
170
+ [data-theme="dark"] [data-color="sky"] {
171
+ --c-solid: var(--color-sky-500);
172
+ --c-solid-hover: var(--color-sky-400);
173
+ --c-solid-active: var(--color-sky-300);
174
+ --c-bg-subtle: var(--color-sky-950);
175
+ --c-bg-muted: var(--color-sky-900);
176
+ --c-bg-pastel: var(--color-sky-800);
177
+ --c-bg-strong: var(--color-sky-700);
178
+ --c-text: var(--color-sky-400);
179
+ --c-text-strong: var(--color-sky-300);
180
+ --c-border: var(--color-sky-800);
181
+ --c-on-solid: white;
182
+ }
183
+
184
+ [data-theme="dark"] [data-color="blue"] {
185
+ --c-solid: var(--color-blue-500);
186
+ --c-solid-hover: var(--color-blue-400);
187
+ --c-solid-active: var(--color-blue-300);
188
+ --c-bg-subtle: var(--color-blue-950);
189
+ --c-bg-muted: var(--color-blue-900);
190
+ --c-bg-pastel: var(--color-blue-800);
191
+ --c-bg-strong: var(--color-blue-700);
192
+ --c-text: var(--color-blue-400);
193
+ --c-text-strong: var(--color-blue-300);
194
+ --c-border: var(--color-blue-800);
195
+ --c-on-solid: white;
196
+ }
197
+
198
+ [data-theme="dark"] [data-color="indigo"] {
199
+ --c-solid: var(--color-indigo-500);
200
+ --c-solid-hover: var(--color-indigo-400);
201
+ --c-solid-active: var(--color-indigo-300);
202
+ --c-bg-subtle: var(--color-indigo-950);
203
+ --c-bg-muted: var(--color-indigo-900);
204
+ --c-bg-pastel: var(--color-indigo-800);
205
+ --c-bg-strong: var(--color-indigo-700);
206
+ --c-text: var(--color-indigo-400);
207
+ --c-text-strong: var(--color-indigo-300);
208
+ --c-border: var(--color-indigo-800);
209
+ --c-on-solid: white;
210
+ }
211
+
212
+ [data-theme="dark"] [data-color="violet"] {
213
+ --c-solid: var(--color-violet-500);
214
+ --c-solid-hover: var(--color-violet-400);
215
+ --c-solid-active: var(--color-violet-300);
216
+ --c-bg-subtle: var(--color-violet-950);
217
+ --c-bg-muted: var(--color-violet-900);
218
+ --c-bg-pastel: var(--color-violet-800);
219
+ --c-bg-strong: var(--color-violet-700);
220
+ --c-text: var(--color-violet-400);
221
+ --c-text-strong: var(--color-violet-300);
222
+ --c-border: var(--color-violet-800);
223
+ --c-on-solid: white;
224
+ }
225
+
226
+ [data-theme="dark"] [data-color="purple"] {
227
+ --c-solid: var(--color-purple-500);
228
+ --c-solid-hover: var(--color-purple-400);
229
+ --c-solid-active: var(--color-purple-300);
230
+ --c-bg-subtle: var(--color-purple-950);
231
+ --c-bg-muted: var(--color-purple-900);
232
+ --c-bg-pastel: var(--color-purple-800);
233
+ --c-bg-strong: var(--color-purple-700);
234
+ --c-text: var(--color-purple-400);
235
+ --c-text-strong: var(--color-purple-300);
236
+ --c-border: var(--color-purple-800);
237
+ --c-on-solid: white;
238
+ }
239
+
240
+ [data-theme="dark"] [data-color="fuchsia"] {
241
+ --c-solid: var(--color-fuchsia-500);
242
+ --c-solid-hover: var(--color-fuchsia-400);
243
+ --c-solid-active: var(--color-fuchsia-300);
244
+ --c-bg-subtle: var(--color-fuchsia-950);
245
+ --c-bg-muted: var(--color-fuchsia-900);
246
+ --c-bg-pastel: var(--color-fuchsia-800);
247
+ --c-bg-strong: var(--color-fuchsia-700);
248
+ --c-text: var(--color-fuchsia-400);
249
+ --c-text-strong: var(--color-fuchsia-300);
250
+ --c-border: var(--color-fuchsia-800);
251
+ --c-on-solid: white;
252
+ }
253
+
254
+ [data-theme="dark"] [data-color="pink"] {
255
+ --c-solid: var(--color-pink-500);
256
+ --c-solid-hover: var(--color-pink-400);
257
+ --c-solid-active: var(--color-pink-300);
258
+ --c-bg-subtle: var(--color-pink-950);
259
+ --c-bg-muted: var(--color-pink-900);
260
+ --c-bg-pastel: var(--color-pink-800);
261
+ --c-bg-strong: var(--color-pink-700);
262
+ --c-text: var(--color-pink-400);
263
+ --c-text-strong: var(--color-pink-300);
264
+ --c-border: var(--color-pink-800);
265
+ --c-on-solid: white;
266
+ }
267
+
268
+ [data-theme="dark"] [data-color="rose"] {
269
+ --c-solid: var(--color-rose-500);
270
+ --c-solid-hover: var(--color-rose-400);
271
+ --c-solid-active: var(--color-rose-300);
272
+ --c-bg-subtle: var(--color-rose-950);
273
+ --c-bg-muted: var(--color-rose-900);
274
+ --c-bg-pastel: var(--color-rose-800);
275
+ --c-bg-strong: var(--color-rose-700);
276
+ --c-text: var(--color-rose-400);
277
+ --c-text-strong: var(--color-rose-300);
278
+ --c-border: var(--color-rose-800);
279
+ --c-on-solid: white;
280
+ }
281
+
282
+ [data-theme="dark"] [data-color="slate"] {
283
+ --c-solid: var(--color-slate-500);
284
+ --c-solid-hover: var(--color-slate-400);
285
+ --c-solid-active: var(--color-slate-300);
286
+ --c-bg-subtle: var(--color-slate-950);
287
+ --c-bg-muted: var(--color-slate-900);
288
+ --c-bg-pastel: var(--color-slate-800);
289
+ --c-bg-strong: var(--color-slate-700);
290
+ --c-text: var(--color-slate-400);
291
+ --c-text-strong: var(--color-slate-300);
292
+ --c-border: var(--color-slate-800);
293
+ --c-on-solid: white;
294
+ }
295
+
296
+ [data-theme="dark"] [data-color="gray"] {
297
+ --c-solid: var(--color-gray-500);
298
+ --c-solid-hover: var(--color-gray-400);
299
+ --c-solid-active: var(--color-gray-300);
300
+ --c-bg-subtle: var(--color-gray-950);
301
+ --c-bg-muted: var(--color-gray-900);
302
+ --c-bg-pastel: var(--color-gray-800);
303
+ --c-bg-strong: var(--color-gray-700);
304
+ --c-text: var(--color-gray-400);
305
+ --c-text-strong: var(--color-gray-300);
306
+ --c-border: var(--color-gray-800);
307
+ --c-on-solid: white;
308
+ }
309
+
310
+ [data-theme="dark"] [data-color="zinc"] {
311
+ --c-solid: var(--color-zinc-500);
312
+ --c-solid-hover: var(--color-zinc-400);
313
+ --c-solid-active: var(--color-zinc-300);
314
+ --c-bg-subtle: var(--color-zinc-950);
315
+ --c-bg-muted: var(--color-zinc-900);
316
+ --c-bg-pastel: var(--color-zinc-800);
317
+ --c-bg-strong: var(--color-zinc-700);
318
+ --c-text: var(--color-zinc-400);
319
+ --c-text-strong: var(--color-zinc-300);
320
+ --c-border: var(--color-zinc-800);
321
+ --c-on-solid: white;
322
+ }
323
+
324
+ [data-theme="dark"] [data-color="neutral"] {
325
+ --c-solid: var(--color-neutral-500);
326
+ --c-solid-hover: var(--color-neutral-400);
327
+ --c-solid-active: var(--color-neutral-300);
328
+ --c-bg-subtle: var(--color-neutral-950);
329
+ --c-bg-muted: var(--color-neutral-900);
330
+ --c-bg-pastel: var(--color-neutral-800);
331
+ --c-bg-strong: var(--color-neutral-700);
332
+ --c-text: var(--color-neutral-400);
333
+ --c-text-strong: var(--color-neutral-300);
334
+ --c-border: var(--color-neutral-800);
335
+ --c-on-solid: white;
336
+ }
337
+
338
+ [data-theme="dark"] [data-color="stone"] {
339
+ --c-solid: var(--color-stone-500);
340
+ --c-solid-hover: var(--color-stone-400);
341
+ --c-solid-active: var(--color-stone-300);
342
+ --c-bg-subtle: var(--color-stone-950);
343
+ --c-bg-muted: var(--color-stone-900);
344
+ --c-bg-pastel: var(--color-stone-800);
345
+ --c-bg-strong: var(--color-stone-700);
346
+ --c-text: var(--color-stone-400);
347
+ --c-text-strong: var(--color-stone-300);
348
+ --c-border: var(--color-stone-800);
349
+ --c-on-solid: white;
350
+ }
351
+
352
+ /* ——— Semantic ——— */
353
+
354
+ [data-theme="dark"] [data-color="primary"] {
355
+ --c-solid: var(--color-blue-500);
356
+ --c-solid-hover: var(--color-blue-400);
357
+ --c-solid-active: var(--color-blue-300);
358
+ --c-bg-subtle: var(--color-blue-950);
359
+ --c-bg-muted: var(--color-blue-900);
360
+ --c-bg-pastel: var(--color-blue-800);
361
+ --c-bg-strong: var(--color-blue-700);
362
+ --c-text: var(--color-blue-400);
363
+ --c-text-strong: var(--color-blue-300);
364
+ --c-border: var(--color-blue-800);
365
+ --c-on-solid: white;
366
+ }
367
+
368
+ [data-theme="dark"] [data-color="accent"] {
369
+ --c-solid: var(--color-violet-500);
370
+ --c-solid-hover: var(--color-violet-400);
371
+ --c-solid-active: var(--color-violet-300);
372
+ --c-bg-subtle: var(--color-violet-950);
373
+ --c-bg-muted: var(--color-violet-900);
374
+ --c-bg-pastel: var(--color-violet-800);
375
+ --c-bg-strong: var(--color-violet-700);
376
+ --c-text: var(--color-violet-400);
377
+ --c-text-strong: var(--color-violet-300);
378
+ --c-border: var(--color-violet-800);
379
+ --c-on-solid: white;
380
+ }
381
+
382
+ [data-theme="dark"] [data-color="success"] {
383
+ --c-solid: var(--color-emerald-500);
384
+ --c-solid-hover: var(--color-emerald-400);
385
+ --c-solid-active: var(--color-emerald-300);
386
+ --c-bg-subtle: var(--color-emerald-950);
387
+ --c-bg-muted: var(--color-emerald-900);
388
+ --c-bg-pastel: var(--color-emerald-800);
389
+ --c-bg-strong: var(--color-emerald-700);
390
+ --c-text: var(--color-emerald-400);
391
+ --c-text-strong: var(--color-emerald-300);
392
+ --c-border: var(--color-emerald-800);
393
+ --c-on-solid: white;
394
+ }
395
+
396
+ [data-theme="dark"] [data-color="warning"] {
397
+ --c-solid: var(--color-amber-500);
398
+ --c-solid-hover: var(--color-amber-400);
399
+ --c-solid-active: var(--color-amber-300);
400
+ --c-bg-subtle: var(--color-amber-950);
401
+ --c-bg-muted: var(--color-amber-900);
402
+ --c-bg-pastel: var(--color-amber-800);
403
+ --c-bg-strong: var(--color-amber-700);
404
+ --c-text: var(--color-amber-400);
405
+ --c-text-strong: var(--color-amber-300);
406
+ --c-border: var(--color-amber-800);
407
+ --c-on-solid: var(--color-amber-950);
408
+ }
409
+
410
+ [data-theme="dark"] [data-color="critical"] {
411
+ --c-solid: var(--color-red-500);
412
+ --c-solid-hover: var(--color-red-400);
413
+ --c-solid-active: var(--color-red-300);
414
+ --c-bg-subtle: var(--color-red-950);
415
+ --c-bg-muted: var(--color-red-900);
416
+ --c-bg-pastel: var(--color-red-800);
417
+ --c-bg-strong: var(--color-red-700);
418
+ --c-text: var(--color-red-400);
419
+ --c-text-strong: var(--color-red-300);
420
+ --c-border: var(--color-red-800);
421
+ --c-on-solid: white;
422
+ }
423
+
424
+ [data-theme="dark"] [data-color="info"] {
425
+ --c-solid: var(--color-sky-500);
426
+ --c-solid-hover: var(--color-sky-400);
427
+ --c-solid-active: var(--color-sky-300);
428
+ --c-bg-subtle: var(--color-sky-950);
429
+ --c-bg-muted: var(--color-sky-900);
430
+ --c-bg-pastel: var(--color-sky-800);
431
+ --c-bg-strong: var(--color-sky-700);
432
+ --c-text: var(--color-sky-400);
433
+ --c-text-strong: var(--color-sky-300);
434
+ --c-border: var(--color-sky-800);
435
+ --c-on-solid: white;
436
+ }
437
+
438
+ /* ——— Radix compat ——— */
439
+
440
+ [data-theme="dark"] [data-color="tomato"] {
441
+ --c-solid: var(--color-red-500);
442
+ --c-solid-hover: var(--color-red-400);
443
+ --c-solid-active: var(--color-red-300);
444
+ --c-bg-subtle: var(--color-red-950);
445
+ --c-bg-muted: var(--color-red-900);
446
+ --c-bg-pastel: var(--color-red-800);
447
+ --c-bg-strong: var(--color-red-700);
448
+ --c-text: var(--color-red-400);
449
+ --c-text-strong: var(--color-red-300);
450
+ --c-border: var(--color-red-800);
451
+ --c-on-solid: white;
452
+ }
453
+
454
+ [data-theme="dark"] [data-color="crimson"] {
455
+ --c-solid: var(--color-rose-500);
456
+ --c-solid-hover: var(--color-rose-400);
457
+ --c-solid-active: var(--color-rose-300);
458
+ --c-bg-subtle: var(--color-rose-950);
459
+ --c-bg-muted: var(--color-rose-900);
460
+ --c-bg-pastel: var(--color-rose-800);
461
+ --c-bg-strong: var(--color-rose-700);
462
+ --c-text: var(--color-rose-400);
463
+ --c-text-strong: var(--color-rose-300);
464
+ --c-border: var(--color-rose-800);
465
+ --c-on-solid: white;
466
+ }
467
+
468
+ [data-theme="dark"] [data-color="plum"] {
469
+ --c-solid: var(--color-purple-500);
470
+ --c-solid-hover: var(--color-purple-400);
471
+ --c-solid-active: var(--color-purple-300);
472
+ --c-bg-subtle: var(--color-purple-950);
473
+ --c-bg-muted: var(--color-purple-900);
474
+ --c-bg-pastel: var(--color-purple-800);
475
+ --c-bg-strong: var(--color-purple-700);
476
+ --c-text: var(--color-purple-400);
477
+ --c-text-strong: var(--color-purple-300);
478
+ --c-border: var(--color-purple-800);
479
+ --c-on-solid: white;
480
+ }
481
+
482
+ [data-theme="dark"] [data-color="grass"] {
483
+ --c-solid: var(--color-green-500);
484
+ --c-solid-hover: var(--color-green-400);
485
+ --c-solid-active: var(--color-green-300);
486
+ --c-bg-subtle: var(--color-green-950);
487
+ --c-bg-muted: var(--color-green-900);
488
+ --c-bg-pastel: var(--color-green-800);
489
+ --c-bg-strong: var(--color-green-700);
490
+ --c-text: var(--color-green-400);
491
+ --c-text-strong: var(--color-green-300);
492
+ --c-border: var(--color-green-800);
493
+ --c-on-solid: white;
494
+ }
495
+
496
+ [data-theme="dark"] [data-color="brown"] {
497
+ --c-solid: var(--color-stone-500);
498
+ --c-solid-hover: var(--color-stone-400);
499
+ --c-solid-active: var(--color-stone-300);
500
+ --c-bg-subtle: var(--color-stone-950);
501
+ --c-bg-muted: var(--color-stone-900);
502
+ --c-bg-pastel: var(--color-stone-800);
503
+ --c-bg-strong: var(--color-stone-700);
504
+ --c-text: var(--color-stone-400);
505
+ --c-text-strong: var(--color-stone-300);
506
+ --c-border: var(--color-stone-800);
507
+ --c-on-solid: white;
508
+ }
509
+
510
+ [data-theme="dark"] [data-color="mint"] {
511
+ --c-solid: var(--color-emerald-500);
512
+ --c-solid-hover: var(--color-emerald-400);
513
+ --c-solid-active: var(--color-emerald-300);
514
+ --c-bg-subtle: var(--color-emerald-950);
515
+ --c-bg-muted: var(--color-emerald-900);
516
+ --c-bg-pastel: var(--color-emerald-800);
517
+ --c-bg-strong: var(--color-emerald-700);
518
+ --c-text: var(--color-emerald-400);
519
+ --c-text-strong: var(--color-emerald-300);
520
+ --c-border: var(--color-emerald-800);
521
+ --c-on-solid: white;
522
+ }
523
+
524
+ [data-theme="dark"] [data-color="gold"] {
525
+ --c-solid: var(--color-amber-500);
526
+ --c-solid-hover: var(--color-amber-400);
527
+ --c-solid-active: var(--color-amber-300);
528
+ --c-bg-subtle: var(--color-amber-950);
529
+ --c-bg-muted: var(--color-amber-900);
530
+ --c-bg-pastel: var(--color-amber-800);
531
+ --c-bg-strong: var(--color-amber-700);
532
+ --c-text: var(--color-amber-400);
533
+ --c-text-strong: var(--color-amber-300);
534
+ --c-border: var(--color-amber-800);
535
+ --c-on-solid: var(--color-amber-950);
536
+ }
537
+
538
+ [data-theme="dark"] [data-color="bronze"] {
539
+ --c-solid: var(--color-orange-500);
540
+ --c-solid-hover: var(--color-orange-400);
541
+ --c-solid-active: var(--color-orange-300);
542
+ --c-bg-subtle: var(--color-orange-950);
543
+ --c-bg-muted: var(--color-orange-900);
544
+ --c-bg-pastel: var(--color-orange-800);
545
+ --c-bg-strong: var(--color-orange-700);
546
+ --c-text: var(--color-orange-400);
547
+ --c-text-strong: var(--color-orange-300);
548
+ --c-border: var(--color-orange-800);
549
+ --c-on-solid: white;
550
+ }
551
+
552
+ [data-theme="dark"] [data-color="mauve"] {
553
+ --c-solid: var(--color-zinc-500);
554
+ --c-solid-hover: var(--color-zinc-400);
555
+ --c-solid-active: var(--color-zinc-300);
556
+ --c-bg-subtle: var(--color-zinc-950);
557
+ --c-bg-muted: var(--color-zinc-900);
558
+ --c-bg-pastel: var(--color-zinc-800);
559
+ --c-bg-strong: var(--color-zinc-700);
560
+ --c-text: var(--color-zinc-400);
561
+ --c-text-strong: var(--color-zinc-300);
562
+ --c-border: var(--color-zinc-800);
563
+ --c-on-solid: white;
564
+ }
565
+
566
+ [data-theme="dark"] [data-color="sage"] {
567
+ --c-solid: var(--color-green-500);
568
+ --c-solid-hover: var(--color-green-400);
569
+ --c-solid-active: var(--color-green-300);
570
+ --c-bg-subtle: var(--color-green-950);
571
+ --c-bg-muted: var(--color-green-900);
572
+ --c-bg-pastel: var(--color-green-800);
573
+ --c-bg-strong: var(--color-green-700);
574
+ --c-text: var(--color-green-400);
575
+ --c-text-strong: var(--color-green-300);
576
+ --c-border: var(--color-green-800);
577
+ --c-on-solid: white;
578
+ }
579
+
580
+ [data-theme="dark"] [data-color="olive"] {
581
+ --c-solid: var(--color-lime-500);
582
+ --c-solid-hover: var(--color-lime-400);
583
+ --c-solid-active: var(--color-lime-300);
584
+ --c-bg-subtle: var(--color-lime-950);
585
+ --c-bg-muted: var(--color-lime-900);
586
+ --c-bg-pastel: var(--color-lime-800);
587
+ --c-bg-strong: var(--color-lime-700);
588
+ --c-text: var(--color-lime-400);
589
+ --c-text-strong: var(--color-lime-300);
590
+ --c-border: var(--color-lime-800);
591
+ --c-on-solid: var(--color-lime-950);
592
+ }
593
+
594
+ [data-theme="dark"] [data-color="sand"] {
595
+ --c-solid: var(--color-stone-500);
596
+ --c-solid-hover: var(--color-stone-400);
597
+ --c-solid-active: var(--color-stone-300);
598
+ --c-bg-subtle: var(--color-stone-950);
599
+ --c-bg-muted: var(--color-stone-900);
600
+ --c-bg-pastel: var(--color-stone-800);
601
+ --c-bg-strong: var(--color-stone-700);
602
+ --c-text: var(--color-stone-400);
603
+ --c-text-strong: var(--color-stone-300);
604
+ --c-border: var(--color-stone-800);
605
+ --c-on-solid: white;
606
+ }