@ecopages/radiant-themes 0.3.0 → 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 (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/vercel/compact.css CHANGED
@@ -27,14 +27,6 @@
27
27
  --font-weight-medium: var(--weight-medium);
28
28
  --opacity-disabled: var(--opacity-disabled);
29
29
  --opacity-muted: var(--opacity-muted);
30
- --color-primary: var(--primary);
31
- --color-primary-light: var(--primary-light);
32
- --color-on-primary: var(--on-primary);
33
- --color-surface: var(--surface);
34
- --color-on-surface: var(--on-surface);
35
- --color-surface-container-low: var(--surface-container-low);
36
- --color-on-surface-container-low: var(--on-surface-container-low);
37
- --color-border: var(--border);
38
30
  --spacing-2: var(--space-2);
39
31
  --radius-none: var(--border-radius-none);
40
32
  --radius-control: var(--radius-control);
@@ -98,6 +90,86 @@
98
90
  --size-icon-sm: 1rem;
99
91
  --size-icon-md: 1.25rem;
100
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
+ }
101
173
  @layer base {
102
174
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
103
175
  [data-rui-focus-managed]
@@ -571,17 +643,17 @@
571
643
  background-image: none;
572
644
  }
573
645
  :root .rui-button--filled {
574
- background-color: var(--color-primary);
575
- color: var(--color-on-primary);
646
+ background-color: var(--primary);
647
+ color: var(--on-primary);
576
648
  }
577
649
  :root .rui-button--filled:hover:not(:disabled) {
578
- background-color: var(--color-primary-light);
579
- color: var(--color-on-primary);
650
+ background-color: var(--primary-light);
651
+ color: var(--on-primary);
580
652
  }
581
653
  :root .rui-button--outline {
582
- border-color: var(--color-border);
583
- background-color: var(--color-surface);
584
- color: var(--color-on-surface);
654
+ border-color: var(--border);
655
+ background-color: var(--surface);
656
+ color: var(--on-surface);
585
657
  --tw-shadow: 0 0 #0000;
586
658
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
587
659
  border-color: var(--rui-control-border-color);
@@ -607,8 +679,8 @@
607
679
  border-radius: var(--radius-control);
608
680
  border-style: var(--tw-border-style);
609
681
  border-width: 1px;
610
- background-color: var(--color-surface);
611
- color: var(--color-on-surface);
682
+ background-color: var(--surface);
683
+ color: var(--on-surface);
612
684
  --tw-shadow: 0 0 #0000;
613
685
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
614
686
  border-color: var(--rui-control-border-color);
@@ -632,8 +704,8 @@
632
704
  }
633
705
  :root .rui-checkbox__control,
634
706
  :root .rui-radio__control {
635
- border-color: var(--color-border);
636
- background-color: var(--color-surface);
707
+ border-color: var(--border);
708
+ background-color: var(--surface);
637
709
  border-color: var(--rui-control-border-color);
638
710
  }
639
711
  :root .rui-dialog__surface,
@@ -643,8 +715,8 @@
643
715
  border-radius: var(--radius-container);
644
716
  border-style: var(--tw-border-style);
645
717
  border-width: 1px;
646
- border-color: var(--color-border);
647
- background-color: var(--color-surface);
718
+ border-color: var(--border);
719
+ background-color: var(--surface);
648
720
  --tw-shadow: var(--shadow-control);
649
721
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
650
722
  }
@@ -666,7 +738,7 @@
666
738
  border-radius: var(--radius-container);
667
739
  border-style: var(--tw-border-style);
668
740
  border-width: 1px;
669
- border-color: var(--color-border);
741
+ border-color: var(--border);
670
742
  padding: var(--spacing-2);
671
743
  background-color: var(--color-vercel-background-1);
672
744
  box-shadow: 0 4px 8px -4px rgb(0 0 0 / 0.04),
@@ -685,7 +757,7 @@
685
757
  :root rui-tabs[variant='boxed'] .rui-tabs__list {
686
758
  border-bottom-style: var(--tw-border-style);
687
759
  border-bottom-width: 1px;
688
- border-color: var(--color-border);
760
+ border-color: var(--border);
689
761
  background-color: transparent;
690
762
  padding-inline: var(--spacing-2);
691
763
  padding-top: var(--spacing-2);
@@ -693,18 +765,18 @@
693
765
  }
