@casinogate/ui 1.8.4 → 1.8.6

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 (12) hide show
  1. package/README.md +175 -92
  2. package/dist/assets/css/root.css +189 -213
  3. package/dist/assets/css/tailwind/theme.css +172 -0
  4. package/dist/assets/css/theme.css +32 -25
  5. package/dist/assets/css/tokens/dark.css +73 -0
  6. package/dist/assets/css/tokens/light.css +75 -0
  7. package/dist/assets/css/tokens/primitives.css +123 -0
  8. package/dist/components/data-table/styles.js +2 -2
  9. package/dist/components/dropdown/dropdown.svelte +12 -15
  10. package/dist/components/dropdown/types.d.ts +3 -4
  11. package/dist/components/segment/styles.js +2 -2
  12. package/package.json +1 -1
package/dist/assets/css/root.css CHANGED
@@ -27,71 +27,6 @@
27
27
  --cgui-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
28
28
  --cgui-default-font-family: var(--cgui-font-sans);
29
29
  --cgui-default-mono-font-family: var(--cgui-font-mono);
30
- --cgui-color-primary-100: var(--cg-ui-palette-primary-100);
31
- --cgui-color-primary-80: var(--cg-ui-palette-primary-80);
32
- --cgui-color-primary-60: var(--cg-ui-palette-primary-60);
33
- --cgui-color-primary-10: var(--cg-ui-palette-primary-10);
34
- --cgui-color-neutral-40: var(--cg-ui-palette-neutral-40);
35
- --cgui-color-neutral-20: var(--cg-ui-palette-neutral-20);
36
- --cgui-color-neutral-10: var(--cg-ui-palette-neutral-10);
37
- --cgui-color-neutral-0: var(--cg-ui-palette-neutral-0);
38
- --cgui-color-surface-primary: var(--cg-ui-palette-primary-80);
39
- --cgui-color-surface-primary-active: var(--cg-ui-palette-primary-60);
40
- --cgui-color-surface-primary-light: var(--cg-ui-palette-primary-40);
41
- --cgui-color-surface-darkest: var(--cg-ui-palette-neutral-100);
42
- --cgui-color-surface-regular: var(--cg-ui-palette-neutral-50);
43
- --cgui-color-surface-light: var(--cg-ui-palette-neutral-20);
44
- --cgui-color-surface-lightest: var(--cg-ui-palette-neutral-10);
45
- --cgui-color-surface-white: var(--cg-ui-palette-neutral-0);
46
- --cgui-color-surface-hover: var(--cg-ui-palette-neutral-01);
47
- --cgui-color-bg-main: var(--cg-ui-palette-neutral-20);
48
- --cgui-color-fg-darkest: var(--cg-ui-palette-neutral-100);
49
- --cgui-color-fg-dark: var(--cg-ui-palette-neutral-80);
50
- --cgui-color-fg-medium: var(--cg-ui-palette-neutral-60);
51
- --cgui-color-fg-regular: var(--cg-ui-palette-neutral-50);
52
- --cgui-color-fg-semilight: var(--cg-ui-palette-neutral-40);
53
- --cgui-color-fg-primary: var(--cg-ui-palette-primary-80);
54
- --cgui-color-fg-white: var(--cg-ui-palette-neutral-0);
55
- --cgui-color-fg-error: var(--cg-ui-palette-system-error-100);
56
- --cgui-color-fg-success: var(--cg-ui-palette-system-success-100);
57
- --cgui-color-fg-warning: var(--cg-ui-palette-system-warning-100);
58
- --cgui-color-stroke-default: var(--cg-ui-palette-neutral-40);
59
- --cgui-color-stroke-minimum: var(--cg-ui-palette-neutral-10);
60
- --cgui-color-stroke-focus: var(--cg-ui-palette-primary-60);
61
- --cgui-color-stroke-primary: var(--cg-ui-palette-primary-80);
62
- --cgui-color-stroke-divider: var(--cg-ui-palette-neutral-20);
63
- --cgui-color-stroke-error: var(--cg-ui-palette-system-error-100);
64
- --cgui-color-icon-regular: var(--cg-ui-palette-neutral-50);
65
- --cgui-color-icon-default: var(--cg-ui-palette-neutral-40);
66
- --cgui-color-icon-focus: var(--cg-ui-palette-primary-60);
67
- --cgui-color-icon-white: var(--cg-ui-palette-neutral-0);
68
- --cgui-color-state-error: var(--cg-ui-palette-system-error-100);
69
- --cgui-color-state-error-light: var(--cg-ui-palette-system-error-10);
70
- --cgui-color-state-warning: var(--cg-ui-palette-system-warning-100);
71
- --cgui-color-state-warning-light: var(--cg-ui-palette-system-warning-10);
72
- --cgui-color-state-success: var(--cg-ui-palette-system-success-100);
73
- --cgui-color-state-success-light: var(--cg-ui-palette-system-success-10);
74
- --cgui-color-state-info: var(--cg-ui-palette-system-info-100);
75
- --cgui-color-state-info-light: var(--cg-ui-palette-system-info-10);
76
- --cgui-radius-xxxs: calc(var(--cg-ui-number-xxxs) * 1px);
77
- --cgui-radius-xxs: calc(var(--cg-ui-number-xxs) * 1px);
78
- --cgui-radius-xs: calc(var(--cg-ui-number-xs) * 1px);
79
- --cgui-radius-sm: calc(var(--cg-ui-number-sm) * 1px);
80
- --cgui-radius-md: calc(var(--cg-ui-number-md) * 1px);
81
- --cgui-radius-lg: calc(var(--cg-ui-number-lg) * 1px);
82
- --cgui-radius-xl: calc(var(--cg-ui-number-xl) * 1px);
83
- --cgui-text-heading: var(--cg-ui-fz-heading);
84
- --cgui-text-heading--line-height: var(--cg-ui-lh-heading);
85
- --cgui-text-heading-2: var(--cg-ui-fz-heading-2);
86
- --cgui-text-heading-2--line-height: var(--cg-ui-lh-heading-2);
87
- --cgui-text-body: var(--cg-ui-fz-body);
88
- --cgui-text-body--line-height: var(--cg-ui-lh-body);
89
- --cgui-text-body-2: var(--cg-ui-fz-body-2);
90
- --cgui-text-body-2--line-height: var(--cg-ui-lh-body-2);
91
- --cgui-text-caption: var(--cg-ui-fz-caption);
92
- --cgui-text-caption--line-height: var(--cg-ui-lh-caption);
93
- --cgui-text-caption-2: var(--cg-ui-fz-caption-2);
94
- --cgui-text-caption-2--line-height: var(--cg-ui-lh-caption-2);
95
30
  }
