@ecopages/radiant-themes 0.2.5 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/compiled/themes/cloudflare/compact.css +94 -20
  2. package/dist/compiled/themes/cloudflare.css +94 -20
  3. package/dist/compiled/themes/github/compact.css +103 -31
  4. package/dist/compiled/themes/github.css +103 -31
  5. package/dist/compiled/themes/high-contrast/compact.css +107 -31
  6. package/dist/compiled/themes/high-contrast.css +107 -31
  7. package/dist/compiled/themes/macos/compact.css +177 -40
  8. package/dist/compiled/themes/macos-classic/compact.css +88 -9
  9. package/dist/compiled/themes/macos-classic.css +88 -9
  10. package/dist/compiled/themes/macos.css +177 -40
  11. package/dist/compiled/themes/material/compact.css +81 -2
  12. package/dist/compiled/themes/material.css +81 -2
  13. package/dist/compiled/themes/vercel/compact.css +101 -29
  14. package/dist/compiled/themes/vercel.css +101 -29
  15. package/dist/compiled/themes/vscode/compact.css +93 -18
  16. package/dist/compiled/themes/vscode.css +93 -18
  17. package/dist/compiled/themes/windows95/compact.css +97 -8
  18. package/dist/compiled/themes/windows95.css +97 -8
  19. package/dist/tokens/components/macos.css +65 -7
  20. package/dist/tokens/components/windows95.css +18 -0
  21. package/package.json +3 -3
package/dist/compiled/themes/vscode.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) {
package/dist/compiled/themes/windows95/compact.css CHANGED
@@ -26,8 +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-surface: var(--surface);
30
- --color-on-surface: var(--on-surface);
31
29
  --spacing-1: var(--space-1);
32
30
  --spacing-3: var(--space-3);
33
31
  --radius-none: var(--border-radius-none);
@@ -93,6 +91,86 @@
93
91
  --size-icon-sm: 1rem;
94
92
  --size-icon-md: 1.25rem;
95
93
  }
