@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/cloudflare/compact.css CHANGED
@@ -27,12 +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-secondary: var(--secondary);
31
- --color-on-secondary: var(--on-secondary);
32
- --color-surface: var(--surface);
33
- --color-on-surface: var(--on-surface);
34
- --color-surface-container-high: var(--surface-container-high);
35
- --color-border: var(--border);
36
30
  --spacing-2: var(--space-2);
37
31
  --radius-control: var(--radius-control);
38
32
  --radius-container: var(--radius-container);
@@ -95,6 +89,86 @@
95
89
  --size-icon-sm: 1rem;
96
90
  --size-icon-md: 1.25rem;
97
91
  }
92
+ :where(:root, .dark) {
93
+ --color-transparent: transparent;
94
+ --color-gray-50: var(--gray-50);
95
+ --color-gray-100: var(--gray-100);
96
+ --color-gray-200: var(--gray-200);
97
+ --color-gray-300: var(--gray-300);
98
+ --color-gray-400: var(--gray-400);
99
+ --color-gray-500: var(--gray-500);
100
+ --color-gray-600: var(--gray-600);
101
+ --color-gray-700: var(--gray-700);
102
+ --color-gray-800: var(--gray-800);
103
+ --color-gray-900: var(--gray-900);
104
+ --color-gray-950: var(--gray-950);
105
+ --color-primary: var(--primary);
106
+ --color-primary-light: var(--primary-light);
107
+ --color-primary-dark: var(--primary-dark);
108
+ --color-on-primary: var(--on-primary);
109
+ --color-primary-container: var(--primary-container);
110
+ --color-on-primary-container: var(--on-primary-container);
111
+ --color-secondary: var(--secondary);
112
+ --color-secondary-light: var(--secondary-light);
113
+ --color-secondary-dark: var(--secondary-dark);
114
+ --color-on-secondary: var(--on-secondary);
115
+ --color-secondary-container: var(--secondary-container);
116
+ --color-on-secondary-container: var(--on-secondary-container);
117
+ --color-tertiary: var(--tertiary);
118
+ --color-on-tertiary: var(--on-tertiary);
119
+ --color-tertiary-container: var(--tertiary-container);
120
+ --color-on-tertiary-container: var(--on-tertiary-container);
121
+ --color-error: var(--error);
122
+ --color-error-light: var(--error-light);
123
+ --color-error-dark: var(--error-dark);
124
+ --color-on-error: var(--on-error);
125
+ --color-error-container: var(--error-container);
126
+ --color-on-error-container: var(--on-error-container);
127
+ --color-success: var(--success);
128
+ --color-success-light: var(--success-light);
129
+ --color-success-dark: var(--success-dark);
130
+ --color-on-success: var(--on-success);
131
+ --color-success-container: var(--success-container);
132
+ --color-on-success-container: var(--on-success-container);
133
+ --color-info: var(--info);
134
+ --color-on-info: var(--on-info);
135
+ --color-info-container: var(--info-container);
136
+ --color-on-info-container: var(--on-info-container);
137
+ --color-info-light: var(--info-light);
138
+ --color-info-dark: var(--info-dark);
139
+ --color-warning: var(--warning);
140
+ --color-on-warning: var(--on-warning);
141
+ --color-warning-container: var(--warning-container);
142
+ --color-on-warning-container: var(--on-warning-container);
143
+ --color-warning-light: var(--warning-light);
144
+ --color-warning-dark: var(--warning-dark);
145
+ --color-destructive: var(--error);
146
+ --color-on-destructive: var(--on-error);
147
+ --color-destructive-container: var(--error-container);
148
+ --color-on-destructive-container: var(--on-error-container);
149
+ --color-neutral: var(--neutral);
150
+ --color-surface: var(--surface);
151
+ --color-on-surface: var(--on-surface);
152
+ --color-surface-container-lowest: var(--surface-container-lowest);
153
+ --color-on-surface-container-lowest: var(--on-surface-container-lowest);
154
+ --color-surface-container-low: var(--surface-container-low);
155
+ --color-on-surface-container-low: var(--on-surface-container-low);
156
+ --color-surface-container: var(--surface-container);
157
+ --color-on-surface-container: var(--on-surface-container);
158
+ --color-surface-container-high: var(--surface-container-high);
159
+ --color-on-surface-container-high: var(--on-surface-container-high);
160
+ --color-surface-container-highest: var(--surface-container-highest);
161
+ --color-on-surface-container-highest: var(--on-surface-container-highest);
162
+ --color-background: var(--background);
163
+ --color-on-background: var(--on-background);
164
+ --color-border: var(--border);
165
+ --color-focus-ring: var(--focus-ring);
166
+ --color-on-focus-ring: var(--on-focus-ring);
167
+ --color-link: var(--link);
168
+ --color-overlay: var(--overlay);
169
+ --color-background-code: var(--background-code);
170
+ --color-on-background-code: var(--on-background-code);
171
+ }
98
172
  @layer base {
99
173
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
100
174
  [data-rui-focus-managed]
@@ -649,16 +723,16 @@
649
723
  :root .rui-button--secondary {
650
724
  border-style: var(--tw-border-style);
651
725
  border-width: 1px;
652
- border-color: var(--color-border);
653
- background-color: var(--color-secondary);
654
- color: var(--color-on-secondary);
726
+ border-color: var(--border);
727
+ background-color: var(--secondary);
728
+ color: var(--on-secondary);
655
729
  --tw-shadow: 0 0 #0000;
656
730
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
657
731
  }
658
732
  :root .rui-button--secondary:hover:not(:disabled),
659
733
  :root .rui-button--outline:hover:not(:disabled),
660
734
  :root .rui-button--ghost:hover:not(:disabled) {
661
- background-color: var(--color-surface-container-high);
735
+ background-color: var(--surface-container-high);
662
736
  }
663
737
  :root .rui-button--outline,
664
738
  :root .rui-input,
@@ -670,17 +744,17 @@
670
744
  :root .rui-number-field__group,
671
745
  :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
672
746
  :root .rui-select__control {
673
- border-color: var(--color-border);
674
- background-color: var(--color-surface);
675
- color: var(--color-on-surface);
747
+ border-color: var(--border);
748
+ background-color: var(--surface);
749
+ color: var(--on-surface);
676
750
  --tw-shadow: 0 0 #0000;
677
751
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
678
752
  border-color: var(--rui-control-border-color);
679
753
  }
680
754
  :root .rui-checkbox__control,
681
755
  :root .rui-radio__control {
682
- border-color: var(--color-border);
683
- background-color: var(--color-surface);
756
+ border-color: var(--border);
757
+ background-color: var(--surface);
684
758
  border-color: var(--rui-control-border-color);
685
759
  }
686
760
  :root .rui-dialog__surface,
@@ -694,7 +768,7 @@
694
768
  border-radius: var(--radius-container);
695
769
  border-style: var(--tw-border-style);
696
770
  border-width: 0px;
697
- background-color: var(--color-surface);
771
+ background-color: var(--surface);
698
772
  box-shadow: 0 0 0 1px var(--color-cloudflare-shadow-edge),
699
773
  0 4px 12px var(--color-cloudflare-shadow-drop);
700
774
  }