694
766
  :root rui-tabs[variant='boxed'] .rui-tabs__tab {
695
767
  border-radius: var(--radius-none);
696
- color: var(--color-on-surface-container-low);
768
+ color: var(--on-surface-container-low);
697
769
  margin-bottom: -1px;
698
770
  }
699
771
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
700
772
  background-color: transparent;
701
773
  --tw-font-weight: var(--font-weight-medium);
702
774
  font-weight: var(--font-weight-medium);
703
- color: var(--color-on-surface);
775
+ color: var(--on-surface);
704
776
  border-bottom-color: var(--primary);
705
777
  }
706
778
  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
707
- background-color: var(--color-surface);
779
+ background-color: var(--surface);
708
780
  padding: var(--rui-tabs-panel-padding);
709
781
  }
710
782
  :root .rui-listbox__option:hover:not([aria-disabled='true']),
@@ -727,10 +799,10 @@
727
799
  }
728
800
  :root .rui-table__column,
729
801
  :root .rui-treegrid__row--header {
730
- background-color: var(--color-surface-container-low);
802
+ background-color: var(--surface-container-low);
731
803
  --tw-font-weight: var(--font-weight-medium);
732
804
  font-weight: var(--font-weight-medium);
733
- color: var(--color-on-surface);
805
+ color: var(--on-surface);
734
806
  }
735
807
  :root .rui-alert {
736
808
  border-radius: var(--radius-control);
@@ -745,7 +817,7 @@
745
817
  }
746
818
  :root .rui-separator,
747
819
  :root .rui-sidebar__separator {
748
- background-color: var(--color-border);
820
+ background-color: var(--border);
749
821
  }
750
822
  }
751
823
  :root {
package/dist/compiled/themes/vercel.css CHANGED
@@ -27,14 +27,6 @@
27
27
  --font-weight-medium: var(--weight-medium);
28
28
  --opacity-disabled: var(--opacity-disabled);
29
29
  --opacity-muted: var(--opacity-muted);
30
- --color-primary: var(--primary);
31
- --color-primary-light: var(--primary-light);
32
- --color-on-primary: var(--on-primary);
33
- --color-surface: var(--surface);
34
- --color-on-surface: var(--on-surface);
35
- --color-surface-container-low: var(--surface-container-low);
36
- --color-on-surface-container-low: var(--on-surface-container-low);
37
- --color-border: var(--border);
38
30
  --spacing-2: var(--space-2);
39
31
  --radius-none: var(--border-radius-none);
40
32
  --radius-control: var(--radius-control);
@@ -98,6 +90,86 @@
98
90
  --size-icon-sm: 1rem;
99
91
  --size-icon-md: 1.25rem;
100
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
+ }
101
173
  @layer base {
102
174
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
103
175
  [data-rui-focus-managed]
@@ -571,17 +643,17 @@
571
643
  background-image: none;
572
644
  }
573
645
  :root .rui-button--filled {
574
- background-color: var(--color-primary);
575
- color: var(--color-on-primary);
646
+ background-color: var(--primary);
647
+ color: var(--on-primary);
576
648
  }
577
649
  :root .rui-button--filled:hover:not(:disabled) {
578
- background-color: var(--color-primary-light);
579
- color: var(--color-on-primary);
650
+ background-color: var(--primary-light);
651
+ color: var(--on-primary);
580
652
  }
581
653
  :root .rui-button--outline {
582
- border-color: var(--color-border);
583
- background-color: var(--color-surface);
584
- color: var(--color-on-surface);
654
+ border-color: var(--border);
655
+ background-color: var(--surface);
656
+ color: var(--on-surface);
585
657
  --tw-shadow: 0 0 #0000;
586
658
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
587
659
  border-color: var(--rui-control-border-color);
@@ -607,8 +679,8 @@
607
679
  border-radius: var(--radius-control);
608
680
  border-style: var(--tw-border-style);
609
681
  border-width: 1px;
610
- background-color: var(--color-surface);
611
- color: var(--color-on-surface);
682
+ background-color: var(--surface);
683
+ color: var(--on-surface);
612
684
  --tw-shadow: 0 0 #0000;
613
685
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
614
686
  border-color: var(--rui-control-border-color);
@@ -632,8 +704,8 @@
632
704
  }
633
705
  :root .rui-checkbox__control,
634
706
  :root .rui-radio__control {
635
- border-color: var(--color-border);
636
- background-color: var(--color-surface);
707
+ border-color: var(--border);
708
+ background-color: var(--surface);
637
709
  border-color: var(--rui-control-border-color);
638
710
  }
