@ecopages/radiant-themes 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/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 +107 -31
  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 +107 -31
  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 +86 -8
  18. package/dist/compiled/themes/windows95.css +86 -8
  19. 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);
@@ -99,6 +95,86 @@
99
95
  --size-icon-sm: 1rem;
100
96
  --size-icon-md: 1.25rem;
101
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
+ }
102
178
  @layer base {
103
179
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
104
180
  [data-rui-focus-managed]
@@ -586,9 +662,9 @@
586
662
  :root .rui-button:focus-visible {
587
663
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
588
664
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
589
- --tw-ring-color: var(--color-focus-ring);
665
+ --tw-ring-color: var(--focus-ring);
590
666
  @supports (color: color-mix(in lab, red, red)) {
591
- --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);
592
668
  }
593
669
  }
594
670
  :root .rui-input,
@@ -601,8 +677,8 @@
601
677
  :root .rui-number-field__group,
602
678
  :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])) {
603
679
  border-radius: var(--radius-sm);
604
- background-color: var(--color-surface);
605
- color: var(--color-on-surface);
680
+ background-color: var(--surface);
681
+ color: var(--on-surface);
606
682
  --tw-shadow: 0 0 #0000;
607
683
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
608
684
  border-color: var(--rui-control-border-color);
@@ -617,9 +693,9 @@
617
693
  :root .rui-number-field__group:focus-within {
618
694
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
619
695
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
620
- --tw-ring-color: var(--color-focus-ring);
696
+ --tw-ring-color: var(--focus-ring);
621
697
  @supports (color: color-mix(in lab, red, red)) {
622
- --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);
623
699
  }
624
700
  --tw-outline-style: none;
625
701
  outline-style: none;
@@ -634,9 +710,9 @@
634
710
  :root .rui-select__control:focus-within {
635
711
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
636
712
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
637
- --tw-ring-color: var(--color-focus-ring);
713
+ --tw-ring-color: var(--focus-ring);
638
714
  @supports (color: color-mix(in lab, red, red)) {
639
- --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);
640
716
  }
641
717
  }
642
718
  :root .rui-select__trigger {
@@ -705,9 +781,9 @@
705
781
  :root .rui-switch__input:focus-visible + .rui-switch__track {
706
782
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
707
783
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
708
- --tw-ring-color: var(--color-focus-ring);
784
+ --tw-ring-color: var(--focus-ring);
709
785
  @supports (color: color-mix(in lab, red, red)) {
710
- --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);
711
787
  }
712
788
  --tw-ring-offset-width: 0px;
713
789
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -785,9 +861,9 @@
785
861
  :root .rui-calendar__day:focus-visible::before {
786
862
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
787
863
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
788
- --tw-ring-color: var(--color-focus-ring);
864
+ --tw-ring-color: var(--focus-ring);
789
865
  @supports (color: color-mix(in lab, red, red)) {
790
- --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
866
+ --tw-ring-color: color-mix(in oklab, var(--focus-ring) 60%, transparent);
791
867
  }
792
868
  }
793
869
  :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
@@ -886,7 +962,7 @@
886
962
  --rui-popover-shadow: var(--macos-menu-shadow);
887
963
  --rui-popover-radius: var(--border-radius-lg);
888
964
  border-color: transparent;
889
- color: var(--color-on-surface);
965
+ color: var(--on-surface);
890
966
  background-color: var(--macos-elevated);
891
967
  box-shadow: var(--macos-menu-shadow);
892
968
  backdrop-filter: blur(24px) saturate(1.6);
@@ -921,7 +997,7 @@
921
997
  --rui-dialog-shadow: 0 0 0 0.5px var(--macos-elevated-edge), 0 20px 50px rgb(0 0 0 / 0.35);
922
998
  }
