@ecopages/radiant-themes 0.2.5 → 0.3.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 (21) hide show
  1. package/dist/compiled/themes/cloudflare/compact.css +94 -20
  2. package/dist/compiled/themes/cloudflare.css +94 -20
  3. package/dist/compiled/themes/github/compact.css +103 -31
  4. package/dist/compiled/themes/github.css +103 -31
  5. package/dist/compiled/themes/high-contrast/compact.css +107 -31
  6. package/dist/compiled/themes/high-contrast.css +107 -31
  7. package/dist/compiled/themes/macos/compact.css +177 -40
  8. package/dist/compiled/themes/macos-classic/compact.css +88 -9
  9. package/dist/compiled/themes/macos-classic.css +88 -9
  10. package/dist/compiled/themes/macos.css +177 -40
  11. package/dist/compiled/themes/material/compact.css +81 -2
  12. package/dist/compiled/themes/material.css +81 -2
  13. package/dist/compiled/themes/vercel/compact.css +101 -29
  14. package/dist/compiled/themes/vercel.css +101 -29
  15. package/dist/compiled/themes/vscode/compact.css +93 -18
  16. package/dist/compiled/themes/vscode.css +93 -18
  17. package/dist/compiled/themes/windows95/compact.css +97 -8
  18. package/dist/compiled/themes/windows95.css +97 -8
  19. package/dist/tokens/components/macos.css +65 -7
  20. package/dist/tokens/components/windows95.css +18 -0
  21. package/package.json +3 -3
package/dist/compiled/themes/high-contrast.css CHANGED
@@ -27,10 +27,6 @@
27
27
  --font-weight-semibold: var(--weight-semibold);
28
28
  --opacity-disabled: var(--opacity-disabled);
29
29
  --opacity-muted: var(--opacity-muted);
30
- --color-primary: var(--primary);
31
- --color-on-primary: var(--on-primary);
32
- --color-background: var(--background);
33
- --color-on-background: var(--on-background);
34
30
  --radius-none: var(--border-radius-none);
35
31
  --radius-full: var(--border-radius-full);
36
32
  --radius-control: var(--radius-control);
@@ -94,6 +90,86 @@
94
90
  --size-icon-sm: 1rem;
95
91
  --size-icon-md: 1.25rem;
96
92
  }