639
711
  :root .rui-dialog__surface,
@@ -643,8 +715,8 @@
643
715
  border-radius: var(--radius-container);
644
716
  border-style: var(--tw-border-style);
645
717
  border-width: 1px;
646
- border-color: var(--color-border);
647
- background-color: var(--color-surface);
718
+ border-color: var(--border);
719
+ background-color: var(--surface);
648
720
  --tw-shadow: var(--shadow-control);
649
721
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
650
722
  }
@@ -666,7 +738,7 @@
666
738
  border-radius: var(--radius-container);
667
739
  border-style: var(--tw-border-style);
668
740
  border-width: 1px;
669
- border-color: var(--color-border);
741
+ border-color: var(--border);
670
742
  padding: var(--spacing-2);
671
743
  background-color: var(--color-vercel-background-1);
672
744
  box-shadow: 0 4px 8px -4px rgb(0 0 0 / 0.04),
@@ -685,7 +757,7 @@
685
757
  :root rui-tabs[variant='boxed'] .rui-tabs__list {
686
758
  border-bottom-style: var(--tw-border-style);
687
759
  border-bottom-width: 1px;
688
- border-color: var(--color-border);
760
+ border-color: var(--border);
689
761
  background-color: transparent;
690
762
  padding-inline: var(--spacing-2);
691
763
  padding-top: var(--spacing-2);
@@ -693,18 +765,18 @@
693
765
  }
694
766
  :root rui-tabs[variant='boxed'] .rui-tabs__tab {
695
767
  border-radius: var(--radius-none);
696
- color: var(--color-on-surface-container-low);
768
+ color: var(--on-surface-container-low);
697
769
  margin-bottom: -1px;
698
770
  }
699
771
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
700
772
  background-color: transparent;
701
773
  --tw-font-weight: var(--font-weight-medium);
702
774
  font-weight: var(--font-weight-medium);
703
- color: var(--color-on-surface);
775
+ color: var(--on-surface);
704
776
  border-bottom-color: var(--primary);
705
777
  }
706
778
  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
707
- background-color: var(--color-surface);
779
+ background-color: var(--surface);
708
780
  padding: var(--rui-tabs-panel-padding);
709
781
  }
710
782
  :root .rui-listbox__option:hover:not([aria-disabled='true']),
@@ -727,10 +799,10 @@
727
799
  }
728
800
  :root .rui-table__column,
729
801
  :root .rui-treegrid__row--header {
730
- background-color: var(--color-surface-container-low);
802
+ background-color: var(--surface-container-low);
731
803
  --tw-font-weight: var(--font-weight-medium);
732
804
  font-weight: var(--font-weight-medium);
733
- color: var(--color-on-surface);
805
+ color: var(--on-surface);
734
806
  }
735
807
  :root .rui-alert {
736
808
  border-radius: var(--radius-control);
@@ -745,7 +817,7 @@
745
817
  }
746
818
  :root .rui-separator,
747
819
  :root .rui-sidebar__separator {
748
- background-color: var(--color-border);
820
+ background-color: var(--border);
749
821
  }
750
822
  }
751
823
  @property --tw-border-style {
package/dist/compiled/themes/vscode/compact.css CHANGED
@@ -27,11 +27,6 @@
27
27
  --font-weight-medium: var(--weight-medium);
28
28
  --opacity-disabled: var(--opacity-disabled);
29
29
  --opacity-muted: var(--opacity-muted);
30
- --color-primary-container: var(--primary-container);
31
- --color-on-primary-container: var(--on-primary-container);
32
- --color-on-surface: var(--on-surface);
33
- --color-on-surface-container-low: var(--on-surface-container-low);
34
- --color-border: var(--border);
35
30
  --spacing-1: var(--space-1);
36
31
  --spacing-2: var(--space-2);
37
32
  --radius-none: var(--border-radius-none);
@@ -98,6 +93,86 @@
98
93
  --size-icon-sm: 1rem;
99
94
  --size-icon-md: 1.25rem;
100
95
  }
