ui-lab-theme-onyx 0.3.411 → 0.4.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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles.css +1068 -778
package/styles.css CHANGED
@@ -1,779 +1,1069 @@
1
- /* Onyx Theme - Button Styles */
2
-
3
- .button {
4
- --background: var(--background-800);
5
- --foreground: var(--foreground-200);
6
- --background-border: color-mix(in srgb, var(--background-600) 15%, transparent);
7
- --focus-visible: var(--accent-400);
8
- --hover-background: color-mix(in srgb, var(--background-600) 40%, var(--background-950));
9
- --hover-border: color-mix(in srgb, var(--background-600) 75%, var(--background-950));
10
- }
11
-
12
- .button {
13
- font-size: var(--text-sm);
14
- }
15
-
16
- .button.icon {
17
- @apply aspect-square
18
- }
19
-
20
- .button.sm {
21
- @apply px-2 py-1.5 text-xs font-semibold
22
- }
23
-
24
- .button.md {
25
- @apply px-3 py-1.5
26
- }
27
-
28
- .button.lg {
29
- @apply px-5 py-2.5
30
- }
31
-
32
- .button.primary {
33
- --background: var(--foreground-200);
34
- --foreground: var(--background-900);
35
- --background-border: var(--foreground-200);
36
- --hover-background: var(--foreground-300);
37
- --hover-border: var(--foreground-300);
38
- }
39
-
40
- .button.secondary {
41
- --background: var(--background-900);
42
- --foreground: var(--foreground-300);
43
- --background-border: var(--background-700);
44
- }
45
-
46
- .button.outline {
47
- --background: transparent;
48
- --foreground: var(--foreground-300);
49
- --background-border: var(--background-700);
50
- --hover-background: var(--background-700);
51
- --hover-border: var(--background-700);
52
- outline-style: unset !important;
53
- }
54
-
55
- .button.danger {
56
- --background: color-mix(in srgb, var(--danger-500) 15%, transparent);
57
- --foreground: var(--danger-500);
58
- --background-border: transparent;
59
- --focus-visible: var(--danger-400);
60
- --hover-background: color-mix(in srgb, var(--danger-500) 25%, transparent);
61
- --hover-border: transparent;
62
- }
63
-
64
- .button.ghost {
65
- --background: transparent;
66
- --foreground: var(--foreground-300);
67
- --background-border: transparent;
68
- --hover-background: var(--background-700);
69
- --hover-border: transparent;
70
- }
71
-
72
- /* Gallery Styles */
73
-
74
- .gallery.item {
75
- --background: var(--background-950);
76
- --border: var(--background-700);
77
- --border-hover: var(--background-600);
78
- --border-focus: var(--accent-500);
79
- }
80
-
81
- .gallery.body {
82
- --title-color: var(--foreground-50);
83
- --description-color: var(--foreground-300);
84
- }
85
-
86
- /* Expand Styles */
87
-
88
- .expand {
89
- --trigger-background: transparent;
90
- --trigger-background-hover: var(--background-900);
91
- --trigger-foreground: var(--foreground-50);
92
- --content-background: transparent;
93
- --content-foreground: var(--foreground-300);
94
- }
95
-
96
- /* Card Styles */
97
-
98
- .card {
99
- --background: var(--background-800);
100
- --border: var(--background-700);
101
- --focus-ring: var(--accent-400);
102
- }
103
-
104
- .card.header {
105
- --border: var(--background-700);
106
- }
107
-
108
- .card.footer {
109
- --background: color-mix(in srgb, var(--background-900) 50%, transparent);
110
- --border: var(--background-700);
111
- }
112
-
113
- /* List Styles */
114
-
115
- .list {
116
- --foreground: var(--foreground-50);
117
- --background-hover: color-mix(in srgb, var(--background-500) 6%, transparent);
118
- --background-highlighted: color-mix(in srgb, var(--background-500) 6%, transparent);
119
- --header-title-color: var(--foreground-50);
120
- --header-subtitle-color: var(--foreground-400);
121
- --desc-color: var(--foreground-400);
122
- --action-color: var(--foreground-400);
123
- --action-hover-color: var(--foreground-50);
124
- }
125
-
126
- /* Group Styles */
127
-
128
- .group {
129
- --background: var(--background-950);
130
- /* --foreground: red; */
131
- --border: var(--background-700);
132
- --focus-ring-color: var(--accent-500);
133
- --active-background: var(--background-800);
134
- --active-foreground: var(--foreground-100);
135
- }
136
-
137
- .group.ghost {
138
- --background: transparent;
139
- }
140
-
141
- /* Command Styles */
142
- .command {
143
- --background-default: var(--background-900);
144
- --background-input: var(--background-900);
145
- --background-hover: var(--background-800);
146
- --background-selected: var(--background-800);
147
- --list-background: var(--background-950);
148
- --footer-background: var(--background-800);
149
- --border-default: var(--background-700);
150
- --color-default: var(--foreground-300);
151
- --color-muted: var(--foreground-400);
152
- --color-icon: var(--foreground-400);
153
- --overlay: rgb(0 0 0 / 0.2);
154
- --overlay-backdrop: blur(4px);
155
- --shadow: 0 20px 25px -5px rgb(#ff0000 / 0.1);
156
- }
157
-
158
-
159
- /* Date Styles */
160
-
161
- .date {
162
- --background: var(--background-950);
163
- --border: var(--background-700);
164
- --focus-ring: var(--foreground-300);
165
- }
166
-
167
- .date.date-header {
168
- --header-color: var(--foreground-300);
169
- }
170
-
171
- .date.date-day-headers {
172
- --day-headers-background: var(--background-900);
173
- }
174
-
175
- .date.date-day-header {
176
- --day-header-color: var(--foreground-400);
177
- }
178
-
179
- .date.date-nav-button {
180
- --nav-button-color: var(--foreground-400);
181
- --nav-button-background-hover: var(--background-800);
182
- }
183
-
184
- .date.date-grid {
185
- --grid-background: var(--background-900);
186
- }
187
-
188
- .date.date-day {
189
- --cell-text: var(--foreground-300);
190
- }
191
-
192
- .date.date-day[data-selected="true"] {
193
- --cell-background: var(--background-800);
194
- --cell-text: var(--foreground-50);
195
- }
196
-
197
- .date.date-day[data-today="true"] {
198
- --cell-background: var(--background-800);
199
- --cell-text: var(--foreground-50);
200
- }
201
-
202
- .date.date-day[data-disabled="true"],
203
- .date.date-day[data-out-of-range="true"] {
204
- --cell-text: var(--foreground-400);
205
- }
206
-
207
- .date.date-day:hover:not([data-disabled="true"]):not([data-out-of-range="true"]) {
208
- --cell-background: var(--background-800);
209
- }
210
-
211
- /* Checkbox Styles */
212
-
213
- .checkbox {
214
- --background: var(--background-900);
215
- --border: var(--background-700);
216
- --ring-color: var(--accent-500);
217
- --hover-background: color-mix(in srgb, var(--background-500) 10%, transparent);
218
- --hover-border: var(--background-600);
219
- }
220
-
221
- .checkbox[data-selected="true"] {
222
- --background: var(--accent-500);
223
- --hover-background: var(--accent-600);
224
- --border: var(--accent-500);
225
- --hover-border: var(--accent-400);
226
- }
227
-
228
- .checkbox[data-indeterminate="true"] {
229
- --background: var(--accent-600);
230
- --hover-background: var(--accent-500);
231
- --border: var(--accent-600);
232
- --hover-border: var(--accent-400);
233
- }
234
-
235
- .checkbox-root.checkbox-checkmark,
236
- .checkbox-root.checkbox-indeterminate {
237
- --checkmark-color: white
238
- }
239
-
240
- .checkbox-root.helper-text-error {
241
- --error-color: white;
242
- }
243
-
244
- /* Color Styles */
245
-
246
- .color {
247
- --background: color-mix(in srgb, var(--background-800) 30%, transparent);
248
- --border: var(--background-700);
249
- --ring-color: var(--accent-500);
250
- --pointer-border: color-mix(in srgb, var(--foreground-200) 50%, transparent);
251
- --thumb-border: white;
252
- --thumb-background: white;
253
- --checkerboard-dark: var(--background-800);
254
- --checkerboard-light: var(--background-700);
255
- }
256
-
257
- /* Label Styles */
258
-
259
- .label {
260
- --foreground: var(--foreground-300);
261
- --disabled-foreground: var(--foreground-400);
262
- --error-foreground: var(--danger-600);
263
- }
264
-
265
- .label.required-indicator {
266
- --required-color: var(--danger-600);
267
- }
268
-
269
- .label.helper-text {
270
- --helper-color: var(--foreground-400);
271
- }
272
-
273
- .label.helper-text[data-error] {
274
- --helper-error-color: var(--danger-600);
275
- }
276
-
277
- /* Input Styles */
278
-
279
- .input {
280
- --background: var(--background-950);
281
- --foreground: var(--foreground-50);
282
- --placeholder: var(--foreground-400);
283
- --border: var(--background-700);
284
- --background-hover: var(--background-700);
285
- --border-hover: var(--background-600);
286
- --ring-color: var(--accent-500);
287
- --disabled-background: var(--background-900);
288
- --disabled-foreground: var(--foreground-400);
289
- font-size: var(--text-xs);
290
- font-weight: var(--font-weight-medium)
291
- }
292
-
293
- .input[data-error] {
294
- --border: var(--danger-600);
295
- --ring-color: var(--danger-600);
296
- }
297
-
298
- .input[data-variant="ghost"] {
299
- --background: transparent;
300
- --border: transparent;
301
- --background-hover: transparent;
302
- --border-hover: transparent;
303
- }
304
-
305
- .input[data-variant="ghost"][data-focus-visible] {
306
- box-shadow: none;
307
- }
308
-
309
- .input.icon-wrapper {
310
- --icon-color: var(--foreground-400);
311
- }
312
-
313
- .input.spin-button {
314
- --spin-color: var(--foreground-400);
315
- --spin-hover-background: var(--background-800);
316
- --spin-hover-color: var(--foreground-200);
317
- --spin-active-background: var(--background-700);
318
- --spin-active-color: var(--accent-500);
319
- }
320
-
321
- /* Slider Styles */
322
-
323
- .radio {
324
- --radio-background-unchecked: var(--background-800);
325
- --radio-border-unchecked: var(--background-700);
326
- --radio-background-checked: var(--accent-500);
327
- --radio-border-checked: var(--accent-500);
328
- --radio-dot-unchecked: transparent;
329
- --radio-dot-checked: var(--accent-50);
330
- --radio-hover-background: var(--accent-500);
331
- --radio-hover-border: var(--background-500);
332
- --radio-error-border: var(--danger-500);
333
- --ring-color: rgb(59, 130, 246);
334
- }
335
-
336
- .radio.radio-label {
337
- --radio-foreground: var(--foreground-300);
338
- }
339
-
340
- .radio.radio-label-disabled {
341
- --radio-foreground-disabled: var(--foreground-400);
342
- }
343
-
344
- .radio.radio-description {
345
- --radio-helper: var(--foreground-400);
346
- }
347
-
348
- .radio.radio-description-error {
349
- --radio-helper-error: var(--danger-500);
350
- }
351
-
352
- .radio.primary[data-checked="true"] {
353
- --radio-background-checked: var(--accent-500);
354
- --radio-border-checked: var(--accent-500);
355
- }
356
-
357
- .radio.secondary {
358
- --radio-background-unchecked: var(--background-800);
359
- --radio-border-unchecked: var(--background-700);
360
- }
361
-
362
- .radio.outline {
363
- --radio-background-unchecked: transparent;
364
- --radio-border-unchecked: var(--background-700);
365
- }
366
-
367
- .radio.outline[data-checked="true"] {
368
- --radio-background-unchecked: color-mix(in srgb, var(--accent-500) 15%, transparent);
369
- --radio-border-unchecked: var(--accent-500);
370
- --radio-dot-unchecked: var(--accent-500);
371
- }
372
-
373
- /* Select Styles */
374
-
375
- .select {
376
- --background: color-mix(in srgb, var(--background-800) 50%, transparent);
377
- --foreground: var(--foreground-300);
378
- --border-color: var(--background-700);
379
- --ring-color: var(--accent-400);
380
- --focus-ring-background: var(--background-950);
381
- --hover-background: color-mix(in srgb, var(--background-700) 50%, transparent);
382
- --pressed-background: color-mix(in srgb, var(--background-600) 50%, transparent);
383
- --font-size: var(--text-xs)
384
- }
385
-
386
- .select.ghost {
387
- --background: transparent;
388
- --border-color: transparent;
389
- --hover-background: color-mix(in srgb, var(--background-700) 50%, transparent);
390
- --pressed-background: color-mix(in srgb, var(--background-700) 50%, transparent);
391
- }
392
-
393
- .select.content,
394
- .select.sub-content {
395
- --background: var(--background-900);
396
- --border-color: var(--background-700);
397
- }
398
-
399
- .select.item,
400
- .select.sub-trigger {
401
- --foreground: var(--foreground-300);
402
- --muted-foreground: var(--foreground-400);
403
- --icon-color: var(--foreground-300);
404
- --indicator-color: var(--accent-300);
405
- --highlight-background: color-mix(in srgb, var(--background-700) 50%, transparent);
406
- }
407
-
408
- .select.placeholder {
409
- --muted-foreground: var(--foreground-400);
410
- }
411
-
412
- .select.search-trigger {
413
- --search-divider-color: color-mix(in srgb, var(--border-color) 75%, transparent);
414
- --focus-ring-color: var(--accent-500);
415
- }
416
-
417
- /* Slider Styles */
418
-
419
- .slider {
420
- --slider-track-background: var(--background-800);
421
- --slider-range-background-default: color-mix(in srgb, var(--accent-500) 60%, transparent);
422
- --slider-range-background-disabled: var(--background-600);
423
- --slider-thumb-background-default: var(--accent-500);
424
- --slider-thumb-background-focus: var(--accent-400);
425
- --slider-thumb-background-disabled: var(--background-500);
426
- --slider-thumb-ring: color-mix(in srgb, var(--accent-500) 40%, transparent);
427
- }
428
-
429
- /* Switch Styles */
430
-
431
- .switch {
432
- --track-background-unchecked: var(--background-700);
433
- --track-background-checked: color-mix(in srgb, var(--accent-500) 80%, var(--background-500));
434
- --track-background-hover: var(--background-800);
435
- --track-background-active: var(--background-800);
436
- --track-background-disabled: var(--background-950);
437
- --thumb-background-unchecked: var(--background-500);
438
- --thumb-background-checked: white;
439
-
440
- --border: var(--background-600);
441
- --border-hover: transparent;
442
- --border-active: transparent;
443
- --border-checked: transparent;
444
-
445
- --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-500) 40%, transparent);
446
- }
447
-
448
- /* Textarea Styles */
449
-
450
- .textarea {
451
- --background: var(--background-950);
452
- --foreground: var(--foreground-50);
453
- --placeholder: var(--foreground-400);
454
- --border: var(--background-700);
455
- --ring-color: var(--accent-500);
456
- --disabled-background: var(--background-900);
457
- --disabled-foreground: var(--foreground-400);
458
- }
459
-
460
- .textarea[data-error] {
461
- --border: var(--danger-600);
462
- --ring-color: var(--danger-600);
463
- }
464
-
465
- .textarea.scroll-wrapper {
466
- --background: var(--background-950);
467
- --border: var(--background-700);
468
- --ring-color: var(--accent-500);
469
- --disabled-background: var(--background-900);
470
- }
471
-
472
- .textarea.scroll-wrapper[data-error] {
473
- --border: var(--danger-600);
474
- --ring-color: var(--danger-600);
475
- }
476
-
477
- .textarea.resize-handle {
478
- --resize-handle-color: color-mix(in srgb, var(--foreground-400) 72%, transparent);
479
- --resize-handle-color-hover: color-mix(in srgb, var(--foreground-200) 90%, transparent);
480
- }
481
-
482
- .textarea.character-count {
483
- --character-count-color: var(--foreground-400);
484
- --character-count-over-limit-color: var(--danger-600);
485
- }
486
-
487
- /* Banner Styles */
488
-
489
- .banner {
490
- --background: var(--background-900);
491
- --foreground: var(--info-50);
492
- --border: var(--info-600);
493
- }
494
-
495
- .banner.note {
496
- --background: var(--background-900);
497
- --foreground: var(--foreground-200);
498
- --border: var(--background-700);
499
- --icon-color: var(--background-500);
500
- }
501
-
502
- .banner.info {
503
- --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
504
- --foreground: var(--foreground-200);
505
- --border: color-mix(in srgb, var(--info-600) 30%, var(--background-900));
506
- --icon-color: var(--info-600);
507
- }
508
-
509
- .banner.success {
510
- --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
511
- --foreground: var(--foreground-200);
512
- --border: color-mix(in srgb, var(--success-600) 30%, var(--background-900));
513
- --icon-color: var(--success-600);
514
- }
515
-
516
- .banner.warning {
517
- --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
518
- --foreground: var(--foreground-200);
519
- --border: color-mix(in srgb, var(--warning-600) 30%, var(--background-900));
520
- --icon-color: var(--warning-600);
521
- }
522
-
523
- .banner.danger {
524
- --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
525
- --foreground: var(--foreground-200);
526
- --border: color-mix(in srgb, var(--danger-600) 30%, var(--background-900));
527
- --icon-color: var(--danger-600);
528
- }
529
-
530
- /* Badge Styles */
531
-
532
- .badge {
533
- --background: var(--background-800);
534
- --foreground: var(--foreground-200);
535
- --background-border: var(--background-600);
536
- --dismiss-color: var(--foreground-400);
537
- --dismiss-hover-background: color-mix(in srgb, var(--background-700) 80%, var(--background-900));
538
- --dismiss-pressed-background: var(--background-700);
539
- font-weight: var(--font-weight-semibold);
540
- font-size: var(--text-xs)
541
- }
542
-
543
- .badge.default {
544
- --background: color-mix(in srgb, var(--background-600) 10%, var(--background-900));
545
- --foreground: var(--foreground-200);
546
- --background-border: var(--background-700);
547
- }
548
-
549
- .badge.secondary {
550
- --background: color-mix(in srgb, var(--background-600) 40%, transparent);
551
- --foreground: var(--foreground-300);
552
- --background-border: color-mix(in srgb, var(--background-600) 40%, transparent);
553
- ;
554
- }
555
-
556
- .badge.success {
557
- --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
558
- --foreground: var(--success-600);
559
- --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
560
- }
561
-
562
- .badge.warning {
563
- --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
564
- --foreground: var(--warning-600);
565
- --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
566
- }
567
-
568
- .badge.danger {
569
- --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
570
- --foreground: var(--danger-600);
571
- --background-border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
572
- }
573
-
574
- .badge.info {
575
- --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
576
- --foreground: var(--info-600);
577
- --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
578
- }
579
-
580
- /* Popover Styles */
581
-
582
- .popover.content {
583
- --popover-fill: var(--background-900);
584
- --popover-border-color: var(--background-700);
585
- }
586
-
587
- .popover.frame {
588
- --foreground: var(--foreground-200);
589
- }
590
-
591
- /* Tooltip Styles */
592
-
593
- .tooltip.content {
594
- --tooltip-fill: var(--background-900);
595
- --tooltip-border-color: var(--background-700);
596
- font-size: var(--text-xs);
597
- font-weight: var(--font-weight-medium)
598
- }
599
-
600
- .tooltip.frame {
601
- --foreground: var(--foreground-200);
602
- }
603
-
604
- /* Progress Styles */
605
-
606
- .progress {
607
- --track-background: var(--background-700);
608
- --fill-background: color-mix(in srgb, var(--accent-600) 60%, var(--background-500));
609
- }
610
-
611
- .progress.label-row {
612
- --foreground: var(--foreground-400);
613
- }
614
-
615
- .progress.fill.default {
616
- --fill-background: var(--accent-500);
617
- }
618
-
619
- .progress.fill.success {
620
- --fill-background: var(--success-500);
621
- }
622
-
623
- .progress.fill.warning {
624
- --fill-background: var(--warning-500);
625
- }
626
-
627
- .progress.fill.error {
628
- --fill-background: var(--danger-500);
629
- }
630
-
631
- /* Toast Styles */
632
-
633
- .toast {
634
- --background: var(--background-900);
635
- --foreground: var(--foreground-200);
636
- --border: var(--background-600);
637
- --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
638
- --icon-color: currentColor;
639
- --title-color: var(--foreground-100);
640
- --description-color: var(--foreground-300);
641
- --close-color: currentColor;
642
- --close-hover-background: transparent;
643
- }
644
-
645
- .toast.default {
646
- --background: var(--background-900);
647
- --foreground: var(--foreground-200);
648
- --border: var(--background-600);
649
- }
650
-
651
- .toast.danger {
652
- --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
653
- --foreground: var(--foreground-200);
654
- --border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
655
- --icon-color: var(--danger-600);
656
- --close-color: color-mix(in srgb, var(--danger-600) 60%, var(--foreground-50));
657
- --close-hover-background: color-mix(in srgb, var(--danger-500) 20%, var(--background-900));
658
- }
659
-
660
- .toast.success {
661
- --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
662
- --foreground: var(--foreground-200);
663
- --border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
664
- --icon-color: var(--success-600);
665
- --close-color: color-mix(in srgb, var(--success-600) 60%, var(--foreground-50));
666
- --close-hover-background: color-mix(in srgb, var(--success-500) 20%, var(--background-900));
667
- }
668
-
669
- .toast.info {
670
- --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
671
- --foreground: var(--foreground-200);
672
- --border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
673
- --icon-color: var(--info-600);
674
- --close-color: color-mix(in srgb, var(--info-600) 60%, var(--foreground-50));
675
- --close-hover-background: color-mix(in srgb, var(--info-500) 20%, var(--background-900));
676
- }
677
-
678
- .toast.warning {
679
- --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
680
- --foreground: var(--foreground-200);
681
- --border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
682
- --icon-color: var(--warning-600);
683
- --close-color: color-mix(in srgb, var(--warning-600) 60%, var(--foreground-50));
684
- --close-hover-background: color-mix(in srgb, var(--warning-500) 20%, var(--background-900));
685
- }
686
-
687
- /* Menu Styles */
688
-
689
- .menu.content,
690
- .menu.sub-content {
691
- --background: var(--background-900);
692
- --border-color: var(--background-700);
693
- font-size: var(--text-xs)
694
- }
695
-
696
- .menu.trigger {
697
- --active-background: var(--background-700);
698
- }
699
-
700
- .menu.item,
701
- .menu.checkbox-item,
702
- .menu.radio-item,
703
- .menu.sub-trigger {
704
- --foreground: var(--foreground-300);
705
- --highlight-background: color-mix(in srgb, var(--background-700) 50%, transparent);
706
- }
707
-
708
- .menu.item-indicator {
709
- --indicator-color: var(--accent-300);
710
- }
711
-
712
- .menu.label,
713
- .menu.shortcut {
714
- --muted-foreground: var(--foreground-400);
715
- }
716
-
717
- /* Tabs Styles */
718
-
719
- .tabs.indicator {
720
- --indicator-background: color-mix(in srgb, var(--background-700) 50%, transparent);
721
- }
722
-
723
- .tabs.indicator.underline {
724
- --indicator-background: var(--accent-500);
725
- }
726
-
727
- .tabs.list[data-variant="underline"][data-orientation="vertical"] {
728
- --list-border-color: var(--background-700);
729
- }
730
-
731
- .tabs.trigger {
732
- --trigger-color: var(--foreground-400);
733
- --trigger-hover-color: var(--foreground-200);
734
- --trigger-active-color: var(--foreground-50);
735
- --trigger-selected-color: var(--foreground-50);
736
- --trigger-selected-background: color-mix(in srgb, var(--background-700) 50%, transparent);
737
- --trigger-underline-color: var(--accent-500);
738
- --trigger-focus-background: var(--background-800);
739
- font-size: var(--text-xs);
740
- }
741
-
742
- .tabs.content {
743
- --content-outline-color: var(--accent-500);
744
- }
745
-
746
- /* Anchor Styles */
747
-
748
- .anchor.trigger {
749
- --foreground: var(--foreground-200);
750
- --underline-background: var(--background-600);
751
- --underline-background-hover: var(--foreground-400);
752
- --focus-ring: var(--color-background-600);
753
- }
754
-
755
- /* Modal Styles */
756
-
757
- .modal {
758
- --modal-background: var(--background-900);
759
- --modal-border: var(--background-700);
760
- --modal-title-color: var(--foreground-100);
761
- --modal-text-color: var(--foreground-300);
762
- --modal-close-color: var(--foreground-400);
763
- --modal-close-hover: var(--foreground-200);
764
- --modal-focus-ring: var(--accent-500);
765
- --footer-background: var(--background-900);
766
- }
767
-
768
- .modal.backdrop {
769
- --backdrop-background: rgb(0 0 0 / 0.5);
770
- }
771
-
772
- /* Scroll Styles */
773
-
774
- .scroll {
775
- --track-background: transparent;
776
- --thumb-background: var(--background-700);
777
- --thumb-hover-background: var(--background-600);
778
- --thumb-dragging-background: color-mix(in srgb, var(--background-500) 60%, var(--background-950));
1
+ @reference "tailwindcss";
2
+
3
+ :root {
4
+ --spacing: 0.25rem;
5
+ --spacing-xs: calc(var(--spacing) * 1);
6
+ --spacing-sm: calc(var(--spacing) * 2);
7
+ --spacing-md: calc(var(--spacing) * 4);
8
+ --spacing-lg: calc(var(--spacing) * 6);
9
+ --spacing-xl: calc(var(--spacing) * 8);
10
+
11
+ --text-xs: calc(var(--spacing) * 3);
12
+ --text-sm: calc(var(--spacing) * 3.25);
13
+ --text-base: calc(var(--spacing) * 3.75);
14
+ --text-md: var(--text-base);
15
+ --text-lg: calc(var(--spacing) * 4.5);
16
+ --text-xl: calc(var(--spacing) * 5);
17
+ --text-2xl: calc(var(--spacing) * 6);
18
+ --text-3xl: calc(var(--spacing) * 7);
19
+ --text-4xl: calc(var(--spacing) * 9);
20
+ --text-5xl: calc(var(--spacing) * 11);
21
+ --text-body-size: var(--text-base);
22
+ --leading-sm: 1.25rem;
23
+ --leading-body: 1.6;
24
+
25
+
26
+ --hover-enter-duration: 0ms;
27
+ --hover-leave-duration: 300ms;
28
+ --hover-duration: var(--hover-leave-duration);
29
+ --hover-transition-timing-function: var(--ease-snappy-pop, ease-out);
30
+
31
+ --ring-background: #0f74c5
32
+ }
33
+
34
+ /* Keep theme tokens above component fallbacks even when component CSS is auto-imported later. */
35
+ @layer components.defaults, components.theme;
36
+
37
+ @layer components.theme {
38
+ [data-ring="true"] {
39
+ --ring: var(--ring-background);
40
+ --ring-width: 2px;
41
+ --ring-border: var(--ring);
42
+ --ring-border-visible: var(--ring-border);
43
+ --ring-shadow: 0 0 0 var(--ring-width) var(--ring);
44
+ --ring-z: 10;
45
+ }
46
+
47
+ .button {
48
+ --background: var(--background-800);
49
+ --background-border: var(--background-700);
50
+ --focus-visible: var(--accent-400);
51
+ --foreground: var(--foreground-300);
52
+ --icon-foreground: var(--foreground-400);
53
+ font-size: var(--text-md)
54
+ }
55
+
56
+ .button:is([data-hovered="true"], [data-selected="true"]):not([data-disabled="true"]) {
57
+ --background: color-mix(in srgb, var(--background-600) 50%, var(--background-950));
58
+ --background-border: var(--background-600);
59
+ }
60
+
61
+ .button[data-pressed="true"]:not([data-disabled="true"]) {
62
+ --background: color-mix(in srgb, var(--background-600) 60%, var(--background-950));
63
+ --background-border: var(--background-600);
64
+ }
65
+
66
+ .button.sm { @apply px-2.5 py-1; }
67
+ .button.md { @apply px-5 py-2; }
68
+ .button.lg { @apply px-3.5 py-2.5; }
69
+
70
+ .button[data-hint="true"] {
71
+ @apply pr-1;
72
+ }
73
+
74
+ .gallery > .item {
75
+ --background: var(--background-950);
76
+ --background-border: var(--background-700);
77
+ --focus-visible: var(--accent-400);
78
+ }
79
+
80
+ .gallery > .item[data-hovered="true"]:not([data-disabled="true"]) {
81
+ --background-border: var(--background-600);
82
+ }
83
+
84
+ .gallery > .item[data-pressed="true"]:not([data-disabled="true"]) {
85
+ --background-border: var(--accent-500);
86
+ }
87
+
88
+ .gallery > .item > .view {
89
+ --background: var(--background-950);
90
+ }
91
+
92
+ .gallery > .item > .body {
93
+ --foreground: var(--foreground-50);
94
+ --foreground-muted: var(--foreground-300);
95
+ }
96
+
97
+ .expand > .trigger {
98
+ --background: transparent;
99
+ --foreground: var(--foreground-50);
100
+ }
101
+
102
+ .expand > .trigger:hover:not([data-disabled="true"]),
103
+ .expand > .trigger[data-hovered="true"]:not([data-disabled="true"]) {
104
+ --background: var(--background-900);
105
+ }
106
+
107
+ .expand > .content {
108
+ --background: transparent;
109
+ --closed-animation: slide-out-to-top 0.15s var(--ease-snappy-pop);
110
+ --foreground: var(--foreground-300);
111
+ --open-animation: slide-in-from-top 0.15s var(--ease-snappy-pop);
112
+ }
113
+
114
+ .card {
115
+ --background: var(--background-900);
116
+ --background-border: var(--background-700);
117
+ --focus-visible: var(--accent-400);
118
+ --foreground: var(--foreground-200);
119
+ }
120
+
121
+ .card > .footer {
122
+ --background: color-mix(in srgb, var(--background-900) 50%, transparent);
123
+ }
124
+
125
+ .list {
126
+ --foreground: var(--foreground-50);
127
+ }
128
+
129
+ .list > .header > .title {
130
+ --foreground: var(--foreground-50);
131
+ }
132
+
133
+ .list > .header > .subtitle,
134
+ .list > .description {
135
+ --foreground: var(--foreground-400);
136
+ }
137
+ .list > [role="option"] {
138
+ --background: transparent;
139
+ --foreground: var(--foreground-50);
140
+ }
141
+ .list > [role="option"]:hover:not([data-disabled="true"]),
142
+ .list > [role="option"][data-highlighted="true"]:not([data-disabled="true"]) {
143
+ --background: color-mix(in srgb, var(--background-500) 6%, transparent);
144
+ }
145
+
146
+ .list > [role="option"][data-selected="true"] {
147
+ --background: color-mix(in srgb, var(--background-500) 10%, transparent);
148
+ }
149
+
150
+ .list > [role="option"][data-selected="true"]:hover:not([data-disabled="true"]),
151
+ .list > [role="option"][data-selected="true"][data-highlighted="true"]:not([data-disabled="true"]) {
152
+ --background: color-mix(in srgb, var(--background-500) 14%, transparent);
153
+ }
154
+
155
+ .list > [role="option"] > .actions > .button {
156
+ --background: transparent;
157
+ --foreground: var(--foreground-400);
158
+ }
159
+
160
+ .list > [role="option"] > .actions > .button:hover:not([data-disabled="true"]) {
161
+ --background: color-mix(in srgb, var(--background-500) 6%, transparent);
162
+ --foreground: var(--foreground-50);
163
+ }
164
+
165
+ .group {
166
+ --background: var(--background-950);
167
+ --background-border: var(--background-700);
168
+ }
169
+
170
+ .group > .input,
171
+ .group > .item > .input {
172
+ --background: var(--background-950);
173
+ --background-border: var(--background-600);
174
+ }
175
+
176
+ .group > .divider {
177
+ --background: var(--background-border);
178
+ }
179
+
180
+ .group.outline > .input,
181
+ .group.outline > .item > .input {
182
+ --background: transparent;
183
+ }
184
+
185
+ .group > .button[data-selected="true"],
186
+ .group > .item > .button[data-selected="true"] {
187
+ --foreground: var(--foreground-100);
188
+ }
189
+
190
+ .group > .select > .value,
191
+ .group > .item > .select > .value {
192
+ padding-inline: calc(var(--spacing) * 1.5);
193
+ }
194
+
195
+ .group > .select > .value:has(> .button[data-hovered="true"]:not([data-disabled="true"])),
196
+ .group > .item > .select > .value:has(> .button[data-hovered="true"]:not([data-disabled="true"])) {
197
+ --background: color-mix(in srgb, var(--background-800) 50%, transparent);
198
+ }
199
+
200
+ .group > .select > .value > .button,
201
+ .group > .item > .select > .value > .button {
202
+ height: 100%;
203
+ padding-inline: calc(var(--spacing) * 3) !important;
204
+ border-radius: var(--background-inner-radius) 0 0
205
+ var(--background-inner-radius);
206
+ }
207
+
208
+ .command {
209
+ --background: var(--background-900);
210
+ --background-list: var(--background-950);
211
+ --background-footer: var(--background-800);
212
+ --border: var(--background-700);
213
+ --foreground: var(--foreground-300);
214
+ --foreground-muted: var(--foreground-400);
215
+ --overlay: rgb(0 0 0 / 20%);
216
+ --overlay-backdrop: blur(4px);
217
+ --shadow: 0 20px 25px -5px rgb(0 0 0 / 35%);
218
+ --leading: var(--leading-sm);
219
+ font-weight: var(--font-weight-body-medium, 500);
220
+ }
221
+
222
+ .command [role="option"] {
223
+ --background: transparent;
224
+ --foreground: var(--foreground-300);
225
+ }
226
+
227
+ .command [role="option"]:hover:not([data-disabled="true"]),
228
+ .command [role="option"][data-highlighted="true"]:not([data-disabled="true"]) {
229
+ --background: var(--background-800);
230
+ }
231
+
232
+ .date {
233
+ --background: var(--background-950);
234
+ --border: var(--background-700);
235
+ --focus-ring: var(--accent-400);
236
+ }
237
+ .date > .row,
238
+ .date > .grid {
239
+ --background: var(--background-900);
240
+ }
241
+ .date > .row > .title {
242
+ --foreground: var(--foreground-300);
243
+ }
244
+ .date > .row > .label {
245
+ --foreground: var(--foreground-400);
246
+ }
247
+ .date > .row > .button {
248
+ --background: transparent;
249
+ --foreground: var(--foreground-400);
250
+ }
251
+ .date > .row > .button:hover:not([data-disabled="true"]) {
252
+ --background: var(--background-800);
253
+ }
254
+
255
+ .date > .day {
256
+ --background: transparent;
257
+ --foreground: var(--foreground-300);
258
+ }
259
+
260
+ .date > .day[data-selected="true"],
261
+ .date > .day[data-today="true"] {
262
+ --background: var(--background-800);
263
+ --foreground: var(--foreground-50);
264
+ }
265
+
266
+ .date > .day[data-disabled="true"],
267
+ .date > .day[data-out-of-range="true"] {
268
+ --foreground: var(--foreground-400);
269
+ }
270
+
271
+ .date > .day:hover:not([data-disabled="true"]):not([data-out-of-range="true"]),
272
+ .date > .day[data-hovered="true"]:not([data-disabled="true"]):not([data-out-of-range="true"]) {
273
+ --background: var(--background-800);
274
+ }
275
+
276
+ .table {
277
+ --background: var(--background-950);
278
+ --border: var(--background-700);
279
+ --focus-ring: var(--accent-400);
280
+ --foreground: var(--foreground-300);
281
+ }
282
+ .table > .header,
283
+ .table > .filter {
284
+ --background: var(--background-900);
285
+ }
286
+ .table > .header {
287
+ --foreground: var(--foreground-400);
288
+ }
289
+ .table .row {
290
+ --background: transparent;
291
+ --foreground: var(--foreground-300);
292
+ }
293
+
294
+ .table .row:hover:not([data-disabled="true"]),
295
+ .table .row[data-selected="true"]:not([data-disabled="true"]) {
296
+ --background: var(--background-800);
297
+ }
298
+
299
+ .table > .filter > .label,
300
+ .table > .empty {
301
+ --foreground: var(--foreground-400);
302
+ }
303
+
304
+ .checkbox {
305
+ --background: var(--background-900);
306
+ --background-border: var(--background-700);
307
+ --helper-error-foreground: var(--danger-600);
308
+ --helper-foreground: var(--foreground-400);
309
+ --ring: var(--accent-500);
310
+ }
311
+
312
+ .checkbox:hover:not([data-disabled="true"]),
313
+ .checkbox[data-hovered="true"]:not([data-disabled="true"]) {
314
+ --background: color-mix(in srgb, var(--background-500) 10%, var(--background-900));
315
+ --background-border: var(--background-600);
316
+ }
317
+
318
+ .checkbox:is([data-selected="true"], [data-indeterminate="true"]) {
319
+ --background: var(--background-900);
320
+ --background-border: var(--background-700);
321
+
322
+ &:is(:hover, [data-hovered="true"]):not([data-disabled="true"]) {
323
+ --background: var(--background-800);
324
+ --background-border: var(--background-600);
325
+ }
326
+ }
327
+
328
+ .checkbox > :is(.checkmark, .indeterminate) {
329
+ --foreground: var(--foreground-400);
330
+ }
331
+
332
+ .color {
333
+ --background: color-mix(in srgb, var(--background-800) 30%, transparent);
334
+ --background-border: var(--background-700);
335
+ --focus-visible: var(--accent-400);
336
+ }
337
+ .color > .canvas > .pointer {
338
+ --pointer-border: color-mix(in srgb, var(--foreground-200) 50%, transparent);
339
+ }
340
+ .color > .controls > .hue > .track > .thumb,
341
+ .color > .controls > .opacity > .track > .thumb {
342
+ --background: white;
343
+ --border: white;
344
+ }
345
+ .color > .controls > .opacity > .track {
346
+ --checkerboard-dark: var(--background-800);
347
+ --checkerboard-light: var(--background-700);
348
+ }
349
+ .color > .controls > .group > .swatch,
350
+ .color > .controls > .group > .preview {
351
+ --checkerboard-dark: var(--background-700);
352
+ --checkerboard-light: var(--background-800);
353
+ }
354
+
355
+ .label {
356
+ --disabled-foreground: var(--foreground-400);
357
+ --error-foreground: var(--danger-600);
358
+ --foreground: var(--foreground-300);
359
+ }
360
+
361
+ .label > .text > .required {
362
+ --required-color: var(--danger-600);
363
+ }
364
+
365
+ .label > .helper {
366
+ --helper-color: var(--foreground-400);
367
+ }
368
+
369
+ .label > .helper[data-error] {
370
+ --helper-error-color: var(--danger-600);
371
+ }
372
+
373
+ .input {
374
+ --background: var(--background-950);
375
+ --background-border: var(--background-700);
376
+ --disabled-background: var(--background-900);
377
+ --disabled-foreground: var(--foreground-400);
378
+ --foreground: var(--foreground-300);
379
+ --placeholder: color-mix(in srgb, var(--foreground-400) 80%, transparent);
380
+ --ring: var(--accent-500);
381
+ --ring-border: var(--ring);
382
+ --ring-border-visible: var(--ring-border);
383
+ }
384
+
385
+ .input[data-error] {
386
+ --ring: var(--danger-600);
387
+ }
388
+
389
+ .input[data-variant="ghost"] {
390
+ --background: transparent;
391
+ --background-border: transparent;
392
+ }
393
+
394
+ .input[data-variant="ghost"][data-focus-visible] {
395
+ box-shadow: none;
396
+ }
397
+
398
+ .input > .icon {
399
+ --foreground: var(--foreground-300);
400
+ }
401
+
402
+ .input > .stepper {
403
+ --active-background: var(--background-700);
404
+ --active-color: var(--foreground-100);
405
+ --foreground: var(--foreground-400);
406
+ --hover-background: var(--background-800);
407
+ --hover-color: var(--foreground-200);
408
+ }
409
+
410
+ .radio {
411
+ --background: var(--background-900);
412
+ --background-border: var(--background-700);
413
+ --focus-visible: var(--accent-400);
414
+ }
415
+ .radio.outline {
416
+ --background: transparent;
417
+ }
418
+
419
+ .radio:hover:not([data-disabled="true"]),
420
+ .radio[data-hovered="true"]:not([data-disabled="true"]) {
421
+ --background: color-mix(in srgb, var(--background-500) 10%, var(--background-900));
422
+ --background-border: var(--background-600);
423
+ }
424
+
425
+ .radio[data-selected="true"] {
426
+ --background: var(--background-900);
427
+ --background-border: var(--background-700);
428
+ }
429
+
430
+ .radio.outline[data-selected="true"] {
431
+ --background: var(--background-600);
432
+ --background-border: var(--background-600);
433
+ }
434
+
435
+ .radio[data-selected="true"]:hover:not([data-disabled="true"]),
436
+ .radio[data-selected="true"][data-hovered="true"]:not([data-disabled="true"]) {
437
+ --background: var(--background-800);
438
+ --background-border: var(--background-600);
439
+ }
440
+
441
+ .radio[data-error="true"]:not([data-selected="true"]) {
442
+ --background-border: var(--danger-600);
443
+ }
444
+ .radio > .dot {
445
+ --background: var(--foreground-300);
446
+ }
447
+ .radio[data-selected="true"] > .dot {
448
+ --background: var(--foreground-400);
449
+ }
450
+ .radio.outline[data-selected="true"] > .dot {
451
+ --background: var(--accent-500);
452
+ }
453
+ .radio > .label {
454
+ --foreground: var(--foreground-300);
455
+ }
456
+ .radio > .label[data-disabled="true"] {
457
+ --foreground: var(--foreground-400);
458
+ }
459
+ .radio > .description,
460
+ .radio > .helper {
461
+ --foreground: var(--foreground-400);
462
+ }
463
+ .radio > .description[data-error="true"],
464
+ .radio > .helper[data-error="true"] {
465
+ --foreground: var(--danger-600);
466
+ }
467
+
468
+ .select {
469
+ --background: color-mix(in srgb, var(--background-800) 30%, transparent);
470
+ --background-border: var(--background-700);
471
+ --focus-visible: var(--accent-400);
472
+ --focus-visible-background: var(--background-950);
473
+ --foreground: var(--foreground-300);
474
+ --size: var(--text-sm);
475
+ --trigger-background-hover: color-mix(in srgb, var(--background-600) 50%, var(--background-950));
476
+ }
477
+
478
+ .select[data-pressed="true"]:not([data-disabled]) {
479
+ --background: color-mix(in srgb, var(--background-600) 50%, transparent);
480
+ }
481
+
482
+ .select[data-open="true"] {
483
+ --background: color-mix(in srgb, var(--background-800) 50%, transparent);
484
+ }
485
+
486
+ .select.ghost {
487
+ --background: transparent;
488
+ --background-border: transparent;
489
+ --trigger-background-hover: var(--background-800);
490
+ }
491
+
492
+ .select.ghost[data-pressed="true"]:not([data-disabled]),
493
+ .select.ghost[data-open="true"] {
494
+ --background: color-mix(in srgb, var(--background-700) 50%, transparent);
495
+ }
496
+
497
+ .select > :is(.content, .sub-content) {
498
+ --background: var(--background-800);
499
+ --background-border: var(--background-600);
500
+ }
501
+
502
+ .select > :is(.content, .sub-content) [role="option"]:is(.item, .trigger) {
503
+ --background: transparent;
504
+ --foreground: var(--foreground-300);
505
+ --foreground-muted: var(--foreground-400);
506
+ --icon-foreground: var(--foreground-300);
507
+ --indicator-foreground: var(--accent-300);
508
+
509
+ &:is([data-highlighted="true"], [data-open="true"]) {
510
+ --background: color-mix(in srgb, var(--background-500) 15%, transparent);
511
+ }
512
+ }
513
+
514
+ .select > .placeholder {
515
+ --foreground-muted: var(--foreground-400);
516
+ }
517
+
518
+ .slider > .track {
519
+ --background: var(--background-900);
520
+ }
521
+
522
+ .slider > .track > .thumb {
523
+ --background: var(--foreground-400);
524
+ --background-border: color-mix(in srgb, var(--background-500) 40%, transparent);
525
+ --disabled-background: var(--background-500);
526
+ --focus-visible: color-mix(in srgb, var(--background-500) 40%, transparent);
527
+ --radius: calc(var(--spacing) * 0.6);
528
+ }
529
+
530
+ .slider > .track > .range {
531
+ --background: color-mix(in srgb, var(--background-500) 20%, transparent);
532
+ --disabled-background: var(--background-600);
533
+ }
534
+
535
+ .switch {
536
+ --background: var(--background-700);
537
+ --background-border: var(--background-600);
538
+ --focus-visible: var(--accent-400);
539
+ --foreground: var(--background-500);
540
+ --transition-duration: 120ms;
541
+ --transition-easing: linear;
542
+ }
543
+
544
+ .switch[data-selected="true"] {
545
+ --background: color-mix(in srgb, var(--background-500) 90%, transparent);
546
+ --background-border: color-mix(in srgb, var(--background-500) 20%, transparent);
547
+ --foreground: color-mix(in srgb, var(--foreground-400) 20%, white);
548
+ }
549
+
550
+ .switch[data-selected="true"]:active:not([data-disabled="true"]),
551
+ .switch[data-selected="true"][data-hovered="true"]:not([data-disabled="true"]) {
552
+ --background-border: color-mix(in srgb, var(--background-500) 30%, transparent);
553
+ }
554
+
555
+ .switch[data-selected="true"]:active:not([data-disabled="true"]) {
556
+ --background: var(--background-600);
557
+ }
558
+
559
+ .textarea {
560
+ --background: var(--background-950);
561
+ --background-border: var(--background-700);
562
+ --disabled-opacity: 0.6;
563
+ --foreground: var(--foreground-300);
564
+ --placeholder: color-mix(in srgb, var(--foreground-400) 80%, transparent);
565
+ }
566
+
567
+ .textarea[data-disabled="true"] {
568
+ --background: var(--background-900);
569
+ --foreground: var(--foreground-400);
570
+ }
571
+
572
+ .textarea[data-error="true"] {
573
+ --background-border: var(--danger-600);
574
+ }
575
+
576
+ .textarea > .scope > .surface > .scroll {
577
+ --background: var(--background-950);
578
+ --background-border: var(--background-700);
579
+ --disabled-opacity: 0.6;
580
+ }
581
+
582
+ .textarea > .scope > .surface > .handle {
583
+ --background: color-mix(in srgb, var(--foreground-400) 72%, transparent);
584
+ }
585
+
586
+ .textarea > .scope > .surface > .handle:hover {
587
+ --background: color-mix(in srgb, var(--foreground-200) 90%, transparent);
588
+ }
589
+
590
+ .textarea > .scope > .count {
591
+ --foreground: var(--foreground-400);
592
+ --foreground-error: var(--danger-600);
593
+ }
594
+
595
+ .banner {
596
+ --background: var(--background-900);
597
+ --border: var(--info-600);
598
+ --foreground: var(--info-50);
599
+ }
600
+
601
+ .badge {
602
+ --background: var(--background-800);
603
+ --background-border: var(--background-600);
604
+ --foreground: var(--foreground-200);
605
+ }
606
+
607
+ .badge.sm {
608
+ @apply px-1.5 py-0.5;
609
+ }
610
+
611
+ .badge.md {
612
+ @apply px-2 py-1.5;
613
+ }
614
+
615
+ .badge.lg {
616
+ @apply px-3 py-1.5;
617
+ }
618
+
619
+ .badge > .dismiss {
620
+ --focus-visible: var(--accent-400);
621
+ --foreground: var(--foreground-400);
622
+ }
623
+
624
+ .badge > .dismiss[data-hovered="true"] {
625
+ --background: color-mix(in srgb, var(--background-700) 80%, var(--background-900));
626
+ }
627
+
628
+ .badge > .dismiss[data-pressed="true"] {
629
+ --background: var(--background-700);
630
+ }
631
+
632
+ .popover > .content,
633
+ .tooltip > .content {
634
+ --background: var(--background-900);
635
+ --background-border: var(--background-700);
636
+ --foreground: var(--foreground-200);
637
+ }
638
+
639
+ .tooltip > .content {
640
+ font-family: var(--font-body);
641
+ font-size: var(--text-xs);
642
+ font-weight: var(--font-weight-body-medium, 500);
643
+ letter-spacing: normal;
644
+ line-height: 1rem;
645
+ }
646
+
647
+ .progress > .track {
648
+ --background: color-mix(in srgb, var(--background-500) 20%, transparent);
649
+ --radius: calc(var(--spacing) * 0.8)
650
+ }
651
+
652
+ .progress > .label {
653
+ --foreground: var(--foreground-400);
654
+ }
655
+
656
+ .progress > .range {
657
+ --radius: calc(var(--spacing) * 0.8)
658
+ }
659
+
660
+ .progress > .track > .thumb {
661
+ --background: var(--foreground-400);
662
+ --radius: calc(var(--spacing) * 0.6);
663
+ }
664
+
665
+ .toast {
666
+ --background: var(--background-900);
667
+ --background-border: var(--background-600);
668
+ --background-shadow: 0 10px 25px -5px rgb(0 0 0 / 10%);
669
+ --foreground: var(--foreground-200);
670
+ }
671
+
672
+ .toast > .icon > .glyph {
673
+ --foreground: currentColor;
674
+ }
675
+
676
+ .toast > .content > .title {
677
+ --foreground: var(--foreground-100);
678
+ }
679
+
680
+ .toast > .content > .description {
681
+ --foreground: var(--foreground-300);
682
+ }
683
+
684
+ .toast > .close {
685
+ --background: transparent;
686
+ --focus-visible: var(--accent-400);
687
+ --foreground: currentColor;
688
+ }
689
+
690
+ .menu > :is(.content, .sub-content) {
691
+ --background: var(--background-700);
692
+ --background-border: var(--background-600);
693
+ --closed-animation: slide-out-to-top 0.15s var(--ease-snappy-pop);
694
+ --foreground: var(--foreground-300);
695
+ --foreground-muted: var(--foreground-400);
696
+ --open-animation: slide-in-from-top 0.15s var(--ease-snappy-pop);
697
+ }
698
+
699
+ .menu > .trigger {
700
+ --background: transparent;
701
+ --focus-visible: var(--accent-400);
702
+ --foreground: var(--foreground-300);
703
+ }
704
+
705
+ .menu > .trigger[data-hovered="true"]:not([data-disabled="true"]) {
706
+ --background: var(--background-800);
707
+ }
708
+
709
+ .menu > .trigger[data-pressed="true"]:not([data-disabled="true"]) {
710
+ --background: var(--background-700);
711
+ }
712
+
713
+ .menu > :is(.content, .sub-content) [role^="menuitem"]:is(.item, .trigger) {
714
+ --background: transparent;
715
+ --foreground: var(--foreground-300);
716
+ --foreground-muted: var(--foreground-400);
717
+ --icon-foreground: var(--foreground-300);
718
+ --indicator-foreground: var(--accent-300);
719
+
720
+ &:is([data-highlighted="true"], [data-focused="true"], [data-open="true"]) {
721
+ --background: color-mix(in srgb, var(--background-500) 15%, transparent);
722
+ }
723
+ }
724
+
725
+ .menu > :is(.content, .sub-content) [role^="menuitem"].item[data-disabled="true"] {
726
+ --foreground: var(--foreground-400);
727
+ opacity: 0.5;
728
+ }
729
+
730
+ .menu > :is(.content, .sub-content) :is(.indicator, .label, .shortcut) {
731
+ --foreground: var(--foreground-400);
732
+ }
733
+
734
+ .path > .link {
735
+ --background: transparent;
736
+ --disabled-opacity: 0.6;
737
+ --focus-visible: var(--accent-400);
738
+ --foreground: var(--foreground-300);
739
+ }
740
+
741
+ .path > .link[data-hovered="true"]:not([data-disabled="true"]):not([data-selected="true"]) {
742
+ --background: color-mix(in srgb, var(--background-700) 50%, transparent);
743
+ --foreground: var(--foreground-200);
744
+ }
745
+
746
+ .path > .link[data-pressed="true"]:not([data-disabled="true"]):not([data-selected="true"]) {
747
+ --background: color-mix(in srgb, var(--background-700) 70%, transparent);
748
+ }
749
+
750
+ .path > .link[data-selected="true"] {
751
+ --foreground: var(--foreground-100);
752
+ }
753
+
754
+ .path > .separator,
755
+ .path > .item {
756
+ --foreground: var(--foreground-400);
757
+ }
758
+
759
+ .tabs > .indicator {
760
+ --background: color-mix(in srgb, var(--background-700) 50%, transparent);
761
+ }
762
+
763
+ .tabs > .indicator.underline {
764
+ --background: var(--accent-500);
765
+ }
766
+ .tabs > .list.underline[data-orientation="vertical"] {
767
+ --border: var(--background-700);
768
+ }
769
+
770
+ .tabs > .trigger {
771
+ --background: transparent;
772
+ --foreground: var(--foreground-300);
773
+ --underline-border: var(--accent-500);
774
+ font-family: var(--font-body);
775
+ font-size: var(--text-md);
776
+ font-weight: var(--font-weight-body-medium, 500);
777
+ letter-spacing: normal;
778
+ line-height: var(--leading-sm);
779
+ }
780
+
781
+ .tabs > .trigger[data-hovered="true"]:not([data-disabled="true"]):not([data-selected="true"]) {
782
+ --background: var(--background-900);
783
+ --foreground: var(--foreground-200);
784
+ }
785
+
786
+ .tabs > .trigger[data-pressed="true"]:not([data-disabled="true"]):not([data-selected="true"]) {
787
+ --background: var(--background-800);
788
+ --foreground: var(--foreground-50);
789
+ }
790
+ .tabs > .trigger[data-selected="true"] {
791
+ --foreground: var(--foreground-50);
792
+ }
793
+ .tabs > .content {
794
+ --focus-visible: var(--accent-400);
795
+ }
796
+
797
+ .anchor {
798
+ @apply py-1.5;
799
+ --focus-ring: var(--background-600);
800
+ --foreground: var(--foreground-200);
801
+ --underline-background: var(--background-600);
802
+ font-family: var(--font-body);
803
+ font-size: var(--text-sm);
804
+ font-weight: var(--font-weight-body-medium, 500);
805
+ letter-spacing: normal;
806
+ line-height: var(--leading-sm);
807
+ }
808
+
809
+ .anchor[data-hovered="true"]:not([data-disabled="true"]) {
810
+ --underline-background: var(--foreground-400);
811
+ }
812
+
813
+ .modal {
814
+ --background: var(--background-900);
815
+ --background-border: var(--background-700);
816
+ --focus-visible: var(--accent-400);
817
+ --foreground: var(--foreground-300);
818
+ }
819
+
820
+ .modal > .panel > .header > .title {
821
+ --foreground: var(--foreground-100);
822
+ }
823
+
824
+ .modal > .panel > .header > .close {
825
+ --focus-visible: var(--accent-400);
826
+ --foreground: var(--foreground-400);
827
+ }
828
+
829
+ .modal > .panel > .header > .close[data-hovered="true"]:not([data-disabled="true"]) {
830
+ --foreground: var(--foreground-200);
831
+ }
832
+
833
+ .modal > .panel > .footer {
834
+ --background: var(--background-900);
835
+ }
836
+
837
+ .modal > .backdrop {
838
+ --background: rgb(0 0 0 / 50%);
839
+ }
840
+
841
+ .divider {
842
+ --background: var(--background-700);
843
+ }
844
+
845
+ .skeleton {
846
+ --background: var(--background-800);
847
+ --radius: var(--radius-sm, 0.375rem);
848
+ }
849
+
850
+ .skeleton-text {
851
+ --last-line-width: 70%;
852
+ }
853
+
854
+ .skeleton-text[data-size="body"] {
855
+ --row-height: 0.75rem;
856
+ --gap: 0.375rem;
857
+ }
858
+
859
+ .skeleton-text[data-size="heading"] {
860
+ --row-height: 1.25rem;
861
+ --gap: 0.5rem;
862
+ }
863
+
864
+ .skeleton-text[data-size="display"] {
865
+ --row-height: 2rem;
866
+ --gap: 0.625rem;
867
+ }
868
+
869
+ .skeleton-image {
870
+ --ratio: 16 / 9;
871
+ }
872
+
873
+ [data-skeleton-animate] {
874
+ --animation: skeleton-pulse 1.6s var(--ease-gentle-ease, ease-in-out) infinite;
875
+ }
876
+
877
+ @keyframes skeleton-pulse {
878
+ 0%, 100% { opacity: 1; }
879
+ 50% { opacity: 0.48; }
880
+ }
881
+
882
+ .scroll > .track {
883
+ --background: transparent;
884
+ }
885
+
886
+ .scroll > .track > .thumb {
887
+ --background: var(--background-600);
888
+ }
889
+
890
+ .scroll > .track > .thumb:hover {
891
+ --background: var(--background-500);
892
+ }
893
+
894
+ .scroll[data-pressed="true"] > .track > .thumb {
895
+ --background: var(--foreground-400);
896
+ }
897
+ }
898
+
899
+ @layer utilities {
900
+ .button.primary {
901
+ --background: var(--foreground-100);
902
+ --background-border: var(--foreground-100);
903
+ --foreground: var(--background-900);
904
+ --icon-foreground: var(--background-700);
905
+ }
906
+
907
+ .button.primary:is([data-hovered="true"], [data-selected="true"]):not([data-disabled="true"]) {
908
+ --background: color-mix(in srgb, var(--foreground-100) 90%, var(--background-600));
909
+ --background-border: color-mix(in srgb, var(--foreground-100) 90%, var(--background-600));
910
+ }
911
+
912
+ .button.primary[data-pressed="true"]:not([data-disabled="true"]) {
913
+ --background: color-mix(in srgb, var(--foreground-100) 85%, var(--background-600));
914
+ --background-border: color-mix(in srgb, var(--foreground-100) 85%, var(--background-600));
915
+ }
916
+
917
+ .button.secondary {
918
+ --background: color-mix(in srgb, var(--background-900) 50%, transparent);
919
+ --background-border: var(--background-800);
920
+ --foreground: var(--foreground-300);
921
+ }
922
+
923
+ .button.secondary:is([data-hovered="true"], [data-selected="true"]):not([data-disabled="true"]) {
924
+ --background: var(--background-700);
925
+ --background-border: var(--background-700);
926
+ }
927
+
928
+ .button.secondary[data-pressed="true"]:not([data-disabled="true"]) {
929
+ --background: color-mix(in srgb, var(--background-700) 60%, var(--background-950));
930
+ --background-border: var(--background-700);
931
+ }
932
+
933
+ .button.ghost {
934
+ --background: transparent;
935
+ --background-border: transparent;
936
+ --foreground: var(--foreground-300);
937
+ }
938
+
939
+ .button.ghost:is([data-hovered="true"], [data-pressed="true"], [data-selected="true"]):not([data-disabled="true"]) {
940
+ --background: var(--background-800);
941
+ }
942
+
943
+ .default {
944
+ --background: color-mix(in srgb, var(--background-600) 10%, var(--background-900));
945
+ --background-border: var(--background-700);
946
+ --focus-visible: var(--accent-400);
947
+ --foreground: var(--foreground-200);
948
+ }
949
+
950
+ .default:is([data-hovered="true"], [data-selected="true"]):not([data-disabled="true"]) {
951
+ --background: color-mix(in srgb, var(--background-500) 20%, var(--background-900));
952
+ }
953
+
954
+ .default[data-pressed="true"]:not([data-disabled="true"]) {
955
+ --background: color-mix(in srgb, var(--background-500) 30%, var(--background-900));
956
+ }
957
+
958
+ .danger, .success, .warning, .info {
959
+ --focus-visible: var(--accent-400);
960
+ }
961
+
962
+ .danger {
963
+ --background: color-mix(in srgb, var(--danger-500) 15%, transparent);
964
+ --background-border: transparent;
965
+ --focus-visible: var(--danger-400);
966
+ --foreground: var(--danger-600);
967
+ --icon-foreground: var(--danger-700);
968
+ }
969
+
970
+ .danger[data-hovered="true"]:not([data-disabled="true"]),
971
+ .danger[data-pressed="true"]:not([data-disabled="true"]) {
972
+ --background: color-mix(in srgb, var(--danger-500) 20%, transparent);
973
+ --background-border: transparent;
974
+ }
975
+
976
+ .success {
977
+ --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
978
+ --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
979
+ --focus-visible: var(--success-400);
980
+ --foreground: var(--success-600);
981
+ --icon-foreground: var(--success-700);
982
+ }
983
+
984
+ .success[data-hovered="true"]:not([data-disabled="true"]),
985
+ .success[data-pressed="true"]:not([data-disabled="true"]) {
986
+ --background-border: var(--background-600);
987
+ }
988
+
989
+ .warning {
990
+ --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
991
+ --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
992
+ --focus-visible: var(--warning-400);
993
+ --foreground: var(--warning-600);
994
+ --icon-foreground: var(--warning-700);
995
+ }
996
+
997
+ .warning[data-hovered="true"]:not([data-disabled="true"]),
998
+ .warning[data-pressed="true"]:not([data-disabled="true"]) {
999
+ --background-border: var(--background-600);
1000
+ }
1001
+
1002
+ .info {
1003
+ --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
1004
+ --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
1005
+ --focus-visible: var(--info-400);
1006
+ --foreground: var(--info-600);
1007
+ --icon-foreground: var(--info-700);
1008
+ }
1009
+
1010
+ .info[data-hovered="true"]:not([data-disabled="true"]),
1011
+ .info[data-pressed="true"]:not([data-disabled="true"]) {
1012
+ --background-border: var(--background-600);
1013
+ }
1014
+
1015
+ .banner.note {
1016
+ --background: var(--background-900);
1017
+ --border: var(--background-600);
1018
+ --foreground: var(--foreground-200);
1019
+ --icon-color: currentColor;
1020
+ }
1021
+
1022
+ .banner.info {
1023
+ --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
1024
+ --border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
1025
+ --foreground: var(--foreground-200);
1026
+ --icon-color: var(--info-600);
1027
+ }
1028
+
1029
+ .banner.success {
1030
+ --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
1031
+ --border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
1032
+ --foreground: var(--foreground-200);
1033
+ --icon-color: var(--success-600);
1034
+ }
1035
+
1036
+ .banner.warning {
1037
+ --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
1038
+ --border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
1039
+ --foreground: var(--foreground-200);
1040
+ --icon-color: var(--warning-600);
1041
+ }
1042
+
1043
+ .banner.danger {
1044
+ --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
1045
+ --border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
1046
+ --foreground: var(--foreground-200);
1047
+ --icon-color: var(--danger-600);
1048
+ }
1049
+
1050
+ .toast.danger {
1051
+ --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
1052
+ --background-border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
1053
+ }
1054
+
1055
+ .toast.success {
1056
+ --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
1057
+ --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
1058
+ }
1059
+
1060
+ .toast.info {
1061
+ --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
1062
+ --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
1063
+ }
1064
+
1065
+ .toast.warning {
1066
+ --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
1067
+ --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
1068
+ }
779
1069
  }