93
+ :where(:root, .dark) {
94
+ --color-transparent: transparent;
95
+ --color-gray-50: var(--gray-50);
96
+ --color-gray-100: var(--gray-100);
97
+ --color-gray-200: var(--gray-200);
98
+ --color-gray-300: var(--gray-300);
99
+ --color-gray-400: var(--gray-400);
100
+ --color-gray-500: var(--gray-500);
101
+ --color-gray-600: var(--gray-600);
102
+ --color-gray-700: var(--gray-700);
103
+ --color-gray-800: var(--gray-800);
104
+ --color-gray-900: var(--gray-900);
105
+ --color-gray-950: var(--gray-950);
106
+ --color-primary: var(--primary);
107
+ --color-primary-light: var(--primary-light);
108
+ --color-primary-dark: var(--primary-dark);
109
+ --color-on-primary: var(--on-primary);
110
+ --color-primary-container: var(--primary-container);
111
+ --color-on-primary-container: var(--on-primary-container);
112
+ --color-secondary: var(--secondary);
113
+ --color-secondary-light: var(--secondary-light);
114
+ --color-secondary-dark: var(--secondary-dark);
115
+ --color-on-secondary: var(--on-secondary);
116
+ --color-secondary-container: var(--secondary-container);
117
+ --color-on-secondary-container: var(--on-secondary-container);
118
+ --color-tertiary: var(--tertiary);
119
+ --color-on-tertiary: var(--on-tertiary);
120
+ --color-tertiary-container: var(--tertiary-container);
121
+ --color-on-tertiary-container: var(--on-tertiary-container);
122
+ --color-error: var(--error);
123
+ --color-error-light: var(--error-light);
124
+ --color-error-dark: var(--error-dark);
125
+ --color-on-error: var(--on-error);
126
+ --color-error-container: var(--error-container);
127
+ --color-on-error-container: var(--on-error-container);
128
+ --color-success: var(--success);
129
+ --color-success-light: var(--success-light);
130
+ --color-success-dark: var(--success-dark);
131
+ --color-on-success: var(--on-success);
132
+ --color-success-container: var(--success-container);
133
+ --color-on-success-container: var(--on-success-container);
134
+ --color-info: var(--info);
135
+ --color-on-info: var(--on-info);
136
+ --color-info-container: var(--info-container);
137
+ --color-on-info-container: var(--on-info-container);
138
+ --color-info-light: var(--info-light);
139
+ --color-info-dark: var(--info-dark);
140
+ --color-warning: var(--warning);
141
+ --color-on-warning: var(--on-warning);
142
+ --color-warning-container: var(--warning-container);
143
+ --color-on-warning-container: var(--on-warning-container);
144
+ --color-warning-light: var(--warning-light);
145
+ --color-warning-dark: var(--warning-dark);
146
+ --color-destructive: var(--error);
147
+ --color-on-destructive: var(--on-error);
148
+ --color-destructive-container: var(--error-container);
149
+ --color-on-destructive-container: var(--on-error-container);
150
+ --color-neutral: var(--neutral);
151
+ --color-surface: var(--surface);
152
+ --color-on-surface: var(--on-surface);
153
+ --color-surface-container-lowest: var(--surface-container-lowest);
154
+ --color-on-surface-container-lowest: var(--on-surface-container-lowest);
155
+ --color-surface-container-low: var(--surface-container-low);
156
+ --color-on-surface-container-low: var(--on-surface-container-low);
157
+ --color-surface-container: var(--surface-container);
158
+ --color-on-surface-container: var(--on-surface-container);
159
+ --color-surface-container-high: var(--surface-container-high);
160
+ --color-on-surface-container-high: var(--on-surface-container-high);
161
+ --color-surface-container-highest: var(--surface-container-highest);
162
+ --color-on-surface-container-highest: var(--on-surface-container-highest);
163
+ --color-background: var(--background);
164
+ --color-on-background: var(--on-background);
165
+ --color-border: var(--border);
166
+ --color-focus-ring: var(--focus-ring);
167
+ --color-on-focus-ring: var(--on-focus-ring);
168
+ --color-link: var(--link);
169
+ --color-overlay: var(--overlay);
170
+ --color-background-code: var(--background-code);
171
+ --color-on-background-code: var(--on-background-code);
172
+ }
97
173
  @layer base {
98
174
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
99
175
  [data-rui-focus-managed]
@@ -511,9 +587,9 @@
511
587
  :root .rui-button--ghost {
512
588
  border-style: var(--tw-border-style);
513
589
  border-width: 2px;
514
- border-color: var(--color-on-background);
515
- background-color: var(--color-background);
516
- color: var(--color-on-background);
590
+ border-color: var(--on-background);
591
+ background-color: var(--background);
592
+ color: var(--on-background);
517
593
  }
518
594
  :root .rui-button:disabled,
519
595
  :root .rui-input:disabled,
@@ -521,8 +597,8 @@
521
597
  :root .rui-select[aria-disabled='true'] {
522
598
  border-style: var(--tw-border-style);
523
599
  border-width: 2px;
524
- border-color: var(--color-on-background);
525
- color: var(--color-on-background);
600
+ border-color: var(--on-background);
601
+ color: var(--on-background);
526
602
  opacity: 1;
527
603
  }
528
604
  :root .rui-input,
@@ -538,9 +614,9 @@
538
614
  border-radius: var(--radius-none);
539
615
  border-style: var(--tw-border-style);
540
616
  border-width: 2px;
541
- border-color: var(--color-on-background);
542
- background-color: var(--color-background);
543
- color: var(--color-on-background);
617
+ border-color: var(--on-background);
618
+ background-color: var(--background);
619
+ color: var(--on-background);
544
620
  }
545
621
  :root .rui-checkbox__control,
546
622
  :root .rui-radio__control,
@@ -548,8 +624,8 @@
548
624
  border-radius: var(--radius-none);
549
625
  border-style: var(--tw-border-style);
550
626
  border-width: 2px;
551
- border-color: var(--color-on-background);
552
- background-color: var(--color-background);
627
+ border-color: var(--on-background);
628
+ background-color: var(--background);
553
629
  }