96
31
  }
97
32
  @layer base {
@@ -785,28 +720,28 @@
785
720
  border-radius: calc(infinity * 1px);
786
721
  }
787
722
  .cgui\:rounded-lg {
788
- border-radius: var(--cgui-radius-lg);
723
+ border-radius: calc(var(--cg-ui-number-lg) * 1px);
789
724
  }
790
725
  .cgui\:rounded-md {
791
- border-radius: var(--cgui-radius-md);
726
+ border-radius: calc(var(--cg-ui-number-md) * 1px);
792
727
  }
793
728
  .cgui\:rounded-none {
794
729
  border-radius: 0;
795
730
  }
796
731
  .cgui\:rounded-sm {
797
- border-radius: var(--cgui-radius-sm);
732
+ border-radius: calc(var(--cg-ui-number-sm) * 1px);
798
733
  }
799
734
  .cgui\:rounded-xl {
800
- border-radius: var(--cgui-radius-xl);
735
+ border-radius: calc(var(--cg-ui-number-xl) * 1px);
801
736
  }
802
737
  .cgui\:rounded-xs {
803
- border-radius: var(--cgui-radius-xs);
738
+ border-radius: calc(var(--cg-ui-number-xs) * 1px);
804
739
  }
805
740
  .cgui\:rounded-xxs {
806
- border-radius: var(--cgui-radius-xxs);
741
+ border-radius: calc(var(--cg-ui-number-xxs) * 1px);
807
742
  }
808
743
  .cgui\:rounded-xxxs {
809
- border-radius: var(--cgui-radius-xxxs);
744
+ border-radius: calc(var(--cg-ui-number-xxxs) * 1px);
810
745
  }
811
746
  .cgui\:border {
812
747
  border-style: var(--tw-border-style);
@@ -837,115 +772,112 @@
837
772
  border-style: none;
838
773
  }
839
774
  .cgui\:border-stroke-default {
840
- border-color: var(--cgui-color-stroke-default);
775
+ border-color: var(--cg-ui-color-stroke-default);
841
776
  }
842
777
  .cgui\:border-stroke-divider {
843
- border-color: var(--cgui-color-stroke-divider);
778
+ border-color: var(--cg-ui-color-stroke-divider);
844
779
  }
845
780
  .cgui\:border-stroke-error {
846
- border-color: var(--cgui-color-stroke-error);
781
+ border-color: var(--cg-ui-color-stroke-error);
847
782
  }
848
783
  .cgui\:border-stroke-primary {
849
- border-color: var(--cgui-color-stroke-primary);
784
+ border-color: var(--cg-ui-color-stroke-primary);
850
785
  }
851
786
  .cgui\:border-surface-regular {
852
- border-color: var(--cgui-color-surface-regular);
787
+ border-color: var(--cg-ui-color-surface-regular);
853
788
  }
854
789
  .cgui\:border-transparent {
855
790
  border-color: transparent;
856
791
  }
857
792
  .cgui\:border-t-stroke-minimum\/10 {
858
- border-top-color: var(--cgui-color-stroke-minimum);
793
+ border-top-color: var(--cg-ui-color-stroke-minimum);
859
794
  @supports (color: color-mix(in lab, red, red)) {
860
- border-top-color: color-mix(in oklab, var(--cgui-color-stroke-minimum) 10%, transparent);
795
+ border-top-color: color-mix(in oklab, var(--cg-ui-color-stroke-minimum) 10%, transparent);
861
796
  }
862
797
  }
863
798
  .cgui\:border-b-stroke-default {
864
- border-bottom-color: var(--cgui-color-stroke-default);
799
+ border-bottom-color: var(--cg-ui-color-stroke-default);
865
800
  }
866
801
  .cgui\:border-b-stroke-minimum\/10 {
867
- border-bottom-color: var(--cgui-color-stroke-minimum);
802
+ border-bottom-color: var(--cg-ui-color-stroke-minimum);
868
803
  @supports (color: color-mix(in lab, red, red)) {
869
- border-bottom-color: color-mix(in oklab, var(--cgui-color-stroke-minimum) 10%, transparent);
804
+ border-bottom-color: color-mix(in oklab, var(--cg-ui-color-stroke-minimum) 10%, transparent);
870
805
  }
871
806
  }
872
807
  .cgui\:bg-bg-main {
873
- background-color: var(--cgui-color-bg-main);
808
+ background-color: var(--cg-ui-color-bg-main);
874
809
  }
875
810
  .cgui\:bg-neutral-20 {
876
- background-color: var(--cgui-color-neutral-20);
811
+ background-color: var(--cg-ui-palette-neutral-20);
877
812
  }
878
813
  .cgui\:bg-neutral-40\/50 {
879
- background-color: var(--cgui-color-neutral-40);
814
+ background-color: var(--cg-ui-palette-neutral-40);
880
815
  @supports (color: color-mix(in lab, red, red)) {
881
- background-color: color-mix(in oklab, var(--cgui-color-neutral-40) 50%, transparent);
816
+ background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 50%, transparent);
882
817
  }
883
818
  }
884
- .cgui\:bg-primary-10 {
885
- background-color: var(--cgui-color-primary-10);
886
- }
887
819
  .cgui\:bg-primary-80 {
888
- background-color: var(--cgui-color-primary-80);
820
+ background-color: var(--cg-ui-palette-primary-80);
889
821
  }
890
822
  .cgui\:bg-state-error {
891
- background-color: var(--cgui-color-state-error);
823
+ background-color: var(--cg-ui-color-state-error);
892
824
  }
