@epam/assets 5.5.6 → 5.6.1-patch.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/css/theme/theme_electric.css +117 -116
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +129 -128
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +134 -125
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +113 -113
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css +15 -14
  10. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  11. package/package.json +2 -2
  12. package/theme/theme_electric.scss +2 -211
  13. package/theme/theme_loveship.scss +2 -209
  14. package/theme/theme_loveship_dark.scss +21 -219
  15. package/theme/theme_promo.scss +2 -209
  16. package/theme/theme_vanilla_thunder.scss +15 -14
  17. package/theme/tokens/_theme_electric.scss +263 -0
  18. package/theme/tokens/_theme_loveship.scss +261 -0
  19. package/theme/tokens/_theme_loveship_dark.scss +261 -0
  20. package/theme/tokens/_theme_promo.scss +261 -0
package/theme/theme_promo.scss CHANGED
@@ -1,7 +1,9 @@
1
+ @use './tokens/_theme_promo.scss' as tokens;
1
2
  /* Name convention */
2
3
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
4
 
4
5
  @mixin theme-promo {
6
+ @include tokens.theme-tokens;
5
7
  --uui-font: 'Source Sans Pro', sans-serif;
6
8
  --uui-font-mono: 'Roboto Mono', monospace;
7
9
 
@@ -9,248 +11,39 @@
9
11
  --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
10
12
  --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
11
13
 
12
- --gray5: #FAFAFC;
13
- --gray10: #F5F6FA;
14
- --gray20: #EBEDF5;
15
- --gray30: #E1E3EB;
16
- --gray40: #CED0DB;
17
- --gray50: #ACAFBF;
18
- --gray60: #6C6F80;
19
- --gray70: #474A59;
20
- --gray80: #303240;
21
- --gray90: #1D1E26;
22
-
23
- --blue-5: #F5FDFF;
24
- --blue-10: #D6F2FF;
25
- --blue-20: #99DDFF;
26
- --blue-50: #007BBD;
27
- --blue-60: #006AA3;
28
- --blue-70: #005685;
29
-
30
- --green-5: #FCFFF5;
31
- --green-10: #EEFFCC;
32
- --green-20: #CFF486;
33
- --green-50: #65A300;
34
- --green-60: #528500;
35
- --green-70: #446600;
36
-
37
- --amber-5: #FFFCF5;
38
- --amber-10: #FFF2CC;
39
- --amber-20: #FFE38F;
40
- --amber-50: #FFC000;
41
- --amber-60: #DB9D00;
42
- --amber-70: #9F6B04;
43
-
44
- --red-5: #FEF7F6;
45
- --red-10: #FADED9;
46
- --red-20: #F5B5A8;
47
- --red-50: #DB3A1A;
48
- --red-60: #C03316;
49
- --red-70: #A02B13;
50
-
51
- --white: #FFFFFF;
52
-
53
- --yellow-5: #FFFFF5;
54
- --yellow-10: #FFFFE5;
55
- --yellow-20: #FFFCA4;
56
- --yellow-50: #FDD63B;
57
- --yellow-60: #EDBE02;
58
- --yellow-70: #BC7E02;
59
-
60
- --orange-5: #FEF8F4;
61
- --orange-10: #FFE8D7;
62
- --orange-20: #FFCCA7;
63
- --orange-50: #FF8B3E;
64
- --orange-60: #F76B0D;
65
- --orange-70: #BD4B00;
66
-
67
- --fuchsia-5: #FFF7FB;
68
- --fuchsia-10: #F9D8E7;
69
- --fuchsia-20: #EDADC8;
70
- --fuchsia-50: #EA4386;
71
- --fuchsia-60: #D61E68;
72
- --fuchsia-70: #AE1955;
73
-
74
- --purple-5: #FDF6FE;
75
- --purple-10: #F2CCFA;
76
- --purple-20: #E79DF5;
77
- --purple-50: #B114D1;
78
- --purple-60: #860F9E;
79
- --purple-70: #5E0B6F;
80
-
81
- --violet-5: #F8F6FE;
82
- --violet-10: #DBCCFA;
83
- --violet-20: #BB9DF5;
84
- --violet-50: #773CEC;
85
- --violet-60: #5514D6;
86
- --violet-70: #40109E;
87
-
88
- --cobalt-5: #F8FAFF;
89
- --cobalt-10: #D9E2FC;
90
- --cobalt-20: #AEC0F5;
91
- --cobalt-50: #0F98FF;
92
- --cobalt-60: #006FE5;
93
- --cobalt-70: #0954A5;
94
-
95
- --cyan-5: #F6FEFE;
96
- --cyan-10: #D1FAFA;
97
- --cyan-20: #AAEEEE;
98
- --cyan-50: #14CCCC;
99
- --cyan-60: #12B5B5;
100
- --cyan-70: #0B6F6F;
101
-
102
- --mint-5: #F2FCF5;
103
- --mint-10: #DDF3E4;
104
- --mint-20: #B4DFC4;
105
- --mint-50: #4FC48C;
106
- --mint-60: #31AA70;
107
- --mint-70: #236E4A;
108
-
109
14
  /* core variables start */
110
15
 
111
16
  /* brand colors */
112
17
 
113
- --uui-primary-5: var(--blue-5);
114
- --uui-primary-10: var(--blue-10);
115
- --uui-primary-20: var(--blue-20);
116
- --uui-primary-50: var(--blue-50);
117
- --uui-primary-60: var(--blue-60);
118
- --uui-primary-70: var(--blue-70);
119
18
  --uui-primary-contrast: var(--white);
120
19
 
121
- --uui-accent-5: var(--green-5);
122
- --uui-accent-10: var(--green-10);
123
- --uui-accent-20: var(--green-20);
124
- --uui-accent-50: var(--green-50);
125
- --uui-accent-60: var(--green-60);
126
- --uui-accent-70: var(--green-70);
127
20
  --uui-accent-contrast: var(--white);
128
21
 
129
- --uui-secondary-5: var(--gray10);
130
- --uui-secondary-10: var(--gray20);
131
- --uui-secondary-20: var(--gray30);
132
- --uui-secondary-50: var(--gray60);
133
- --uui-secondary-60: var(--gray70);
134
- --uui-secondary-70: var(--gray80);
135
22
  --uui-secondary-contrast: var(--white);
136
23
 
137
- --uui-critical-5: var(--red-5);
138
- --uui-critical-10: var(--red-10);
139
- --uui-critical-20: var(--red-20);
140
- --uui-critical-50: var(--red-50);
141
- --uui-critical-60: var(--red-60);
142
- --uui-critical-70: var(--red-70);
143
24
  --uui-critical-contrast: var(--white);
144
25
 
145
26
  /* semantic colors */
146
27
 
147
- --uui-info-5: var(--blue-5);
148
- --uui-info-10: var(--blue-10);
149
- --uui-info-20: var(--blue-20);
150
- --uui-info-50: var(--blue-50);
151
- --uui-info-60: var(--blue-60);
152
- --uui-info-70: var(--blue-70);
153
28
  --uui-info-contrast: var(--white);
154
29
 
155
- --uui-success-5: var(--green-5);
156
- --uui-success-10: var(--green-10);
157
- --uui-success-20: var(--green-20);
158
- --uui-success-50: var(--green-50);
159
- --uui-success-60: var(--green-60);
160
- --uui-success-70: var(--green-70);
161
30
  --uui-success-contrast: var(--white);
162
31
 
163
- --uui-warning-5: var(--amber-5);
164
- --uui-warning-10: var(--amber-10);
165
- --uui-warning-20: var(--amber-20);
166
- --uui-warning-50: var(--amber-50);
167
- --uui-warning-60: var(--amber-60);
168
- --uui-warning-70: var(--amber-70);
169
32
  --uui-warning-contrast: var(--gray80);
170
33
 
171
- --uui-error-5: var(--red-5);
172
- --uui-error-10: var(--red-10);
173
- --uui-error-20: var(--red-20);
174
- --uui-error-50: var(--red-50);
175
- --uui-error-60: var(--red-60);
176
- --uui-error-70: var(--red-70);
177
34
  --uui-error-contrast: var(--white);
178
35
 
179
- --uui-neutral-0: #FFFFFF;
180
- --uui-neutral-5: var(--gray5);
181
- --uui-neutral-10: var(--gray10);
182
- --uui-neutral-20: var(--gray20);
183
- --uui-neutral-30: var(--gray30);
184
- --uui-neutral-40: var(--gray40);
185
- --uui-neutral-50: var(--gray50);
186
- --uui-neutral-60: var(--gray60);
187
- --uui-neutral-70: var(--gray70);
188
- --uui-neutral-80: var(--gray80);
189
- --uui-neutral-90: var(--gray90);
190
- --uui-neutral-100: #000000;
191
-
192
36
  /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */
193
37
 
194
- --uui-app-bg: var(--uui-neutral-10);
195
- --uui-overlay: rgba(29, 30, 38, 0.8);
196
-
197
- --uui-surface-sunken: var(--uui-neutral-5);
198
- --uui-surface-main: var(--uui-neutral-0);
199
- --uui-surface-higher: var(--uui-neutral-10);
200
- --uui-surface-highest: var(--uui-neutral-20);
201
-
202
- --uui-divider: var(--uui-neutral-40);
203
- --uui-divider-light: var(--uui-neutral-30);
204
-
205
- --uui-text-brand: var(--uui-neutral-90);
206
- --uui-text-primary: var(--uui-neutral-80);
207
- --uui-text-secondary: var(--uui-neutral-70);
208
- --uui-text-tertiary: var(--uui-neutral-60);
209
- --uui-text-disabled: var(--uui-neutral-50);
210
-
211
- --uui-text-info: var(--uui-info-70);
212
- --uui-text-warning: var(--uui-warning-70);
213
- --uui-text-critical: var(--uui-critical-70);
214
- --uui-text-success: var(--uui-success-70);
215
-
216
38
  /* not accepted part */
217
39
 
218
40
  /* control specific */
219
41
 
220
- --uui-link: var(--blue-50);
221
- --uui-link-soft: var(--blue-5);
222
- --uui-link-hover: var(--blue-60);
223
- --uui-link-visited: #8018A0;
224
42
  --uui-link-visited-hover: #601278;
225
- --uui-link-disabled: var(--uui-neutral-50);
226
43
 
227
- --uui-icon: var(--uui-neutral-60);
228
- --uui-icon-hover: var(--uui-neutral-70);
229
- --uui-icon-active: var(--uui-neutral-80);
230
- --uui-icon-disabled: var(--uui-neutral-50);
231
-
232
- --uui-control-bg: var(--uui-neutral-0);
233
- --uui-control-bg-hover: var(--uui-neutral-60);
234
- --uui-control-bg-disabled: var(--uui-neutral-5);
235
-
236
- --uui-control-border: var(--uui-neutral-40);
237
- --uui-control-border-hover: var(--uui-neutral-60);
238
44
  --uui-control-border-focus: var(--uui-primary-50);
239
45
  --uui-control-border-disabled: var(--uui-neutral-30);
240
46
 
241
- --uui-control-placeholder: var(--uui-neutral-50);
242
- --uui-control-placeholder-disabled: var(--uui-neutral-50);
243
-
244
- --uui-control-text: var(--uui-text-primary);
245
- --uui-control-text-disabled: var(--uui-text-tertiary);
246
-
247
- --uui-control-icon: var(--uui-neutral-50);
248
- --uui-control-icon-disabled: var(--uui-neutral-50);
249
-
250
- --uui-outline-focus: #008ACE80;
251
-
252
- --uui-skeleton: var(--uui-neutral-40);
253
-
254
47
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
255
48
  --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
256
49
  --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
package/theme/theme_vanilla_thunder.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
3
  .uui-theme-vanilla_thunder {
4
4
  --uui-font: var(--font-inter);
5
+ --uui-font-mono: 'Roboto Mono', monospace;
5
6
 
6
7
  --blue-0: #F0F7FC;
7
8
  --blue-50: #E1F4FA;
@@ -150,7 +151,6 @@
150
151
  --uui-divider: var(--chromatic-200);
151
152
  --uui-divider-light: var(--chromatic-150);
152
153
 
153
- --uui-text-brand: var(--chromatic-500);
154
154
  --uui-text-primary: var(--chromatic-500);
155
155
  --uui-text-secondary: var(--chromatic-300);
156
156
  --uui-text-tertiary: var(--chromatic-300);
@@ -160,6 +160,7 @@
160
160
  --uui-text-warning: var(--uui-warning-50);
161
161
  --uui-text-critical: var(--uui-critical-50);
162
162
  --uui-text-success: var(--uui-success-50);
163
+ --uui-text-bg-highlight: var(--uui-warning-10);
163
164
 
164
165
  /* not accepted part */
165
166
 
@@ -310,7 +311,7 @@
310
311
  --uui-filters_toggler-bg: var(--uui-surface-main);
311
312
  --uui-filters_toggler-bg-hover: var(--blue-0);
312
313
  --uui-filters_toggler-text: var(--uui-text-secondary);
313
- --uui-filters_toggler-label: var(--uui-text-brand);
314
+ --uui-filters_toggler-label: var(--chromatic-500);
314
315
  --uui-filters_toggler-icon: var(--uui-icon);
315
316
  --uui-filters_toggler-shadow: var(--uui-shadow-level-1);
316
317
 
@@ -321,7 +322,7 @@
321
322
  /* MainMenu */
322
323
 
323
324
  .uui-main_menu {
324
- --uui-main_menu-text: var(--uui-text-brand);
325
+ --uui-main_menu-text: var(--chromatic-500);
325
326
  --uui-main_menu-text-active: var(--uui-info-50);
326
327
  --uui-main_menu-bg: var(--uui-info-5);
327
328
  --uui-main_menu-hover: var(--uui-neutral-0);
@@ -334,14 +335,14 @@
334
335
  --uui-main_menu-search-text: var(--uui-text-primary);
335
336
  --uui-main_menu-search-icon: var(--uui-neutral-70);
336
337
 
337
- --uui-main_menu-icon: var(--uui-text-brand);
338
- --uui-main_menu-icon-hover: var(--uui-text-brand);
339
- --uui-main_menu-icon-active: var(--uui-text-brand);
338
+ --uui-main_menu-icon: var(--chromatic-500);
339
+ --uui-main_menu-icon-hover: var(--chromatic-500);
340
+ --uui-main_menu-icon-active: var(--chromatic-500);
340
341
  }
341
342
 
342
343
  .uui-main_menu-dropdown {
343
- --uui-main_menu-text: var(--uui-text-brand);
344
- --uui-main_menu-text-active: var(--uui-text-brand);
344
+ --uui-main_menu-text: var(--chromatic-500);
345
+ --uui-main_menu-text-active: var(--chromatic-500);
345
346
  --uui-main_menu-dropdown-bg-hover: var(--uui-neutral-70);
346
347
  }
347
348
 
@@ -350,14 +351,14 @@
350
351
  .uui-burger {
351
352
  --uui-burger_menu-bg: var(--uui-info-5);
352
353
  --uui-burger_menu-bg-hover: var(--uui-neutral-0);
353
- --uui-burger_menu-caption: var(--uui-text-brand);
354
- --uui-burger_menu-icon: var(--uui-text-brand);
354
+ --uui-burger_menu-caption: var(--chromatic-500);
355
+ --uui-burger_menu-icon: var(--chromatic-500);
355
356
  --uui-burger_menu-item: var(--uui-info-5);
356
357
  }
357
358
 
358
359
  /* BurgerButton */
359
360
  .uui-main_menu-burger-button {
360
- --uui-burger_btn_caption: var(--uui-text-brand);
361
+ --uui-burger_btn_caption: var(--chromatic-500);
361
362
  --uui-burger_btn_caption-hover: var(--uui-primary-50);
362
363
  --uui-burger_btn_caption-active: var(--uui-primary-50);
363
364
  --uui-burger_btn-border: var(--uui-neutral-40);
@@ -366,15 +367,15 @@
366
367
  /* BurgerSearch */
367
368
 
368
369
  .uui-main_menu-burger-search {
369
- --uui-burger_search: var(--uui-text-brand);
370
+ --uui-burger_search: var(--chromatic-500);
370
371
  --uui-burger_search-fill: var(--uui-neutral-70);
371
372
  --uui-burger_search-bg: var(--uui-neutral-40);
372
373
  --uui-burger_search-placeholder: var(--uui-text-tertiary);
373
374
  }
374
375
 
375
376
  .uui-main_menu-dropdown {
376
- --uui-main_menu-text: var(--uui-text-brand);
377
- --uui-main_menu-text-active: var(--uui-text-brand);
377
+ --uui-main_menu-text: var(--chromatic-500);
378
+ --uui-main_menu-text-active: var(--chromatic-500);
378
379
 
379
380
  --uui-main_menu-dropdown-bg: var(--chromatic-0);
380
381
  --uui-main_menu-dropdown-bg-hover: var(--chromatic-150);
package/theme/tokens/_theme_electric.scss ADDED
@@ -0,0 +1,263 @@
1
+ // This file is AUTOGENERATED from Figma. DO NOT EDIT THIS FILE DIRECTLY.
2
+
3
+ @mixin theme-tokens {
4
+
5
+ /***************/
6
+ /*** Palette ***/
7
+ /***************/
8
+
9
+ // ""
10
+ --black: #000000;
11
+ --white: #FFFFFF;
12
+
13
+ // "palette-additional/cobalt"
14
+ --cobalt-5: #F8FAFF;
15
+ --cobalt-10: #D9E2FC;
16
+ --cobalt-20: #AEC0F5;
17
+ --cobalt-50: #0F98FF;
18
+ --cobalt-60: #006FE5;
19
+ --cobalt-70: #0954A5;
20
+
21
+ // "palette-additional/cyan"
22
+ --cyan-5: #F6FEFE;
23
+ --cyan-10: #D1FAFA;
24
+ --cyan-20: #AAEEEE;
25
+ --cyan-50: #14CCCC;
26
+ --cyan-60: #12B5B5;
27
+ --cyan-70: #0B6F6F;
28
+
29
+ // "palette/electric"
30
+ --electric-5: #F3F8FE;
31
+ --electric-10: #CEE1FC;
32
+ --electric-20: #85B4F8;
33
+ --electric-50: #0A68F1;
34
+ --electric-60: #095ED9;
35
+ --electric-70: #0853C1;
36
+
37
+ // "palette/emerald"
38
+ --emerald-5: #F3FBF7;
39
+ --emerald-10: #CDEEDD;
40
+ --emerald-20: #97D9B7;
41
+ --emerald-50: #07A956;
42
+ --emerald-60: #06984D;
43
+ --emerald-70: #068745;
44
+
45
+ // "palette/fire"
46
+ --fire-5: #FEF6F6;
47
+ --fire-10: #FDE1E1;
48
+ --fire-20: #FBB6B6;
49
+ --fire-50: #FF4242;
50
+ --fire-60: #E22A2A;
51
+ --fire-70: #AD0000;
52
+
53
+ // "palette-additional/fuchsia"
54
+ --fuchsia-5: #FFF7FB;
55
+ --fuchsia-10: #F9D8E7;
56
+ --fuchsia-20: #EDADC8;
57
+ --fuchsia-50: #EA4386;
58
+ --fuchsia-60: #D61E68;
59
+ --fuchsia-70: #AE1955;
60
+
61
+ // "palette-additional/mint"
62
+ --mint-5: #F2FCF5;
63
+ --mint-10: #DDF3E4;
64
+ --mint-20: #B4DFC4;
65
+ --mint-50: #4FC48C;
66
+ --mint-60: #31AA70;
67
+ --mint-70: #236E4A;
68
+
69
+ // "palette/night"
70
+ --night50: #FAFAFC;
71
+ --night100: #F5F6FA;
72
+ --night200: #EBEDF5;
73
+ --night300: #E1E3EB;
74
+ --night400: #CED0DB;
75
+ --night500: #ACAFBF;
76
+ --night600: #6C6F80;
77
+ --night700: #474A59;
78
+ --night800: #303240;
79
+ --night900: #1D1E26;
80
+ --night950: #111111;
81
+
82
+ // "palette-additional/orange"
83
+ --orange-5: #FEF8F4;
84
+ --orange-10: #FFE8D7;
85
+ --orange-20: #FFCCA7;
86
+ --orange-50: #FF8B3E;
87
+ --orange-60: #F76B0D;
88
+ --orange-70: #BD4B00;
89
+
90
+ // "palette-additional/purple"
91
+ --purple-5: #FDF6FE;
92
+ --purple-10: #F2CCFA;
93
+ --purple-20: #E79DF5;
94
+ --purple-50: #B114D1;
95
+ --purple-60: #860F9E;
96
+ --purple-70: #5E0B6F;
97
+
98
+ // "palette/sun"
99
+ --sun-5: #FFFCF5;
100
+ --sun-10: #FFEDC9;
101
+ --sun-20: #FFD785;
102
+ --sun-50: #FCAA00;
103
+ --sun-60: #FF9000;
104
+ --sun-70: #BD5800;
105
+
106
+ // "palette-additional/violet"
107
+ --violet-5: #F8F6FE;
108
+ --violet-10: #DBCCFA;
109
+ --violet-20: #BB9DF5;
110
+ --violet-50: #773CEC;
111
+ --violet-60: #5514D6;
112
+ --violet-70: #40109E;
113
+
114
+ // "palette-additional/yellow"
115
+ --yellow-5: #FFFFF5;
116
+ --yellow-10: #FFFFE5;
117
+ --yellow-20: #FFFCA4;
118
+ --yellow-50: #FDD63B;
119
+ --yellow-60: #EDBE02;
120
+ --yellow-70: #BC7E02;
121
+
122
+ /*********************/
123
+ /*** Core Semantic ***/
124
+ /*********************/
125
+
126
+ // "core/semantic/accent-"
127
+ --uui-accent-5: var(--electric-5);
128
+ --uui-accent-10: var(--electric-10);
129
+ --uui-accent-20: var(--electric-20);
130
+ --uui-accent-50: var(--electric-50);
131
+ --uui-accent-60: var(--electric-60);
132
+ --uui-accent-70: var(--electric-70);
133
+
134
+ // "core/semantic/critical-"
135
+ --uui-critical-5: var(--fire-5);
136
+ --uui-critical-10: var(--fire-10);
137
+ --uui-critical-20: var(--fire-20);
138
+ --uui-critical-50: var(--fire-50);
139
+ --uui-critical-60: var(--fire-60);
140
+ --uui-critical-70: var(--fire-70);
141
+
142
+ // "core/semantic/error-"
143
+ --uui-error-5: var(--fire-5);
144
+ --uui-error-10: var(--fire-10);
145
+ --uui-error-20: var(--fire-20);
146
+ --uui-error-50: var(--fire-50);
147
+ --uui-error-60: var(--fire-60);
148
+ --uui-error-70: var(--fire-70);
149
+
150
+ // "core/semantic/info-"
151
+ --uui-info-5: var(--electric-5);
152
+ --uui-info-10: var(--electric-10);
153
+ --uui-info-20: var(--electric-20);
154
+ --uui-info-50: var(--electric-50);
155
+ --uui-info-60: var(--electric-60);
156
+ --uui-info-70: var(--electric-70);
157
+
158
+ // "core/semantic/primary-"
159
+ --uui-primary-5: var(--electric-5);
160
+ --uui-primary-10: var(--electric-10);
161
+ --uui-primary-20: var(--electric-20);
162
+ --uui-primary-50: var(--electric-50);
163
+ --uui-primary-60: var(--electric-60);
164
+ --uui-primary-70: var(--electric-70);
165
+
166
+ // "core/semantic/secondary-"
167
+ --uui-secondary-5: var(--night100);
168
+ --uui-secondary-10: var(--night200);
169
+ --uui-secondary-20: var(--night300);
170
+ --uui-secondary-50: var(--night600);
171
+ --uui-secondary-60: var(--night700);
172
+ --uui-secondary-70: var(--night800);
173
+
174
+ // "core/semantic/success-"
175
+ --uui-success-5: var(--emerald-5);
176
+ --uui-success-10: var(--emerald-10);
177
+ --uui-success-20: var(--emerald-20);
178
+ --uui-success-50: var(--emerald-50);
179
+ --uui-success-60: var(--emerald-60);
180
+ --uui-success-70: var(--emerald-70);
181
+
182
+ // "core/semantic/warning-"
183
+ --uui-warning-5: var(--sun-5);
184
+ --uui-warning-10: var(--sun-10);
185
+ --uui-warning-20: var(--sun-20);
186
+ --uui-warning-50: var(--sun-50);
187
+ --uui-warning-60: var(--sun-60);
188
+ --uui-warning-70: var(--sun-70);
189
+
190
+ /********************/
191
+ /*** Core Neutral ***/
192
+ /********************/
193
+
194
+ --uui-neutral-0: var(--white);
195
+ --uui-neutral-5: var(--night50);
196
+ --uui-neutral-10: var(--night100);
197
+ --uui-neutral-20: var(--night200);
198
+ --uui-neutral-30: var(--night300);
199
+ --uui-neutral-40: var(--night400);
200
+ --uui-neutral-50: var(--night500);
201
+ --uui-neutral-60: var(--night600);
202
+ --uui-neutral-70: var(--night700);
203
+ --uui-neutral-80: var(--night800);
204
+ --uui-neutral-90: var(--night900);
205
+ --uui-neutral-95: var(--night950);
206
+ --uui-neutral-100: var(--black);
207
+
208
+ /************/
209
+ /*** Core ***/
210
+ /************/
211
+
212
+ // "core/surfaces"
213
+ --uui-app-bg: var(--uui-neutral-10);
214
+ --uui-divider: var(--uui-neutral-40);
215
+ --uui-divider-light: var(--uui-neutral-30);
216
+ --uui-overlay: #1D1E26CC;
217
+ --uui-surface-higher: var(--uui-neutral-10);
218
+ --uui-surface-highest: var(--uui-neutral-20);
219
+ --uui-surface-main: var(--uui-neutral-0);
220
+ --uui-surface-sunken: var(--uui-neutral-20);
221
+
222
+ // ""
223
+ --uui-border-radius: 3;
224
+
225
+ // "core/controls"
226
+ --uui-control-bg: var(--uui-surface-main);
227
+ --uui-control-bg-disabled: var(--uui-neutral-5);
228
+ --uui-control-bg-hover: var(--uui-neutral-60);
229
+ --uui-control-border: var(--uui-neutral-40);
230
+ --uui-control-border-hover: var(--uui-neutral-60);
231
+ --uui-control-icon: var(--uui-neutral-50);
232
+ --uui-control-icon-disabled: var(--uui-neutral-50);
233
+ --uui-control-placeholder: var(--uui-neutral-50);
234
+ --uui-control-placeholder-disabled: var(--uui-text-disabled);
235
+ --uui-control-text: var(--uui-neutral-95);
236
+ --uui-control-text-disabled: var(--uui-text-tertiary);
237
+
238
+ // "core/icons"
239
+ --uui-icon: var(--uui-neutral-95);
240
+ --uui-icon-active: var(--uui-neutral-100);
241
+ --uui-icon-disabled: var(--uui-neutral-50);
242
+ --uui-icon-hover: var(--uui-neutral-100);
243
+
244
+ // "core/links"
245
+ --uui-link: var(--uui-primary-50);
246
+ --uui-link-hover: var(--uui-primary-60);
247
+ --uui-link-visited: #8018A0;
248
+
249
+ // "core/other"
250
+ --uui-outline-focus: #0A68F17F;
251
+ --uui-skeleton: var(--night400);
252
+
253
+ // "core/text"
254
+ --uui-text-bg-highlight: var(--uui-warning-10);
255
+ --uui-text-critical: var(--uui-critical-70);
256
+ --uui-text-disabled: var(--uui-neutral-50);
257
+ --uui-text-info: var(--uui-info-70);
258
+ --uui-text-primary: var(--uui-neutral-95);
259
+ --uui-text-secondary: var(--uui-neutral-70);
260
+ --uui-text-success: var(--uui-success-70);
261
+ --uui-text-tertiary: var(--uui-neutral-60);
262
+ --uui-text-warning: var(--uui-warning-70);
263
+ }