554
630
  :root .rui-radio__control {
555
631
  border-radius: var(--radius-full);
@@ -561,27 +637,27 @@
561
637
  :root .rui-switch__input:checked + .rui-switch__track {
562
638
  border-style: var(--tw-border-style);
563
639
  border-width: 2px;
564
- border-color: var(--color-primary);
565
- background-color: var(--color-primary);
640
+ border-color: var(--primary);
641
+ background-color: var(--primary);
566
642
  }
567
643
  :root .rui-radio__input:checked + .rui-radio__control {
568
644
  border-style: var(--tw-border-style);
569
645
  border-width: 2px;
570
- border-color: var(--color-primary);
571
- background-color: var(--color-background);
646
+ border-color: var(--primary);
647
+ background-color: var(--background);
572
648
  }
573
649
  :root .rui-radio__input:checked + .rui-radio__control::after {
574
650
  width: calc(var(--spacing, 0.25rem) * 2.5);
575
651
  height: calc(var(--spacing, 0.25rem) * 2.5);
576
- background-color: var(--color-primary);
652
+ background-color: var(--primary);
577
653
  }
578
654
  :root .rui-switch__thumb {
579
655
  border-style: var(--tw-border-style);
580
656
  border-width: 2px;
581
- border-color: var(--color-on-background);
657
+ border-color: var(--on-background);
582
658
  }
583
659
  :root .rui-switch__input:checked + .rui-switch__track .rui-switch__thumb {
584
- border-color: var(--color-on-primary);
660
+ border-color: var(--on-primary);
585
661
  }
586
662
  :root .rui-input::placeholder,
587
663
  :root .rui-textarea::placeholder {
@@ -615,13 +691,13 @@
615
691
  :root .rui-tooltip__content {
616
692
  border-style: var(--tw-border-style);
617
693
  border-width: 2px;
618
- border-color: var(--color-on-background);
694
+ border-color: var(--on-background);
619
695
  }
620
696
  :root .rui-avatar {
621
697
  --rui-avatar-radius: 9999px;
622
698
  border-style: var(--tw-border-style);
623
699
  border-width: 2px;
624
- border-color: var(--color-on-background);
700
+ border-color: var(--on-background);
625
701
  }
626
702
  :root .rui-listbox__option[aria-selected='true'],
627
703
  :root .rui-menu-button__item[aria-checked='true'],
@@ -631,11 +707,11 @@
631
707
  :root .rui-sidebar__menu-button[aria-current='page'] {
632
708
  border-style: var(--tw-border-style);
633
709
  border-width: 2px;
634
- border-color: var(--color-primary);
635
- background-color: var(--color-primary);
710
+ border-color: var(--primary);
711
+ background-color: var(--primary);
636
712
  --tw-font-weight: var(--font-weight-semibold);
637
713
  font-weight: var(--font-weight-semibold);
638
- color: var(--color-on-primary);
714
+ color: var(--on-primary);
639
715
  }
640
716
  :root .rui-tabs__tab[aria-selected='true'],
641
717
  :root .rui-button[aria-pressed='true'],
@@ -657,9 +733,9 @@
657
733
  border-radius: var(--radius-none);
658
734
  border-style: var(--tw-border-style);
659
735
  border-width: 2px;
660
- border-color: var(--color-on-background);
661
- background-color: var(--color-background);
662
- color: var(--color-on-background);
736
+ border-color: var(--on-background);
737
+ background-color: var(--background);
738
+ color: var(--on-background);
663
739
  --tw-shadow: 0 0 #0000;
664
740
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
665
741
  }
@@ -672,14 +748,14 @@
672
748
  :root .rui-window-splitter__separator {
673
749
  border-style: var(--tw-border-style);
674
750
  border-width: 1px;
675
- border-color: var(--color-on-background);
751
+ border-color: var(--on-background);
676
752
  }
677
753
  :root .rui-table__column,
678
754
  :root .rui-treegrid__row--header,
679
755
  :root .rui-calendar__weekdays {
680
756
  border-bottom-style: var(--tw-border-style);
681
757
  border-bottom-width: 2px;
682
- border-color: var(--color-on-background);
758
+ border-color: var(--on-background);
683
759
  --tw-font-weight: var(--font-weight-bold, 700);
684
760
  font-weight: var(--font-weight-bold, 700);
685
761
  }
package/dist/compiled/themes/macos/compact.css CHANGED
@@ -27,10 +27,6 @@
27
27
  --font-weight-semibold: var(--weight-semibold);
28
28
  --opacity-disabled: var(--opacity-disabled);
29
29
  --opacity-muted: var(--opacity-muted);
30
- --color-surface: var(--surface);
31
- --color-on-surface: var(--on-surface);
32
- --color-border: var(--border);
33
- --color-focus-ring: var(--focus-ring);
34
30
  --spacing-1: var(--space-1);
35
31
  --spacing-2: var(--space-2);
36
32
  --radius-none: var(--border-radius-none);
@@ -38,7 +34,6 @@
38
34
  --radius-sm: var(--border-radius-sm);
39
35
  --radius-md: var(--border-radius-md);
40
36
  --radius-2xl: var(--border-radius-2xl);
41
- --radius-full: var(--border-radius-full);
42
37
  --radius-control: var(--radius-control);
43
38
  --radius-container: var(--radius-container);
44
39
  --radius-pill: var(--radius-pill);
@@ -100,6 +95,86 @@
100
95
  --size-icon-sm: 1rem;
101
96
  --size-icon-md: 1.25rem;
102
97
  }
