@epam/assets 5.0.0-alpha.3 → 5.0.0

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 (48) hide show
  1. package/css/theme/theme_loveship.css +1209 -0
  2. package/css/theme/theme_loveship.css.map +1 -0
  3. package/css/theme/theme_promo.css +961 -0
  4. package/css/theme/theme_promo.css.map +1 -0
  5. package/css/theme/theme_vanilla_thunder.css +806 -0
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -0
  7. package/package.json +4 -6
  8. package/scss/font-faces.scss +2 -105
  9. package/scss/fonts.scss +2 -13
  10. package/scss/index.scss +4 -10
  11. package/scss/loveship/colors.scss +121 -0
  12. package/{less/font-faces.less → scss/loveship/font-faces.scss} +3 -43
  13. package/scss/loveship/fonts.scss +7 -0
  14. package/scss/loveship/typography.scss +153 -0
  15. package/scss/loveship-colors.scss +2 -56
  16. package/scss/promo/colors.scss +94 -49
  17. package/scss/promo/font-faces.scss +8 -0
  18. package/scss/promo/fonts.scss +2 -4
  19. package/scss/promo/typography.scss +2 -26
  20. package/scss/typography.scss +2 -172
  21. package/theme/theme_loveship.scss +403 -275
  22. package/theme/theme_promo.scss +242 -152
  23. package/theme/theme_vanilla_thunder.scss +43 -43
  24. package/less/control-mods.less +0 -52
  25. package/less/control-size.less +0 -43
  26. package/less/effects.less +0 -25
  27. package/less/fonts.less +0 -13
  28. package/less/globals.less +0 -11
  29. package/less/index.less +0 -7
  30. package/less/loveship-color-vars.less +0 -172
  31. package/less/loveship-colors.less +0 -37
  32. package/less/text-size.less +0 -49
  33. package/less/typography.less +0 -196
  34. package/scss/contrast.scss +0 -39
  35. package/scss/control-layout.scss +0 -2
  36. package/scss/control-mods.scss +0 -42
  37. package/scss/control-size.scss +0 -7
  38. package/scss/dnd.scss +0 -9
  39. package/scss/effects.scss +0 -25
  40. package/scss/globals.scss +0 -9
  41. package/scss/loveship-color-vars.scss +0 -183
  42. package/scss/text-size.scss +0 -37
  43. package/styles/error-pages.less +0 -68
  44. package/styles/index.less +0 -2
  45. package/styles/menu.less +0 -359
  46. package/styles/scss/error-pages.scss +0 -67
  47. package/styles/scss/index.scss +0 -2
  48. package/styles/scss/menu.scss +0 -359
package/theme/theme_loveship.scss CHANGED
@@ -2,54 +2,16 @@
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;
9
- --font-primary: 'Museo Sans', 'Sans Semibold', Arial, sans-serif;
10
- --font-promo: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
11
- --font-mono: 'Roboto Mono', Arial, sans-serif;
9
+ --font-primary: 'Sans Semibold', Arial, sans-serif;
10
+ --font-promo: 'Sans Semibold', Arial, sans-serif;
11
+ --font-mono: monospace;
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,78 +23,102 @@
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;
105
-
106
- /* TODO: needs to resolve old colors question */
107
- /* Loveship old colors */
108
- --uui-color-600: #EBECF1;
109
-
110
- --uui-color-carbon-700: #3D404D;
111
- --uui-color-carbon-800: #272933;
112
- --uui-color-carbon-900: #17181F;
49
+ --fire-light: #FBB6B6;
50
+ --fire: #FF4242;
51
+ --fire-dark: #E22A2A;
52
+ --fire-darkest: #AD0000;
113
53
 
114
- --uui-color-cobalt-500: #32B2FB;
115
- --uui-color-cobalt-600: #2196F3;
116
- --uui-color-cobalt-700: #0E74E2;
117
- --uui-color-cobalt-800: #0453C7;
118
- --uui-color-cobalt-900: #003399;
119
-
120
-
121
- --uui-color-lavanda-500: #6362C9;
122
- --uui-color-lavanda-600: #3F51B5;
123
- --uui-color-lavanda-700: #2E3A9D;
124
- --uui-color-lavanda-800: #21288D;
125
- --uui-color-lavanda-900: #191980;
54
+ --white: #FFFFFF;
126
55
 
127
- --uui-color-fuchsia-500: #F5527B;
128
- --uui-color-fuchsia-600: #E91E63;
129
- --uui-color-fuchsia-700: #CD0053;
130
- --uui-color-fuchsia-800: #B00052;
131
- --uui-color-fuchsia-900: #94004C;
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;
132
111
 
112
+ /* Loveship old colors */
133
113
  --uui-color-white-800: #E6E6E6;
134
114
  --uui-color-white-900: #CCCCCC;
135
115
 
116
+ --uui-color-night50-800: #DADAE9;
117
+ --uui-color-night50-900: #BABAD6;
118
+
119
+ --uui-color-night100-800: #D3D7E9;
120
+ --uui-color-night100-900: #B1B9D8;
121
+
136
122
  --uui-color-night200-700: #E6E8F2;
137
123
  --uui-color-night200-800: #C9CEE4;
138
124
  --uui-color-night200-900: #A7B0D3;
@@ -151,16 +137,24 @@
151
137
 
152
138
  --uui-color-night600-700: #595B6D;
153
139
  --uui-color-night600-800: #555764;
