@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/github.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
  @property --tw-border-style {
package/dist/compiled/themes/high-contrast/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-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
  }