98
+ :where(:root, .dark) {
99
+ --color-transparent: transparent;
100
+ --color-gray-50: var(--gray-50);
101
+ --color-gray-100: var(--gray-100);
102
+ --color-gray-200: var(--gray-200);
103
+ --color-gray-300: var(--gray-300);
104
+ --color-gray-400: var(--gray-400);
105
+ --color-gray-500: var(--gray-500);
106
+ --color-gray-600: var(--gray-600);
107
+ --color-gray-700: var(--gray-700);
108
+ --color-gray-800: var(--gray-800);
109
+ --color-gray-900: var(--gray-900);
110
+ --color-gray-950: var(--gray-950);
111
+ --color-primary: var(--primary);
112
+ --color-primary-light: var(--primary-light);
113
+ --color-primary-dark: var(--primary-dark);
114
+ --color-on-primary: var(--on-primary);
115
+ --color-primary-container: var(--primary-container);
116
+ --color-on-primary-container: var(--on-primary-container);
117
+ --color-secondary: var(--secondary);
118
+ --color-secondary-light: var(--secondary-light);
119
+ --color-secondary-dark: var(--secondary-dark);
120
+ --color-on-secondary: var(--on-secondary);
121
+ --color-secondary-container: var(--secondary-container);
122
+ --color-on-secondary-container: var(--on-secondary-container);
123
+ --color-tertiary: var(--tertiary);
124
+ --color-on-tertiary: var(--on-tertiary);
125
+ --color-tertiary-container: var(--tertiary-container);
126
+ --color-on-tertiary-container: var(--on-tertiary-container);
127
+ --color-error: var(--error);
128
+ --color-error-light: var(--error-light);
129
+ --color-error-dark: var(--error-dark);
130
+ --color-on-error: var(--on-error);
131
+ --color-error-container: var(--error-container);
132
+ --color-on-error-container: var(--on-error-container);
133
+ --color-success: var(--success);
134
+ --color-success-light: var(--success-light);
135
+ --color-success-dark: var(--success-dark);
136
+ --color-on-success: var(--on-success);
137
+ --color-success-container: var(--success-container);
138
+ --color-on-success-container: var(--on-success-container);
139
+ --color-info: var(--info);
140
+ --color-on-info: var(--on-info);
141
+ --color-info-container: var(--info-container);
142
+ --color-on-info-container: var(--on-info-container);
143
+ --color-info-light: var(--info-light);
144
+ --color-info-dark: var(--info-dark);
145
+ --color-warning: var(--warning);
146
+ --color-on-warning: var(--on-warning);
147
+ --color-warning-container: var(--warning-container);
148
+ --color-on-warning-container: var(--on-warning-container);
149
+ --color-warning-light: var(--warning-light);
150
+ --color-warning-dark: var(--warning-dark);
151
+ --color-destructive: var(--error);
152
+ --color-on-destructive: var(--on-error);
153
+ --color-destructive-container: var(--error-container);
154
+ --color-on-destructive-container: var(--on-error-container);
155
+ --color-neutral: var(--neutral);
156
+ --color-surface: var(--surface);
157
+ --color-on-surface: var(--on-surface);
158
+ --color-surface-container-lowest: var(--surface-container-lowest);
159
+ --color-on-surface-container-lowest: var(--on-surface-container-lowest);
160
+ --color-surface-container-low: var(--surface-container-low);
161
+ --color-on-surface-container-low: var(--on-surface-container-low);
162
+ --color-surface-container: var(--surface-container);
163
+ --color-on-surface-container: var(--on-surface-container);
164
+ --color-surface-container-high: var(--surface-container-high);
165
+ --color-on-surface-container-high: var(--on-surface-container-high);
166
+ --color-surface-container-highest: var(--surface-container-highest);
167
+ --color-on-surface-container-highest: var(--on-surface-container-highest);
168
+ --color-background: var(--background);
169
+ --color-on-background: var(--on-background);
170
+ --color-border: var(--border);
171
+ --color-focus-ring: var(--focus-ring);
172
+ --color-on-focus-ring: var(--on-focus-ring);
173
+ --color-link: var(--link);
174
+ --color-overlay: var(--overlay);
175
+ --color-background-code: var(--background-code);
176
+ --color-on-background-code: var(--on-background-code);
177
+ }
103
178
  @layer base {
104
179
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
105
180
  [data-rui-focus-managed]
@@ -573,7 +648,7 @@
573
648
  :root .rui-button--ghost {
574
649
  color: var(--macos-text);
575
650
  }
576
- :root .rui-button--ghost:hover:not(:disabled) {
651
+ :root .rui-button--ghost:hover:not(:disabled, [aria-pressed='true']) {
577
652
  background-color: var(--macos-hover-fill);
578
653
  }
579
654
  :root .rui-button--ghost:active:not(:disabled),
@@ -587,9 +662,9 @@
587
662
  :root .rui-button:focus-visible {
588
663
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
589
664
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
590
- --tw-ring-color: var(--color-focus-ring);
665
+ --tw-ring-color: var(--focus-ring);
591
666
  @supports (color: color-mix(in lab, red, red)) {
592
- --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
667
+ --tw-ring-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
593
668
  }
594
669
  }
595
670
  :root .rui-input,
@@ -602,8 +677,8 @@
602
677
  :root .rui-number-field__group,
603
678
  :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])) {
604
679
  border-radius: var(--radius-sm);
605
- background-color: var(--color-surface);
606
- color: var(--color-on-surface);
680
+ background-color: var(--surface);
681
+ color: var(--on-surface);
607
682
  --tw-shadow: 0 0 #0000;
608
683
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
609
684
  border-color: var(--rui-control-border-color);
@@ -618,9 +693,9 @@
618
693
  :root .rui-number-field__group:focus-within {
619
694
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
620
695
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
621
- --tw-ring-color: var(--color-focus-ring);
696
+ --tw-ring-color: var(--focus-ring);
622
697
  @supports (color: color-mix(in lab, red, red)) {
623
- --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
698
+ --tw-ring-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
624
699
  }
625
700
  --tw-outline-style: none;
626
701
  outline-style: none;
@@ -635,9 +710,9 @@
635
710
  :root .rui-select__control:focus-within {
636
711
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
637
712
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
638
- --tw-ring-color: var(--color-focus-ring);
713
+ --tw-ring-color: var(--focus-ring);
639
714
  @supports (color: color-mix(in lab, red, red)) {
640
- --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
715
+ --tw-ring-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
641
716
  }
642
717
  }
643
718
  :root .rui-select__trigger {
@@ -706,9 +781,9 @@
706
781
  :root .rui-switch__input:focus-visible + .rui-switch__track {
707
782
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
708
783
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
709
- --tw-ring-color: var(--color-focus-ring);
784
+ --tw-ring-color: var(--focus-ring);
710
785
  @supports (color: color-mix(in lab, red, red)) {
711
- --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
786
+ --tw-ring-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
712
787
  }
713
788
  --tw-ring-offset-width: 0px;
714
789
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -747,8 +822,6 @@
747
822
  :root .rui-menu-button__item[aria-checked='true'],
748
823
  :root .rui-menubar__menu-item[aria-checked='true'],
749
824
  :root .rui-tree__node[aria-selected='true'],
750
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
751
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled),
752
825
  :root .rui-navigation-menu__link-list a[aria-current='page'] {
753
826
  border-radius: var(--radius-sm);
754
827
  background-color: var(--macos-selection);
@@ -764,10 +837,77 @@
764
837
  }
765
838
  :root .rui-calendar__day {
766
839
  height: calc(var(--spacing, 0.25rem) * 7);
767
- border-radius: var(--radius-full);
840
+ border-radius: var(--radius-none);
841
+ isolation: isolate;
842
+ }
843
+ :root .rui-calendar__day::before {
844
+ content: '';
845
+ position: absolute;
846
+ inset-block: 0;
847
+ inset-inline: calc(50% - 0.875rem);
848
+ z-index: -1;
849
+ border-radius: 9999px;
850
+ }
851
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true']) {
852
+ background-color: transparent;
853
+ }
854
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true'])::before {
855
+ background-color: var(--macos-hover-fill);
856
+ }
857
+ :root .rui-calendar__day:focus-visible {
858
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
859
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
860
+ }
861
+ :root .rui-calendar__day:focus-visible::before {
862
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
863
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
864
+ --tw-ring-color: var(--focus-ring);
865
+ @supports (color: color-mix(in lab, red, red)) {
866
+ --tw-ring-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
867
+ }
868
+ }
869
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
870
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled) {
871
+ background-color: transparent;
872
+ color: var(--macos-selection-text);
873
+ }
874
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true'])::before {
875
+ background-color: var(--macos-selection);
876
+ }
877
+ :root .rui-calendar__day[data-range-middle='true'],
878
+ :root .rui-calendar__day[data-range-middle='true']:hover:not(:disabled) {
879
+ background-color: var(--macos-selection);
880
+ @supports (color: color-mix(in lab, red, red)) {
881
+ background-color: color-mix(in srgb, var(--macos-selection) 16%, transparent);
882
+ }
768
883
  }