154
- --uui-color-night600-900: #3D3F49;
140
+
141
+ --uui-color-night700-800: #30323D;
142
+ --uui-color-night700-900: #1A1B20;
143
+
144
+ --uui-color-night800-800: #1A1B23;
145
+ --uui-color-night800-900: #040406;
146
+
147
+ --uui-color-night900-800: #070709;
148
+ --uui-color-night900-900: #000000;
155
149
  /* end Loveship old colors */
156
150
 
157
151
  /* core variables start */
158
152
 
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);
153
+ --uui-accent: var(--grass);
154
+ --uui-accent-light: var(--grass-light);
155
+ --uui-accent-lightest: var(--grass-lightest);
156
+ --uui-accent-dark: var(--grass-dark);
157
+ --uui-accent-darkest: var(--grass-darkest);
164
158
 
165
159
  --uui-primary: var(--sky);
166
160
  --uui-primary-light: var(--sky-light);
@@ -192,32 +186,32 @@
192
186
  --uui-info-light: var(--sky-light);
193
187
  --uui-info-dark: var(--sky-dark);
194
188
  --uui-info-darkest: var(--sky-darkest);
195
- --uui-info-hover: var(--blue-dark);
196
- --uui-info-active: var(--blue-darkest);
189
+ --uui-info-hover: var(--sky-dark);
190
+ --uui-info-active: var(--sky-darkest);
197
191
 
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);
192
+ --uui-success: var(--grass);
193
+ --uui-success-lightest: var(--grass-lightest);
194
+ --uui-success-light: var(--grass-light);
195
+ --uui-success-dark: var(--grass-dark);
196
+ --uui-success-darkest: var(--grass-darkest);
197
+ --uui-success-hover: var(--grass-dark);
198
+ --uui-success-active: var(--grass-darkest);
205
199
 
206
200
  --uui-warning: var(--sun);
207
201
  --uui-warning-lightest: var(--sun-lightest);
208
202
  --uui-warning-light: var(--sun-light);
209
203
  --uui-warning-dark: var(--sun-dark);
210
204
  --uui-warning-darkest: var(--sun-darkest);
211
- --uui-warning-hover: var(--amber-dark);
212
- --uui-warning-active: var(--amber-darkest);
205
+ --uui-warning-hover: var(--sun-dark);
206
+ --uui-warning-active: var(--sun-darkest);
213
207
 
214
208
  --uui-error: var(--fire);
215
209
  --uui-error-lightest: var(--fire-lightest);
216
210
  --uui-error-light: var(--fire-light);
217
211
  --uui-error-dark: var(--fire-dark);
218
212
  --uui-error-darkest: var(--fire-darkest);
219
- --uui-error-hover: var(--red-dark);
220
- --uui-error-active: var(--red-darkest);
213
+ --uui-error-hover: var(--fire-dark);
214
+ --uui-error-active: var(--fire-darkest);
221
215
 
222
216
  --uui-icon: var(--night600);
223
217
  --uui-icon-hover: var(--night700);
@@ -247,11 +241,16 @@
247
241
  --uui-button-bg-halftone: var(--white);
248
242
  --uui-button-caption-disabled: var(--night500);
249
243
 
244
+ --uui-text-info: var(--uui-info);
245
+ --uui-text-warning: var(--uui-warning);
246
+ --uui-text-error: var(--uui-error);
247
+ --uui-text-success: var(--uui-success);
250
248
  --uui-text-brand: var(--night900);
251
249
  --uui-text-primary: var(--night800);
252
250
  --uui-text-secondary: var(--night600);
253
251
  --uui-text-disabled: var(--night500);
254
252
  --uui-text-contrast: var(--night50);
253
+ --uui-text-white: var(--white);
255
254
 
256
255
  --uui-control-bg: var(--white);
257
256
  --uui-control-bg-checked: var(--uui-primary);
@@ -336,10 +335,6 @@
336
335
  --uui-btn-font: var(--font-semibold);
337
336
 
338
337
  /* LinkButton vars */
339
- --uui-link-button-text: var(--uui-primary);
340
- --uui-link-button-text-hover: var(--uui-primary-dark);
341
- --uui-link-button-text-active: var(--uui-primary-darkest);
342
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
343
338
  --uui-link-button-font: var(--font-semibold);
344
339
 
345
340
  /* DatePicker vars */
@@ -561,6 +556,7 @@
561
556
 
562
557
  /* MainMenu */
563
558
  --uui-main_menu-text: var(--uui-text-contrast);
559
+ --uui-main_menu-text-active: var(--uui-text-contrast);
564
560
  --uui-main_menu-bg: var(--uui-surface-contrast);
565
561
  --uui-main_menu-hover: var(--uui-surface-contrast-hover);
566
562
  --uui-main_menu-active: var(--uui-surface-contrast-active);
@@ -745,25 +741,25 @@
745
741
 
746
742
  /* ------------------------------------ */
747
743
 