94
+ :where(:root, .dark) {
95
+ --color-transparent: transparent;
96
+ --color-gray-50: var(--gray-50);
97
+ --color-gray-100: var(--gray-100);
98
+ --color-gray-200: var(--gray-200);
99
+ --color-gray-300: var(--gray-300);
100
+ --color-gray-400: var(--gray-400);
101
+ --color-gray-500: var(--gray-500);
102
+ --color-gray-600: var(--gray-600);
103
+ --color-gray-700: var(--gray-700);
104
+ --color-gray-800: var(--gray-800);
105
+ --color-gray-900: var(--gray-900);
106
+ --color-gray-950: var(--gray-950);
107
+ --color-primary: var(--primary);
108
+ --color-primary-light: var(--primary-light);
109
+ --color-primary-dark: var(--primary-dark);
110
+ --color-on-primary: var(--on-primary);
111
+ --color-primary-container: var(--primary-container);
112
+ --color-on-primary-container: var(--on-primary-container);
113
+ --color-secondary: var(--secondary);
114
+ --color-secondary-light: var(--secondary-light);
115
+ --color-secondary-dark: var(--secondary-dark);
116
+ --color-on-secondary: var(--on-secondary);
117
+ --color-secondary-container: var(--secondary-container);
118
+ --color-on-secondary-container: var(--on-secondary-container);
119
+ --color-tertiary: var(--tertiary);
120
+ --color-on-tertiary: var(--on-tertiary);
121
+ --color-tertiary-container: var(--tertiary-container);
122
+ --color-on-tertiary-container: var(--on-tertiary-container);
123
+ --color-error: var(--error);
124
+ --color-error-light: var(--error-light);
125
+ --color-error-dark: var(--error-dark);
126
+ --color-on-error: var(--on-error);
127
+ --color-error-container: var(--error-container);
128
+ --color-on-error-container: var(--on-error-container);
129
+ --color-success: var(--success);
130
+ --color-success-light: var(--success-light);
131
+ --color-success-dark: var(--success-dark);
132
+ --color-on-success: var(--on-success);
133
+ --color-success-container: var(--success-container);
134
+ --color-on-success-container: var(--on-success-container);
135
+ --color-info: var(--info);
136
+ --color-on-info: var(--on-info);
137
+ --color-info-container: var(--info-container);
138
+ --color-on-info-container: var(--on-info-container);
139
+ --color-info-light: var(--info-light);
140
+ --color-info-dark: var(--info-dark);
141
+ --color-warning: var(--warning);
142
+ --color-on-warning: var(--on-warning);
143
+ --color-warning-container: var(--warning-container);
144
+ --color-on-warning-container: var(--on-warning-container);
145
+ --color-warning-light: var(--warning-light);
146
+ --color-warning-dark: var(--warning-dark);
147
+ --color-destructive: var(--error);
148
+ --color-on-destructive: var(--on-error);
149
+ --color-destructive-container: var(--error-container);
150
+ --color-on-destructive-container: var(--on-error-container);
151
+ --color-neutral: var(--neutral);
152
+ --color-surface: var(--surface);
153
+ --color-on-surface: var(--on-surface);
154
+ --color-surface-container-lowest: var(--surface-container-lowest);
155
+ --color-on-surface-container-lowest: var(--on-surface-container-lowest);
156
+ --color-surface-container-low: var(--surface-container-low);
157
+ --color-on-surface-container-low: var(--on-surface-container-low);
158
+ --color-surface-container: var(--surface-container);
159
+ --color-on-surface-container: var(--on-surface-container);
160
+ --color-surface-container-high: var(--surface-container-high);
161
+ --color-on-surface-container-high: var(--on-surface-container-high);
162
+ --color-surface-container-highest: var(--surface-container-highest);
163
+ --color-on-surface-container-highest: var(--on-surface-container-highest);
164
+ --color-background: var(--background);
165
+ --color-on-background: var(--on-background);
166
+ --color-border: var(--border);
167
+ --color-focus-ring: var(--focus-ring);
168
+ --color-on-focus-ring: var(--on-focus-ring);
169
+ --color-link: var(--link);
170
+ --color-overlay: var(--overlay);
171
+ --color-background-code: var(--background-code);
172
+ --color-on-background-code: var(--on-background-code);
173
+ }
96
174
  @layer base {
97
175
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
98
176
  [data-rui-focus-managed]
@@ -643,7 +721,7 @@
643
721
  border-radius: var(--radius-none);
644
722
  border-style: var(--tw-border-style);
645
723
  border-width: 0px;
646
- color: var(--color-on-surface);
724
+ color: var(--on-surface);
647
725
  background-color: var(--windows95-face);
648
726
  box-shadow: var(--windows95-raised);
649
727
  }
@@ -672,7 +750,7 @@
672
750
  border-radius: var(--radius-none);
673
751
  border-style: var(--tw-border-style);
674
752
  border-width: 0px;
675
- background-color: var(--color-surface);
753
+ background-color: var(--surface);
676
754
  background-color: var(--windows95-face);
677
755
  box-shadow: var(--windows95-raised);
678
756
  }
@@ -680,6 +758,17 @@
680
758
  :root .rui-combobox__listbox .rui-listbox {
681
759
  background-color: transparent;
682
760
  }
