@epam/assets 5.0.0-alpha.2 → 5.0.0-alpha.4

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 (27) hide show
  1. package/package.json +3 -5
  2. package/scss/index.scss +0 -1
  3. package/scss/promo/typography.scss +3 -26
  4. package/scss/typography.scss +0 -31
  5. package/theme/theme_loveship.scss +222 -206
  6. package/theme/theme_promo.scss +191 -148
  7. package/theme/theme_vanilla_thunder.scss +43 -43
  8. package/less/control-mods.less +0 -52
  9. package/less/control-size.less +0 -43
  10. package/less/effects.less +0 -25
  11. package/less/font-faces.less +0 -106
  12. package/less/fonts.less +0 -13
  13. package/less/globals.less +0 -11
  14. package/less/index.less +0 -7
  15. package/less/loveship-color-vars.less +0 -172
  16. package/less/loveship-colors.less +0 -37
  17. package/less/text-size.less +0 -49
  18. package/less/typography.less +0 -196
  19. package/scss/control-mods.scss +0 -42
  20. package/scss/globals.scss +0 -9
  21. package/scss/loveship-color-vars.scss +0 -183
  22. package/styles/error-pages.less +0 -68
  23. package/styles/index.less +0 -2
  24. package/styles/menu.less +0 -359
  25. package/styles/scss/error-pages.scss +0 -67
  26. package/styles/scss/index.scss +0 -2
  27. package/styles/scss/menu.scss +0 -359
package/theme/theme_loveship.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
3
  // refactor indentions for this page using co-pilot
4
4
 
