ui-lab-theme-onyx 0.3.411 → 0.3.412

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 +888 -776
package/styles.css CHANGED
@@ -1,779 +1,891 @@
1
1
  /* Onyx Theme - Button Styles */
2
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));
3
+ @layer components {
4
+ .button {
5
+ --background: var(--background-800);
6
+ --foreground: var(--foreground-200);
7
+ --background-border: var(--background-700);
8
+ --background-hover: color-mix(in srgb, var(--background-600) 50%, var(--background-950));
9
+ --background-hover-border: var(--background-600);
10
+ --background-pressed: color-mix(in srgb, var(--background-600) 60%, var(--background-950));
11
+ --background-pressed-border: var(--background-600);
12
+ --focus-visible: var(--accent-400);
13
+ font-size: var(--text-xs);
14
+ }
15
+
16
+ .button.icon { @apply aspect-square }
17
+ .button.sm { @apply px-2 py-1.5 text-xs font-semibold }
18
+ .button.md { @apply px-3 py-1.5 }
19
+ .button.lg { @apply px-10 py-2 }
20
+
21
+ .button.primary {
22
+ --background: var(--foreground-100);
23
+ --foreground: var(--background-900);
24
+ --background-border: var(--foreground-200);
25
+ --background-hover: color-mix(in srgb, var(--foreground-100) 90%, var(--background-600));
26
+ --background-hover-border: color-mix(in srgb, var(--foreground-100) 90%, var(--background-600));
27
+ --background-pressed: color-mix(in srgb, var(--foreground-100) 85%, var(--background-600));
28
+ --background-pressed-border: color-mix(in srgb, var(--foreground-100) 85%, var(--background-600));
29
+ }
30
+
31
+ .button.secondary {
32
+ --background: var(--background-900);
33
+ --foreground: var(--foreground-200);
34
+ --background-border: var(--background-700);
35
+ --background-hover: color-mix(in srgb, var(--background-700) 50%, var(--background-950));
36
+ --background-hover-border: var(--background-700);
37
+ --background-pressed: color-mix(in srgb, var(--background-700) 60%, var(--background-950));
38
+ --background-pressed-border: var(--background-700);
39
+ }
40
+
41
+ .button.outline {
42
+ --background: transparent;
43
+ --foreground: var(--foreground-300);
44
+ --background-border: var(--background-700);
45
+ --background-hover: color-mix(in srgb, var(--background-950) 90%, var(--background-500));
46
+ --background-hover-border: var(--background-600);
47
+ --background-pressed: color-mix(in srgb, var(--background-900) 90%, var(--background-500));
48
+ --background-pressed-border: var(--background-600);
49
+ /* Override tailwind *outline* class */
50
+ outline-style: unset !important;
51
+ }
52
+
53
+ .button.danger {
54
+ --background: color-mix(in srgb, var(--danger-500) 15%, transparent);
55
+ --foreground: var(--danger-600);
56
+ --background-border: transparent;
57
+ --focus-visible: var(--danger-400);
58
+ --background-hover: color-mix(in srgb, var(--danger-500) 25%, transparent);
59
+ --background-hover-border: transparent;
60
+ --background-pressed: color-mix(in srgb, var(--danger-500) 30%, transparent);
61
+ --background-pressed-border: transparent;
62
+ }
63
+
64
+ .button.ghost {
65
+ --background: transparent;
66
+ --foreground: var(--foreground-300);
67
+ --background-border: transparent;
68
+ --background-hover: var(--background-800);
69
+ --background-hover-border: transparent;
70
+ }
71
+
72
+ /* Gallery Styles */
73
+
74
+ .gallery.item {
75
+ --background: var(--background-950);
76
+ --background-border: var(--background-700);
77
+ --background-hover-border: var(--background-600);
78
+ --background-pressed-border: var(--accent-500);
79
+ --focus-visible: var(--accent-500);
80
+ }
81
+
82
+ .gallery.view {
83
+ --background: var(--background-950);
84
+ }
85
+
86
+ .gallery.body {
87
+ --foreground: var(--foreground-50);
88
+ --foreground-muted: var(--foreground-300);
89
+ }
90
+
91
+ /* Expand Styles */
92
+
93
+ .expand {
94
+ --trigger-background: transparent;
95
+ --trigger-background-hover: var(--background-900);
96
+ --trigger-foreground: var(--foreground-50);
97
+ --content-background: transparent;
98
+ --content-foreground: var(--foreground-300);
99
+ }
100
+
101
+ /* Card Styles */
102
+
103
+ .card {
104
+ --background: var(--background-800);
105
+ --border: var(--background-700);
106
+ --focus-ring: var(--accent-400);
107
+ }
108
+
109
+ .card.header {
110
+ --border: var(--background-700);
111
+ }
112
+
113
+ .card.footer {
114
+ --background: color-mix(in srgb, var(--background-900) 50%, transparent);
115
+ --border: var(--background-700);
116
+ }
117
+
118
+ /* List Styles */
119
+
120
+ .list {
121
+ --foreground: var(--foreground-50);
122
+ --background-hover: color-mix(in srgb, var(--background-500) 6%, transparent);
123
+ --background-highlighted: color-mix(in srgb, var(--background-500) 6%, transparent);
124
+ --item-background: transparent;
125
+ --item-background-hover: var(--background-hover);
126
+ --item-background-highlighted: var(--background-highlighted);
127
+ --header-title-foreground: var(--foreground-50);
128
+ --header-subtitle-foreground: var(--foreground-400);
129
+ --desc-foreground: var(--foreground-400);
130
+ --action-foreground: var(--foreground-400);
131
+ --action-foreground-hover: var(--foreground-50);
132
+ --action-background-hover: var(--background-hover);
133
+ }
134
+
135
+ /* Group Styles */
136
+
137
+ .group {
138
+ --background: var(--background-950);
139
+ --background-border: var(--background-700);
140
+ --focus-visible: var(--accent-500);
141
+ }
142
+
143
+ .group.button {
144
+ --button-selected-background: var(--background-800);
145
+ --button-selected-foreground: var(--foreground-100);
146
+ }
147
+
148
+ .group.ghost {
149
+ --background: transparent;
150
+ }
151
+
152
+ /* Command Styles */
153
+ .command {
154
+ --background: var(--background-900);
155
+ --background-hover: var(--background-800);
156
+ --background-pressed: var(--background-800);
157
+ --background-list: var(--background-950);
158
+ --background-footer: var(--background-800);
159
+ --border-color: var(--background-700);
160
+ --foreground: var(--foreground-300);
161
+ --foreground-muted: var(--foreground-400);
162
+ --overlay: rgb(0 0 0 / 0.2);
163
+ --overlay-backdrop: blur(4px);
164
+ --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.35);
165
+ }
166
+
167
+
168
+ /* Date Styles */
169
+
170
+ .date {
171
+ --background: var(--background-950);
172
+ --border: var(--background-700);
173
+ --focus-ring: var(--foreground-300);
174
+ }
175
+
176
+ .date.date-header {
177
+ --header-color: var(--foreground-300);
178
+ }
179
+
180
+ .date.date-day-headers {
181
+ --day-headers-background: var(--background-900);
182
+ }
183
+
184
+ .date.date-day-header {
185
+ --day-header-color: var(--foreground-400);
186
+ }
187
+
188
+ .date.date-nav-button {
189
+ --nav-button-color: var(--foreground-400);
190
+ --nav-button-background-hover: var(--background-800);
191
+ }
192
+
193
+ .date.date-grid {
194
+ --grid-background: var(--background-900);
195
+ }
196
+
197
+ .date.date-day {
198
+ --cell-text: var(--foreground-300);
199
+ }
200
+
201
+ .date.date-day[data-selected="true"] {
202
+ --cell-background: var(--background-800);
203
+ --cell-text: var(--foreground-50);
204
+ }
205
+
206
+ .date.date-day[data-today="true"] {
207
+ --cell-background: var(--background-800);
208
+ --cell-text: var(--foreground-50);
209
+ }
210
+
211
+ .date.date-day[data-disabled="true"],
212
+ .date.date-day[data-out-of-range="true"] {
213
+ --cell-text: var(--foreground-400);
214
+ }
215
+
216
+ .date.date-day:hover:not([data-disabled="true"]):not([data-out-of-range="true"]) {
217
+ --cell-background: var(--background-800);
218
+ }
219
+
220
+ /* Checkbox Styles */
221
+
222
+ .checkbox {
223
+ --background: var(--background-900);
224
+ --background-border: var(--background-700);
225
+ --background-hover: color-mix(in srgb, var(--background-500) 10%, transparent);
226
+ --background-hover-border: var(--background-600);
227
+ --focus-visible: var(--accent-500);
228
+ }
229
+
230
+ .checkbox[data-selected="true"] {
231
+ --background-selected: var(--accent-500);
232
+ --background-selected-border: var(--accent-500);
233
+ --background-hover: var(--accent-600);
234
+ --background-hover-border: var(--accent-400);
235
+ }
236
+
237
+ .checkbox[data-indeterminate="true"] {
238
+ --background-indeterminate: var(--accent-600);
239
+ --background-indeterminate-border: var(--accent-600);
240
+ --background-hover: var(--accent-500);
241
+ --background-hover-border: var(--accent-400);
242
+ }
243
+
244
+ .checkbox.checkmark,
245
+ .checkbox.indeterminate {
246
+ --icon-foreground: white;
247
+ }
248
+
249
+ .checkbox-root.helper-text {
250
+ --helper-text-foreground: currentColor;
251
+ --helper-text-error-foreground: white;
252
+ }
253
+
254
+ /* Color Styles */
255
+
256
+ .color {
257
+ --background: color-mix(in srgb, var(--background-800) 30%, transparent);
258
+ --background-border: var(--background-700);
259
+ --focus-visible: var(--accent-500);
260
+ }
261
+
262
+ .color.canvas-pointer {
263
+ --pointer-border: color-mix(in srgb, var(--foreground-200) 50%, transparent);
264
+ }
265
+
266
+ .color.hue-thumb,
267
+ .color.opacity-thumb {
268
+ --thumb-border: white;
269
+ --thumb-background: white;
270
+ }
271
+
272
+ .color.opacity-track {
273
+ --checkerboard-dark: var(--background-800);
274
+ --checkerboard-light: var(--background-700);
275
+ }
276
+
277
+ .color.preview-swatch,
278
+ .color.preview {
279
+ --checkerboard-dark: var(--background-700);
280
+ --checkerboard-light: var(--background-800);
281
+ }
282
+
283
+ /* Label Styles */
284
+
285
+ .label {
286
+ --foreground: var(--foreground-300);
287
+ --disabled-foreground: var(--foreground-400);
288
+ --error-foreground: var(--danger-600);
289
+ }
290
+
291
+ .label.required-indicator {
292
+ --required-color: var(--danger-600);
293
+ }
294
+
295
+ .label.helper-text {
296
+ --helper-color: var(--foreground-400);
297
+ }
298
+
299
+ .label.helper-text[data-error] {
300
+ --helper-error-color: var(--danger-600);
301
+ }
302
+
303
+ /* Input Styles */
304
+
305
+ .input {
306
+ --background: var(--background-950);
307
+ --foreground: var(--foreground-50);
308
+ --placeholder: var(--foreground-400);
309
+ --background-border: var(--background-700);
310
+ --background-focused-border: var(--accent-500);
311
+ --focus-visible: var(--accent-500);
312
+ --disabled-background: var(--background-900);
313
+ --disabled-foreground: var(--foreground-400);
314
+ font-size: var(--text-xs);
315
+ font-weight: var(--font-weight-medium)
316
+ }
317
+
318
+ .input[data-error] {
319
+ --background-focused-border: var(--danger-600);
320
+ --focus-visible: var(--danger-600);
321
+ }
322
+
323
+ .input[data-variant="ghost"] {
324
+ --background: transparent;
325
+ --background-border: transparent;
326
+ }
327
+
328
+ .input[data-variant="ghost"][data-focus-visible] {
329
+ box-shadow: none;
330
+ }
331
+
332
+ .input.icon-wrapper {
333
+ color: var(--foreground-400);
334
+ }
335
+
336
+ .input.spin-button {
337
+ --controls-color: var(--foreground-400);
338
+ --controls-hover-background: var(--background-800);
339
+ --controls-hover-color: var(--foreground-200);
340
+ --controls-active-background: var(--background-700);
341
+ --controls-active-color: var(--accent-500);
342
+ }
343
+
344
+ /* Radio Styles */
345
+
346
+ .radio {
347
+ --background: var(--background-800);
348
+ --background-border: var(--background-700);
349
+ --background-selected: var(--accent-500);
350
+ --background-selected-border: var(--accent-500);
351
+ --background-hover: var(--accent-500);
352
+ --background-hover-border: var(--background-500);
353
+ --background-error-border: var(--danger-500);
354
+ --dot-color: transparent;
355
+ --dot-selected-color: var(--accent-50);
356
+ --focus-visible: rgb(59, 130, 246);
357
+ }
358
+
359
+ .radio.radio-label {
360
+ --foreground: var(--foreground-300);
361
+ --foreground-disabled: var(--foreground-400);
362
+ }
363
+
364
+ .radio.radio-description {
365
+ --foreground: var(--foreground-400);
366
+ --foreground-error: var(--danger-500);
367
+ }
368
+
369
+ .radio.helper-text {
370
+ --foreground: var(--foreground-400);
371
+ --foreground-error: var(--danger-500);
372
+ }
373
+
374
+ .radio.primary[data-selected="true"] {
375
+ --background-selected: var(--accent-500);
376
+ --background-selected-border: var(--accent-500);
377
+ }
378
+
379
+ .radio.secondary {
380
+ --background: var(--background-800);
381
+ --background-border: var(--background-700);
382
+ }
383
+
384
+ .radio.outline {
385
+ --background: transparent;
386
+ --background-border: var(--background-700);
387
+ }
388
+
389
+ .radio.outline[data-selected="true"] {
390
+ --background-selected: color-mix(in srgb, var(--accent-500) 15%, transparent);
391
+ --background-selected-border: var(--accent-500);
392
+ --dot-selected-color: var(--accent-500);
393
+ }
394
+
395
+ /* Select Styles */
396
+
397
+ .select {
398
+ --background: color-mix(in srgb, var(--background-800) 50%, transparent);
399
+ --foreground: var(--foreground-300);
400
+ --background-border: var(--background-700);
401
+ --focus-visible: var(--accent-400);
402
+ --focus-visible-background: var(--background-950);
403
+ --background-hover: color-mix(in srgb, var(--background-700) 50%, transparent);
404
+ --background-pressed: color-mix(in srgb, var(--background-600) 50%, transparent);
405
+ --foreground-size: var(--text-xs)
406
+ }
407
+
408
+ .select.ghost {
409
+ --background: transparent;
410
+ --background-border: transparent;
411
+ --background-hover: color-mix(in srgb, var(--background-700) 50%, transparent);
412
+ --background-pressed: color-mix(in srgb, var(--background-700) 50%, transparent);
413
+ }
414
+
415
+ .select.content,
416
+ .select.sub-content {
417
+ --background: var(--background-900);
418
+ --background-border: var(--background-700);
419
+ }
420
+
421
+ .select.item,
422
+ .select.sub-trigger {
423
+ --foreground: var(--foreground-300);
424
+ --foreground-muted: var(--foreground-400);
425
+ --icon-foreground: var(--foreground-300);
426
+ --indicator-foreground: var(--accent-300);
427
+ --background-highlighted: color-mix(in srgb, var(--background-700) 50%, transparent);
428
+ --item-background: transparent;
429
+ --item-background-hover: var(--background-highlighted);
430
+ --item-background-highlighted: var(--background-highlighted);
431
+ }
432
+
433
+ .select.placeholder {
434
+ --foreground-muted: var(--foreground-400);
435
+ }
436
+
437
+ .select.search-trigger {
438
+ --focus-visible: var(--accent-500);
439
+ }
440
+
441
+ /* Slider Styles */
442
+
443
+ .slider.track {
444
+ --track-background: var(--background-800);
445
+ }
446
+
447
+ .slider.range {
448
+ --range-background: color-mix(in srgb, var(--accent-500) 60%, transparent);
449
+ --range-disabled-background: var(--background-600);
450
+ }
451
+
452
+ .slider.thumb {
453
+ --thumb-background: var(--accent-500);
454
+ --thumb-focused-background: var(--accent-400);
455
+ --thumb-disabled-background: var(--background-500);
456
+ --focus-visible: color-mix(in srgb, var(--accent-500) 40%, transparent);
457
+ }
458
+
459
+ /* Switch Styles */
460
+
461
+ .switch {
462
+ --background: var(--background-700);
463
+ --background-active: color-mix(in srgb, var(--accent-500) 80%, var(--background-500));
464
+ --foreground: var(--background-500);
465
+ --foreground-active: white;
466
+
467
+ --border-color: var(--background-600);
468
+ --border-color-hover: transparent;
469
+ --border-color-pressed: transparent;
470
+ --border-color-active: transparent;
471
+
472
+ --focus-visible: 0 0 0 3px color-mix(in srgb, var(--accent-500) 40%, transparent);
473
+ }
474
+
475
+ /* Textarea Styles */
476
+
477
+ .textarea {
478
+ --background: var(--background-950);
479
+ --foreground: var(--foreground-50);
480
+ --placeholder: var(--foreground-400);
481
+ --background-border: var(--background-700);
482
+ --background-focused-border: var(--accent-500);
483
+ --focus-visible: var(--accent-500);
484
+ --background-disabled: var(--background-900);
485
+ --foreground-disabled: var(--foreground-400);
486
+ }
487
+
488
+ .textarea[data-error] {
489
+ --background-error-border: var(--danger-600);
490
+ --background-error-focused-border: var(--danger-600);
491
+ --focus-visible: var(--danger-600);
492
+ }
493
+
494
+ .textarea.scroll-wrapper {
495
+ --background: var(--background-950);
496
+ --background-border: var(--background-700);
497
+ --background-focused-border: var(--accent-500);
498
+ --focus-visible: var(--accent-500);
499
+ --background-disabled: var(--background-900);
500
+ }
501
+
502
+ .textarea.scroll-wrapper[data-error] {
503
+ --background-error-border: var(--danger-600);
504
+ --background-error-focused-border: var(--danger-600);
505
+ --focus-visible: var(--danger-600);
506
+ }
507
+
508
+ .textarea.resize-handle {
509
+ --handle-background: color-mix(in srgb, var(--foreground-400) 72%, transparent);
510
+ --handle-hover-background: color-mix(in srgb, var(--foreground-200) 90%, transparent);
511
+ }
512
+
513
+ .textarea.character-count {
514
+ --count-foreground: var(--foreground-400);
515
+ --count-over-limit-foreground: var(--danger-600);
516
+ }
517
+
518
+ /* Banner Styles */
519
+
520
+ .banner {
521
+ --background: var(--background-900);
522
+ --foreground: var(--info-50);
523
+ --border: var(--info-600);
524
+ }
525
+
526
+ .banner.note {
527
+ --background: var(--background-900);
528
+ --foreground: var(--foreground-200);
529
+ --border: var(--background-700);
530
+ --icon-color: var(--background-500);
531
+ }
532
+
533
+ .banner.info {
534
+ --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
535
+ --foreground: var(--foreground-200);
536
+ --border: color-mix(in srgb, var(--info-600) 30%, var(--background-900));
537
+ --icon-color: var(--info-600);
538
+ }
539
+
540
+ .banner.success {
541
+ --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
542
+ --foreground: var(--foreground-200);
543
+ --border: color-mix(in srgb, var(--success-600) 30%, var(--background-900));
544
+ --icon-color: var(--success-600);
545
+ }
546
+
547
+ .banner.warning {
548
+ --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
549
+ --foreground: var(--foreground-200);
550
+ --border: color-mix(in srgb, var(--warning-600) 30%, var(--background-900));
551
+ --icon-color: var(--warning-600);
552
+ }
553
+
554
+ .banner.danger {
555
+ --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
556
+ --foreground: var(--foreground-200);
557
+ --border: color-mix(in srgb, var(--danger-600) 30%, var(--background-900));
558
+ --icon-color: var(--danger-600);
559
+ }
560
+
561
+ /* Badge Styles */
562
+
563
+ .badge.sm {
564
+ @apply px-1.5 py-0.5 font-semibold
565
+ }
566
+
567
+ .badge.md {
568
+ @apply px-2 py-1.5
569
+ }
570
+
571
+ .badge.lg {
572
+ @apply px-3 py-1.5
573
+ }
574
+
575
+ .badge {
576
+ --background: var(--background-800);
577
+ --foreground: var(--foreground-200);
578
+ --background-border: var(--background-600);
579
+ font-weight: var(--font-weight-semibold);
580
+ font-size: var(--text-xs)
581
+ }
582
+
583
+ .badge.dismiss {
584
+ --dismiss-foreground: var(--foreground-400);
585
+ --dismiss-hover-background: color-mix(in srgb, var(--background-700) 80%, var(--background-900));
586
+ --dismiss-pressed-background: var(--background-700);
587
+ --dismiss-focus-visible: var(--accent-400);
588
+ }
589
+
590
+ .badge.default {
591
+ --background: color-mix(in srgb, var(--background-600) 10%, var(--background-900));
592
+ --foreground: var(--foreground-200);
593
+ --background-border: var(--background-700);
594
+ }
595
+
596
+ .badge.secondary {
597
+ --background: color-mix(in srgb, var(--background-900) 90%, var(--background-600));
598
+ --foreground: var(--foreground-300);
599
+ --background-border: color-mix(in srgb, var(--background-600) 40%, transparent);
600
+ }
601
+
602
+ .badge.success {
603
+ --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
604
+ --foreground: var(--success-600);
605
+ --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
606
+ }
607
+
608
+ .badge.warning {
609
+ --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
610
+ --foreground: var(--warning-600);
611
+ --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
612
+ }
613
+
614
+ .badge.danger {
615
+ --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
616
+ --foreground: var(--danger-600);
617
+ --background-border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
618
+ }
619
+
620
+ .badge.info {
621
+ --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
622
+ --foreground: var(--info-600);
623
+ --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
624
+ }
625
+
626
+ /* Popover Styles */
627
+
628
+ .popover.content {
629
+ --popover-fill: var(--background-900);
630
+ --popover-border-color: var(--background-700);
631
+ }
632
+
633
+ .popover.frame {
634
+ --foreground: var(--foreground-200);
635
+ }
636
+
637
+ /* Tooltip Styles */
638
+
639
+ .tooltip.content {
640
+ --background: var(--background-900);
641
+ --background-hover: var(--background-900);
642
+ --background-border: var(--background-700);
643
+ font-size: var(--text-xs);
644
+ font-weight: var(--font-weight-medium);
645
+ }
646
+
647
+ .tooltip.frame {
648
+ --foreground: var(--foreground-200);
649
+ }
650
+
651
+ /* Progress Styles */
652
+
653
+ .progress {
654
+ --background: var(--background-700);
655
+ --fill-background: color-mix(in srgb, var(--accent-600) 60%, var(--background-500));
656
+ }
657
+
658
+ .progress.label-row {
659
+ --foreground: var(--foreground-400);
660
+ }
661
+
662
+ .progress[data-variant="default"] .fill {
663
+ --fill-background: var(--accent-500);
664
+ }
665
+
666
+ .progress[data-variant="success"] .fill {
667
+ --fill-background: var(--success-500);
668
+ }
669
+
670
+ .progress[data-variant="warning"] .fill {
671
+ --fill-background: var(--warning-500);
672
+ }
673
+
674
+ .progress[data-variant="error"] .fill {
675
+ --fill-background: var(--danger-500);
676
+ }
677
+
678
+ /* Toast Styles */
679
+
680
+ .toast {
681
+ --background: var(--background-900);
682
+ --foreground: var(--foreground-200);
683
+ --background-border: var(--background-600);
684
+ --background-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
685
+ }
686
+
687
+ .toast.default {
688
+ --background: var(--background-900);
689
+ --foreground: var(--foreground-200);
690
+ --background-border: var(--background-600);
691
+ }
692
+
693
+ .toast.danger {
694
+ --background: color-mix(in srgb, var(--danger-600) 10%, var(--background-900));
695
+ --foreground: var(--foreground-200);
696
+ --background-border: color-mix(in srgb, var(--danger-600) 20%, var(--background-900));
697
+ }
698
+
699
+ .toast.success {
700
+ --background: color-mix(in srgb, var(--success-600) 10%, var(--background-900));
701
+ --foreground: var(--foreground-200);
702
+ --background-border: color-mix(in srgb, var(--success-600) 20%, var(--background-900));
703
+ }
704
+
705
+ .toast.info {
706
+ --background: color-mix(in srgb, var(--info-600) 10%, var(--background-900));
707
+ --foreground: var(--foreground-200);
708
+ --background-border: color-mix(in srgb, var(--info-600) 20%, var(--background-900));
709
+ }
710
+
711
+ .toast.warning {
712
+ --background: color-mix(in srgb, var(--warning-600) 10%, var(--background-900));
713
+ --foreground: var(--foreground-200);
714
+ --background-border: color-mix(in srgb, var(--warning-600) 20%, var(--background-900));
715
+ }
716
+
717
+ .toast.icon {
718
+ --foreground: currentColor;
719
+ }
720
+
721
+ .toast.danger.icon {
722
+ --foreground: var(--danger-600);
723
+ }
724
+
725
+ .toast.success.icon {
726
+ --foreground: var(--success-600);
727
+ }
728
+
729
+ .toast.info.icon {
730
+ --foreground: var(--info-600);
731
+ }
732
+
733
+ .toast.warning.icon {
734
+ --foreground: var(--warning-600);
735
+ }
736
+
737
+ .toast.title {
738
+ --foreground: var(--foreground-100);
739
+ }
740
+
741
+ .toast.description {
742
+ --foreground: var(--foreground-300);
743
+ }
744
+
745
+ .toast.close {
746
+ --foreground: currentColor;
747
+ --background-hover: transparent;
748
+ --focus-visible: var(--accent-400);
749
+ }
750
+
751
+ .toast.danger.close {
752
+ --foreground: color-mix(in srgb, var(--danger-600) 60%, var(--foreground-50));
753
+ --background-hover: color-mix(in srgb, var(--danger-500) 20%, var(--background-900));
754
+ --focus-visible: var(--danger-400);
755
+ }
756
+
757
+ .toast.success.close {
758
+ --foreground: color-mix(in srgb, var(--success-600) 60%, var(--foreground-50));
759
+ --background-hover: color-mix(in srgb, var(--success-500) 20%, var(--background-900));
760
+ --focus-visible: var(--success-400);
761
+ }
762
+
763
+ .toast.info.close {
764
+ --foreground: color-mix(in srgb, var(--info-600) 60%, var(--foreground-50));
765
+ --background-hover: color-mix(in srgb, var(--info-500) 20%, var(--background-900));
766
+ --focus-visible: var(--info-400);
767
+ }
768
+
769
+ .toast.warning.close {
770
+ --foreground: color-mix(in srgb, var(--warning-600) 60%, var(--foreground-50));
771
+ --background-hover: color-mix(in srgb, var(--warning-500) 20%, var(--background-900));
772
+ --focus-visible: var(--warning-400);
773
+ }
774
+
775
+ /* Menu Styles */
776
+
777
+ .menu.content,
778
+ .menu.sub-content {
779
+ --background: var(--background-900);
780
+ --background-border: var(--background-700);
781
+ --content-open-animation: slide-in-from-top 0.15s var(--ease-snappy-pop);
782
+ --content-closed-animation: slide-out-to-top 0.15s var(--ease-snappy-pop);
783
+ font-size: var(--text-xs)
784
+ }
785
+
786
+ .menu.trigger {
787
+ --background-pressed: var(--background-700);
788
+ }
789
+
790
+ .menu.item,
791
+ .menu.checkbox-item,
792
+ .menu.radio-item,
793
+ .menu.sub-trigger {
794
+ --foreground: var(--foreground-300);
795
+ --background-focused: color-mix(in srgb, var(--background-700) 50%, transparent);
796
+ }
797
+
798
+ .menu.item-indicator {
799
+ --indicator-foreground: var(--accent-300);
800
+ }
801
+
802
+ .menu.label,
803
+ .menu.shortcut {
804
+ --foreground-muted: var(--foreground-400);
805
+ }
806
+
807
+ /* Tabs Styles */
808
+
809
+ .tabs.indicator {
810
+ --background: color-mix(in srgb, var(--background-700) 50%, transparent);
811
+ }
812
+
813
+ .tabs.indicator.underline {
814
+ --background: var(--accent-500);
815
+ }
816
+
817
+ .tabs.list[data-variant="underline"][data-orientation="vertical"] {
818
+ --border-color: var(--background-700);
819
+ }
820
+
821
+ .tabs.trigger {
822
+ --background: transparent;
823
+ --background-hover: var(--background-900);
824
+ --background-pressed: var(--background-800);
825
+ --background-selected: transparent;
826
+ --background-focused: var(--background-800);
827
+ --foreground: var(--foreground-400);
828
+ --foreground-hover: var(--foreground-200);
829
+ --foreground-pressed: var(--foreground-50);
830
+ --foreground-selected: var(--foreground-50);
831
+ --underline-border: var(--accent-500);
832
+ font-size: var(--text-xs);
833
+ }
834
+
835
+ .tabs.content {
836
+ --focus-visible: var(--accent-500);
837
+ }
838
+
839
+ /* Anchor Styles */
840
+
841
+ .anchor.trigger {
842
+ --foreground: var(--foreground-200);
843
+ --underline-background: var(--background-600);
844
+ --underline-background-hover: var(--foreground-400);
845
+ --focus-ring: var(--color-background-600);
846
+ }
847
+
848
+ /* Modal Styles */
849
+
850
+ .modal {
851
+ --background: var(--background-900);
852
+ --background-border: var(--background-700);
853
+ --foreground: var(--foreground-300);
854
+ --focus-visible: var(--accent-500);
855
+ --scrollbar-thumb-background: var(--background-700);
856
+ --scrollbar-thumb-hover-background: var(--foreground-400);
857
+ }
858
+
859
+ .modal.title {
860
+ --title-foreground: var(--foreground-100);
861
+ }
862
+
863
+ .modal.close {
864
+ --close-foreground: var(--foreground-400);
865
+ --close-hover-foreground: var(--foreground-200);
866
+ --focus-visible: var(--accent-500);
867
+ }
868
+
869
+ .modal.footer {
870
+ --footer-background: var(--background-900);
871
+ }
872
+
873
+ .modal.backdrop {
874
+ --backdrop-background: rgb(0 0 0 / 50%);
875
+ }
876
+
877
+ .divider {
878
+ --background: var(--background-700)
879
+ }
880
+
881
+ /* Scroll Component */
882
+ .scroll.track {
883
+ --track-background: transparent;
884
+ }
885
+
886
+ .scroll.thumb {
887
+ --thumb-background: var(--background-700);
888
+ --thumb-background-hover: var(--background-600);
889
+ --thumb-background-pressed: color-mix(in srgb, var(--background-500) 40%, var(--background-900));
890
+ }
779
891
  }