761
+ :root .rui-popover[role='dialog']:has(> rui-calendar, > .rui-calendar) {
762
+ padding: 0;
763
+ }
764
+ :root .rui-popover .rui-calendar {
765
+ padding: 3px;
766
+ background-color: transparent;
767
+ box-shadow: none;
768
+ }
769
+ :root .rui-popover .rui-calendar :is(.rui-calendar__weekdays, .rui-calendar__grid, .rui-calendar__footer) {
770
+ padding-inline: var(--space-2);
771
+ }
683
772
  :root .rui-tooltip__content {
684
773
  --rui-tooltip-surface: #ffffe1;
685
774
  --rui-tooltip-color: #000000;
@@ -756,7 +845,7 @@
756
845
  border-width: 0px;
757
846
  --tw-font-weight: var(--font-weight-normal, 400);
758
847
  font-weight: var(--font-weight-normal, 400);
759
- color: var(--color-on-surface);
848
+ color: var(--on-surface);
760
849
  opacity: 100%;
761
850
  z-index: 0;
762
851
  margin-bottom: 2px;
@@ -780,7 +869,7 @@
780
869
  border-radius: var(--radius-none);
781
870
  border-style: var(--tw-border-style);
782
871
  border-width: 0px;
783
- color: var(--color-on-surface);
872
+ color: var(--on-surface);
784
873
  position: relative;
785
874
  z-index: 0;
786
875
  background-color: var(--windows95-face);
@@ -792,7 +881,7 @@
792
881
  border-radius: var(--radius-none);
793
882
  border-style: var(--tw-border-style);
794
883
  border-width: 0px;
795
- color: var(--color-on-surface);
884
+ color: var(--on-surface);
796
885
  background-color: var(--windows95-face);
797
886
  box-shadow: var(--windows95-raised);
798
887
  }
@@ -885,7 +974,7 @@
885
974
  border-radius: var(--radius-none);
886
975
  border-style: var(--tw-border-style);
887
976
  border-width: 0px;
888
- color: var(--color-on-surface);
977
+ color: var(--on-surface);
889
978
  background-color: var(--windows95-face);
890
979
  box-shadow: var(--windows95-raised-thin);
891
980
  }
package/dist/compiled/themes/windows95.css CHANGED
@@ -26,8 +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-surface: var(--surface);
30
- --color-on-surface: var(--on-surface);
31
29
  --spacing-1: var(--space-1);
32
30
  --spacing-3: var(--space-3);
33
31
  --radius-none: var(--border-radius-none);
@@ -93,6 +91,86 @@
93
91
  --size-icon-sm: 1rem;
94
92
  --size-icon-md: 1.25rem;
95
93
  }