893
825
  .cgui\:bg-state-error-light {
894
- background-color: var(--cgui-color-state-error-light);
826
+ background-color: var(--cg-ui-color-state-error-light);
895
827
  }
896
828
  .cgui\:bg-state-info {
897
- background-color: var(--cgui-color-state-info);
829
+ background-color: var(--cg-ui-color-state-info);
898
830
  }
899
831
  .cgui\:bg-state-info-light {
900
- background-color: var(--cgui-color-state-info-light);
832
+ background-color: var(--cg-ui-color-state-info-light);
901
833
  }
902
834
  .cgui\:bg-state-success {
903
- background-color: var(--cgui-color-state-success);
835
+ background-color: var(--cg-ui-color-state-success);
904
836
  }
905
837
  .cgui\:bg-state-success-light {
906
- background-color: var(--cgui-color-state-success-light);
838
+ background-color: var(--cg-ui-color-state-success-light);
907
839
  }
908
840
  .cgui\:bg-state-warning {
909
- background-color: var(--cgui-color-state-warning);
841
+ background-color: var(--cg-ui-color-state-warning);
910
842
  }
911
843
  .cgui\:bg-state-warning-light {
912
- background-color: var(--cgui-color-state-warning-light);
844
+ background-color: var(--cg-ui-color-state-warning-light);
913
845
  }
914
846
  .cgui\:bg-stroke-divider {
915
- background-color: var(--cgui-color-stroke-divider);
847
+ background-color: var(--cg-ui-color-stroke-divider);
916
848
  }
917
849
  .cgui\:bg-surface-darkest {
918
- background-color: var(--cgui-color-surface-darkest);
850
+ background-color: var(--cg-ui-color-surface-darkest);
919
851
  }
920
852
  .cgui\:bg-surface-light {
921
- background-color: var(--cgui-color-surface-light);
853
+ background-color: var(--cg-ui-color-surface-light);
922
854
  }
923
855
  .cgui\:bg-surface-light\/50 {
924
- background-color: var(--cgui-color-surface-light);
856
+ background-color: var(--cg-ui-color-surface-light);
925
857
  @supports (color: color-mix(in lab, red, red)) {
926
- background-color: color-mix(in oklab, var(--cgui-color-surface-light) 50%, transparent);
858
+ background-color: color-mix(in oklab, var(--cg-ui-color-surface-light) 50%, transparent);
927
859
  }
928
860
  }
929
861
  .cgui\:bg-surface-lightest {
930
- background-color: var(--cgui-color-surface-lightest);
862
+ background-color: var(--cg-ui-color-surface-lightest);
931
863
  }
932
864
  .cgui\:bg-surface-lightest\/50 {
933
- background-color: var(--cgui-color-surface-lightest);
865
+ background-color: var(--cg-ui-color-surface-lightest);
934
866
  @supports (color: color-mix(in lab, red, red)) {
935
- background-color: color-mix(in oklab, var(--cgui-color-surface-lightest) 50%, transparent);
867
+ background-color: color-mix(in oklab, var(--cg-ui-color-surface-lightest) 50%, transparent);
936
868
  }
937
869
  }
938
870
  .cgui\:bg-surface-primary {
939
- background-color: var(--cgui-color-surface-primary);
871
+ background-color: var(--cg-ui-color-surface-primary);
940
872
  }
941
- .cgui\:bg-surface-primary-light {
942
- background-color: var(--cgui-color-surface-primary-light);
873
+ .cgui\:bg-surface-primary-light-active {
874
+ background-color: var(--cg-ui-color-surface-primary-light-active);
943
875
  }
944
876
  .cgui\:bg-surface-regular {
945
- background-color: var(--cgui-color-surface-regular);
877
+ background-color: var(--cg-ui-color-surface-regular);
946
878
  }
947
879
  .cgui\:bg-surface-white {
948
- background-color: var(--cgui-color-surface-white);
880
+ background-color: var(--cg-ui-color-surface-white);
949
881
  }
950
882
  .cgui\:bg-transparent {
951
883
  background-color: transparent;
@@ -958,16 +890,16 @@
958
890
  background-image: linear-gradient(var(--tw-gradient-stops));
959
891
  }
960
892
  .cgui\:from-neutral-40\/30 {
961
- --tw-gradient-from: var(--cgui-color-neutral-40);
893
+ --tw-gradient-from: var(--cg-ui-palette-neutral-40);
962
894
  @supports (color: color-mix(in lab, red, red)) {
963
- --tw-gradient-from: color-mix(in oklab, var(--cgui-color-neutral-40) 30%, transparent);
895
+ --tw-gradient-from: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 30%, transparent);
964
896
  }
965
897
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
966
898
  }
967
899
  .cgui\:to-neutral-10\/0 {
968
- --tw-gradient-to: var(--cgui-color-neutral-10);
900
+ --tw-gradient-to: var(--cg-ui-palette-neutral-10);
969
901
  @supports (color: color-mix(in lab, red, red)) {
970
- --tw-gradient-to: color-mix(in oklab, var(--cgui-color-neutral-10) 0%, transparent);
902
+ --tw-gradient-to: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 0%, transparent);
971
903
  }
972
904
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
973
905
  }
@@ -1084,28 +1016,28 @@
1084
1016
  line-height: var(--tw-leading, var(--cgui-text-base--line-height));
1085
1017
  }
1086
1018
  .cgui\:text-body {
1087
- font-size: var(--cgui-text-body);
1088
- line-height: var(--tw-leading, var(--cgui-text-body--line-height));
1019
+ font-size: var(--cg-ui-fz-body);
1020
+ line-height: var(--tw-leading, var(--cg-ui-lh-body));
1089
1021
  }
1090
1022
  .cgui\:text-body-2 {
1091
- font-size: var(--cgui-text-body-2);
1092
- line-height: var(--tw-leading, var(--cgui-text-body-2--line-height));
1023
+ font-size: var(--cg-ui-fz-body-2);
1024
+ line-height: var(--tw-leading, var(--cg-ui-lh-body-2));
1093
1025
  }