5
- :global(.uui-theme-loveship) {
5
+ .uui-theme-loveship {
6
6
  --font-regular: 'Sans Regular', Arial, sans-serif;
7
7
  --font-semibold: 'Sans Semibold', Arial, sans-serif;
8
8
  --font-italic: 'Sans Italic', Arial, sans-serif;
@@ -12,44 +12,6 @@
12
12
  --font-redacted: 'Redacted';
13
13
  --font-light: 'Sans Light', Arial, sans-serif;
14
14
 
15
- --orange-10: #FFE1BD;
16
- --orange-20: #FFD091;
17
- --orange-30: #E44E00;
18
- --orange-40: #C63100;
19
- --orange-50: #991900;
20
-
21
- --fuchia-10: #FFD7D9;
22
- --fuchia-20: #FFA9B3;
23
- --fuchia-30: #CD0053;
24
- --fuchia-40: #B00052;
25
- --fuchia-50: #94004C;
26
-
27
- --purple-10: #FBDAF3;
28
- --purple-20: #E9A4DF;
29
- --purple-30: #8018A0;
30
- --purple-40: #680B8F;
31
- --purple-50: #550080;
32
-
33
- --cyan-10: #B9FBEC;
34
- --cyan-20: #8CF8E0;
35
- --cyan-30: #09B9A3;
36
- --cyan-40: #009688;
37
- --cyan-50: #11736E;
38
-
39
- --cobalt-10: #DCFAFF;
40
- --cobalt-20: #95EAFF;
41
- --cobalt-30: #0E74E2;
42
- --cobalt-40: #0453C7;
43
- --cobalt-50: #003399;
44
-
45
- --lavanda-10: #F1DEFF;
46
- --lavanda-20: #CAB5FC;
47
- --lavanda-30: #3F51B5;
48
- --lavanda-40: #2E3A9D;
49
- --lavanda-50: #191980;
50
-
51
- --white: #FFFFFF;
52
-
53
15
  --night50: #FAFAFC;
54
16
  --night100: #F5F6FA;
55
17
  --night200: #EBEDF5;
@@ -61,47 +23,91 @@
61
23
  --night800: #303240;
62
24
  --night900: #1D1E26;
63
25
 
26
+ --sky-soft: #F5FDFF;
64
27
  --sky-lightest: #E1F4FA;
65
- --sky-light: #C4EAF5;
28
+ --sky-light: #A0DDEE;
66
29
  --sky: #009ECC;
67
- --sky-dark: #008ABD;
68
- --sky-darkest: #0079AD;
30
+ --sky-dark: #0086AD;
31
+ --sky-darkest: #006B8A;
69
32
 
70
- --green-lightest: #EBF3D8;
71
- --green-light: #D6E6B2;
72
- --green: #67A300;
73
- --green-dark: #558A00;
74
- --green-darkest: #428024;
33
+ --grass-soft: #FCFFF5;
34
+ --grass-lightest: #EBF3D8;
35
+ --grass-light: #C1E288;
36
+ --grass: #67A300;
37
+ --grass-dark: #528500;
38
+ --grass-darkest: #396F1F;
75
39
 
40
+ --sun-soft: #FFFCF5;
76
41
  --sun-lightest: #FFEDC9;
77
- --sun-light: #FFDD96;
42
+ --sun-light: #FFD785;
78
43
  --sun: #FCAA00;
79
- --sun-dark: #F67E00;
80
- --sun-darkest: #E64C00;
44
+ --sun-dark: #FF9000;
45
+ --sun-darkest: #BD5800;
81
46
 
47
+ --fire-soft: #FEF6F6;
82
48
  --fire-lightest: #FDE1E1;
83
- --fire-light: #FCC8C8;
84
- --fire: #FA4B4B;
85
- --fire-dark: #CC2929;
86
- --fire-darkest: #B32424;
87
-
88
- --blue-lightest: #CEEFFF;
89
- --blue-light: #B5E6FF;
90
- --blue: #008ACE;
91
- --blue-dark: #0079B5;
92
- --blue-darkest: #00689B;
93
-
94
- --amber-lightest: #FFF2CC;
95
- --amber-light: #FFECB3;
96
- --amber: #FFC000;
97
- --amber-dark: #E6AD00;
98
- --amber-darkest: #CC9A00;
99
-
100
- --red-lightest: #FADED9;
101
- --red-light: #F8CBC2;
102
- --red: #E54322;
103
- --red-dark: #D53919;
104
- --red-darkest: #BE3316;
49
+ --fire-light: #FBB6B6;
50
+ --fire: #FF4242;
51
+ --fire-dark: #E22A2A;
52
+ --fire-darkest: #AD0000;
53
+
54
+ --white: #FFFFFF;
55
+
56
+ --yellow-5: #FFFFF0;
57
+ --yellow-10: #FFFECC;
58
+ --yellow-20: #FFFCA4;
59
+ --yellow-30: #FDD63B;
60
+ --yellow-40: #F9B71D;
61
+ --yellow-50: #D3910C;
62
+
63
+ --orange-5: #FEF8F4;
64
+ --orange-10: #FFE8D7;
65
+ --orange-20: #FFCCA7;
66
+ --orange-30: #FF8B3E;
67
+ --orange-40: #F76B0D;
68
+ --orange-50: #BD4B00;
69
+
70
+ --fuchia-5: #FFF7FB;
71
+ --fuchia-10: #F9D8E7;
72
+ --fuchia-20: #EDADC8;
73
+ --fuchia-30: #EA4386;
74
+ --fuchia-40: #D61E68;
75
+ --fuchia-50: #AE1955;
76
+
77
+ --purple-5: #FDF6FE;
78
+ --purple-10: #F2CCFA;
79
+ --purple-20: #E79DF5;
80
+ --purple-30: #B114D1;
81
+ --purple-40: #860F9E;
82
+ --purple-50: #5E0B6F;
83
+
84
+ --lavanda-5: #F8F6FE;
85
+ --lavanda-10: #DBCCFA;
86
+ --lavanda-20: #BB9DF5;
87
+ --lavanda-30: #773CEC;
88
+ --lavanda-40: #5514D6;
89
+ --lavanda-50: #40109E;
90
+
91
+ --cobalt-5: #F8FAFF;
92
+ --cobalt-10: #D9E2FC;
93
+ --cobalt-20: #AEC0F5;
94
+ --cobalt-30: #0F98FF;
95
+ --cobalt-40: #006FE5;
96
+ --cobalt-50: #0954A5;
97
+
98
+ --cyan-5: #F5FBFF;
99
+ --cyan-10: #D1FAFA;
100
+ --cyan-20: #AAEEEE;
101
+ --cyan-30: #14CCCC;
102
+ --cyan-40: #0F9E9E;
103
+ --cyan-50: #0B6F6F;
104
+
105
+ --mint-5: #F2FCF5;
106
+ --mint-10: #DDF3E4;
107
+ --mint-20: #B4DFC4;
108
+ --mint-30: #4FC48C;
109
+ --mint-40: #2E9E68;
110
+ --mint-50: #236E4A;
105
111
 
106
112
  /* TODO: needs to resolve old colors question */
107
113
  /* Loveship old colors */
@@ -156,11 +162,11 @@
156
162
 
157
163
  /* core variables start */
158
164
 
159
- --uui-accent: var(--green);
160
- --uui-accent-light: var(--green-light);
161
- --uui-accent-lightest: var(--green-lightest);
162
- --uui-accent-dark: var(--green-dark);
163
- --uui-accent-darkest: var(--green-darkest);
165
+ --uui-accent: var(--grass);
166
+ --uui-accent-light: var(--grass-light);
167
+ --uui-accent-lightest: var(--grass-lightest);
168
+ --uui-accent-dark: var(--grass-dark);
169
+ --uui-accent-darkest: var(--grass-darkest);
164
170
 
165
171
  --uui-primary: var(--sky);
166
172
  --uui-primary-light: var(--sky-light);
@@ -192,32 +198,32 @@
192
198
  --uui-info-light: var(--sky-light);
193
199
  --uui-info-dark: var(--sky-dark);
194
200
  --uui-info-darkest: var(--sky-darkest);
195
- --uui-info-hover: var(--blue-dark);
196
- --uui-info-active: var(--blue-darkest);
201
+ --uui-info-hover: var(--sky-dark);
202
+ --uui-info-active: var(--sky-darkest);
197
203
 
198
- --uui-success: var(--green);
199
- --uui-success-lightest: var(--green-lightest);
200
- --uui-success-light: var(--green-light);
201
- --uui-success-dark: var(--green-dark);
202
- --uui-success-darkest: var(--green-darkest);
203
- --uui-success-hover: var(--green-dark);
204
- --uui-success-active: var(--green-darkest);
204
+ --uui-success: var(--grass);
205
+ --uui-success-lightest: var(--grass-lightest);
206
+ --uui-success-light: var(--grass-light);
207
+ --uui-success-dark: var(--grass-dark);
208
+ --uui-success-darkest: var(--grass-darkest);
209
+ --uui-success-hover: var(--grass-dark);
210
+ --uui-success-active: var(--grass-darkest);
205
211
 
206
212
  --uui-warning: var(--sun);
207
213
  --uui-warning-lightest: var(--sun-lightest);
208
214
  --uui-warning-light: var(--sun-light);
209
215
  --uui-warning-dark: var(--sun-dark);
210
216
  --uui-warning-darkest: var(--sun-darkest);
211
- --uui-warning-hover: var(--amber-dark);
212
- --uui-warning-active: var(--amber-darkest);
217
+ --uui-warning-hover: var(--sun-dark);
218
+ --uui-warning-active: var(--sun-darkest);
213
219
 
214
220
  --uui-error: var(--fire);
215
221
  --uui-error-lightest: var(--fire-lightest);
216
222
  --uui-error-light: var(--fire-light);
217
223
  --uui-error-dark: var(--fire-dark);
218
224
  --uui-error-darkest: var(--fire-darkest);
219
- --uui-error-hover: var(--red-dark);
220
- --uui-error-active: var(--red-darkest);
225
+ --uui-error-hover: var(--fire-dark);
226
+ --uui-error-active: var(--fire-darkest);
221
227
 
222
228
  --uui-icon: var(--night600);
223
229
  --uui-icon-hover: var(--night700);
@@ -247,6 +253,10 @@
247
253
  --uui-button-bg-halftone: var(--white);
248
254
  --uui-button-caption-disabled: var(--night500);
249
255
 
256
+ --uui-text-info: var(--uui-info);
257
+ --uui-text-warning: var(--uui-warning);
258
+ --uui-text-error: var(--uui-error);
259
+ --uui-text-success: var(--uui-success);
250
260
  --uui-text-brand: var(--night900);
251
261
  --uui-text-primary: var(--night800);
252
262
  --uui-text-secondary: var(--night600);
@@ -745,25 +755,25 @@
745
755
 
746
756
  /* ------------------------------------ */
747
757
 
748
- :global(.tooltip-contrast),
749
- :global(.tooltip-night800) {
758
+ .tooltip-contrast,
759
+ .tooltip-gray {
750
760
  --uui-tooltip-bg: var(--uui-surface-contrast);
751
761
  --uui-tooltip-text: var(--uui-contrast);
752
762
  }
753
763
 
754
- :global(.tooltip-default),
755
- :global(.tooltip-white) {
764
+ .tooltip-default,
765
+ .tooltip-white {
756
766
  --uui-tooltip-bg: var(--uui-surface);
757
767
  --uui-tooltip-text: var(--uui-text-primary);
758
768
  }
759
769
 
760
- :global(.tooltip-critical),
761
- :global(.tooltip-fire) {
770
+ .tooltip-critical,
771
+ .tooltip-fire {
762
772
  --uui-tooltip-bg: var(--uui-error-dark);
763
773
  --uui-tooltip-text: var(--uui-contrast);
764
774
  }
765
775
 
766
- :global(.button-sky), :global(.button-primary) {
776
+ .button-sky, .button-primary {
767
777
  --uui-btn-bg: var(--uui-primary);
768
778
  --uui-btn-bg-hover: var(--uui-primary-dark);
769
779
  --uui-btn-bg-active: var(--uui-primary-darkest);
@@ -780,7 +790,7 @@
780
790
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
781
791
  }
782
792
 
783
- :global(.button-accent), :global(.button-grass) {
793
+ .button-accent, .button-grass {
784
794
  --uui-btn-bg: var(--uui-accent);
785
795
  --uui-btn-bg-hover: var(--uui-accent-dark);
786
796
  --uui-btn-bg-active: var(--uui-accent-darkest);
@@ -797,7 +807,7 @@
797
807
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
798
808
  }
799
809
 
800
- :global(.button-fire), :global(.button-negative) {
810
+ .button-fire, .button-negative {
801
811
  --uui-btn-bg: var(--uui-negative);
802
812
  --uui-btn-bg-hover: var(--uui-negative-dark);
803
813
  --uui-btn-bg-active: var(--uui-negative-darkest);
@@ -814,24 +824,10 @@
814
824
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
815
825
  }
816
826
 
817
- :global(.button-night500) {
818
- --uui-btn-bg: var(--night500);
819
- --uui-btn-bg-hover: var(--night600);
820
- --uui-btn-bg-active: var(--night700);
821
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
822
- --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
823
- --uui-btn-bg-halftone-active: var(--uui-secondary-light);
824
- --uui-btn-border: var(--night500);
825
- --uui-btn-border-hover: var(--night600);
826
- --uui-btn-border-active: var(--night700);
827
- --uui-btn-bg-disabled: var(--uui-disabled);
828
- --uui-btn-border-disabled: var(--uui-disabled);
829
- --uui-btn-caption: var(--uui-contrast);
830
- --uui-btn-caption-halftone: var(--night600);
831
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
832
- }
833
-
834
- :global(.button-night600), :global(.button-secondary) {
827
+ .button-night500,
828
+ .button-night600,
829
+ .button-gray,
830
+ .button-secondary {
835
831
  --uui-btn-bg: var(--uui-secondary);
836
832
  --uui-btn-bg-hover: var(--uui-secondary-dark);
837
833
  --uui-btn-bg-active: var(--uui-secondary-darkest);
@@ -848,7 +844,7 @@
848
844
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
849
845
  }
850
846
 
851
- :global(.button-white) {
847
+ .button-white {
852
848
  --uui-btn-bg: var(--uui-contrast);
853
849
  --uui-btn-bg-hover: var(--uui-color-white-800);
854
850
  --uui-btn-bg-active: var(--uui-color-white-900);
@@ -865,159 +861,159 @@
865
861
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
866
862
  }
867
863
 
868
- :global(.icon-button-sky),
869
- :global(.icon-button-info) {
864
+ .icon-button-sky,
865
+ .icon-button-info {
870
866
  --uui-icon-btn: var(--uui-info);
871
867
  --uui-icon-btn-hover: var(--uui-info-dark);
872
868
  --uui-icon-btn-active: var(--uui-info-darkest);
873
869
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
874
870
  }
875
871
 
876
- :global(.icon-button-grass),
877
- :global(.icon-button-success) {
872
+ .icon-button-grass,
873
+ .icon-button-success {
878
874
  --uui-icon-btn: var(--uui-success);
879
875
  --uui-icon-btn-hover: var(--uui-success-dark);
880
876
  --uui-icon-btn-active: var(--uui-success-darkest);
881
877
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
882
878
  }
883
879
 
884
- :global(.icon-button-sun),
885
- :global(.icon-button-warning) {
880
+ .icon-button-sun,
881
+ .icon-button-warning {
886
882
  --uui-icon-btn: var(--uui-warning);
887
883
  --uui-icon-btn-hover: var(--uui-warning-dark);
888
884
  --uui-icon-btn-active: var(--uui-warning-darkest);
889
885
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
890
886
  }
891
887
 
892
- :global(.icon-button-fire),
893
- :global(.icon-button-error) {
888
+ .icon-button-fire,
889
+ .icon-button-error {
894
890
  --uui-icon-btn: var(--uui-error);
895
891
  --uui-icon-btn-hover: var(--uui-error-dark);
896
892
  --uui-icon-btn-active: var(--uui-error-darkest);
897
893
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
898
894
  }
899
895
 
900
- :global(.icon-button-carbon) {
896
+ .icon-button-carbon {
901
897
  --uui-icon-btn: var(--uui-color-carbon-700);
902
898
  --uui-icon-btn-hover: var(--uui-color-carbon-800);
903
899
  --uui-icon-btn-active: var(--uui-color-carbon-900);
904
900
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
905
901
  }
906
902
 
907
- :global(.icon-button-cobalt) {
903
+ .icon-button-cobalt {
908
904
  --uui-icon-btn: var(--uui-color-cobalt-700);
909
905
  --uui-icon-btn-hover: var(--uui-color-cobalt-800);
910
906
  --uui-icon-btn-active: var(--uui-color-cobalt-900);
911
907
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
912
908
  }
913
909
 
914
- :global(.icon-button-lavanda) {
910
+ .icon-button-lavanda {
915
911
  --uui-icon-btn: var(--uui-color-lavanda-700);
916
912
  --uui-icon-btn-hover: var(--uui-color-lavanda-800);
917
913
  --uui-icon-btn-active: var(--uui-color-lavanda-900);
918
914
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
919
915
  }
920
916
 
921
- :global(.icon-button-fuchsia) {
917
+ .icon-button-fuchsia {
922
918
  --uui-icon-btn: var(--uui-color-fuchsia-700);
923
919
  --uui-icon-btn-hover: var(--uui-color-fuchsia-800);
924
920
  --uui-icon-btn-active: var(--uui-color-fuchsia-900);
925
921
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
926
922
  }
927
923
 
928
- :global(.icon-button-white) {
924
+ .icon-button-white {
929
925
  --uui-icon-btn: var(--white);
930
926
  --uui-icon-btn-hover: var(--uui-color-white-800);
931
927
  --uui-icon-btn-active: var(--uui-color-white-900);
932
928
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
933
929
  }
934
930
 
935
- :global(.icon-button-night200) {
936
- --uui-icon-btn: var(--gray20);
931
+ .icon-button-night200 {
932
+ --uui-icon-btn: var(--night200);
937
933
  --uui-icon-btn-hover: var(--uui-color-night200-800);
938
934
  --uui-icon-btn-active: var(--uui-color-night200-900);
939
935
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
940
936
  }
941
937
 
942
- :global(.icon-button-night300) {
943
- --uui-icon-btn: var(--gray30);
938
+ .icon-button-night300 {
939
+ --uui-icon-btn: var(--night300);
944
940
  --uui-icon-btn-hover: var(--uui-color-night300-800);
945
941
  --uui-icon-btn-active: var(--uui-color-night300-900);
946
942
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
947
943
  }
948
944
 
949
- :global(.icon-button-night400) {
950
- --uui-icon-btn: var(--gray40);
945
+ .icon-button-night400 {
946
+ --uui-icon-btn: var(--night400);
951
947
  --uui-icon-btn-hover: var(--uui-color-night400-800);
952
948
  --uui-icon-btn-active: var(--uui-color-night400-900);
953
949
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
954
950
  }
955
951
 
956
- :global(.icon-button-night500),
957
- :global(.icon-button-secondary) {
958
- --uui-icon-btn: var(--gray50);
952
+ .icon-button-night500 {
953
+ --uui-icon-btn: var(--night500);
959
954
  --uui-icon-btn-hover: var(--uui-color-night500-800);
960
955
  --uui-icon-btn-active: var(--uui-color-night500-900);
961
956
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
962
957
  }
963
958
 
964
- :global(.icon-button-night600),
965
- :global(.icon-button-default) {
966
- --uui-icon-btn: var(--uui-icon);
959
+ .icon-button-night600,
960
+ .icon-button-secondary,
961
+ .icon-button-default {
962
+ --uui-icon-btn: var(--night600);
967
963
  --uui-icon-btn-hover: var(--uui-icon-hover);
968
964
  --uui-icon-btn-active: var(--uui-icon-active);
969
965
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
970
966
  }
971
967
 
972
- :global(.notification-card-sun),
973
- :global(.notification-card-warning) {
968
+ .notification-card-sun,
969
+ .notification-card-warning {
974
970
  --uui-notification-card-fill: var(--uui-warning);
975
971
  --uui-notification-card-border: var(--uui-warning);
976
972
  --uui-notification-card-bg: var(--uui-surface);
977
973
  --uui-notification-card-text: var(--uui-text-primary);
978
974
  }
979
975
 
980
- :global(.notification-card-success),
981
- :global(.notification-card-grass) {
976
+ .notification-card-success,
977
+ .notification-card-grass {
982
978
  --uui-notification-card-fill: var(--uui-success);
983
979
  --uui-notification-card-border: var(--uui-success);
984
980
  --uui-notification-card-bg: var(--uui-surface);
985
981
  --uui-notification-card-text: var(--uui-text-primary);
986
982
  }
987
983
 
988
- :global(.notification-card-info),
989
- :global(.notification-card-sky) {
984
+ .notification-card-info,
985
+ .notification-card-sky {
990
986
  --uui-notification-card-fill: var(--uui-info);
991
987
  --uui-notification-card-border: var(--uui-info);
992
988
  --uui-notification-card-bg: var(--uui-surface);
993
989
  --uui-notification-card-text: var(--uui-text-primary);
994
990
  }
995
991
 
996
- :global(.notification-card-error),
997
- :global(.notification-card-fire) {
992
+ .notification-card-error,
993
+ .notification-card-fire {
998
994
  --uui-notification-card-fill: var(--uui-error);
999
995
  --uui-notification-card-border: var(--uui-error);
1000
996
  --uui-notification-card-bg: var(--uui-surface);
1001
997
  --uui-notification-card-text: var(--uui-text-primary);
1002
998
  }
1003
999
 
1004
- :global(.notification-card-night600) {
1000
+ .notification-card-night600 {
1005
1001
  --uui-notification-card-fill: var(--night600);
1006
1002
  --uui-notification-card-border: var(--night600);
1007
1003
  --uui-notification-card-bg: var(--uui-surface);
1008
1004
  --uui-notification-card-text: var(--uui-text-primary);
1009
1005
  }
1010
1006
 
1011
- :global(.alert-error),
1012
- :global(.alert-fire) {
1007
+ .alert-error,
1008
+ .alert-fire {
1013
1009
  --uui-alert-text: var(--uui-text-primary);
1014
1010
  --uui-alert-bg: #F5E5E9;
1015
1011
  --uui-alert-border: var(--uui-error);
1016
1012
  --uui-alert-icon: var(--uui-error);
1017
1013
  }
1018
1014
 
1019
- :global(.alert-warning),
1020
- :global(.alert-sun) {
1015
+ .alert-warning,
1016
+ .alert-sun {
1021
1017
  --uui-alert-text: var(--uui-text-primary);
1022
1018
  --uui-alert-bg: #F6EEE1;
1023
1019
  --uui-alert-border: var(--uui-warning);
@@ -1025,23 +1021,23 @@
1025
1021
  }
1026
1022
 
1027
1023
 
1028
- :global(.alert-success),
1029
- :global(.alert-grass) {
1024
+ .alert-success,
1025
+ .alert-grass {
1030
1026
  --uui-alert-text: var(--uui-text-primary);
1031
1027
  --uui-alert-bg: #E7EEE1;
1032
1028
  --uui-alert-border: var(--uui-success);
1033
1029
  --uui-alert-icon: var(--uui-success);
1034
1030
  }
1035
1031
 
1036
- :global(.alert-info),
1037
- :global(.alert-sky) {
1032
+ .alert-info,
1033
+ .alert-sky {
1038
1034
  --uui-alert-text: var(--uui-text-primary);
1039
1035
  --uui-alert-bg: #DCEDF6;
1040
1036
  --uui-alert-border: var(--uui-info);
1041
1037
  --uui-alert-icon: var(--uui-info);
1042
1038
  }
1043
1039
 
1044
- :global(.badge-default), :global(.badge-night300) {
1040
+ .badge-default, .badge-night300 {
1045
1041
  --uui-badge-bg: var(--night300);
1046
1042
  --uui-badge-bg-hover: var(--night400);
1047
1043
  --uui-badge-caption-solid: var(--uui-text-primary);
@@ -1054,7 +1050,7 @@
1054
1050
  --uui-badge-caption-halftone: var(--uui-text-primary);
1055
1051
  }
1056
1052
 
1057
- :global(.badge-info), :global(.badge-sky) {
1053
+ .badge-info, .badge-sky {
1058
1054
  --uui-badge-bg: var(--uui-info);
1059
1055
  --uui-badge-bg-hover: var(--uui-info-dark);
1060
1056
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1067,7 +1063,7 @@
1067
1063
  --uui-badge-caption-halftone: var(--uui-info-darkest);
1068
1064
  }
1069
1065
 
1070
- :global(.badge-success), :global(.badge-grass) {
1066
+ .badge-success, .badge-grass {
1071
1067
  --uui-badge-bg: var(--uui-success);
1072
1068
  --uui-badge-bg-hover: var(--uui-success-dark);
1073
1069
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1080,7 +1076,7 @@
1080
1076
  --uui-badge-caption-halftone: var(--uui-success-darkest);
1081
1077
  }
1082
1078
 
1083
- :global(.badge-warning), :global(.badge-sun) {
1079
+ .badge-warning, .badge-sun {
1084
1080
  --uui-badge-bg: var(--uui-warning);
1085
1081
  --uui-badge-bg-hover: var(--uui-warning-dark);
1086
1082
  --uui-badge-caption-solid: var(--uui-text-primary);
@@ -1093,7 +1089,7 @@
1093
1089
  --uui-badge-caption-halftone: var(--uui-warning-darkest);
1094
1090
  }
1095
1091
 
1096
- :global(.badge-error), :global(.badge-fire) {
1092
+ .badge-error, .badge-fire {
1097
1093
  --uui-badge-bg: var(--uui-error);
1098
1094
  --uui-badge-bg-hover: var(--uui-error-dark);
1099
1095
  --uui-badge-caption-solid: var(--white);
@@ -1106,7 +1102,7 @@
1106
1102
  --uui-badge-caption-halftone: var(--uui-error-darkest);
1107
1103
  }
1108
1104
 
1109
- :global(.badge-cobalt) {
1105
+ .badge-cobalt {
1110
1106
  --uui-badge-bg: var(--uui-color-cobalt-700);
1111
1107
  --uui-badge-bg-hover: var(--uui-color-cobalt-800);
1112
1108
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1119,7 +1115,7 @@
1119
1115
  --uui-badge-caption-halftone: var(--uui-color-cobalt-900);
1120
1116
  }
1121
1117
 
1122
- :global(.badge-lavanda) {
1118
+ .badge-lavanda {
1123
1119
  --uui-badge-bg: var(--uui-color-lavanda-700);
1124
1120
  --uui-badge-bg-hover: var(--uui-color-lavanda-800);
1125
1121
  --uui-badge-caption-solid: var(--white);
@@ -1132,7 +1128,7 @@
1132
1128
  --uui-badge-caption-halftone: var(--uui-color-lavanda-900);
1133
1129
  }
1134
1130
 
1135
- :global(.badge-fuchsia) {
1131
+ .badge-fuchsia {
1136
1132
  --uui-badge-bg: var(--uui-color-fuchsia-700);
1137
1133
  --uui-badge-bg-hover: var(--uui-color-fuchsia-800);
1138
1134
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1145,7 +1141,7 @@
1145
1141
  --uui-badge-caption-halftone: var(--uui-color-fuchsia-900);
1146
1142
  }
1147
1143
 
1148
- :global(.badge-white) {
1144
+ .badge-white {
1149
1145
  --uui-badge-bg: var(--white);
1150
1146
  --uui-badge-bg-hover: var(--gray5);
1151
1147
  --uui-badge-caption-solid: var(--night800);
@@ -1158,7 +1154,7 @@
1158
1154
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1159
1155
  }
1160
1156
 
1161
- :global(.badge-night200) {
1157
+ .badge-night200 {
1162
1158
  --uui-badge-bg: var(--uui-color-night200-700);
1163
1159
  --uui-badge-bg-hover: var(--uui-color-night200-800);
1164
1160
  --uui-badge-caption-solid: var(--night800);
@@ -1171,7 +1167,7 @@
1171
1167
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1172
1168
  }
1173
1169
 
1174
- :global(.badge-night300) {
1170
+ .badge-night300 {
1175
1171
  --uui-badge-bg: var(--uui-color-night300-700);
1176
1172
  --uui-badge-bg-hover: var(--uui-color-night300-800);
1177
1173
  --uui-badge-caption-solid: var(--night800);
@@ -1184,7 +1180,7 @@
1184
1180
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1185
1181
  }
1186
1182
 
1187
- :global(.badge-night400) {
1183
+ .badge-night400 {
1188
1184
  --uui-badge-bg: var(--uui-color-night400-700);
1189
1185
  --uui-badge-bg-hover: var(--uui-color-night400-800);
1190
1186
  --uui-badge-caption-solid: var(--night800);
@@ -1197,7 +1193,7 @@
1197
1193
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1198
1194
  }
1199
1195
 
1200
- :global(.badge-night500) {
1196
+ .badge-night500 {
1201
1197
  --uui-badge-bg: var(--uui-color-night500-700);
1202
1198
  --uui-badge-bg-hover: var(--uui-color-night500-800);
1203
1199
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1210,7 +1206,7 @@
1210
1206
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1211
1207
  }
1212
1208
 
1213
- :global(.badge-night600) {
1209
+ .badge-night600 {
1214
1210
  --uui-badge-bg: var(--uui-color-night600-700);
1215
1211
  --uui-badge-bg-hover: var(--uui-color-night600-800);
1216
1212
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1223,7 +1219,7 @@
1223
1219
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1224
1220
  }
1225
1221
 
1226
- :global(.badge-violet) {
1222
+ .badge-violet {
1227
1223
  --uui-badge-bg: var(--lavanda-30);
1228
1224
  --uui-badge-bg-hover: var(--lavanda-40);
1229
1225
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1236,7 +1232,7 @@
1236
1232
  --uui-badge-caption-halftone: var(--lavanda-50);
1237
1233
  }
1238
1234
 
1239
- :global(.badge-orange) {
1235
+ .badge-orange {
1240
1236
  --uui-badge-bg: var(--orange-30);
1241
1237
  --uui-badge-bg-hover: var(--orange-40);
1242
1238
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1249,7 +1245,7 @@
1249
1245
  --uui-badge-caption-halftone: var(--orange-50);
1250
1246
  }
1251
1247
 
1252
- :global(.badge-purple) {
1248
+ .badge-purple {
1253
1249
  --uui-badge-bg: var(--purple-30);
1254
1250
  --uui-badge-bg-hover: var(--purple-40);
1255
1251
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1262,101 +1258,121 @@
1262
1258
  --uui-badge-caption-halftone: var(--purple-50);
1263
1259
  }
1264
1260
 
1265
- :global(.informer-default) {
1261
+ .informer-default {
1266
1262
  --uui-informer-bg: var(--night300);
1267
1263
  --uui-informer-caption: var(--night600);
1268
1264
  }
1269
1265
 
1270
- :global(.informer-focus) {
1266
+ .informer-focus {
1271
1267
  --uui-informer-bg: var(--fire);
1272
1268
  --uui-informer-caption: var(--uui-contrast);
1273
1269
  }
1274
1270
 
1275
- :global(.informer-white) {
1271
+ .informer-white {
1276
1272
  --uui-informer-bg: var(--uui-surface);
1277
1273
  --uui-informer-caption: var(--uui-text-secondary);
1278
1274
  }
1279
1275
 
1280
- :global(.uui-text-brand),
1281
- :global(.uui-text-night900) {
1276
+ .uui-text-info,
1277
+ .uui-text-sky {
1278
+ --uui-text: var(--uui-text-info);
1279
+ }
1280
+
1281
+ .uui-text-success,
1282
+ .uui-text-grass {
1283
+ --uui-text: var(--uui-text-success);
1284
+ }
1285
+
1286
+ .uui-text-warning,
1287
+ .uui-text-sun {
1288
+ --uui-text: var(--uui-text-warning);
1289
+ }
1290
+
1291
+ .uui-text-error,
1292
+ .uui-text-fire {
1293
+ --uui-text: var(--uui-text-error);
1294
+ }
1295
+
1296
+ .uui-text-brand,
1297
+ .uui-text-night900 {
1282
1298
  --uui-text: var(--uui-text-brand);
1283
1299
  }
1284
1300
 
1285
- :global(.uui-text-primary),
1286
- :global(.uui-text-night800) {
1301
+ .uui-text-primary,
1302
+ .uui-text-night800 {
1287
1303
  --uui-text: var(--uui-text-primary);
1288
1304
  }
1289
1305
 
1290
- :global(.uui-text-night700) {
1306
+ .uui-text-night700 {
1291
1307
  --uui-text: var(--night700);
1292
1308
  }
1293
1309
 
1294
- :global(.uui-text-secondary),
1295
- :global(.uui-text-night600) {
1310
+ .uui-text-secondary,
1311
+ .uui-text-night600 {
1296
1312
  --uui-text: var(--uui-text-secondary);
1297
1313
  }
1298
1314
 
1299
- :global(.uui-text-disabled),
1300
- :global(.uui-text-night500) {
1315
+ .uui-text-disabled,
1316
+ .uui-text-night500 {
1301
1317
  --uui-text: var(--uui-text-disabled);
1302
1318
  }
1303
1319
 
1304
- :global(.uui-text-night400) {
1320
+ .uui-text-night400 {
1305
1321
  --uui-text: var(--night400);
1306
1322
  }
1307
1323
 
1308
- :global(.uui-text-night300) {
1324
+ .uui-text-night300 {
1309
1325
  --uui-text: var(--night300);
1310
1326
  }
1311
1327
 
1312
- :global(.uui-text-contrast),
1313
- :global(.uui-text-night50) {
1328
+ .uui-text-contrast,
1329
+ .uui-text-night50 {
1314
1330
  --uui-text: var(--uui-text-contrast);
1315
1331
  }
1316
1332
 
1317
- :global(.uui-font-regular),
1318
- :global(.uui-font-sans) {
1333
+ .uui-font-regular,
1334
+ .uui-font-sans {
1319
1335
  --uui-text-font: var(--font-regular);
1320
1336
  }
1321
1337
 
1322
- :global(.uui-font-semibold),
1323
- :global(.uui-font-sans-semibold) {
1338
+ .uui-font-semibold,
1339
+ .uui-font-sans-semibold {
1324
1340
  --uui-text-font: var(--font-semibold);
1325
1341
  }
1326
1342
 
1327
- :global(.uui-font-sans-light) {
1343
+ .uui-font-sans-light {
1328
1344
  --uui-text-font: var(--font-light);
1329
1345
  }
1330
1346
 
1331
- :global(.dropdown-container-white) {
1347
+ .dropdown-container-white {
1332
1348
  --uui-dropdown-container-bg: var(--white);
1333
1349
  }
1334
1350
 
1335
- :global(.dropdown-container-night700) {
1351
+ .dropdown-container-night700 {
1336
1352
  --uui-dropdown-container-bg: var(--night700);
1337
1353
  }
1338
1354
 
1339
- :global(.flex-row-background-white) {
1355
+ .flex-row-background-white {
1340
1356
  --uui-flex-row-bg: var(--uui-surface);
1341
1357
  }
1342
1358
 
1343
- :global(.flex-row-background-night50) {
1359
+ .flex-row-background-night50 {
1344
1360
  --uui-flex-row-bg: var(--night50);
1345
1361
  }
1346
1362
 
1347
- :global(.flex-row-background-night100) {
1363
+ .flex-row-background-night100 {
1348
1364
  --uui-flex-row-bg: var(--night100);
1349
1365
  }
1350
1366
 
1351
- :global(.flex-row-background-none) {
1367
+ .flex-row-background-none {
1352
1368
  --uui-flex-row-bg: transparent;
1353
1369
  }
1354
1370
 
1355
- :global(.panel-white) {
1371
+ .panel-white {
1356
1372
  --uui-panel-bg: var(--uui-surface);
1357
1373
  }
1358
1374
 
1359
- :global(.panel-night50) {
1375
+ .panel-night50 {
1360
1376
  --uui-panel-bg: var(--night50);
1361
1377
  }
1362
1378
  }