769
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']) {
770
- border-radius: var(--radius-full);
884
+ :root .rui-calendar__day[data-range-start='true']:not([data-range-end='true']) {
885
+ background-image: linear-gradient(
886
+ to right,
887
+ transparent 50%,
888
+ var(--macos-selection) 50%
889
+ );
890
+ @supports (color: color-mix(in lab, red, red)) {
891
+ background-image: linear-gradient(
892
+ to right,
893
+ transparent 50%,
894
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
895
+ );
896
+ }
897
+ }
898
+ :root .rui-calendar__day[data-range-end='true']:not([data-range-start='true']) {
899
+ background-image: linear-gradient(
900
+ to left,
901
+ transparent 50%,
902
+ var(--macos-selection) 50%
903
+ );
904
+ @supports (color: color-mix(in lab, red, red)) {
905
+ background-image: linear-gradient(
906
+ to left,
907
+ transparent 50%,
908
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
909
+ );
910
+ }
771
911
  }
772
912
  :root .rui-calendar__day[aria-current='date']:not([aria-selected='true']) {
773
913
  text-decoration-line: none;
@@ -822,7 +962,7 @@
822
962
  --rui-popover-shadow: var(--macos-menu-shadow);
823
963
  --rui-popover-radius: var(--border-radius-lg);
824
964
  border-color: transparent;
825
- color: var(--color-on-surface);
965
+ color: var(--on-surface);
826
966
  background-color: var(--macos-elevated);
827
967
  box-shadow: var(--macos-menu-shadow);
828
968
  backdrop-filter: blur(24px) saturate(1.6);
@@ -857,7 +997,7 @@
857
997
  --rui-dialog-shadow: 0 0 0 0.5px var(--macos-elevated-edge), 0 20px 50px rgb(0 0 0 / 0.35);
858
998
  }