1094
1026
  .cgui\:text-caption {
1095
- font-size: var(--cgui-text-caption);
1096
- line-height: var(--tw-leading, var(--cgui-text-caption--line-height));
1027
+ font-size: var(--cg-ui-fz-caption);
1028
+ line-height: var(--tw-leading, var(--cg-ui-lh-caption));
1097
1029
  }
1098
1030
  .cgui\:text-caption-2 {
1099
- font-size: var(--cgui-text-caption-2);
1100
- line-height: var(--tw-leading, var(--cgui-text-caption-2--line-height));
1031
+ font-size: var(--cg-ui-fz-caption-2);
1032
+ line-height: var(--tw-leading, var(--cg-ui-lh-caption-2));
1101
1033
  }
1102
1034
  .cgui\:text-heading {
1103
- font-size: var(--cgui-text-heading);
1104
- line-height: var(--tw-leading, var(--cgui-text-heading--line-height));
1035
+ font-size: var(--cg-ui-fz-heading);
1036
+ line-height: var(--tw-leading, var(--cg-ui-lh-heading));
1105
1037
  }
1106
1038
  .cgui\:text-heading-2 {
1107
- font-size: var(--cgui-text-heading-2);
1108
- line-height: var(--tw-leading, var(--cgui-text-heading-2--line-height));
1039
+ font-size: var(--cg-ui-fz-heading-2);
1040
+ line-height: var(--tw-leading, var(--cg-ui-lh-heading-2));
1109
1041
  }
1110
1042
  .cgui\:text-lg {
1111
1043
  font-size: var(--cgui-text-lg);
@@ -1143,58 +1075,58 @@
1143
1075
  white-space: nowrap;
1144
1076
  }
1145
1077
  .cgui\:text-fg-dark {
1146
- color: var(--cgui-color-fg-dark);
1078
+ color: var(--cg-ui-color-fg-dark);
1147
1079
  }
1148
1080
  .cgui\:text-fg-darkest {
1149
- color: var(--cgui-color-fg-darkest);
1081
+ color: var(--cg-ui-color-fg-darkest);
1150
1082
  }
1151
1083
  .cgui\:text-fg-error {
1152
- color: var(--cgui-color-fg-error);
1084
+ color: var(--cg-ui-color-fg-error);
1153
1085
  }
1154
1086
  .cgui\:text-fg-medium {
1155
- color: var(--cgui-color-fg-medium);
1087
+ color: var(--cg-ui-color-fg-medium);
1156
1088
  }
1157
1089
  .cgui\:text-fg-primary {
1158
- color: var(--cgui-color-fg-primary);
1090
+ color: var(--cg-ui-color-fg-primary);
1159
1091
  }
1160
1092
  .cgui\:text-fg-regular {
1161
- color: var(--cgui-color-fg-regular);
1093
+ color: var(--cg-ui-color-fg-regular);
1162
1094
  }
1163
1095
  .cgui\:text-fg-semilight {
1164
- color: var(--cgui-color-fg-semilight);
1096
+ color: var(--cg-ui-color-fg-semilight);
1165
1097
  }
1166
1098
  .cgui\:text-fg-success {
1167
- color: var(--cgui-color-fg-success);
1099
+ color: var(--cg-ui-color-fg-success);
1168
1100
  }
1169
1101
  .cgui\:text-fg-warning {
1170
- color: var(--cgui-color-fg-warning);
1102
+ color: var(--cg-ui-color-fg-warning);
1171
1103
  }
1172
1104
  .cgui\:text-fg-white {
1173
- color: var(--cgui-color-fg-white);
1105
+ color: var(--cg-ui-color-fg-white);
1174
1106
  }
1175
1107
  .cgui\:text-icon-default {
1176
- color: var(--cgui-color-icon-default);
1108
+ color: var(--cg-ui-color-icon-default);
1177
1109
  }
1178
1110
  .cgui\:text-icon-regular {
1179
- color: var(--cgui-color-icon-regular);
1111
+ color: var(--cg-ui-color-icon-regular);
1180
1112
  }
1181
1113
  .cgui\:text-icon-white {
1182
- color: var(--cgui-color-icon-white);
1114
+ color: var(--cg-ui-color-icon-white);
1183
1115
  }
1184
1116
  .cgui\:text-primary-80 {
1185
- color: var(--cgui-color-primary-80);
1117
+ color: var(--cg-ui-palette-primary-80);
1186
1118
  }
1187
1119
  .cgui\:text-state-error {
1188
- color: var(--cgui-color-state-error);
1120
+ color: var(--cg-ui-color-state-error);
1189
1121
  }
1190
1122
  .cgui\:text-state-info {
1191
- color: var(--cgui-color-state-info);
1123
+ color: var(--cg-ui-color-state-info);
1192
1124
  }
1193
1125
  .cgui\:text-state-success {
1194
- color: var(--cgui-color-state-success);
1126
+ color: var(--cg-ui-color-state-success);
1195
1127
  }
1196
1128
  .cgui\:text-state-warning {
1197
- color: var(--cgui-color-state-warning);
1129
+ color: var(--cg-ui-color-state-warning);
1198
1130
  }
1199
1131
  .cgui\:underline {
1200
1132
  text-decoration-line: underline;
@@ -1242,7 +1174,7 @@
1242
1174
  }
1243
1175
  }
1244
1176
  .cgui\:outline-stroke-focus {
1245
- outline-color: var(--cgui-color-stroke-focus);
1177
+ outline-color: var(--cg-ui-color-stroke-focus);
1246
1178
  }
1247
1179
  .cgui\:transition-\[background-color\,color\,ring\,outline\,border-color\] {
1248
1180
  transition-property: background-color,color,ring,outline,border-color;
@@ -1300,18 +1232,18 @@
1300
1232
  --scrollbar-thumb-radius: calc(var(--cg-ui-number-md) * 1px);
1301
1233
  }
1302
1234
  .cgui\:scrollbar-thumb-stroke-default {
1303
- --scrollbar-thumb: var(--cg-ui-palette-neutral-40);
1235
+ --scrollbar-thumb: var(--cg-ui-color-stroke-default);
1304
1236
  }