748
- :global(.tooltip-contrast),
749
- :global(.tooltip-night800) {
744
+ .tooltip-contrast,
745
+ .tooltip-gray {
750
746
  --uui-tooltip-bg: var(--uui-surface-contrast);
751
747
  --uui-tooltip-text: var(--uui-contrast);
752
748
  }
753
749
 
754
- :global(.tooltip-default),
755
- :global(.tooltip-white) {
750
+ .tooltip-default,
751
+ .tooltip-white {
756
752
  --uui-tooltip-bg: var(--uui-surface);
757
753
  --uui-tooltip-text: var(--uui-text-primary);
758
754
  }
759
755
 
760
- :global(.tooltip-critical),
761
- :global(.tooltip-fire) {
756
+ .tooltip-critical,
757
+ .tooltip-fire {
762
758
  --uui-tooltip-bg: var(--uui-error-dark);
763
759
  --uui-tooltip-text: var(--uui-contrast);
764
760
  }
765
761
 
766
- :global(.button-sky), :global(.button-primary) {
762
+ .button-sky, .button-primary {
767
763
  --uui-btn-bg: var(--uui-primary);
768
764
  --uui-btn-bg-hover: var(--uui-primary-dark);
769
765
  --uui-btn-bg-active: var(--uui-primary-darkest);
@@ -780,7 +776,7 @@
780
776
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
781
777
  }
782
778
 
783
- :global(.button-accent), :global(.button-grass) {
779
+ .button-accent, .button-grass {
784
780
  --uui-btn-bg: var(--uui-accent);
785
781
  --uui-btn-bg-hover: var(--uui-accent-dark);
786
782
  --uui-btn-bg-active: var(--uui-accent-darkest);
@@ -797,7 +793,7 @@
797
793
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
798
794
  }
799
795
 
800
- :global(.button-fire), :global(.button-negative) {
796
+ .button-fire, .button-negative {
801
797
  --uui-btn-bg: var(--uui-negative);
802
798
  --uui-btn-bg-hover: var(--uui-negative-dark);
803
799
  --uui-btn-bg-active: var(--uui-negative-darkest);
@@ -814,24 +810,10 @@
814
810
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
815
811
  }
816
812
 
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) {
813
+ .button-night500,
814
+ .button-night600,
815
+ .button-gray,
816
+ .button-secondary {
835
817
  --uui-btn-bg: var(--uui-secondary);
836
818
  --uui-btn-bg-hover: var(--uui-secondary-dark);
837
819
  --uui-btn-bg-active: var(--uui-secondary-darkest);
@@ -848,7 +830,7 @@
848
830
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
849
831
  }
850
832
 
851
- :global(.button-white) {
833
+ .button-white {
852
834
  --uui-btn-bg: var(--uui-contrast);
853
835
  --uui-btn-bg-hover: var(--uui-color-white-800);
854
836
  --uui-btn-bg-active: var(--uui-color-white-900);
@@ -865,159 +847,281 @@
865
847
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
866
848
  }
867
849
 
868
- :global(.icon-button-sky),
869
- :global(.icon-button-info) {
850
+ .link-button-primary,
851
+ .link-button-sky {
852
+ --uui-link-button-text: var(--uui-primary);
853
+ --uui-link-button-text-hover: var(--uui-primary-dark);
854
+ --uui-link-button-text-active: var(--uui-primary-darkest);
855
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
856
+ }
857
+
858
+ .link-button-secondary,
859
+ .link-button-night600 {
860
+ --uui-link-button-text: var(--uui-secondary);
861
+ --uui-link-button-text-hover: var(--uui-secondary-dark);
862
+ --uui-link-button-text-active: var(--uui-secondary-darkest);
863
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
864
+ }
865
+
866
+ .link-button-contrast,
867
+ .link-button-night100 {
868
+ --uui-link-button-text: var(--night100);
869
+ --uui-link-button-text-hover: var(--uui-color-night100-800);
870
+ --uui-link-button-text-active: var(--uui-color-night100-900);
871
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
872
+ }
873
+
874
+ .link-button-grass {
875
+ --uui-link-button-text: var(--grass);
876
+ --uui-link-button-text-hover: var(--grass-dark);
877
+ --uui-link-button-text-active: var(--grass-darkest);
878
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
879
+ }
880
+
881
+ .link-button-sun {
882
+ --uui-link-button-text: var(--sun);
883
+ --uui-link-button-text-hover: var(--sun-dark);
884
+ --uui-link-button-text-active: var(--sun-darkest);
885
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
886
+ }
887
+
888
+ .link-button-fire {
889
+ --uui-link-button-text: var(--fire);
890
+ --uui-link-button-text-hover: var(--fire-dark);
891
+ --uui-link-button-text-active: var(--fire-darkest);
892
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
893
+ }
894
+
895
+ .link-button-cobalt {
896
+ --uui-link-button-text: var(--cobalt-30);
897
+ --uui-link-button-text-hover: var(--cobalt-40);
898
+ --uui-link-button-text-active: var(--cobalt-50);
899
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
900
+ }
901
+
902
+ .link-button-lavanda {
903
+ --uui-link-button-text: var(--lavanda-30);
904
+ --uui-link-button-text-hover: var(--lavanda-40);
905
+ --uui-link-button-text-active: var(--lavanda-50);
906
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
907
+ }
908
+
909
+ .link-button-fuchsia {
910
+ --uui-link-button-text: var(--fuchia-30);
911
+ --uui-link-button-text-hover: var(--fuchia-40);
912
+ --uui-link-button-text-active: var(--fuchia-50);
913
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
914
+ }
915
+
916
+ .link-button-white {
917
+ --uui-link-button-text: var(--white);
918
+ --uui-link-button-text-hover: var(--uui-color-white-800);
919
+ --uui-link-button-text-active: var(--uui-color-white-900);
920
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
921
+ }
922
+
923
+ .link-button-night50 {
924
+ --uui-link-button-text: var(--night50);
925
+ --uui-link-button-text-hover: var(--uui-color-night50-800);
926
+ --uui-link-button-text-active: var(--uui-color-night50-900);
927
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
928
+ }
929
+
930
+ .link-button-night200 {
931
+ --uui-link-button-text: var(--night200);
932
+ --uui-link-button-text-hover: var(--uui-color-night200-800);
933
+ --uui-link-button-text-active: var(--uui-color-night200-900);
934
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
935
+ }
936
+
937
+ .link-button-night300 {
938
+ --uui-link-button-text: var(--night300);
939
+ --uui-link-button-text-hover: var(--uui-color-night300-800);
940
+ --uui-link-button-text-active: var(--uui-color-night300-900);
941
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
942
+ }
943
+
944
+ .link-button-night400 {
945
+ --uui-link-button-text: var(--night400);
946
+ --uui-link-button-text-hover: var(--uui-color-night400-800);
947
+ --uui-link-button-text-active: var(--uui-color-night400-900);
948
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
949
+ }
950
+
951
+ .link-button-night500 {
952
+ --uui-link-button-text: var(--night500);
953
+ --uui-link-button-text-hover: var(--uui-color-night500-800);
954
+ --uui-link-button-text-active: var(--uui-color-night500-900);
955
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
956
+ }
957
+
958
+ .link-button-night700 {
959
+ --uui-link-button-text: var(--night700);
960
+ --uui-link-button-text-hover: var(--uui-color-night700-800);
961
+ --uui-link-button-text-active: var(--uui-color-night700-900);
962
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
963
+ }
964
+
965
+ .link-button-night800 {
966
+ --uui-link-button-text: var(--night800);
967
+ --uui-link-button-text-hover: var(--uui-color-night800-800);
968
+ --uui-link-button-text-active: var(--uui-color-night800-900);
969
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
970
+ }
971
+
972
+ .link-button-night900 {
973
+ --uui-link-button-text: var(--night900);
974
+ --uui-link-button-text-hover: var(--uui-color-night900-800);
975
+ --uui-link-button-text-active: var(--uui-color-night900-900);
976
+ --uui-link-button-text-disabled: var(--uui-icon-disabled);
977
+ }
978
+
979
+ .icon-button-sky,
980
+ .icon-button-info {
870
981
  --uui-icon-btn: var(--uui-info);
871
982
  --uui-icon-btn-hover: var(--uui-info-dark);
872
983
  --uui-icon-btn-active: var(--uui-info-darkest);
873
984
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
874
985
  }
875
986
 
876
- :global(.icon-button-grass),
877
- :global(.icon-button-success) {
987
+ .icon-button-grass,
988
+ .icon-button-success {
878
989
  --uui-icon-btn: var(--uui-success);
879
990
  --uui-icon-btn-hover: var(--uui-success-dark);
880
991
  --uui-icon-btn-active: var(--uui-success-darkest);
881
992
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
882
993
  }
883
994
 
884
- :global(.icon-button-sun),
885
- :global(.icon-button-warning) {
995
+ .icon-button-sun,
996
+ .icon-button-warning {
886
997
  --uui-icon-btn: var(--uui-warning);
887
998
  --uui-icon-btn-hover: var(--uui-warning-dark);
888
999
  --uui-icon-btn-active: var(--uui-warning-darkest);
889
1000
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
890
1001
  }
891
1002
 
892
- :global(.icon-button-fire),
893
- :global(.icon-button-error) {
1003
+ .icon-button-fire,
1004
+ .icon-button-error {
894
1005
  --uui-icon-btn: var(--uui-error);
895
1006
  --uui-icon-btn-hover: var(--uui-error-dark);
896
1007
  --uui-icon-btn-active: var(--uui-error-darkest);
897
1008
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
898
1009
  }
899
1010
 
900
- :global(.icon-button-carbon) {
901
- --uui-icon-btn: var(--uui-color-carbon-700);
902
- --uui-icon-btn-hover: var(--uui-color-carbon-800);
903
- --uui-icon-btn-active: var(--uui-color-carbon-900);
1011
+ .icon-button-cobalt {
1012
+ --uui-icon-btn: var(--cobalt-30);
1013
+ --uui-icon-btn-hover: var(--cobalt-40);
1014
+ --uui-icon-btn-active: var(--cobalt-50);
904
1015
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
905
1016
  }
906
1017
 
907
- :global(.icon-button-cobalt) {
908
- --uui-icon-btn: var(--uui-color-cobalt-700);
909
- --uui-icon-btn-hover: var(--uui-color-cobalt-800);
910
- --uui-icon-btn-active: var(--uui-color-cobalt-900);
1018
+ .icon-button-lavanda {
1019
+ --uui-icon-btn: var(--lavanda-30);
1020
+ --uui-icon-btn-hover: var(--lavanda-40);
1021
+ --uui-icon-btn-active: var(--lavanda-50);
911
1022
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
912
1023
  }
913
1024
 
914
- :global(.icon-button-lavanda) {
915
- --uui-icon-btn: var(--uui-color-lavanda-700);
916
- --uui-icon-btn-hover: var(--uui-color-lavanda-800);
917
- --uui-icon-btn-active: var(--uui-color-lavanda-900);
1025
+ .icon-button-fuchsia {
1026
+ --uui-icon-btn: var(--fuchia-30);
1027
+ --uui-icon-btn-hover: var(--fuchia-40);
1028
+ --uui-icon-btn-active: var(--fuchia-50);
918
1029
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
919
1030
  }
920
1031
 
921
- :global(.icon-button-fuchsia) {
922
- --uui-icon-btn: var(--uui-color-fuchsia-700);
923
- --uui-icon-btn-hover: var(--uui-color-fuchsia-800);
924
- --uui-icon-btn-active: var(--uui-color-fuchsia-900);
925
- --uui-icon-btn-disabled: var(--uui-icon-disabled);
926
- }
927
-
928
- :global(.icon-button-white) {
1032
+ .icon-button-white {
929
1033
  --uui-icon-btn: var(--white);
930
1034
  --uui-icon-btn-hover: var(--uui-color-white-800);
931
1035
  --uui-icon-btn-active: var(--uui-color-white-900);
932
1036
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
933
1037
  }
934
1038
 
935
- :global(.icon-button-night200) {
936
- --uui-icon-btn: var(--gray20);
1039
+ .icon-button-night200 {
1040
+ --uui-icon-btn: var(--night200);
937
1041
  --uui-icon-btn-hover: var(--uui-color-night200-800);
938
1042
  --uui-icon-btn-active: var(--uui-color-night200-900);
939
1043
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
940
1044
  }
941
1045
 
942
- :global(.icon-button-night300) {
943
- --uui-icon-btn: var(--gray30);
1046
+ .icon-button-night300 {
1047
+ --uui-icon-btn: var(--night300);
944
1048
  --uui-icon-btn-hover: var(--uui-color-night300-800);
945
1049
  --uui-icon-btn-active: var(--uui-color-night300-900);
946
1050
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
947
1051
  }
948
1052
 
949
- :global(.icon-button-night400) {
950
- --uui-icon-btn: var(--gray40);
1053
+ .icon-button-night400 {
1054
+ --uui-icon-btn: var(--night400);
951
1055
  --uui-icon-btn-hover: var(--uui-color-night400-800);
952
1056
  --uui-icon-btn-active: var(--uui-color-night400-900);
953
1057
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
954
1058
  }
955
1059
 
956
- :global(.icon-button-night500),
957
- :global(.icon-button-secondary) {
958
- --uui-icon-btn: var(--gray50);
1060
+ .icon-button-night500 {
1061
+ --uui-icon-btn: var(--night500);
959
1062
  --uui-icon-btn-hover: var(--uui-color-night500-800);
960
1063
  --uui-icon-btn-active: var(--uui-color-night500-900);
961
1064
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
962
1065
  }
963
1066
 
964
- :global(.icon-button-night600),
965
- :global(.icon-button-default) {
966
- --uui-icon-btn: var(--uui-icon);
1067
+ .icon-button-night600,
1068
+ .icon-button-secondary,
1069
+ .icon-button-default {
1070
+ --uui-icon-btn: var(--night600);
967
1071
  --uui-icon-btn-hover: var(--uui-icon-hover);
968
1072
  --uui-icon-btn-active: var(--uui-icon-active);
969
1073
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
970
1074
  }
971
1075
 
972
- :global(.notification-card-sun),
973
- :global(.notification-card-warning) {
1076
+ .notification-card-sun,
1077
+ .notification-card-warning {
974
1078
  --uui-notification-card-fill: var(--uui-warning);
975
1079
  --uui-notification-card-border: var(--uui-warning);
976
1080
  --uui-notification-card-bg: var(--uui-surface);
977
1081
  --uui-notification-card-text: var(--uui-text-primary);
978
1082
  }
979
1083
 
980
- :global(.notification-card-success),
981
- :global(.notification-card-grass) {
1084
+ .notification-card-success,
1085
+ .notification-card-grass {
982
1086
  --uui-notification-card-fill: var(--uui-success);
983
1087
  --uui-notification-card-border: var(--uui-success);
984
1088
  --uui-notification-card-bg: var(--uui-surface);
985
1089
  --uui-notification-card-text: var(--uui-text-primary);
986
1090
  }
987
1091
 
988
- :global(.notification-card-info),
989
- :global(.notification-card-sky) {
1092
+ .notification-card-info,
1093
+ .notification-card-sky {
990
1094
  --uui-notification-card-fill: var(--uui-info);
991
1095
  --uui-notification-card-border: var(--uui-info);
992
1096
  --uui-notification-card-bg: var(--uui-surface);
993
1097
  --uui-notification-card-text: var(--uui-text-primary);
994
1098
  }
995
1099
 
996
- :global(.notification-card-error),
997
- :global(.notification-card-fire) {
1100
+ .notification-card-error,
1101
+ .notification-card-fire {
998
1102
  --uui-notification-card-fill: var(--uui-error);
999
1103
  --uui-notification-card-border: var(--uui-error);
1000
1104
  --uui-notification-card-bg: var(--uui-surface);
1001
1105
  --uui-notification-card-text: var(--uui-text-primary);
1002
1106
  }
1003
1107
 
1004
- :global(.notification-card-night600) {
1108
+ .notification-card-night600 {
1005
1109
  --uui-notification-card-fill: var(--night600);
1006
1110
  --uui-notification-card-border: var(--night600);
1007
1111
  --uui-notification-card-bg: var(--uui-surface);
1008
1112
  --uui-notification-card-text: var(--uui-text-primary);
1009
1113
  }
1010
1114
 
1011
- :global(.alert-error),
1012
- :global(.alert-fire) {
1115
+ .alert-error,
1116
+ .alert-fire {
1013
1117
  --uui-alert-text: var(--uui-text-primary);
1014
1118
  --uui-alert-bg: #F5E5E9;
1015
1119
  --uui-alert-border: var(--uui-error);
1016
1120
  --uui-alert-icon: var(--uui-error);
1017
1121
  }
1018
1122
 
1019
- :global(.alert-warning),
1020
- :global(.alert-sun) {
1123
+ .alert-warning,
1124
+ .alert-sun {
1021
1125
  --uui-alert-text: var(--uui-text-primary);
1022
1126
  --uui-alert-bg: #F6EEE1;
1023
1127
  --uui-alert-border: var(--uui-warning);
@@ -1025,23 +1129,23 @@
1025
1129
  }
1026
1130
 
1027
1131
 
1028
- :global(.alert-success),
1029
- :global(.alert-grass) {
1132
+ .alert-success,
1133
+ .alert-grass {
1030
1134
  --uui-alert-text: var(--uui-text-primary);
1031
1135
  --uui-alert-bg: #E7EEE1;
1032
1136
  --uui-alert-border: var(--uui-success);
1033
1137
  --uui-alert-icon: var(--uui-success);
1034
1138
  }
1035
1139
 
1036
- :global(.alert-info),
1037
- :global(.alert-sky) {
1140
+ .alert-info,
1141
+ .alert-sky {
1038
1142
  --uui-alert-text: var(--uui-text-primary);
1039
1143
  --uui-alert-bg: #DCEDF6;
1040
1144
  --uui-alert-border: var(--uui-info);
1041
1145
  --uui-alert-icon: var(--uui-info);
1042
1146
  }
1043
1147
 
1044
- :global(.badge-default), :global(.badge-night300) {
1148
+ .badge-default, .badge-night300 {
1045
1149
  --uui-badge-bg: var(--night300);
1046
1150
  --uui-badge-bg-hover: var(--night400);
1047
1151
  --uui-badge-caption-solid: var(--uui-text-primary);
@@ -1054,7 +1158,7 @@
1054
1158
  --uui-badge-caption-halftone: var(--uui-text-primary);
1055
1159
  }
1056
1160
 
1057
- :global(.badge-info), :global(.badge-sky) {
1161
+ .badge-info, .badge-sky {
1058
1162
  --uui-badge-bg: var(--uui-info);
1059
1163
  --uui-badge-bg-hover: var(--uui-info-dark);
1060
1164
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1067,7 +1171,7 @@
1067
1171
  --uui-badge-caption-halftone: var(--uui-info-darkest);
1068
1172
  }
1069
1173
 
1070
- :global(.badge-success), :global(.badge-grass) {
1174
+ .badge-success, .badge-grass {
1071
1175
  --uui-badge-bg: var(--uui-success);
1072
1176
  --uui-badge-bg-hover: var(--uui-success-dark);
1073
1177
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1080,7 +1184,7 @@
1080
1184
  --uui-badge-caption-halftone: var(--uui-success-darkest);
1081
1185
  }
1082
1186
 
1083
- :global(.badge-warning), :global(.badge-sun) {
1187
+ .badge-warning, .badge-sun {
1084
1188
  --uui-badge-bg: var(--uui-warning);
1085
1189
  --uui-badge-bg-hover: var(--uui-warning-dark);
1086
1190
  --uui-badge-caption-solid: var(--uui-text-primary);
@@ -1093,7 +1197,7 @@
1093
1197
  --uui-badge-caption-halftone: var(--uui-warning-darkest);
1094
1198
  }
1095
1199
 
1096
- :global(.badge-error), :global(.badge-fire) {
1200
+ .badge-error, .badge-fire {
1097
1201
  --uui-badge-bg: var(--uui-error);
1098
1202
  --uui-badge-bg-hover: var(--uui-error-dark);
1099
1203
  --uui-badge-caption-solid: var(--white);
@@ -1106,46 +1210,46 @@
1106
1210
  --uui-badge-caption-halftone: var(--uui-error-darkest);
1107
1211
  }
1108
1212
 
1109
- :global(.badge-cobalt) {
1110
- --uui-badge-bg: var(--uui-color-cobalt-700);
1111
- --uui-badge-bg-hover: var(--uui-color-cobalt-800);
1213
+ .badge-cobalt {
1214
+ --uui-badge-bg: var(--cobalt-30);
1215
+ --uui-badge-bg-hover: var(--cobalt-40);
1112
1216
  --uui-badge-caption-solid: var(--uui-text-contrast);
1113
1217
  --uui-badge-count-bg: var(--white);
1114
1218
  --uui-badge-count: var(--uui-text-secondary);
1115
- --uui-badge-bg-halftone: var(--uui-color-cobalt-500);
1116
- --uui-badge-bg-halftone-hover: var(--uui-color-cobalt-600);
1117
- --uui-badge-border-halftone: var(--uui-color-cobalt-700);
1118
- --uui-badge-border-halftone-hover: var(--uui-color-cobalt-800);
1119
- --uui-badge-caption-halftone: var(--uui-color-cobalt-900);
1219
+ --uui-badge-bg-halftone: var(--cobalt-10);
1220
+ --uui-badge-bg-halftone-hover: var(--cobalt-20);
1221
+ --uui-badge-border-halftone: var(--cobalt-30);
1222
+ --uui-badge-border-halftone-hover: var(--cobalt-40);
1223
+ --uui-badge-caption-halftone: var(--cobalt-50);
1120
1224
  }
1121
1225
 
1122
- :global(.badge-lavanda) {
1123
- --uui-badge-bg: var(--uui-color-lavanda-700);
1124
- --uui-badge-bg-hover: var(--uui-color-lavanda-800);
1226
+ .badge-lavanda {
1227
+ --uui-badge-bg: var(--lavanda-30);
1228
+ --uui-badge-bg-hover: var(--lavanda-40);
1125
1229
  --uui-badge-caption-solid: var(--white);
1126
1230
  --uui-badge-count-bg: var(--white);
1127
1231
  --uui-badge-count: var(--uui-text-secondary);
1128
- --uui-badge-bg-halftone: var(--uui-color-lavanda-500);
1129
- --uui-badge-bg-halftone-hover: var(--uui-color-lavanda-600);
1130
- --uui-badge-border-halftone: var(--uui-color-lavanda-700);
1131
- --uui-badge-border-halftone-hover: var(--uui-color-lavanda-800);
1132
- --uui-badge-caption-halftone: var(--uui-color-lavanda-900);
1232
+ --uui-badge-bg-halftone: var(--lavanda-10);
1233
+ --uui-badge-bg-halftone-hover: var(--lavanda-20);
1234
+ --uui-badge-border-halftone: var(--lavanda-30);
1235
+ --uui-badge-border-halftone-hover: var(--lavanda-40);
1236
+ --uui-badge-caption-halftone: var(--lavanda-50);
1133
1237
  }
1134
1238
 
1135
- :global(.badge-fuchsia) {
1136
- --uui-badge-bg: var(--uui-color-fuchsia-700);
1137
- --uui-badge-bg-hover: var(--uui-color-fuchsia-800);
1239
+ .badge-fuchsia {
1240
+ --uui-badge-bg: var(--fuchia-30);
1241
+ --uui-badge-bg-hover: var(--fuchia-40);
1138
1242
  --uui-badge-caption-solid: var(--uui-text-contrast);
1139
1243
  --uui-badge-count-bg: var(--white);
1140
1244
  --uui-badge-count: var(--uui-text-secondary);
1141
- --uui-badge-bg-halftone: var(--uui-color-fuchsia-500);
1142
- --uui-badge-bg-halftone-hover: var(--uui-color-fuchsia-600);
1143
- --uui-badge-border-halftone: var(--uui-color-fuchsia-700);
1144
- --uui-badge-border-halftone-hover: var(--uui-color-fuchsia-800);
1145
- --uui-badge-caption-halftone: var(--uui-color-fuchsia-900);
1245
+ --uui-badge-bg-halftone: var(--fuchia-10);
1246
+ --uui-badge-bg-halftone-hover: var(--fuchia-20);
1247
+ --uui-badge-border-halftone: var(--fuchia-30);
1248
+ --uui-badge-border-halftone-hover: var(--fuchia-40);
1249
+ --uui-badge-caption-halftone: var(--fuchia-50);
1146
1250
  }
1147
1251
 
1148
- :global(.badge-white) {
1252
+ .badge-white {
1149
1253
  --uui-badge-bg: var(--white);
1150
1254
  --uui-badge-bg-hover: var(--gray5);
1151
1255
  --uui-badge-caption-solid: var(--night800);
@@ -1158,7 +1262,7 @@
1158
1262
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1159
1263
  }
1160
1264
 
1161
- :global(.badge-night200) {
1265
+ .badge-night200 {
1162
1266
  --uui-badge-bg: var(--uui-color-night200-700);
1163
1267
  --uui-badge-bg-hover: var(--uui-color-night200-800);
1164
1268
  --uui-badge-caption-solid: var(--night800);
@@ -1171,7 +1275,7 @@
1171
1275
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1172
1276
  }
1173
1277
 
1174
- :global(.badge-night300) {
1278
+ .badge-night300 {
1175
1279
  --uui-badge-bg: var(--uui-color-night300-700);
1176
1280
  --uui-badge-bg-hover: var(--uui-color-night300-800);
1177
1281
  --uui-badge-caption-solid: var(--night800);
@@ -1184,7 +1288,7 @@
1184
1288
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1185
1289
  }
1186
1290
 
1187
- :global(.badge-night400) {
1291
+ .badge-night400 {
1188
1292
  --uui-badge-bg: var(--uui-color-night400-700);
1189
1293
  --uui-badge-bg-hover: var(--uui-color-night400-800);
1190
1294
  --uui-badge-caption-solid: var(--night800);
@@ -1197,7 +1301,7 @@
1197
1301
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1198
1302
  }
1199
1303
 
1200
- :global(.badge-night500) {
1304
+ .badge-night500 {
1201
1305
  --uui-badge-bg: var(--uui-color-night500-700);
1202
1306
  --uui-badge-bg-hover: var(--uui-color-night500-800);
1203
1307
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1210,7 +1314,7 @@
1210
1314
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1211
1315
  }
1212
1316
 
1213
- :global(.badge-night600) {
1317
+ .badge-night600 {
1214
1318
  --uui-badge-bg: var(--uui-color-night600-700);
1215
1319
  --uui-badge-bg-hover: var(--uui-color-night600-800);
1216
1320
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1223,7 +1327,7 @@
1223
1327
  --uui-badge-caption-halftone: var(--uui-text-secondary);
1224
1328
  }
1225
1329
 
1226
- :global(.badge-violet) {
1330
+ .badge-violet {
1227
1331
  --uui-badge-bg: var(--lavanda-30);
1228
1332
  --uui-badge-bg-hover: var(--lavanda-40);
1229
1333
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1236,7 +1340,7 @@
1236
1340
  --uui-badge-caption-halftone: var(--lavanda-50);
1237
1341
  }
1238
1342
 
1239
- :global(.badge-orange) {
1343
+ .badge-orange {
1240
1344
  --uui-badge-bg: var(--orange-30);
1241
1345
  --uui-badge-bg-hover: var(--orange-40);
1242
1346
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1249,7 +1353,7 @@
1249
1353
  --uui-badge-caption-halftone: var(--orange-50);
1250
1354
  }
1251
1355
 
1252
- :global(.badge-purple) {
1356
+ .badge-purple {
1253
1357
  --uui-badge-bg: var(--purple-30);
1254
1358
  --uui-badge-bg-hover: var(--purple-40);
1255
1359
  --uui-badge-caption-solid: var(--uui-text-contrast);
@@ -1262,101 +1366,125 @@
1262
1366
  --uui-badge-caption-halftone: var(--purple-50);
1263
1367
  }
1264
1368
 
1265
- :global(.informer-default) {
1369
+ .informer-default {
1266
1370
  --uui-informer-bg: var(--night300);
1267
1371
  --uui-informer-caption: var(--night600);
1268
1372
  }
1269
1373
 
1270
- :global(.informer-focus) {
1374
+ .informer-focus {
1271
1375
  --uui-informer-bg: var(--fire);
1272
1376
  --uui-informer-caption: var(--uui-contrast);
1273
1377
  }
1274
1378
 
1275
- :global(.informer-white) {
1379
+ .informer-white {
1276
1380
  --uui-informer-bg: var(--uui-surface);
1277
1381
  --uui-informer-caption: var(--uui-text-secondary);
1278
1382
  }
1279
1383
 
1280
- :global(.uui-text-brand),
1281
- :global(.uui-text-night900) {
1384
+ .uui-text-info,
1385
+ .uui-text-sky {
1386
+ --uui-text: var(--uui-text-info);
1387
+ }
1388
+
1389
+ .uui-text-success,
1390
+ .uui-text-grass {
1391
+ --uui-text: var(--uui-text-success);
1392
+ }
1393
+
1394
+ .uui-text-warning,
1395
+ .uui-text-sun {
1396
+ --uui-text: var(--uui-text-warning);
1397
+ }
1398
+
1399
+ .uui-text-error,
1400
+ .uui-text-fire {
1401
+ --uui-text: var(--uui-text-error);
1402
+ }
1403
+
1404
+ .uui-text-brand,
1405
+ .uui-text-night900 {
1282
1406
  --uui-text: var(--uui-text-brand);
1283
1407
  }
1284
1408
 
1285
- :global(.uui-text-primary),
1286
- :global(.uui-text-night800) {
1409
+ .uui-text-primary,
1410
+ .uui-text-night800 {
1287
1411
  --uui-text: var(--uui-text-primary);
1288
1412
  }
1289
1413
 
1290
- :global(.uui-text-night700) {
1414
+ .uui-text-night700 {
1291
1415
  --uui-text: var(--night700);
1292
1416
  }
1293
1417
 
1294
- :global(.uui-text-secondary),
1295
- :global(.uui-text-night600) {
1418
+ .uui-text-secondary,
1419
+ .uui-text-night600 {
1296
1420
  --uui-text: var(--uui-text-secondary);
1297
1421
  }
1298
1422
 
1299
- :global(.uui-text-disabled),
1300
- :global(.uui-text-night500) {
1423
+ .uui-text-disabled,
1424
+ .uui-text-night500 {
1301
1425
  --uui-text: var(--uui-text-disabled);
1302
1426
  }
1303
1427
 
1304
- :global(.uui-text-night400) {
1428
+ .uui-text-night400 {
1305
1429
  --uui-text: var(--night400);
1306
1430
  }
1307
1431
 
1308
- :global(.uui-text-night300) {
1432
+ .uui-text-night300 {
1309
1433
  --uui-text: var(--night300);
1310
1434
  }
1311
1435
 
1312
- :global(.uui-text-contrast),
1313
- :global(.uui-text-night50) {
1436
+ .uui-text-contrast,
1437
+ .uui-text-night50 {
1314
1438
  --uui-text: var(--uui-text-contrast);
1315
1439
  }
1316
1440
 
1317
- :global(.uui-font-regular),
1318
- :global(.uui-font-sans) {
1441
+ .uui-text-white {
1442
+ --uui-text: var(--uui-text-white);
1443
+ }
1444
+
1445
+ .uui-font-regular,
1446
+ .uui-font-sans {
1319
1447
  --uui-text-font: var(--font-regular);
1320
1448
  }
1321
1449
 
1322
- :global(.uui-font-semibold),
1323
- :global(.uui-font-sans-semibold) {
1450
+ .uui-font-semibold,
1451
+ .uui-font-sans-semibold {
1324
1452
  --uui-text-font: var(--font-semibold);
1325
1453
  }
1326
1454
 
1327
- :global(.uui-font-sans-light) {
1455
+ .uui-font-sans-light {
1328
1456
  --uui-text-font: var(--font-light);
1329
1457
  }
1330
1458
 
1331
- :global(.dropdown-container-white) {
1459
+ .dropdown-container-white {
1332
1460
  --uui-dropdown-container-bg: var(--white);
1333
1461
  }
1334
1462
 
1335
- :global(.dropdown-container-night700) {
1463
+ .dropdown-container-night700 {
1336
1464
  --uui-dropdown-container-bg: var(--night700);
1337
1465
  }
1338
1466
 
1339
- :global(.flex-row-background-white) {
1467
+ .flex-row-background-white {
1340
1468
  --uui-flex-row-bg: var(--uui-surface);
1341
1469
  }
1342
1470
 
1343
- :global(.flex-row-background-night50) {
1471
+ .flex-row-background-night50 {
1344
1472
  --uui-flex-row-bg: var(--night50);
1345
1473
  }
1346
1474
 
1347
- :global(.flex-row-background-night100) {
1475
+ .flex-row-background-night100 {
1348
1476
  --uui-flex-row-bg: var(--night100);
1349
1477
  }
1350
1478
 
1351
- :global(.flex-row-background-none) {
1479
+ .flex-row-background-none {
1352
1480
  --uui-flex-row-bg: transparent;
1353
1481
  }
1354
1482
 
1355
- :global(.panel-white) {
1483
+ .panel-white {
1356
1484
  --uui-panel-bg: var(--uui-surface);
1357
1485
  }
1358
1486
 
1359
- :global(.panel-night50) {
1487
+ .panel-night50 {
1360
1488
  --uui-panel-bg: var(--night50);
1361
1489
  }
1362
1490
  }