@@ -710,8 +784,8 @@
710
784
  border-radius: var(--radius-container);
711
785
  border-style: var(--tw-border-style);
712
786
  border-width: 1px;
713
- border-color: var(--color-border);
714
- background-color: var(--color-surface);
787
+ border-color: var(--border);
788
+ background-color: var(--surface);
715
789
  --tw-shadow: 0 0 #0000;
716
790
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
717
791
  }
@@ -730,7 +804,7 @@
730
804
  transition: none;
731
805
  }
732
806
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
733
- color: var(--color-on-surface);
807
+ color: var(--on-surface);
734
808
  border-bottom-color: var(--primary);
735
809
  }
736
810
  :root .rui-listbox__option[aria-selected='true'],
@@ -772,7 +846,7 @@
772
846
  }
773
847
  :root .rui-separator,
774
848
  :root .rui-sidebar__separator {
775
- background-color: var(--color-border);
849
+ background-color: var(--border);
776
850
  }
777
851
  }
778
852
  :root {
package/dist/compiled/themes/cloudflare.css CHANGED
@@ -27,12 +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-secondary: var(--secondary);
31
- --color-on-secondary: var(--on-secondary);
32
- --color-surface: var(--surface);
33
- --color-on-surface: var(--on-surface);
34
- --color-surface-container-high: var(--surface-container-high);
35
- --color-border: var(--border);
36
30
  --spacing-2: var(--space-2);
37
31
  --radius-control: var(--radius-control);
38
32
  --radius-container: var(--radius-container);
@@ -95,6 +89,86 @@
95
89
  --size-icon-sm: 1rem;
96
90
  --size-icon-md: 1.25rem;
97
91
  }