1305
1237
  .cgui\:scrollbar-thumb-surface-light {
1306
- --scrollbar-thumb: var(--cg-ui-palette-neutral-20);
1238
+ --scrollbar-thumb: var(--cg-ui-color-surface-light);
1307
1239
  }
1308
1240
  .cgui\:scrollbar-thumb-surface-regular {
1309
- --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
1241
+ --scrollbar-thumb: var(--cg-ui-color-surface-regular);
1310
1242
  }
1311
1243
  .cgui\:scrollbar-thumb-surface-regular\/40 {
1312
- --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
1244
+ --scrollbar-thumb: var(--cg-ui-color-surface-regular);
1313
1245
  @supports (color: color-mix(in lab, red, red)) {
1314
- --scrollbar-thumb: color-mix(in oklab, var(--cg-ui-palette-neutral-50) 40%, transparent);
1246
+ --scrollbar-thumb: color-mix(in oklab, var(--cg-ui-color-surface-regular) 40%, transparent);
1315
1247
  }
1316
1248
  }
1317
1249
  .cgui\:scrollbar-track-rounded-full {
@@ -1321,7 +1253,7 @@
1321
1253
  --scrollbar-track-radius: calc(var(--cg-ui-number-md) * 1px);
1322
1254
  }
1323
1255
  .cgui\:scrollbar-track-surface-lightest {
1324
- --scrollbar-track: var(--cg-ui-palette-neutral-10);
1256
+ --scrollbar-track: var(--cg-ui-color-surface-lightest);
1325
1257
  }
1326
1258
  .cgui\:scrollbar-track-transparent {
1327
1259
  --scrollbar-track: transparent;
@@ -1372,7 +1304,7 @@
1372
1304
  }
1373
1305
  .cgui\:placeholder\:text-fg-regular {
1374
1306
  &::placeholder {
1375
- color: var(--cgui-color-fg-regular);
1307
+ color: var(--cg-ui-color-fg-regular);
1376
1308
  }
1377
1309
  }