923
999
  :root .rui-dialog__surface {
924
- color: var(--color-on-surface);
1000
+ color: var(--on-surface);
925
1001
  background-color: var(--macos-canvas);
926
1002
  box-shadow: 0 0 0 0.5px var(--macos-elevated-edge),
927
1003
  inset 0 0 0 0.5px var(--macos-elevated-highlight),
@@ -930,25 +1006,25 @@
930
1006
  :root .rui-dialog__title {
931
1007
  --tw-font-weight: var(--font-weight-bold, 700);
932
1008
  font-weight: var(--font-weight-bold, 700);
933
- color: var(--color-on-surface);
1009
+ color: var(--on-surface);
934
1010
  }
935
1011
  :root .rui-calendar {
936
1012
  border-radius: var(--radius-container);
937
1013
  border-style: var(--tw-border-style);
938
1014
  border-width: 0px;
939
- color: var(--color-on-surface);
1015
+ color: var(--on-surface);
940
1016
  background-color: var(--macos-surface);
941
1017
  box-shadow: var(--macos-control-shadow);
942
1018
  }
943
1019
  :root .rui-calendar__header {
944
1020
  --tw-font-weight: var(--font-weight-semibold);
945
1021
  font-weight: var(--font-weight-semibold);
946
- color: var(--color-on-surface);
1022
+ color: var(--on-surface);
947
1023
  }
948
1024
  :root .rui-sidebar__header {
949
1025
  --tw-font-weight: var(--font-weight-semibold);
950
1026
  font-weight: var(--font-weight-semibold);
951
- color: var(--color-on-surface);
1027
+ color: var(--on-surface);
952
1028
  }
953
1029
  :root rui-tabs[variant] .rui-tabs__list {
954
1030
  width: fit-content;
@@ -985,9 +1061,9 @@
985
1061
  :root rui-tabs[variant] .rui-tabs__tab:focus-visible {
986
1062
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
987
1063
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
988
- --tw-ring-color: var(--color-focus-ring);
1064
+ --tw-ring-color: var(--focus-ring);
989
1065
  @supports (color: color-mix(in lab, red, red)) {
990
- --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);
991
1067
  }
992
1068
  --tw-ring-offset-width: 0px;
993
1069
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -1025,7 +1101,7 @@
1025
1101
  }
1026
1102
  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
1027
1103
  border-radius: var(--radius-md);
1028
- color: var(--color-on-surface);
1104
+ color: var(--on-surface);
1029
1105
  border: 1px solid var(--macos-text);
1030
1106
  @supports (color: color-mix(in lab, red, red)) {
1031
1107
  border: 1px solid color-mix(in srgb, var(--macos-text) 12%, transparent);
@@ -1038,7 +1114,7 @@
1038
1114
  :root .rui-toast {
1039
1115
  border-radius: var(--radius-container);
1040
1116
  border-color: transparent;
1041
- color: var(--color-on-surface);
1117
+ color: var(--on-surface);
1042
1118
  background-color: var(--macos-elevated);
1043
1119
  background-image: none;
1044
1120
  box-shadow: var(--macos-menu-shadow);
@@ -1075,7 +1151,7 @@
1075
1151
  border-radius: var(--radius-container);
1076
1152
  border-style: var(--tw-border-style);
1077
1153
  border-width: 0px;
1078
- color: var(--color-on-surface);
1154
+ color: var(--on-surface);
1079
1155
  background-color: var(--macos-surface);
1080
1156
  box-shadow: var(--macos-control-shadow);
1081
1157
  }
@@ -1099,7 +1175,7 @@
1099
1175
  :root .rui-table__cell,
1100
1176
  :root .rui-grid__cell {
1101
1177
  border-bottom-color: transparent;
1102
- color: var(--color-on-surface);
1178
+ color: var(--on-surface);
1103
1179
  border-right-color: transparent;
1104
1180
  background-color: var(--macos-surface);
1105
1181
  }
@@ -1118,7 +1194,7 @@
1118
1194
  border-radius: var(--radius-container);
1119
1195
  border-style: var(--tw-border-style);
1120
1196
  border-width: 0px;
1121
- color: var(--color-on-surface);
1197
+ color: var(--on-surface);
1122
1198
  background-color: var(--macos-surface);
1123
1199
  box-shadow: var(--macos-control-shadow);
1124
1200
  --rui-treegrid-indent: 0.875rem;
@@ -1129,7 +1205,7 @@
1129
1205
  background-color: transparent;
1130
1206
  padding-inline: var(--spacing-2);
1131
1207
  padding-block: var(--spacing-1);
1132
- color: var(--color-on-surface);
1208
+ color: var(--on-surface);
1133
1209
  font-size: var(--text-control);
1134
1210
  }
1135
1211
  :root .rui-treegrid__row--header .rui-treegrid__cell {
@@ -1147,7 +1223,7 @@
1147
1223
  }
1148
1224
  :root .rui-separator,
1149
1225
  :root .rui-sidebar__separator {
1150
- background-color: var(--color-border);
1226
+ background-color: var(--border);
1151
1227
  }
1152
1228
  :root .rui-slider {
1153
1229
  --rui-slider-track-size: 0.25rem;
package/dist/compiled/themes/macos-classic/compact.css CHANGED
@@ -26,7 +26,6 @@
26
26
  --text-5xl: var(--text-5xl);
27
27
  --opacity-disabled: var(--opacity-disabled);
28
28
  --opacity-muted: var(--opacity-muted);
29
- --color-on-surface: var(--on-surface);
30
29
  --spacing-2: var(--space-2);
31
30
  --radius-none: var(--border-radius-none);
32
31
  --radius-xs: var(--border-radius-xs);
@@ -93,6 +92,86 @@
93
92
  --size-icon-sm: 1rem;
94
93
  --size-icon-md: 1.25rem;
95
94
  }
95
+ :where(:root, .dark) {
96
+ --color-transparent: transparent;
97
+ --color-gray-50: var(--gray-50);
98
+ --color-gray-100: var(--gray-100);
99
+ --color-gray-200: var(--gray-200);
100
+ --color-gray-300: var(--gray-300);
101
+ --color-gray-400: var(--gray-400);
102
+ --color-gray-500: var(--gray-500);
103
+ --color-gray-600: var(--gray-600);
104
+ --color-gray-700: var(--gray-700);
105
+ --color-gray-800: var(--gray-800);
106
+ --color-gray-900: var(--gray-900);
107
+ --color-gray-950: var(--gray-950);
108
+ --color-primary: var(--primary);
109
+ --color-primary-light: var(--primary-light);
110
+ --color-primary-dark: var(--primary-dark);
111
+ --color-on-primary: var(--on-primary);
112
+ --color-primary-container: var(--primary-container);
113
+ --color-on-primary-container: var(--on-primary-container);
114
+ --color-secondary: var(--secondary);
115
+ --color-secondary-light: var(--secondary-light);
116
+ --color-secondary-dark: var(--secondary-dark);
117
+ --color-on-secondary: var(--on-secondary);
118
+ --color-secondary-container: var(--secondary-container);
119
+ --color-on-secondary-container: var(--on-secondary-container);
120
+ --color-tertiary: var(--tertiary);
121
+ --color-on-tertiary: var(--on-tertiary);
122
+ --color-tertiary-container: var(--tertiary-container);
123
+ --color-on-tertiary-container: var(--on-tertiary-container);
124
+ --color-error: var(--error);
125
+ --color-error-light: var(--error-light);
126
+ --color-error-dark: var(--error-dark);
127
+ --color-on-error: var(--on-error);
128
+ --color-error-container: var(--error-container);
129
+ --color-on-error-container: var(--on-error-container);
130
+ --color-success: var(--success);
131
+ --color-success-light: var(--success-light);
132
+ --color-success-dark: var(--success-dark);
133
+ --color-on-success: var(--on-success);
134
+ --color-success-container: var(--success-container);
135
+ --color-on-success-container: var(--on-success-container);
136
+ --color-info: var(--info);
137
+ --color-on-info: var(--on-info);
138
+ --color-info-container: var(--info-container);
139
+ --color-on-info-container: var(--on-info-container);
140
+ --color-info-light: var(--info-light);
141
+ --color-info-dark: var(--info-dark);
142
+ --color-warning: var(--warning);
143
+ --color-on-warning: var(--on-warning);
144
+ --color-warning-container: var(--warning-container);
145
+ --color-on-warning-container: var(--on-warning-container);
146
+ --color-warning-light: var(--warning-light);
147
+ --color-warning-dark: var(--warning-dark);
148
+ --color-destructive: var(--error);
149
+ --color-on-destructive: var(--on-error);
150
+ --color-destructive-container: var(--error-container);
151
+ --color-on-destructive-container: var(--on-error-container);
152
+ --color-neutral: var(--neutral);
153
+ --color-surface: var(--surface);
154
+ --color-on-surface: var(--on-surface);
155
+ --color-surface-container-lowest: var(--surface-container-lowest);
156
+ --color-on-surface-container-lowest: var(--on-surface-container-lowest);
157
+ --color-surface-container-low: var(--surface-container-low);
158
+ --color-on-surface-container-low: var(--on-surface-container-low);
159
+ --color-surface-container: var(--surface-container);
160
+ --color-on-surface-container: var(--on-surface-container);
161
+ --color-surface-container-high: var(--surface-container-high);
162
+ --color-on-surface-container-high: var(--on-surface-container-high);
163
+ --color-surface-container-highest: var(--surface-container-highest);
164
+ --color-on-surface-container-highest: var(--on-surface-container-highest);
165
+ --color-background: var(--background);
166
+ --color-on-background: var(--on-background);
167
+ --color-border: var(--border);
168
+ --color-focus-ring: var(--focus-ring);
169
+ --color-on-focus-ring: var(--on-focus-ring);
170
+ --color-link: var(--link);
171
+ --color-overlay: var(--overlay);
172
+ --color-background-code: var(--background-code);
173
+ --color-on-background-code: var(--on-background-code);
174
+ }
96
175
  @layer base {
97
176
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
98
177
  [data-rui-focus-managed]
@@ -713,7 +792,7 @@
713
792
  }
714
793
  :root .rui-feed__article {
715
794
  border-radius: var(--radius-none);
716
- color: var(--color-on-surface);
795
+ color: var(--on-surface);
717
796
  border-color: var(--macos-classic-dark);
718
797
  background-color: var(--macos-classic-surface);
719
798
  box-shadow: var(--macos-classic-bevel);
@@ -726,7 +805,7 @@
726
805
  :root .rui-sidebar__header {
727
806
  --tw-font-weight: var(--font-weight-bold, 700);
728
807
  font-weight: var(--font-weight-bold, 700);
729
- color: var(--color-on-surface);
808
+ color: var(--on-surface);
730
809
  display: flex;
731
810
  align-items: center;
732
811
  gap: 0.375rem;
@@ -777,7 +856,7 @@
777
856
  :root .rui-hover-card__content,
778
857
  :root .rui-calendar {
779
858
  border-radius: var(--radius-none);
780
- color: var(--color-on-surface);
859
+ color: var(--on-surface);
781
860
  border: 1px solid var(--macos-classic-dark);
782
861
  background-color: var(--macos-classic-surface);
783
862
  box-shadow: var(--macos-classic-bevel),
@@ -789,7 +868,7 @@
789
868
  :root .rui-select__listbox,
790
869
  :root .rui-combobox__listbox {
791
870
  border-radius: var(--radius-none);
792
- color: var(--color-on-surface);
871
+ color: var(--on-surface);
793
872
  border: 1px solid var(--macos-classic-dark);
794
873
  background-color: var(--macos-classic-surface);
795
874
  box-shadow: inset 1px 1px 0 var(--macos-classic-light),
@@ -852,7 +931,7 @@
852
931
  }
853
932
  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
854
933
  border-radius: var(--radius-none);
855
- color: var(--color-on-surface);
934
+ color: var(--on-surface);
856
935
  position: relative;
857
936
  z-index: 1;
858
937
  border: 1px solid var(--macos-classic-dark);
@@ -1061,7 +1140,7 @@
1061
1140
  :root .rui-alert,
1062
1141
  :root .rui-toast {
1063
1142
  border-radius: var(--radius-none);
1064
- color: var(--color-on-surface);
1143
+ color: var(--on-surface);
1065
1144
  border: 1px solid var(--macos-classic-dark);
1066
1145
  background-color: var(--macos-classic-surface);
1067
1146
  box-shadow: var(--macos-classic-bevel),
@@ -1100,7 +1179,7 @@
1100
1179
  border-radius: var(--radius-full);
1101
1180
  border-style: var(--tw-border-style);
1102
1181
  border-width: 1px;
1103
- color: var(--color-on-surface);
1182
+ color: var(--on-surface);
1104
1183
  z-index: 1;
1105
1184
  border-color: var(--macos-classic-dark);
1106
1185
  background-color: var(--macos-classic-face);
@@ -1121,7 +1200,7 @@
1121
1200
  :root .rui-badge,
1122
1201
  :root .rui-chip {
1123
1202
  border-radius: var(--radius-sm);
1124
- color: var(--color-on-surface);
1203
+ color: var(--on-surface);
1125
1204
  border: 1px solid var(--macos-classic-dark);
1126
1205
  background-color: var(--macos-classic-face);
1127
1206
  box-shadow: var(--macos-classic-raised);