92
+ :where(:root, .dark) {
93
+ --color-transparent: transparent;
94
+ --color-gray-50: var(--gray-50);
95
+ --color-gray-100: var(--gray-100);
96
+ --color-gray-200: var(--gray-200);
97
+ --color-gray-300: var(--gray-300);
98
+ --color-gray-400: var(--gray-400);
99
+ --color-gray-500: var(--gray-500);
100
+ --color-gray-600: var(--gray-600);
101
+ --color-gray-700: var(--gray-700);
102
+ --color-gray-800: var(--gray-800);
103
+ --color-gray-900: var(--gray-900);
104
+ --color-gray-950: var(--gray-950);
105
+ --color-primary: var(--primary);
106
+ --color-primary-light: var(--primary-light);
107
+ --color-primary-dark: var(--primary-dark);
108
+ --color-on-primary: var(--on-primary);
109
+ --color-primary-container: var(--primary-container);
110
+ --color-on-primary-container: var(--on-primary-container);
111
+ --color-secondary: var(--secondary);
112
+ --color-secondary-light: var(--secondary-light);
113
+ --color-secondary-dark: var(--secondary-dark);
114
+ --color-on-secondary: var(--on-secondary);
115
+ --color-secondary-container: var(--secondary-container);
116
+ --color-on-secondary-container: var(--on-secondary-container);
117
+ --color-tertiary: var(--tertiary);
118
+ --color-on-tertiary: var(--on-tertiary);
119
+ --color-tertiary-container: var(--tertiary-container);
120
+ --color-on-tertiary-container: var(--on-tertiary-container);
121
+ --color-error: var(--error);
122
+ --color-error-light: var(--error-light);
123
+ --color-error-dark: var(--error-dark);
124
+ --color-on-error: var(--on-error);
125
+ --color-error-container: var(--error-container);
126
+ --color-on-error-container: var(--on-error-container);
127
+ --color-success: var(--success);
128
+ --color-success-light: var(--success-light);
129
+ --color-success-dark: var(--success-dark);
130
+ --color-on-success: var(--on-success);
131
+ --color-success-container: var(--success-container);
132
+ --color-on-success-container: var(--on-success-container);
133
+ --color-info: var(--info);
134
+ --color-on-info: var(--on-info);
135
+ --color-info-container: var(--info-container);
136
+ --color-on-info-container: var(--on-info-container);
137
+ --color-info-light: var(--info-light);
138
+ --color-info-dark: var(--info-dark);
139
+ --color-warning: var(--warning);
140
+ --color-on-warning: var(--on-warning);
141
+ --color-warning-container: var(--warning-container);
142
+ --color-on-warning-container: var(--on-warning-container);
143
+ --color-warning-light: var(--warning-light);
144
+ --color-warning-dark: var(--warning-dark);
145
+ --color-destructive: var(--error);
146
+ --color-on-destructive: var(--on-error);
147
+ --color-destructive-container: var(--error-container);
148
+ --color-on-destructive-container: var(--on-error-container);
149
+ --color-neutral: var(--neutral);
150
+ --color-surface: var(--surface);
151
+ --color-on-surface: var(--on-surface);
152
+ --color-surface-container-lowest: var(--surface-container-lowest);
153
+ --color-on-surface-container-lowest: var(--on-surface-container-lowest);
154
+ --color-surface-container-low: var(--surface-container-low);
155
+ --color-on-surface-container-low: var(--on-surface-container-low);
156
+ --color-surface-container: var(--surface-container);
157
+ --color-on-surface-container: var(--on-surface-container);
158
+ --color-surface-container-high: var(--surface-container-high);
159
+ --color-on-surface-container-high: var(--on-surface-container-high);
160
+ --color-surface-container-highest: var(--surface-container-highest);
161
+ --color-on-surface-container-highest: var(--on-surface-container-highest);
162
+ --color-background: var(--background);
163
+ --color-on-background: var(--on-background);
164
+ --color-border: var(--border);
165
+ --color-focus-ring: var(--focus-ring);
166
+ --color-on-focus-ring: var(--on-focus-ring);
167
+ --color-link: var(--link);
168
+ --color-overlay: var(--overlay);
169
+ --color-background-code: var(--background-code);
170
+ --color-on-background-code: var(--on-background-code);
171
+ }
98
172
  @layer base {
99
173
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
100
174
  [data-rui-focus-managed]
@@ -649,16 +723,16 @@
649
723
  :root .rui-button--secondary {
650
724
  border-style: var(--tw-border-style);
651
725
  border-width: 1px;
652
- border-color: var(--color-border);
653
- background-color: var(--color-secondary);
654
- color: var(--color-on-secondary);
726
+ border-color: var(--border);
727
+ background-color: var(--secondary);
728
+ color: var(--on-secondary);
655
729
  --tw-shadow: 0 0 #0000;
656
730
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
657
731
  }
658
732
  :root .rui-button--secondary:hover:not(:disabled),
659
733
  :root .rui-button--outline:hover:not(:disabled),
660
734
  :root .rui-button--ghost:hover:not(:disabled) {
661
- background-color: var(--color-surface-container-high);
735
+ background-color: var(--surface-container-high);
662
736
  }
663
737
  :root .rui-button--outline,
664
738
  :root .rui-input,
@@ -670,17 +744,17 @@
670
744
  :root .rui-number-field__group,
671
745
  :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
672
746
  :root .rui-select__control {
673
- border-color: var(--color-border);
674
- background-color: var(--color-surface);
675
- color: var(--color-on-surface);
747
+ border-color: var(--border);
748
+ background-color: var(--surface);
749
+ color: var(--on-surface);
676
750
  --tw-shadow: 0 0 #0000;
677
751
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
678
752
  border-color: var(--rui-control-border-color);
679
753
  }
680
754
  :root .rui-checkbox__control,
681
755
  :root .rui-radio__control {
682
- border-color: var(--color-border);
683
- background-color: var(--color-surface);
756
+ border-color: var(--border);
757
+ background-color: var(--surface);
684
758
  border-color: var(--rui-control-border-color);
685
759
  }
686
760
  :root .rui-dialog__surface,
@@ -694,7 +768,7 @@
694
768
  border-radius: var(--radius-container);
695
769
  border-style: var(--tw-border-style);
696
770
  border-width: 0px;
697
- background-color: var(--color-surface);
771
+ background-color: var(--surface);
698
772
  box-shadow: 0 0 0 1px var(--color-cloudflare-shadow-edge),
699
773
  0 4px 12px var(--color-cloudflare-shadow-drop);
700
774
  }