1378
1310
  .cgui\:before\:pointer-events-none {
@@ -1414,25 +1346,25 @@
1414
1346
  .cgui\:before\:bg-state-error {
1415
1347
  &::before {
1416
1348
  content: var(--tw-content);
1417
- background-color: var(--cgui-color-state-error);
1349
+ background-color: var(--cg-ui-color-state-error);
1418
1350
  }
1419
1351
  }
1420
1352
  .cgui\:before\:bg-state-info {
1421
1353
  &::before {
1422
1354
  content: var(--tw-content);
1423
- background-color: var(--cgui-color-state-info);
1355
+ background-color: var(--cg-ui-color-state-info);
1424
1356
  }
1425
1357
  }
1426
1358
  .cgui\:before\:bg-state-success {
1427
1359
  &::before {
1428
1360
  content: var(--tw-content);
1429
- background-color: var(--cgui-color-state-success);
1361
+ background-color: var(--cg-ui-color-state-success);
1430
1362
  }
1431
1363
  }
1432
1364
  .cgui\:before\:bg-state-warning {
1433
1365
  &::before {
1434
1366
  content: var(--tw-content);
1435
- background-color: var(--cgui-color-state-warning);
1367
+ background-color: var(--cg-ui-color-state-warning);
1436
1368
  }
1437
1369
  }
1438
1370
  .cgui\:before\:content-\[\"\"\] {
@@ -1444,42 +1376,42 @@
1444
1376
  .cgui\:hover\:bg-primary-60 {
1445
1377
  &:hover {
1446
1378
  @media (hover: hover) {
1447
- background-color: var(--cgui-color-primary-60);
1379
+ background-color: var(--cg-ui-palette-primary-60);
1448
1380
  }
1449
1381
  }
1450
1382
  }
1451
1383
  .cgui\:hover\:bg-surface-hover {
1452
1384
  &:hover {
1453
1385
  @media (hover: hover) {
1454
- background-color: var(--cgui-color-surface-hover);
1386
+ background-color: var(--cg-ui-color-surface-hover);
1455
1387
  }
1456
1388
  }
1457
1389
  }
1458
1390
  .cgui\:hover\:bg-surface-primary-active {
1459
1391
  &:hover {
1460
1392
  @media (hover: hover) {
1461
- background-color: var(--cgui-color-surface-primary-active);
1393
+ background-color: var(--cg-ui-color-surface-primary-active);
1462
1394
  }
1463
1395
  }
1464
1396
  }
1465
1397
  .cgui\:hover\:bg-surface-primary-light {
1466
1398
  &:hover {
1467
1399
  @media (hover: hover) {
1468
- background-color: var(--cgui-color-surface-primary-light);
1400
+ background-color: var(--cg-ui-color-surface-primary-light);
1469
1401
  }
1470
1402
  }
1471
1403
  }
1472
1404
  .cgui\:hover\:text-fg-darkest {
1473
1405
  &:hover {
1474
1406
  @media (hover: hover) {
1475
- color: var(--cgui-color-fg-darkest);
1407
+ color: var(--cg-ui-color-fg-darkest);
1476
1408
  }
1477
1409
  }
1478
1410
  }
1479
1411
  .cgui\:hover\:text-primary-60 {
1480
1412
  &:hover {
1481
1413
  @media (hover: hover) {
1482
- color: var(--cgui-color-primary-60);
1414
+ color: var(--cg-ui-palette-primary-60);
1483
1415
  }
1484
1416
  }
1485
1417
  }
@@ -1492,17 +1424,17 @@
1492
1424
  }
1493
1425
  .cgui\:focus\:ring-stroke-default {
1494
1426
  &:focus {
1495
- --tw-ring-color: var(--cgui-color-stroke-default);
1427
+ --tw-ring-color: var(--cg-ui-color-stroke-default);
1496
1428
  }
1497
1429
  }
1498
1430
  .cgui\:focus-visible\:border-stroke-focus {
1499
1431
  &:focus-visible {
1500
- border-color: var(--cgui-color-stroke-focus);
1432
+ border-color: var(--cg-ui-color-stroke-focus);
1501
1433
  }
1502
1434
  }
1503
1435
  .cgui\:focus-visible\:ring-stroke-focus {
1504
1436
  &:focus-visible {
1505
- --tw-ring-color: var(--cgui-color-stroke-focus);
1437
+ --tw-ring-color: var(--cg-ui-color-stroke-focus);
1506
1438
  }
1507
1439
  }
1508
1440
  .cgui\:active\:scale-95 {
@@ -1515,12 +1447,12 @@
1515
1447
  }
1516
1448
  .cgui\:active\:bg-primary-100 {
1517
1449
  &:active {
1518
- background-color: var(--cgui-color-primary-100);
1450
+ background-color: var(--cg-ui-palette-primary-100);
1519
1451
  }
1520
1452
  }
1521
1453
  .cgui\:active\:text-primary-100 {
1522
1454
  &:active {
1523
- color: var(--cgui-color-primary-100);
1455
+ color: var(--cg-ui-palette-primary-100);
1524
1456
  }
1525
1457
  }
1526
1458
  .cgui\:disabled\:pointer-events-none {
@@ -1550,27 +1482,27 @@
1550
1482
  }
1551
1483
  .cgui\:aria-invalid\:border-stroke-error {
1552
1484
  &[aria-invalid="true"] {
1553
- border-color: var(--cgui-color-stroke-error);
1485
+ border-color: var(--cg-ui-color-stroke-error);
1554
1486
  }
1555
1487
  }
1556
1488
  .cgui\:aria-invalid\:ring-stroke-error {
1557
1489
  &[aria-invalid="true"] {
1558
- --tw-ring-color: var(--cgui-color-stroke-error);
1490
+ --tw-ring-color: var(--cg-ui-color-stroke-error);
1559
1491
  }
1560
1492
  }
1561
1493
  .cgui\:data-highlighted\:bg-surface-lightest {
1562
1494
  &[data-highlighted] {
1563
- background-color: var(--cgui-color-surface-lightest);
1495
+ background-color: var(--cg-ui-color-surface-lightest);
1564
1496
  }
1565
1497
  }
1566
1498
  .cgui\:data-\[active\=\"\"\]\:bg-surface-white {
1567
1499
  &[data-active=""] {
1568
- background-color: var(--cgui-color-surface-white);
1500
+ background-color: var(--cg-ui-color-surface-white);
1569
1501
  }
1570
1502
  }
1571
1503
  .cgui\:data-\[active\=\"\"\]\:text-fg-primary {
1572
1504
  &[data-active=""] {
1573
- color: var(--cgui-color-fg-primary);
1505
+ color: var(--cg-ui-color-fg-primary);
1574
1506
  }
1575
1507
  }
1576
1508
  .cgui\:data-\[active\=\"\"\]\:shadow-segment-thumb {
@@ -1646,7 +1578,7 @@
1646
1578
  }
1647
1579
  .cgui\:data-\[highlighted\]\:bg-surface-lightest {
1648
1580
  &[data-highlighted] {
1649
- background-color: var(--cgui-color-surface-lightest);
1581
+ background-color: var(--cg-ui-color-surface-lightest);
1650
1582
  }
1651
1583
  }
1652
1584
  .cgui\:data-\[inset\]\:ps-8 {
@@ -1661,27 +1593,27 @@
1661
1593
  }
1662
1594
  .cgui\:data-\[placeholder\]\:text-fg-regular {
1663
1595
  &[data-placeholder] {
1664
- color: var(--cgui-color-fg-regular);
1596
+ color: var(--cg-ui-color-fg-regular);
1665
1597
  }
1666
1598
  }
1667
1599
  .cgui\:data-\[popover-content\]\:rounded-md {
1668
1600
  &[data-popover-content] {
1669
- border-radius: var(--cgui-radius-md);
1601
+ border-radius: calc(var(--cg-ui-number-md) * 1px);
1670
1602
  }
1671
1603
  }
1672
1604
  .cgui\:data-\[popover-content\]\:bg-surface-darkest {
1673
1605
  &[data-popover-content] {
1674
- background-color: var(--cgui-color-surface-darkest);
1606
+ background-color: var(--cg-ui-color-surface-darkest);
1675
1607
  }
1676
1608
  }
1677
1609
  .cgui\:data-\[selected\=\"\"\]\:border-stroke-primary {
1678
1610
  &[data-selected=""] {
1679
- border-color: var(--cgui-color-stroke-primary);
1611
+ border-color: var(--cg-ui-color-stroke-primary);
1680
1612
  }
1681
1613
  }
1682
1614
  .cgui\:data-\[selected\=\"\"\]\:text-fg-primary {
1683
1615
  &[data-selected=""] {
1684
- color: var(--cgui-color-fg-primary);
1616
+ color: var(--cg-ui-color-fg-primary);
1685
1617
  }
1686
1618
  }
1687
1619
  .cgui\:data-\[side\=bottom\]\:translate-y-1 {
@@ -1787,12 +1719,12 @@
1787
1719
  }
1788
1720
  .cgui\:data-\[state\=checked\]\:border-surface-primary {
1789
1721
  &[data-state="checked"] {
1790
- border-color: var(--cgui-color-surface-primary);
1722
+ border-color: var(--cg-ui-color-surface-primary);
1791
1723
  }
1792
1724
  }
1793
1725
  .cgui\:data-\[state\=checked\]\:bg-surface-primary {
1794
1726
  &[data-state="checked"] {
1795
- background-color: var(--cgui-color-surface-primary);
1727
+ background-color: var(--cg-ui-color-surface-primary);
1796
1728
  }
1797
1729
  }
1798
1730
  .cgui\:data-\[state\=checked\]\:shadow-switch-thumb {
@@ -1826,7 +1758,7 @@
1826
1758
  }
1827
1759
  .cgui\:data-\[state\=indeterminate\]\:border-surface-primary {
1828
1760
  &[data-state="indeterminate"] {
1829
- border-color: var(--cgui-color-surface-primary);
1761
+ border-color: var(--cg-ui-color-surface-primary);
1830
1762
  }
1831
1763
  }
1832
1764
  .cgui\:data-\[state\=open\]\:animate-in {
@@ -1861,9 +1793,9 @@
1861
1793
  }
1862
1794
  .cgui\:scrollbar-hover\:scrollbar-thumb-surface-regular\/60 {
1863
1795
  &::-webkit-scrollbar-thumb:hover {
1864
- --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
1796
+ --scrollbar-thumb: var(--cg-ui-color-surface-regular);
1865
1797
  @supports (color: color-mix(in lab, red, red)) {
1866
- --scrollbar-thumb: color-mix(in oklab, var(--cg-ui-palette-neutral-50) 60%, transparent);
1798
+ --scrollbar-thumb: color-mix(in oklab, var(--cg-ui-color-surface-regular) 60%, transparent);
1867
1799
  }
1868
1800
  }
1869
1801
  }
@@ -1884,7 +1816,7 @@
1884
1816
  &:hover {
1885
1817
  @media (hover: hover) {
1886
1818
  & [data-slot=icon] {
1887
- color: var(--cgui-color-icon-focus);
1819
+ color: var(--cg-ui-color-icon-focus);
1888
1820
  }
1889
1821
  }
1890
1822
  }
@@ -1907,20 +1839,20 @@
1907
1839
  }