859
999
  :root .rui-dialog__surface {
860
- color: var(--color-on-surface);
1000
+ color: var(--on-surface);
861
1001
  background-color: var(--macos-canvas);
862
1002
  box-shadow: 0 0 0 0.5px var(--macos-elevated-edge),
863
1003
  inset 0 0 0 0.5px var(--macos-elevated-highlight),
@@ -866,25 +1006,25 @@
866
1006
  :root .rui-dialog__title {
867
1007
  --tw-font-weight: var(--font-weight-bold, 700);
868
1008
  font-weight: var(--font-weight-bold, 700);
869
- color: var(--color-on-surface);
1009
+ color: var(--on-surface);
870
1010
  }
871
1011
  :root .rui-calendar {
872
1012
  border-radius: var(--radius-container);
873
1013
  border-style: var(--tw-border-style);
874
1014
  border-width: 0px;
875
- color: var(--color-on-surface);
1015
+ color: var(--on-surface);
876
1016
  background-color: var(--macos-surface);
877
1017
  box-shadow: var(--macos-control-shadow);
878
1018
  }
879
1019
  :root .rui-calendar__header {
880
1020
  --tw-font-weight: var(--font-weight-semibold);
881
1021
  font-weight: var(--font-weight-semibold);
882
- color: var(--color-on-surface);
1022
+ color: var(--on-surface);
883
1023
  }
884
1024
  :root .rui-sidebar__header {
885
1025
  --tw-font-weight: var(--font-weight-semibold);
886
1026
  font-weight: var(--font-weight-semibold);
887
- color: var(--color-on-surface);
1027
+ color: var(--on-surface);
888
1028
  }
889
1029
  :root rui-tabs[variant] .rui-tabs__list {
890
1030
  width: fit-content;
@@ -921,9 +1061,9 @@
921
1061
  :root rui-tabs[variant] .rui-tabs__tab:focus-visible {
922
1062
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
923
1063
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
924
- --tw-ring-color: var(--color-focus-ring);
1064
+ --tw-ring-color: var(--focus-ring);
925
1065
  @supports (color: color-mix(in lab, red, red)) {
926
- --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
1066
+ --tw-ring-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
927
1067
  }
928
1068
  --tw-ring-offset-width: 0px;
929
1069
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -961,15 +1101,12 @@
961
1101
  }
962
1102
  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
963
1103
  border-radius: var(--radius-md);
964
- color: var(--color-on-surface);
1104
+ color: var(--on-surface);
965
1105
  border: 1px solid var(--macos-text);
966
1106
  @supports (color: color-mix(in lab, red, red)) {
967
1107
  border: 1px solid color-mix(in srgb, var(--macos-text) 12%, transparent);
968
1108
  }
969
- background-color: var(--macos-text);
970
- @supports (color: color-mix(in lab, red, red)) {
971
- background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
972
- }
1109
+ background-color: var(--macos-surface);
973
1110
  padding: var(--rui-tabs-panel-padding);
974
1111
  padding-top: calc(var(--rui-tabs-panel-padding) + 0.75rem);
975
1112
  }
@@ -977,7 +1114,7 @@
977
1114
  :root .rui-toast {
978
1115
  border-radius: var(--radius-container);
979
1116
  border-color: transparent;
980
- color: var(--color-on-surface);
1117
+ color: var(--on-surface);
981
1118
  background-color: var(--macos-elevated);
982
1119
  background-image: none;
983
1120
  box-shadow: var(--macos-menu-shadow);
@@ -1014,7 +1151,7 @@
1014
1151
  border-radius: var(--radius-container);
1015
1152
  border-style: var(--tw-border-style);
1016
1153
  border-width: 0px;
1017
- color: var(--color-on-surface);
1154
+ color: var(--on-surface);
1018
1155
  background-color: var(--macos-surface);
1019
1156
  box-shadow: var(--macos-control-shadow);
1020
1157
  }
@@ -1038,7 +1175,7 @@
1038
1175
  :root .rui-table__cell,
1039
1176
  :root .rui-grid__cell {
1040
1177
  border-bottom-color: transparent;
1041
- color: var(--color-on-surface);
1178
+ color: var(--on-surface);
1042
1179
  border-right-color: transparent;
1043
1180
  background-color: var(--macos-surface);
1044
1181
  }
@@ -1057,7 +1194,7 @@
1057
1194
  border-radius: var(--radius-container);
1058
1195
  border-style: var(--tw-border-style);
1059
1196
  border-width: 0px;
1060
- color: var(--color-on-surface);
1197
+ color: var(--on-surface);
1061
1198
  background-color: var(--macos-surface);
1062
1199
  box-shadow: var(--macos-control-shadow);
1063
1200
  --rui-treegrid-indent: 0.875rem;
@@ -1068,7 +1205,7 @@
1068
1205
  background-color: transparent;
1069
1206
  padding-inline: var(--spacing-2);
1070
1207
  padding-block: var(--spacing-1);
1071
- color: var(--color-on-surface);
1208
+ color: var(--on-surface);
1072
1209
  font-size: var(--text-control);
1073
1210
  }
1074
1211
  :root .rui-treegrid__row--header .rui-treegrid__cell {
@@ -1086,7 +1223,7 @@
1086
1223
  }
1087
1224
  :root .rui-separator,
1088
1225
  :root .rui-sidebar__separator {
1089
- background-color: var(--color-border);
1226
+ background-color: var(--border);
1090
1227
  }
1091
1228
  :root .rui-slider {
1092
1229
  --rui-slider-track-size: 0.25rem;