@@ -710,8 +784,8 @@
710
784
  border-radius: var(--radius-container);
711
785
  border-style: var(--tw-border-style);
712
786
  border-width: 1px;
713
- border-color: var(--color-border);
714
- background-color: var(--color-surface);
787
+ border-color: var(--border);
788
+ background-color: var(--surface);
715
789
  --tw-shadow: 0 0 #0000;
716
790
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
717
791
  }
@@ -730,7 +804,7 @@
730
804
  transition: none;
731
805
  }
732
806
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
733
- color: var(--color-on-surface);
807
+ color: var(--on-surface);
734
808
  border-bottom-color: var(--primary);
735
809
  }
736
810
  :root .rui-listbox__option[aria-selected='true'],
@@ -772,7 +846,7 @@
772
846
  }
773
847
  :root .rui-separator,
774
848
  :root .rui-sidebar__separator {
775
- background-color: var(--color-border);
849
+ background-color: var(--border);
776
850
  }
777
851
  }
778
852
  @property --tw-border-style {
package/dist/compiled/themes/github/compact.css CHANGED
@@ -28,14 +28,6 @@
28
28
  --font-weight-semibold: var(--weight-semibold);
29
29
  --opacity-disabled: var(--opacity-disabled);
30
30
  --opacity-muted: var(--opacity-muted);
31
- --color-primary: var(--primary);
32
- --color-primary-container: var(--primary-container);
33
- --color-on-primary-container: var(--on-primary-container);
34
- --color-error: var(--error);
35
- --color-surface: var(--surface);
36
- --color-on-surface: var(--on-surface);
37
- --color-surface-container-low: var(--surface-container-low);
38
- --color-border: var(--border);
39
31
  --spacing-2: var(--space-2);
40
32
  --spacing-3: var(--space-3);
41
33
  --spacing-control-x: var(--space-control-x);
@@ -103,6 +95,86 @@
103
95
  --size-icon-sm: 1rem;
104
96
  --size-icon-md: 1.25rem;
105
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
+ }
106
178
  @layer base {
107
179
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
108
180
  [data-rui-focus-managed]
@@ -739,8 +811,8 @@
739
811
  :root .rui-number-field__group,
740
812
  :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
741
813
  :root .rui-select__control {
742
- background-color: var(--color-surface);
743
- color: var(--color-on-surface);
814
+ background-color: var(--surface);
815
+ color: var(--on-surface);
744
816
  --tw-shadow: 0 0 #0000;
745
817
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
746
818
  border-color: var(--rui-control-border-color);
@@ -753,7 +825,7 @@
753
825
  }
754
826
  :root .rui-checkbox__control {
755
827
  border-radius: var(--radius-xs);
756
- background-color: var(--color-surface);
828
+ background-color: var(--surface);
757
829
  border-color: var(--rui-control-border-color);
758
830
  }
759
831
  :root .rui-radio__control {
@@ -772,7 +844,7 @@
772
844
  border-radius: var(--radius-xl);
773
845
  border-style: var(--tw-border-style);
774
846
  border-width: 1px;
775
- border-color: var(--color-border);
847
+ border-color: var(--border);
776
848
  --tw-shadow: var(--shadow-overlay);
777
849
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
778
850
  background-color: var(--color-github-overlay);
@@ -854,7 +926,7 @@
854
926
  gap: var(--spacing-2);
855
927
  border-bottom-style: var(--tw-border-style);
856
928
  border-bottom-width: 1px;
857
- border-color: var(--color-border);
929
+ border-color: var(--border);
858
930
  background-color: transparent;
859
931
  padding-inline: 0px;
860
932
  padding-top: 0px;
@@ -863,13 +935,13 @@
863
935
  border-radius: var(--radius-none);
864
936
  font-size: var(--text-sm);
865
937
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
866
- color: var(--color-on-surface);
938
+ color: var(--on-surface);
867
939
  opacity: 100%;
868
940
  }
869
941
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
870
942
  --tw-font-weight: var(--font-weight-semibold);
871
943
  font-weight: var(--font-weight-semibold);
872
- color: var(--color-on-surface);
944
+ color: var(--on-surface);
873
945
  border-bottom-color: var(--rui-tabs-indicator-color);
874
946
  }