1908
1840
  .cgui\:\[\&_\[data-slot\=row\]\]\:bg-neutral-0 {
1909
1841
  & [data-slot=row] {
1910
- background-color: var(--cgui-color-neutral-0);
1842
+ background-color: var(--cg-ui-palette-neutral-0);
1911
1843
  }
1912
1844
  }
1913
- .cgui\:\[\&_\[data-slot\=row\]\]\:odd\:bg-neutral-0 {
1845
+ .cgui\:\[\&_\[data-slot\=row\]\]\:odd\:bg-surface-white {
1914
1846
  & [data-slot=row] {
1915
1847
  &:nth-child(odd) {
1916
- background-color: var(--cgui-color-neutral-0);
1848
+ background-color: var(--cg-ui-color-surface-white);
1917
1849
  }
1918
1850
  }
1919
1851
  }
1920
- .cgui\:\[\&_\[data-slot\=row\]\]\:even\:bg-neutral-10 {
1852
+ .cgui\:\[\&_\[data-slot\=row\]\]\:even\:bg-surface-lightest {
1921
1853
  & [data-slot=row] {
1922
1854
  &:nth-child(even) {
1923
- background-color: var(--cgui-color-neutral-10);
1855
+ background-color: var(--cg-ui-color-surface-lightest);
1924
1856
  }
1925
1857
  }
1926
1858
  }
@@ -1953,7 +1885,7 @@
1953
1885
  }
1954
1886
  .cgui\:\[\&_svg\]\:text-icon-regular {
1955
1887
  & svg {
1956
- color: var(--cgui-color-icon-regular);
1888
+ color: var(--cg-ui-color-icon-regular);
1957
1889
  }
1958
1890
  }
1959
1891
  .cgui\:\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 {
@@ -2042,8 +1974,8 @@
2042
1974
  .cgui\:has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md {
2043
1975
  &:has(*:is(select[aria-hidden=true]:last-child)) {
2044
1976
  &>[data-slot=select-trigger]:last-of-type {
2045
- border-top-right-radius: var(--cgui-radius-md);
2046
- border-bottom-right-radius: var(--cgui-radius-md);
1977
+ border-top-right-radius: calc(var(--cg-ui-number-md) * 1px);
1978
+ border-bottom-right-radius: calc(var(--cg-ui-number-md) * 1px);
2047
1979
  }
2048
1980
  }
2049
1981
  }
@@ -2183,19 +2115,6 @@
2183
2115
  inherits: false;
2184
2116
  initial-value: 0;
2185
2117
  }
2186
- @layer theme {
2187
- :root, :host {
2188
- &:where([data-theme=dark], [data-theme=dark] *) {
2189
- --color-fg-darkest: var(--cg-ui-palette-neutral-10);
2190
- --color-fg-dark: var(--cg-ui-palette-neutral-10);
2191
- --color-fg-medium: var(--cg-ui-palette-neutral-40);
2192
- --color-fg-regular: var(--cg-ui-palette-neutral-20);
2193
- --color-fg-semilight: var(--cg-ui-palette-neutral-40);
2194
- --color-fg-white: var(--cg-ui-palette-neutral-10);
2195
- --color-bg-main: var(--cg-ui-palette-neutral-80);
2196
- }
2197
- }
2198
- }
2199
2118
  :root {
2200
2119
  --cg-ui-primary-hue: 220;
2201
2120
  --cg-ui-primary-saturation: 80%;
@@ -2274,6 +2193,52 @@
2274
2193
  --cg-ui-z-index-critical: 500;
2275
2194
  --cg-ui-z-index-loading: 500;
2276
2195
  }
2196
+ :root, [data-theme='light'] {
2197
+ --cg-ui-color-fg-darkest: var(--cg-ui-palette-neutral-100);
2198
+ --cg-ui-color-fg-dark: var(--cg-ui-palette-neutral-80);
2199
+ --cg-ui-color-fg-medium: var(--cg-ui-palette-neutral-60);
2200
+ --cg-ui-color-fg-regular: var(--cg-ui-palette-neutral-50);
2201
+ --cg-ui-color-fg-semilight: var(--cg-ui-palette-neutral-40);
2202
+ --cg-ui-color-fg-white: var(--cg-ui-palette-neutral-0);
2203
+ --cg-ui-color-fg-primary: var(--cg-ui-palette-primary-80);
2204
+ --cg-ui-color-fg-error: var(--cg-ui-palette-system-error-100);
2205
+ --cg-ui-color-fg-success: var(--cg-ui-palette-system-success-100);
2206
+ --cg-ui-color-fg-warning: var(--cg-ui-palette-system-warning-100);
2207
+ --cg-ui-color-bg-white: var(--cg-ui-palette-neutral-0);
2208
+ --cg-ui-color-bg-main: var(--cg-ui-palette-neutral-20);
2209
+ --cg-ui-color-bg-dark: var(--cg-ui-palette-neutral-100);
2210
+ --cg-ui-color-surface-primary: var(--cg-ui-palette-primary-80);
2211
+ --cg-ui-color-surface-primary-active: var(--cg-ui-palette-primary-60);
2212
+ --cg-ui-color-surface-primary-light: var(--cg-ui-palette-primary-40);
2213
+ --cg-ui-color-surface-primary-light-active: var(--cg-ui-palette-primary-10);
2214
+ --cg-ui-color-surface-darkest: var(--cg-ui-palette-neutral-100);
2215
+ --cg-ui-color-surface-dark: var(--cg-ui-palette-neutral-80);
2216
+ --cg-ui-color-surface-regular: var(--cg-ui-palette-neutral-50);
2217
+ --cg-ui-color-surface-semilight: var(--cg-ui-palette-neutral-40);
2218
+ --cg-ui-color-surface-light: var(--cg-ui-palette-neutral-20);
2219
+ --cg-ui-color-surface-lightest: var(--cg-ui-palette-neutral-10);
2220
+ --cg-ui-color-surface-white: var(--cg-ui-palette-neutral-0);
2221
+ --cg-ui-color-surface-hover: var(--cg-ui-palette-neutral-01);
2222
+ --cg-ui-color-stroke-default: var(--cg-ui-palette-neutral-40);
2223
+ --cg-ui-color-stroke-minimum: var(--cg-ui-palette-neutral-10);
2224
+ --cg-ui-color-stroke-focus: var(--cg-ui-palette-primary-60);
2225
+ --cg-ui-color-stroke-primary: var(--cg-ui-palette-primary-80);
2226
+ --cg-ui-color-stroke-divider: var(--cg-ui-palette-neutral-20);
2227
+ --cg-ui-color-stroke-error: var(--cg-ui-palette-system-error-100);
2228
+ --cg-ui-color-icon-regular: var(--cg-ui-palette-neutral-50);
2229
+ --cg-ui-color-icon-default: var(--cg-ui-palette-neutral-40);
2230
+ --cg-ui-color-icon-primary: var(--cg-ui-palette-primary-80);
2231
+ --cg-ui-color-icon-focus: var(--cg-ui-palette-primary-60);
2232
+ --cg-ui-color-icon-white: var(--cg-ui-palette-neutral-0);
2233
+ --cg-ui-color-state-error: var(--cg-ui-palette-system-error-100);
2234
+ --cg-ui-color-state-error-light: var(--cg-ui-palette-system-error-10);
2235
+ --cg-ui-color-state-warning: var(--cg-ui-palette-system-warning-100);
2236
+ --cg-ui-color-state-warning-light: var(--cg-ui-palette-system-warning-10);
2237
+ --cg-ui-color-state-success: var(--cg-ui-palette-system-success-100);
2238
+ --cg-ui-color-state-success-light: var(--cg-ui-palette-system-success-10);
2239
+ --cg-ui-color-state-info: var(--cg-ui-palette-system-info-100);
2240
+ --cg-ui-color-state-info-light: var(--cg-ui-palette-system-info-10);
2241
+ }
2277
2242
  .dark, [data-theme='dark'] {
2278
2243
  --cg-ui-primary-hue: 160;
2279
2244
  --cg-ui-primary-saturation: 80%;
@@ -2288,14 +2253,25 @@
2288
2253
  --cg-ui-palette-neutral-80: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 12%, 1);
2289
2254
  --cg-ui-palette-neutral-60: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 16%, 1);