94
+ :where(:root, .dark) {
95
+ --color-transparent: transparent;
96
+ --color-gray-50: var(--gray-50);
97
+ --color-gray-100: var(--gray-100);
98
+ --color-gray-200: var(--gray-200);
99
+ --color-gray-300: var(--gray-300);
100
+ --color-gray-400: var(--gray-400);
101
+ --color-gray-500: var(--gray-500);
102
+ --color-gray-600: var(--gray-600);
103
+ --color-gray-700: var(--gray-700);
104
+ --color-gray-800: var(--gray-800);
105
+ --color-gray-900: var(--gray-900);
106
+ --color-gray-950: var(--gray-950);
107
+ --color-primary: var(--primary);
108
+ --color-primary-light: var(--primary-light);
109
+ --color-primary-dark: var(--primary-dark);
110
+ --color-on-primary: var(--on-primary);
111
+ --color-primary-container: var(--primary-container);
112
+ --color-on-primary-container: var(--on-primary-container);
113
+ --color-secondary: var(--secondary);
114
+ --color-secondary-light: var(--secondary-light);
115
+ --color-secondary-dark: var(--secondary-dark);
116
+ --color-on-secondary: var(--on-secondary);
117
+ --color-secondary-container: var(--secondary-container);
118
+ --color-on-secondary-container: var(--on-secondary-container);
119
+ --color-tertiary: var(--tertiary);
120
+ --color-on-tertiary: var(--on-tertiary);
121
+ --color-tertiary-container: var(--tertiary-container);
122
+ --color-on-tertiary-container: var(--on-tertiary-container);
123
+ --color-error: var(--error);
124
+ --color-error-light: var(--error-light);
125
+ --color-error-dark: var(--error-dark);
126
+ --color-on-error: var(--on-error);
127
+ --color-error-container: var(--error-container);
128
+ --color-on-error-container: var(--on-error-container);
129
+ --color-success: var(--success);
130
+ --color-success-light: var(--success-light);
131
+ --color-success-dark: var(--success-dark);
132
+ --color-on-success: var(--on-success);
133
+ --color-success-container: var(--success-container);
134
+ --color-on-success-container: var(--on-success-container);
135
+ --color-info: var(--info);
136
+ --color-on-info: var(--on-info);
137
+ --color-info-container: var(--info-container);
138
+ --color-on-info-container: var(--on-info-container);
139
+ --color-info-light: var(--info-light);
140
+ --color-info-dark: var(--info-dark);
141
+ --color-warning: var(--warning);
142
+ --color-on-warning: var(--on-warning);
143
+ --color-warning-container: var(--warning-container);
144
+ --color-on-warning-container: var(--on-warning-container);
145
+ --color-warning-light: var(--warning-light);
146
+ --color-warning-dark: var(--warning-dark);
147
+ --color-destructive: var(--error);
148
+ --color-on-destructive: var(--on-error);
149
+ --color-destructive-container: var(--error-container);
150
+ --color-on-destructive-container: var(--on-error-container);
151
+ --color-neutral: var(--neutral);
152
+ --color-surface: var(--surface);
153
+ --color-on-surface: var(--on-surface);
154
+ --color-surface-container-lowest: var(--surface-container-lowest);
155
+ --color-on-surface-container-lowest: var(--on-surface-container-lowest);
156
+ --color-surface-container-low: var(--surface-container-low);
157
+ --color-on-surface-container-low: var(--on-surface-container-low);
158
+ --color-surface-container: var(--surface-container);
159
+ --color-on-surface-container: var(--on-surface-container);
160
+ --color-surface-container-high: var(--surface-container-high);
161
+ --color-on-surface-container-high: var(--on-surface-container-high);
162
+ --color-surface-container-highest: var(--surface-container-highest);
163
+ --color-on-surface-container-highest: var(--on-surface-container-highest);
164
+ --color-background: var(--background);
165
+ --color-on-background: var(--on-background);
166
+ --color-border: var(--border);
167
+ --color-focus-ring: var(--focus-ring);
168
+ --color-on-focus-ring: var(--on-focus-ring);
169
+ --color-link: var(--link);
170
+ --color-overlay: var(--overlay);
171
+ --color-background-code: var(--background-code);
172
+ --color-on-background-code: var(--on-background-code);
173
+ }
96
174
  @layer base {
97
175
  :where(a[href], button, input:not([type='hidden']):not(.sr-only), select, textarea, [tabindex]):not(
98
176
  [data-rui-focus-managed]
@@ -643,7 +721,7 @@
643
721
  border-radius: var(--radius-none);
644
722
  border-style: var(--tw-border-style);
645
723
  border-width: 0px;
646
- color: var(--color-on-surface);
724
+ color: var(--on-surface);
647
725
  background-color: var(--windows95-face);
648
726
  box-shadow: var(--windows95-raised);
649
727
  }
@@ -672,7 +750,7 @@
672
750
  border-radius: var(--radius-none);
673
751
  border-style: var(--tw-border-style);
674
752
  border-width: 0px;
675
- background-color: var(--color-surface);
753
+ background-color: var(--surface);
676
754
  background-color: var(--windows95-face);
677
755
  box-shadow: var(--windows95-raised);
678
756
  }
@@ -680,6 +758,17 @@
680
758
  :root .rui-combobox__listbox .rui-listbox {
681
759
  background-color: transparent;
682
760
  }