875
947
  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
@@ -878,24 +950,24 @@
878
950
  border-radius: var(--radius-container);
879
951
  border-style: var(--tw-border-style);
880
952
  border-width: 1px;
881
- border-color: var(--color-border);
882
- background-color: var(--color-surface);
953
+ border-color: var(--border);
954
+ background-color: var(--surface);
883
955
  }
884
956
  :root .rui-badge {
885
957
  border-radius: var(--radius-pill);
886
958
  border-style: var(--tw-border-style);
887
959
  border-width: 1px;
888
- border-color: var(--color-border);
960
+ border-color: var(--border);
889
961
  --tw-font-weight: var(--font-weight-medium);
890
962
  font-weight: var(--font-weight-medium);
891
963
  }
892
964
  :root .rui-badge--filled {
893
- border-color: var(--color-primary);
965
+ border-color: var(--primary);
894
966
  background-color: transparent;
895
- color: var(--color-primary);
967
+ color: var(--primary);
896
968
  }
897
969
  :root .rui-badge--destructive {
898
- border-color: var(--color-error);
970
+ border-color: var(--error);
899
971
  background-color: transparent;
900
972
  color: var(--color-github-danger-fg);
901
973
  }
@@ -910,8 +982,8 @@
910
982
  border-radius: var(--radius-container);