96
+ :where(:root, .dark) {
97
+ --color-transparent: transparent;
98
+ --color-gray-50: var(--gray-50);
99
+ --color-gray-100: var(--gray-100);
100
+ --color-gray-200: var(--gray-200);
101
+ --color-gray-300: var(--gray-300);
102
+ --color-gray-400: var(--gray-400);
103
+ --color-gray-500: var(--gray-500);
104
+ --color-gray-600: var(--gray-600);
105
+ --color-gray-700: var(--gray-700);
106
+ --color-gray-800: var(--gray-800);
107
+ --color-gray-900: var(--gray-900);
108
+ --color-gray-950: var(--gray-950);
109
+ --color-primary: var(--primary);
110
+ --color-primary-light: var(--primary-light);
111
+ --color-primary-dark: var(--primary-dark);
112
+ --color-on-primary: var(--on-primary);
113
+ --color-primary-container: var(--primary-container);
114
+ --color-on-primary-container: var(--on-primary-container);
115
+ --color-secondary: var(--secondary);
116
+ --color-secondary-light: var(--secondary-light);
117
+ --color-secondary-dark: var(--secondary-dark);
118
+ --color-on-secondary: var(--on-secondary);
119
+ --color-secondary-container: var(--secondary-container);
120
+ --color-on-secondary-container: var(--on-secondary-container);
121
+ --color-tertiary: var(--tertiary);
122
+ --color-on-tertiary: var(--on-tertiary);
123
+ --color-tertiary-container: var(--tertiary-container);
124
+ --color-on-tertiary-container: var(--on-tertiary-container);
125
+ --color-error: var(--error);
126
+ --color-error-light: var(--error-light);
127
+ --color-error-dark: var(--error-dark);
128
+ --color-on-error: var(--on-error);
129
+ --color-error-container: var(--error-container);
130
+ --color-on-error-container: var(--on-error-container);
131
+ --color-success: var(--success);
132
+ --color-success-light: var(--success-light);
133
+ --color-success-dark: var(--success-dark);
134
+ --color-on-success: var(--on-success);
135
+ --color-success-container: var(--success-container);
136
+ --color-on-success-container: var(--on-success-container);
137
+ --color-info: var(--info);
138
+ --color-on-info: var(--on-info);
139
+ --color-info-container: var(--info-container);
140
+ --color-on-info-container: var(--on-info-container);
141
+ --color-info-light: var(--info-light);
142
+ --color-info-dark: var(--info-dark);
143
+ --color-warning: var(--warning);
144
+ --color-on-warning: var(--on-warning);
145
+ --color-warning-container: var(--warning-container);
146
+ --color-on-warning-container: var(--on-warning-container);
147
+ --color-warning-light: var(--warning-light);
148
+ --color-warning-dark: var(--warning-dark);
149
+ --color-destructive: var(--error);
150
+ --color-on-destructive: var(--on-error);
151
+ --color-destructive-container: var(--error-container);
152
+ --color-on-destructive-container: var(--on-error-container);
153
+ --color-neutral: var(--neutral);
154
+ --color-surface: var(--surface);
155
+ --color-on-surface: var(--on-surface);
156
+ --color-surface-container-lowest: var(--surface-container-lowest);
157
+ --color-on-surface-container-lowest: var(--on-surface-container-lowest);
158
+ --color-surface-container-low: var(--surface-container-low);
159
+ --color-on-surface-container-low: var(--on-surface-container-low);
160
+ --color-surface-container: var(--surface-container);
161
+ --color-on-surface-container: var(--on-surface-container);
162
+ --color-surface-container-high: var(--surface-container-high);
163
+ --color-on-surface-container-high: var(--on-surface-container-high);
164
+ --color-surface-container-highest: var(--surface-container-highest);
165
+ --color-on-surface-container-highest: var(--on-surface-container-highest);
166
+ --color-background: var(--background);
167
+ --color-on-background: var(--on-background);
168
+ --color-border: var(--border);
169
+ --color-focus-ring: var(--focus-ring);
170
+ --color-on-focus-ring: var(--on-focus-ring);
171
+ --color-link: var(--link);
172
+ --color-overlay: var(--overlay);
173
+ --color-background-code: var(--background-code);
174
+ --color-on-background-code: var(--on-background-code);
175
+ }
101
176
  @layer base {
102
177
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
103
178
  [data-rui-focus-managed]
@@ -718,7 +793,7 @@
718
793
  :root .rui-number-field__group,
719
794
  :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
720
795
  :root .rui-select__control {
721
- color: var(--color-on-surface);
796
+ color: var(--on-surface);
722
797
  --tw-shadow: 0 0 #0000;
723
798
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
724
799
  border-color: var(--rui-control-border-color);
@@ -750,8 +825,8 @@
750
825
  :root .rui-menu-button__item[aria-checked='true'],
751
826
  :root .rui-sidebar__menu-button[aria-current='page'],
752
827
  :root .rui-sidebar__menu-button--active {
753
- background-color: var(--color-primary-container);
754
- color: var(--color-on-primary-container);
828
+ background-color: var(--primary-container);
829
+ color: var(--on-primary-container);
755
830
  }
756
831
  :root .rui-dialog__surface,
757
832
  :root .rui-popover:where(:not(.rui-popover--listbox)),
@@ -760,7 +835,7 @@
760
835
  border-radius: var(--radius-container);
761
836
  border-style: var(--tw-border-style);
762
837
  border-width: 1px;
763
- color: var(--color-on-surface);
838
+ color: var(--on-surface);
764
839
  border-color: var(--color-vscode-widget-border);
765
840
  background-color: var(--color-vscode-widget);
766
841
  box-shadow: 0 0 8px 2px var(--color-vscode-widget-shadow);
@@ -770,7 +845,7 @@
770
845
  border-radius: var(--radius-control);
771
846
  border-style: var(--tw-border-style);
772
847
  border-width: 1px;
773
- color: var(--color-on-surface);
848
+ color: var(--on-surface);
774
849
  border-color: var(--rui-control-border-color);
775
850
  background-color: var(--color-vscode-menu);
776
851
  box-shadow: 0 0 8px 2px var(--color-vscode-widget-shadow);
@@ -779,7 +854,7 @@
779
854
  :root .rui-menubar__menu {
780
855
  border-style: var(--tw-border-style);
781
856
  border-width: 1px;
782
- color: var(--color-on-surface);
857
+ color: var(--on-surface);
783
858
  --rui-menu-item-hover: var(--color-vscode-blue);
784
859
  border-color: var(--color-vscode-menu-border);
785
860
  border-radius: 0.3125rem;
@@ -809,7 +884,7 @@
809
884
  :root rui-tabs[variant='boxed'] {
810
885
  border-style: var(--tw-border-style);
811
886
  border-width: 1px;
812
- border-color: var(--color-border);
887
+ border-color: var(--border);
813
888
  --tw-shadow: 0 0 #0000;
814
889
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
815
890
  background-color: var(--color-vscode-canvas);
@@ -818,7 +893,7 @@
818
893
  gap: 0px;
819
894
  border-bottom-style: var(--tw-border-style);
820
895
  border-bottom-width: 1px;
821
- border-color: var(--color-border);
896
+ border-color: var(--border);
822
897
  padding: 0px;
823
898
  background-color: var(--color-vscode-subtle);
824
899
  }
@@ -828,7 +903,7 @@
828
903
  border-width: 0px;
829
904
  border-right-style: var(--tw-border-style);
830
905
  border-right-width: 1px;
831
- border-color: var(--color-border);
906
+ border-color: var(--border);
832
907
  font-size: var(--text-sm);
833
908
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
834
909
  --tw-font-weight: var(--font-weight-normal, 400);
@@ -870,7 +945,7 @@
870
945
  :root .rui-treegrid__row--header .rui-treegrid__cell {
871
946
  border-bottom-style: var(--tw-border-style);
872
947
  border-bottom-width: 1px;
873
- border-color: var(--color-border);
948
+ border-color: var(--border);
874
949
  background-color: transparent;
875
950
  padding-inline: var(--spacing-2);
876
951
  padding-block: var(--spacing-1);
@@ -878,14 +953,14 @@
878
953
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
879
954
  --tw-font-weight: var(--font-weight-medium);
880
955
  font-weight: var(--font-weight-medium);
881
- color: var(--color-on-surface-container-low);
956
+ color: var(--on-surface-container-low);
882
957
  }
883
958
  :root .rui-treegrid__row:not(.rui-treegrid__row--header):hover .rui-treegrid__cell:not([aria-selected='true']) {
884
959
  background-color: var(--color-vscode-list-hover);
885
960
  }
886
961
  :root .rui-treegrid__cell[aria-selected='true'] {
887
- background-color: var(--color-primary-container);
888
- color: var(--color-on-primary-container);
962
+ background-color: var(--primary-container);
963
+ color: var(--on-primary-container);
889
964
  }
890
965
  }
891
966
  @supports (-moz-appearance: none) {