761
+ :root .rui-popover[role='dialog']:has(> rui-calendar, > .rui-calendar) {
762
+ padding: 0;
763
+ }
764
+ :root .rui-popover .rui-calendar {
765
+ padding: 3px;
766
+ background-color: transparent;
767
+ box-shadow: none;
768
+ }
769
+ :root .rui-popover .rui-calendar :is(.rui-calendar__weekdays, .rui-calendar__grid, .rui-calendar__footer) {
770
+ padding-inline: var(--space-2);
771
+ }
683
772
  :root .rui-tooltip__content {
684
773
  --rui-tooltip-surface: #ffffe1;
685
774
  --rui-tooltip-color: #000000;
@@ -756,7 +845,7 @@
756
845
  border-width: 0px;
757
846
  --tw-font-weight: var(--font-weight-normal, 400);
758
847
  font-weight: var(--font-weight-normal, 400);
759
- color: var(--color-on-surface);
848
+ color: var(--on-surface);
760
849
  opacity: 100%;
761
850
  z-index: 0;
762
851
  margin-bottom: 2px;
@@ -780,7 +869,7 @@
780
869
  border-radius: var(--radius-none);
781
870
  border-style: var(--tw-border-style);
782
871
  border-width: 0px;
783
- color: var(--color-on-surface);
872
+ color: var(--on-surface);
784
873
  position: relative;
785
874
  z-index: 0;
786
875
  background-color: var(--windows95-face);
@@ -792,7 +881,7 @@
792
881
  border-radius: var(--radius-none);
793
882
  border-style: var(--tw-border-style);
794
883
  border-width: 0px;
795
- color: var(--color-on-surface);
884
+ color: var(--on-surface);
796
885
  background-color: var(--windows95-face);
797
886
  box-shadow: var(--windows95-raised);
798
887
  }
@@ -885,7 +974,7 @@
885
974
  border-radius: var(--radius-none);
886
975
  border-style: var(--tw-border-style);
887
976
  border-width: 0px;
888
- color: var(--color-on-surface);
977
+ color: var(--on-surface);
889
978
  background-color: var(--windows95-face);
890
979
  box-shadow: var(--windows95-raised-thin);
891
980
  }
package/dist/tokens/components/macos.css CHANGED
@@ -107,7 +107,7 @@
107
107
  color: var(--macos-text);
108
108
  }
109
109
 
110
- :root .rui-button--ghost:hover:not(:disabled) {
110
+ :root .rui-button--ghost:hover:not(:disabled, [aria-pressed='true']) {
111
111
  background-color: var(--macos-hover-fill);
112
112
  }
113
113
 
@@ -285,8 +285,6 @@
285
285
  :root .rui-menu-button__item[aria-checked='true'],
286
286
  :root .rui-menubar__menu-item[aria-checked='true'],
287
287
  :root .rui-tree__node[aria-selected='true'],
288
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
289
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled),
290
288
  :root .rui-navigation-menu__link-list a[aria-current='page'] {
291
289
  @apply rounded-sm;
292
290
  background-color: var(--macos-selection);
@@ -303,12 +301,72 @@
303
301
  padding-block: 0.1875rem;
304
302
  }
305
303
 
304
+ /**
305
+ * Days are circles, as in the macOS date picker: a 28px disc paints hover and selection behind the number, and a
306
+ * range is one continuous band of the selection tint through that disc.
307
+ *
308
+ * @remarks The disc is a `::before` because the day button fills its whole grid column; the band is the button's own
309
+ * background, halved with a gradient on the start and end days so it closes at the disc's center.
310
+ */
306
311
  :root .rui-calendar__day {
307
- @apply h-7 rounded-full;
312
+ @apply h-7 rounded-none;
313
+ isolation: isolate;
314
+ }
315
+
316
+ :root .rui-calendar__day::before {
317
+ content: '';
318
+ position: absolute;
319
+ inset-block: 0;
320
+ inset-inline: calc(50% - 0.875rem);
321
+ z-index: -1;
322
+ border-radius: 9999px;
323
+ }
324
+
325
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true']) {
326
+ background-color: transparent;
327
+ }
328
+
329
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true'])::before {
330
+ background-color: var(--macos-hover-fill);
331
+ }
332
+
333
+ :root .rui-calendar__day:focus-visible {
334
+ @apply ring-0;
335
+ }
336
+
337
+ :root .rui-calendar__day:focus-visible::before {
338
+ @apply ring-[3px] ring-focus-ring/60;
339
+ }
340
+
341
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
342
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled) {
343
+ background-color: transparent;
344
+ color: var(--macos-selection-text);
345
+ }
346
+
347
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true'])::before {
348
+ background-color: var(--macos-selection);
349
+ }
350
+
351
+ :root .rui-calendar__day[data-range-middle='true'],
352
+ :root .rui-calendar__day[data-range-middle='true']:hover:not(:disabled) {
353
+ background-color: color-mix(in srgb, var(--macos-selection) 16%, transparent);
308
354
  }