911
983
  border-style: var(--tw-border-style);
912
984
  border-width: 1px;
913
- border-color: var(--color-border);
914
- background-color: var(--color-surface);
985
+ border-color: var(--border);
986
+ background-color: var(--surface);
915
987
  --tw-shadow: 0 0 #0000;
916
988
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
917
989
  }
@@ -919,8 +991,8 @@
919
991
  border-radius: var(--radius-container);
920
992
  border-style: var(--tw-border-style);
921
993
  border-width: 1px;
922
- border-color: var(--color-border);
923
- background-color: var(--color-surface);
994
+ border-color: var(--border);
995
+ background-color: var(--surface);
924
996
  --tw-shadow: 0 0 #0000;
925
997
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
926
998
  --rui-treegrid-indent: 0.875rem;
@@ -931,22 +1003,22 @@
931
1003
  background-color: transparent;
932
1004
  padding-inline: var(--spacing-control-x);
933
1005
  padding-block: var(--spacing-2);
934
- color: var(--color-on-surface);
1006
+ color: var(--on-surface);
935
1007
  }
936
1008
  :root .rui-treegrid__row--header .rui-treegrid__cell {
937
1009
  border-bottom-style: var(--tw-border-style);
938
1010
  border-bottom-width: 1px;
939
- border-color: var(--color-border);
940
- background-color: var(--color-surface-container-low);
1011
+ border-color: var(--border);
1012
+ background-color: var(--surface-container-low);
941
1013
  --tw-font-weight: var(--font-weight-semibold);
942
1014
  font-weight: var(--font-weight-semibold);
943
1015
  }
944
1016
  :root .rui-treegrid__row:not(.rui-treegrid__row--header):hover .rui-treegrid__cell:not([aria-selected='true']) {
945
- background-color: var(--color-surface-container-low);
1017
+ background-color: var(--surface-container-low);
946
1018
  }
947
1019
  :root .rui-treegrid__cell[aria-selected='true'] {
948
- background-color: var(--color-primary-container);
949
- color: var(--color-on-primary-container);
1020
+ background-color: var(--primary-container);
1021
+ color: var(--on-primary-container);
950
1022
  }
951
1023
  }
952
1024
  :root {