2290
2255
  --cg-ui-palette-neutral-50: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 28%, 1);
2291
- --cg-ui-palette-system-error-100: hsla(2, 100%, 40%, 1);
2292
- --cg-ui-palette-system-error-10: hsla(3, 67%, 93%, 1);
2293
2256
  --cg-ui-palette-system-warning-100: hsla(32, 98%, 40%, 1);
2294
- --cg-ui-palette-system-warning-10: hsla(18, 88%, 94%, 1);
2295
- --cg-ui-palette-system-success-100: hsla(162, 100%, 25%, 1);
2296
- --cg-ui-palette-system-success-10: hsla(162, 64%, 94%, 1);
2297
- --cg-ui-palette-system-info-100: hsla(232, 22%, 29%, 1);
2298
- --cg-ui-palette-system-info-10: hsla(240, 12%, 93%, 1);
2257
+ --cg-ui-color-fg-darkest: var(--cg-ui-palette-neutral-10);
2258
+ --cg-ui-color-fg-dark: var(--cg-ui-palette-neutral-10);
2259
+ --cg-ui-color-fg-medium: var(--cg-ui-palette-neutral-40);
2260
+ --cg-ui-color-fg-regular: var(--cg-ui-palette-neutral-20);
2261
+ --cg-ui-color-fg-semilight: var(--cg-ui-palette-neutral-40);
2262
+ --cg-ui-color-fg-white: var(--cg-ui-palette-neutral-10);
2263
+ --cg-ui-color-bg-main: var(--cg-ui-palette-neutral-80);
2264
+ --cg-ui-color-surface-lightest: var(--cg-ui-palette-neutral-80);
2265
+ --cg-ui-color-surface-white: var(--cg-ui-palette-neutral-60);
2266
+ --cg-ui-color-stroke-default: var(--cg-ui-palette-neutral-50);
2267
+ --cg-ui-color-stroke-divider: var(--cg-ui-palette-neutral-40);
2268
+ --cg-ui-color-icon-regular: var(--cg-ui-palette-neutral-40);
2269
+ --cg-ui-color-icon-white: var(--cg-ui-palette-neutral-40);
2270
+ --cg-ui-shadow-base: rgba(0, 0, 0, 0.4) 0px 4px 12px;
2271
+ --cg-ui-shadow-toast: 0px 0px 8px 0px hsla(0, 0%, 0%, 0.5);
2272
+ --cg-ui-shadow-switch-thumb: 0px 1px 2px 0px hsla(0, 0%, 0%, 0.5);
2273
+ --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.3);
2274
+ --cg-ui-shadow-dialog: rgba(0, 0, 0, 0.5) 0px 13px 27px -5px, rgba(0, 0, 0, 0.6) 0px 8px 16px;
2299
2275
  }
2300
2276
  :root {
2301
2277
  interpolate-size: allow-keywords;