309
355
 
310
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']) {
311
- @apply rounded-full;
356
+ :root .rui-calendar__day[data-range-start='true']:not([data-range-end='true']) {
357
+ background-image: linear-gradient(
358
+ to right,
359
+ transparent 50%,
360
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
361
+ );
362
+ }
363
+
364
+ :root .rui-calendar__day[data-range-end='true']:not([data-range-start='true']) {
365
+ background-image: linear-gradient(
366
+ to left,
367
+ transparent 50%,
368
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
369
+ );
312
370
  }
313
371
 
314
372
  :root .rui-calendar__day[aria-current='date']:not([aria-selected='true']) {
@@ -513,7 +571,7 @@
513
571
  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
514
572
  @apply rounded-md text-on-surface;
515
573
  border: 1px solid color-mix(in srgb, var(--macos-text) 12%, transparent);
516
- background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
574
+ background-color: var(--macos-surface);
517
575
  padding: var(--rui-tabs-panel-padding);
518
576
  padding-top: calc(var(--rui-tabs-panel-padding) + 0.75rem);
519
577
  }
package/dist/tokens/components/windows95.css CHANGED
@@ -268,6 +268,24 @@
268
268
  background-color: transparent;
269
269
  }
270
270
 
271
+ /**
272
+ * @remarks A calendar in a date popover shares the popover's bevel instead of drawing a second raised frame inside it.
273
+ * Its title bar sits 3px from that bevel like a dialog's, and the days keep the popover's inset below it.
274
+ */
275
+ :root .rui-popover[role='dialog']:has(> rui-calendar, > .rui-calendar) {
276
+ padding: 0;
277
+ }
278
+
279
+ :root .rui-popover .rui-calendar {
280
+ padding: 3px;
281
+ background-color: transparent;
282
+ box-shadow: none;
283
+ }
284
+
285
+ :root .rui-popover .rui-calendar :is(.rui-calendar__weekdays, .rui-calendar__grid, .rui-calendar__footer) {
286
+ padding-inline: var(--space-2);
287
+ }
288
+
271
289
  /**
272
290
  * @remarks Tooltips use the pale yellow info color with a 1px black frame.
273
291
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ecopages/radiant-themes",
3
- "version": "0.2.5",
3
+ "version": "0.3.1",
4
4
  "description": "Composable color themes and variants for @ecopages/radiant-ui",
5
5
  "repository": {
6
6
  "type": "git",
@@ -19,14 +19,14 @@
19
19
  "**/*.css"
20
20
  ],
21
21
  "peerDependencies": {
22
- "@ecopages/radiant-ui": ">=0.2.5"
22
+ "@ecopages/radiant-ui": ">=0.3.1"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@tailwindcss/postcss": "^4.3.3",
26
26
  "playwright": "^1.62.1",
27
27
  "postcss": "^8.5.24",
28
28
  "tailwindcss": "^4.3.0",
29
- "@ecopages/radiant-ui": "0.2.5"
29
+ "@ecopages/radiant-ui": "0.3.1"
30
30
  },
31
31
  "exports": {
32
32
  "./package.json": "./package.json",