@epam/assets 5.2.0-rc.3 → 5.3.0-rc.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 (21) hide show
  1. package/css/theme/theme_electric.css +154 -131
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +262 -228
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +381 -301
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +249 -221
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder(old).css +805 -0
  10. package/css/theme/theme_vanilla_thunder(old).css.map +1 -0
  11. package/css/theme/theme_vanilla_thunder.css +104 -687
  12. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  13. package/package.json +2 -2
  14. package/scss/loveship/colors.scss +7 -7
  15. package/scss/promo/typography.scss +0 -2
  16. package/theme/theme_electric.scss +186 -136
  17. package/theme/theme_loveship.scss +306 -240
  18. package/theme/theme_loveship_dark.scss +456 -320
  19. package/theme/theme_promo.scss +289 -236
  20. package/theme/theme_vanilla_thunder(old).scss +1031 -0
  21. package/theme/theme_vanilla_thunder.scss +114 -864
package/theme/theme_promo.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Name convention */
2
2
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
3
 
4
- .uui-theme-promo {
4
+ @mixin theme-promo {
5
5
  --uui-font: 'Source Sans Pro', sans-serif;
6
6
  --font-primary: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
7
7
  --font-promo: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
@@ -18,109 +18,111 @@
18
18
  --gray80: #303240;
19
19
  --gray90: #1D1E26;
20
20
 
21
- --blue-soft: #F5FDFF;
22
- --blue-lightest: #D6F2FF;
23
- --blue-light: #99DDFF;
24
- --blue: #007BBD;
25
- --blue-dark: #006AA3;
26
- --blue-darkest: #005685;
27
-
28
- --green-soft: #FCFFF5;
29
- --green-lightest: #EEFFCC;
30
- --green-light: #CFF486;
31
- --green: #65A300;
32
- --green-dark: #528500;
33
- --green-darkest: #446600;
34
-
35
- --amber-soft: #FFFCF5;
36
- --amber-lightest: #FFF2CC;
37
- --amber-light: #FFE38F;
38
- --amber: #FFC000;
39
- --amber-dark: #DB9D00;
40
- --amber-darkest: #9F6B04;
41
-
42
- --red-soft: #FEF7F6;
43
- --red-lightest: #FADED9;
44
- --red-light: #F5B5A8;
45
- --red: #DB3A1A;
46
- --red-dark: #C03316;
47
- --red-darkest: #A02B13;
21
+ --blue-5: #F5FDFF;
22
+ --blue-10: #D6F2FF;
23
+ --blue-20: #99DDFF;
24
+ --blue-50: #007BBD;
25
+ --blue-60: #006AA3;
26
+ --blue-70: #005685;
27
+
28
+ --green-5: #FCFFF5;
29
+ --green-10: #EEFFCC;
30
+ --green-20: #CFF486;
31
+ --green-50: #65A300;
32
+ --green-60: #528500;
33
+ --green-70: #446600;
34
+
35
+ --amber-5: #FFFCF5;
36
+ --amber-10: #FFF2CC;
37
+ --amber-20: #FFE38F;
38
+ --amber-50: #FFC000;
39
+ --amber-60: #DB9D00;
40
+ --amber-70: #9F6B04;
41
+
42
+ --red-5: #FEF7F6;
43
+ --red-10: #FADED9;
44
+ --red-20: #F5B5A8;
45
+ --red-50: #DB3A1A;
46
+ --red-60: #C03316;
47
+ --red-70: #A02B13;
48
48
 
49
49
  --white: #FFFFFF;
50
50
 
51
- --yellow-0: #FFFFF0;
51
+ --yellow-5: #FFFFF0;
52
52
  --yellow-10: #FFFECC;
53
53
  --yellow-20: #FFFCA4;
54
- --yellow-30: #FDD63B;
55
- --yellow-40: #F9B71D;
56
- --yellow-50: #D3910C;
54
+ --yellow-50: #FDD63B;
55
+ --yellow-60: #F9B71D;
56
+ --yellow-70: #D3910C;
57
57
 
58
- --orange-0: #FEF8F4;
58
+ --orange-5: #FEF8F4;
59
59
  --orange-10: #FFE8D7;
60
60
  --orange-20: #FFCCA7;
61
- --orange-30: #FF8B3E;
62
- --orange-40: #F76B0D;
63
- --orange-50: #BD4B00;
64
-
65
- --fuchia-0: #FFF7FB;
66
- --fuchia-10: #F9D8E7;
67
- --fuchia-20: #EDADC8;
68
- --fuchia-30: #EA4386;
69
- --fuchia-40: #D61E68;
70
- --fuchia-50: #AE1955;
71
-
72
- --purple-0: #FDF6FE;
61
+ --orange-50: #FF8B3E;
62
+ --orange-60: #F76B0D;
63
+ --orange-70: #BD4B00;
64
+
65
+ --fuchsia-5: #FFF7FB;
66
+ --fuchsia-10: #F9D8E7;
67
+ --fuchsia-20: #EDADC8;
68
+ --fuchsia-50: #EA4386;
69
+ --fuchsia-60: #D61E68;
70
+ --fuchsia-70: #AE1955;
71
+
72
+ --purple-5: #FDF6FE;
73
73
  --purple-10: #F2CCFA;
74
74
  --purple-20: #E79DF5;
75
- --purple-30: #B114D1;
76
- --purple-40: #860F9E;
77
- --purple-50: #5E0B6F;
75
+ --purple-50: #B114D1;
76
+ --purple-60: #860F9E;
77
+ --purple-70: #5E0B6F;
78
78
 
79
- --violet-0: #F8F6FE;
79
+ --violet-5: #F8F6FE;
80
80
  --violet-10: #DBCCFA;
81
81
  --violet-20: #BB9DF5;
82
- --violet-30: #773CEC;
83
- --violet-40: #5514D6;
84
- --violet-50: #40109E;
82
+ --violet-50: #773CEC;
83
+ --violet-60: #5514D6;
84
+ --violet-70: #40109E;
85
85
 
86
- --cobalt-0: #F8FAFF;
86
+ --cobalt-5: #F8FAFF;
87
87
  --cobalt-10: #D9E2FC;
88
88
  --cobalt-20: #AEC0F5;
89
- --cobalt-30: #0F98FF;
90
- --cobalt-40: #006FE5;
91
- --cobalt-50: #0954A5;
89
+ --cobalt-50: #0F98FF;
90
+ --cobalt-60: #006FE5;
91
+ --cobalt-70: #0954A5;
92
92
 
93
- --cyan-0: #F5FBFF;
93
+ --cyan-5: #F5FBFF;
94
94
  --cyan-10: #D1FAFA;
95
95
  --cyan-20: #AAEEEE;
96
- --cyan-30: #14CCCC;
97
- --cyan-40: #0F9E9E;
98
- --cyan-50: #0B6F6F;
96
+ --cyan-50: #14CCCC;
97
+ --cyan-60: #0F9E9E;
98
+ --cyan-70: #0B6F6F;
99
99
 
100
- --mint-0: #F2FCF5;
100
+ --mint-5: #F2FCF5;
101
101
  --mint-10: #DDF3E4;
102
102
  --mint-20: #B4DFC4;
103
- --mint-30: #4FC48C;
104
- --mint-40: #2E9E68;
105
- --mint-50: #236E4A;
103
+ --mint-50: #4FC48C;
104
+ --mint-60: #2E9E68;
105
+ --mint-70: #236E4A;
106
106
 
107
107
  /* core variables start */
108
108
 
109
109
  /* brand colors */
110
110
 
111
- --uui-accent-5: var(--green-soft);
112
- --uui-accent-10: var(--green-lightest);
113
- --uui-accent-20: var(--green-light);
114
- --uui-accent-50: var(--green);
115
- --uui-accent-60: var(--green-dark);
116
- --uui-accent-70: var(--green-darkest);
117
-
118
- --uui-primary-5: var(--blue-soft);
119
- --uui-primary-10: var(--blue-lightest);
120
- --uui-primary-20: var(--blue-light);
121
- --uui-primary-50: var(--blue);
122
- --uui-primary-60: var(--blue-dark);
123
- --uui-primary-70: var(--blue-darkest);
111
+ --uui-accent-5: var(--green-5);
112
+ --uui-accent-10: var(--green-10);
113
+ --uui-accent-20: var(--green-20);
114
+ --uui-accent-50: var(--green-50);
115
+ --uui-accent-60: var(--green-60);
116
+ --uui-accent-70: var(--green-70);
117
+ --uui-accent-contrast: var(--white);
118
+
119
+ --uui-primary-5: var(--blue-5);
120
+ --uui-primary-10: var(--blue-10);
121
+ --uui-primary-20: var(--blue-20);
122
+ --uui-primary-50: var(--blue-50);
123
+ --uui-primary-60: var(--blue-60);
124
+ --uui-primary-70: var(--blue-70);
125
+ --uui-primary-contrast: var(--white);
124
126
 
125
127
  --uui-secondary-5: var(--gray20);
126
128
  --uui-secondary-10: var(--gray30);
@@ -128,43 +130,49 @@
128
130
  --uui-secondary-50: var(--gray60);
129
131
  --uui-secondary-60: var(--gray70);
130
132
  --uui-secondary-70: var(--gray80);
133
+ --uui-secondary-contrast: var(--white);
131
134
 
132
- --uui-critical-5: var(--red-soft);
133
- --uui-critical-10: var(--red-lightest);
134
- --uui-critical-20: var(--red-light);
135
- --uui-critical-50: var(--red);
136
- --uui-critical-60: var(--red-dark);
137
- --uui-critical-70: var(--red-darkest);
135
+ --uui-critical-5: var(--red-5);
136
+ --uui-critical-10: var(--red-10);
137
+ --uui-critical-20: var(--red-20);
138
+ --uui-critical-50: var(--red-50);
139
+ --uui-critical-60: var(--red-60);
140
+ --uui-critical-70: var(--red-70);
141
+ --uui-critical-contrast: var(--white);
138
142
 
139
143
  /* semantic colors */
140
144
 
141
- --uui-info-5: var(--blue-soft);
142
- --uui-info-10: var(--blue-lightest);
143
- --uui-info-20: var(--blue-light);
144
- --uui-info-50: var(--blue);
145
- --uui-info-60: var(--blue-dark);
146
- --uui-info-70: var(--blue-darkest);
147
-
148
- --uui-success-5: var(--green-soft);
149
- --uui-success-10: var(--green-lightest);
150
- --uui-success-20: var(--green-light);
151
- --uui-success-50: var(--green);
152
- --uui-success-60: var(--green-dark);
153
- --uui-success-70: var(--green-darkest);
154
-
155
- --uui-warning-5: var(--amber-soft);
156
- --uui-warning-10: var(--amber-lightest);
157
- --uui-warning-20: var(--amber-light);
158
- --uui-warning-50: var(--amber);
159
- --uui-warning-60: var(--amber-dark);
160
- --uui-warning-70: var(--amber-darkest);
161
-
162
- --uui-error-5: var(--red-soft);
163
- --uui-error-10: var(--red-lightest);
164
- --uui-error-20: var(--red-light);
165
- --uui-error-50: var(--red);
166
- --uui-error-60: var(--red-dark);
167
- --uui-error-70: var(--red-darkest);
145
+ --uui-info-5: var(--blue-5);
146
+ --uui-info-10: var(--blue-10);
147
+ --uui-info-20: var(--blue-20);
148
+ --uui-info-50: var(--blue-50);
149
+ --uui-info-60: var(--blue-60);
150
+ --uui-info-70: var(--blue-70);
151
+ --uui-info-contrast: var(--white);
152
+
153
+ --uui-success-5: var(--green-5);
154
+ --uui-success-10: var(--green-10);
155
+ --uui-success-20: var(--green-20);
156
+ --uui-success-50: var(--green-50);
157
+ --uui-success-60: var(--green-60);
158
+ --uui-success-70: var(--green-70);
159
+ --uui-success-contrast: var(--white);
160
+
161
+ --uui-warning-5: var(--amber-5);
162
+ --uui-warning-10: var(--amber-10);
163
+ --uui-warning-20: var(--amber-20);
164
+ --uui-warning-50: var(--amber-50);
165
+ --uui-warning-60: var(--amber-60);
166
+ --uui-warning-70: var(--amber-70);
167
+ --uui-warning-contrast: var(--gray80);
168
+
169
+ --uui-error-5: var(--red-5);
170
+ --uui-error-10: var(--red-10);
171
+ --uui-error-20: var(--red-20);
172
+ --uui-error-50: var(--red-50);
173
+ --uui-error-60: var(--red-60);
174
+ --uui-error-70: var(--red-70);
175
+ --uui-error-contrast: var(--white);
168
176
 
169
177
  --uui-neutral-0: #FFFFFF;
170
178
  --uui-neutral-5: var(--gray5);
@@ -184,17 +192,10 @@
184
192
  --uui-app-bg: var(--uui-neutral-10);
185
193
  --uui-overlay: rgba(29, 30, 38, 0.8);
186
194
 
187
- --uui-surface: var(--uui-neutral-0);
188
- --uui-surface-low: var(--uui-neutral-5);
189
- --uui-surface-lower: var(--uui-neutral-10);
190
- --uui-surface-lowest: var(--uui-neutral-20);
191
- --uui-surface-contrast: var(--uui-neutral-70);
192
- --uui-surface-contrast-low: var(--uui-neutral-80);
193
- --uui-surface-contrast-lower: var(--uui-neutral-90);
194
-
195
- --uui-surface-active: var(--blue-lightest);
196
- --uui-surface-critical: var(--red-lightest);
197
- --uui-surface-warning: var(--amber-lightest);
195
+ --uui-surface-sunken: var(--uui-neutral-5);
196
+ --uui-surface-main: var(--uui-neutral-0);
197
+ --uui-surface-higher: var(--uui-neutral-10);
198
+ --uui-surface-highest: var(--uui-neutral-20);
198
199
 
199
200
  --uui-divider: var(--uui-neutral-40);
200
201
  --uui-divider-light: var(--uui-neutral-30);
@@ -205,26 +206,21 @@
205
206
  --uui-text-tertiary: var(--uui-neutral-60);
206
207
  --uui-text-disabled: var(--uui-neutral-50);
207
208
  --uui-text-contrast: var(--uui-neutral-5);
208
- --uui-text-white: var(--white);
209
- --uui-text-dark: var(--uui-neutral-80);
210
209
 
211
- --uui-text-info: var(--uui-info-50);
212
- --uui-text-warning: var(--uui-warning-50);
213
- --uui-text-error: var(--uui-error-50);
214
- --uui-text-success: var(--uui-success-50);
210
+ --uui-text-info: var(--uui-info-70); // TODO: update colors
211
+ --uui-text-warning: var(--uui-warning-70);
212
+ --uui-text-critical: var(--uui-critical-70);
213
+ --uui-text-success: var(--uui-success-70);
215
214
 
216
215
  /* not accepted part */
217
216
 
218
- --uui-disabled: var(--uui-neutral-30); // TODO: name does not clearly reflect the meaning
219
-
220
217
  /* control specific */
221
218
 
222
- --uui-link: var(--blue);
223
- --uui-link-soft: var(--blue-soft);
224
- --uui-link-hover: var(--blue-dark);
225
- --uui-link-wite-hover: var(--uui-neutral-40);
226
- --uui-link-black-hover: var(--uui-neutral-80);
227
- --uui-link-visited: #5214CC;
219
+ --uui-link: var(--blue-50);
220
+ --uui-link-soft: var(--blue-5);
221
+ --uui-link-hover: var(--blue-60);
222
+ --uui-link-visited: #8018A0;
223
+ --uui-link-visited-hover: #601278;
228
224
  --uui-link-disabled: var(--uui-neutral-50);
229
225
 
230
226
  --uui-icon: var(--uui-neutral-60);
@@ -260,9 +256,9 @@
260
256
 
261
257
  --uui-control-checkbox-icon: var(--uui-neutral-0);
262
258
 
263
- --uui-control-focus: #008ACE80;
259
+ --uui-outline-focus: #008ACE80;
264
260
 
265
- --uui-search-result-highlight: var(--uui-warning-10);
261
+ --uui-search_result-bg-highlight: var(--uui-warning-10);
266
262
 
267
263
  --uui-skeleton: var(--uui-neutral-40);
268
264
  --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
@@ -276,10 +272,6 @@
276
272
 
277
273
  /* ------------------------------------ */
278
274
 
279
- .uui-accordion-container {
280
- --uui-accordion-border-radius: 0;
281
- }
282
-
283
275
  /* begin color classes */
284
276
 
285
277
  .uui-color-accent,
@@ -290,8 +282,7 @@
290
282
  --uui-color-50: var(--uui-accent-50);
291
283
  --uui-color-60: var(--uui-accent-60);
292
284
  --uui-color-70: var(--uui-accent-70);
293
- --uui-color-text: var(--uui-accent-50);
294
- --uui-color-contrast-text: var(--uui-text-white);
285
+ --uui-color-contrast: var(--uui-accent-contrast);
295
286
  }
296
287
 
297
288
  .uui-color-primary,
@@ -302,11 +293,11 @@
302
293
  --uui-color-50: var(--uui-primary-50);
303
294
  --uui-color-60: var(--uui-primary-60);
304
295
  --uui-color-70: var(--uui-primary-70);
305
- --uui-color-text: var(--uui-primary-50);
306
- --uui-color-contrast-text: var(--uui-text-white);
296
+ --uui-color-contrast: var(--uui-primary-contrast);
307
297
  }
308
298
 
309
299
  .uui-color-secondary,
300
+ .uui-color-neutral,
310
301
  .uui-color-gray {
311
302
  --uui-color-5: var(--uui-secondary-5);
312
303
  --uui-color-10: var(--uui-secondary-10);
@@ -314,8 +305,7 @@
314
305
  --uui-color-50: var(--uui-secondary-50);
315
306
  --uui-color-60: var(--uui-secondary-60);
316
307
  --uui-color-70: var(--uui-secondary-70);
317
- --uui-color-text: var(--uui-secondary-50);
318
- --uui-color-contrast-text: var(--uui-text-white);
308
+ --uui-color-contrast: var(--uui-secondary-contrast);
319
309
  }
320
310
 
321
311
  .uui-color-critical,
@@ -326,8 +316,7 @@
326
316
  --uui-color-50: var(--uui-critical-50);
327
317
  --uui-color-60: var(--uui-critical-60);
328
318
  --uui-color-70: var(--uui-critical-70);
329
- --uui-color-text: var(--uui-critical-50);
330
- --uui-color-contrast-text: var(--uui-text-white);
319
+ --uui-color-contrast: var(--uui-critical-contrast);
331
320
  }
332
321
 
333
322
  .uui-color-info {
@@ -337,8 +326,7 @@
337
326
  --uui-color-50: var(--uui-info-50);
338
327
  --uui-color-60: var(--uui-info-60);
339
328
  --uui-color-70: var(--uui-info-70);
340
- --uui-color-text: var(--uui-info-50);
341
- --uui-color-contrast-text: var(--uui-text-white);
329
+ --uui-color-contrast: var(--uui-info-contrast);
342
330
  }
343
331
 
344
332
  .uui-color-success {
@@ -348,8 +336,7 @@
348
336
  --uui-color-50: var(--uui-success-50);
349
337
  --uui-color-60: var(--uui-success-60);
350
338
  --uui-color-70: var(--uui-success-70);
351
- --uui-color-text: var(--uui-success-50);
352
- --uui-color-contrast-text: var(--uui-text-white);
339
+ --uui-color-contrast: var(--uui-success-contrast);
353
340
  }
354
341
 
355
342
  .uui-color-warning,
@@ -360,8 +347,7 @@
360
347
  --uui-color-50: var(--uui-warning-50);
361
348
  --uui-color-60: var(--uui-warning-60);
362
349
  --uui-color-70: var(--uui-warning-70);
363
- --uui-color-text: var(--uui-warning-50);
364
- --uui-color-contrast-text: var(--uui-text-dark);
350
+ --uui-color-contrast: var(--uui-warning-contrast);
365
351
  }
366
352
 
367
353
  .uui-color-error {
@@ -371,8 +357,7 @@
371
357
  --uui-color-50: var(--uui-error-50);
372
358
  --uui-color-60: var(--uui-error-60);
373
359
  --uui-color-70: var(--uui-error-70);
374
- --uui-color-text: var(--uui-error-50);
375
- --uui-color-contrast-text: var(--uui-text-white);
360
+ --uui-color-contrast: var(--uui-error-contrast);
376
361
  }
377
362
 
378
363
  .uui-color-white {
@@ -382,8 +367,7 @@
382
367
  --uui-color-50: var(--white);
383
368
  --uui-color-60: var(--gray10);
384
369
  --uui-color-70: var(--gray20);
385
- --uui-color-text: var(--white);
386
- --uui-color-contrast-text: var(--uui-text-dark);
370
+ --uui-color-contrast: var(--gray80);
387
371
  }
388
372
 
389
373
  .uui-color-gray5 {
@@ -393,8 +377,7 @@
393
377
  --uui-color-50: var(--gray5);
394
378
  --uui-color-60: var(--gray10);
395
379
  --uui-color-70: var(--gray20);
396
- --uui-color-text: var(--gray5);
397
- --uui-color-contrast-text: var(--uui-text-dark);
380
+ --uui-color-contrast: var(--gray80);
398
381
  }
399
382
 
400
383
  .uui-link_button.uui-color-contrast,
@@ -405,11 +388,9 @@
405
388
  --uui-color-50: var(--gray10);
406
389
  --uui-color-60: var(--gray20);
407
390
  --uui-color-70: var(--gray30);
408
- --uui-color-text: var(--gray10);
409
- --uui-color-contrast-text: var(--uui-text-dark);
391
+ --uui-color-contrast: var(--gray80);
410
392
  }
411
393
 
412
- .uui-badge.uui-color-neutral,
413
394
  .uui-color-gray30 {
414
395
  --uui-color-5: var(--gray20);
415
396
  --uui-color-10: var(--gray30);
@@ -417,8 +398,7 @@
417
398
  --uui-color-50: var(--gray30);
418
399
  --uui-color-60: var(--gray40);
419
400
  --uui-color-70: var(--gray50);
420
- --uui-color-text: var(--gray70);
421
- --uui-color-contrast-text: var(--uui-text-dark);
401
+ --uui-color-contrast: var(--gray80);
422
402
  }
423
403
 
424
404
  .uui-color-gray50 {
@@ -428,8 +408,7 @@
428
408
  --uui-color-50: var(--gray50);
429
409
  --uui-color-60: var(--gray60);
430
410
  --uui-color-70: var(--gray70);
431
- --uui-color-text: var(--gray70);
432
- --uui-color-contrast-text: var(--uui-text-dark);
411
+ --uui-color-contrast: var(--gray80);
433
412
  }
434
413
 
435
414
  .uui-button.uui-color-gray50,
@@ -440,8 +419,7 @@
440
419
  --uui-color-50: var(--gray60);
441
420
  --uui-color-60: var(--gray70);
442
421
  --uui-color-70: var(--gray80);
443
- --uui-color-text: var(--gray70);
444
- --uui-color-contrast-text: var(--uui-text-white);
422
+ --uui-color-contrast: var(--white);
445
423
  }
446
424
 
447
425
  .uui-color-gray80 {
@@ -449,10 +427,9 @@
449
427
  --uui-color-10: var(--gray10);
450
428
  --uui-color-20: var(--gray20);
451
429
  --uui-color-50: var(--gray80);
452
- --uui-color-60: var(--gray40);
453
- --uui-color-70: var(--gray50);
454
- --uui-color-text: var(--gray50);
455
- --uui-color-contrast-text: var(--uui-text-dark);
430
+ --uui-color-60: var(--gray80);
431
+ --uui-color-70: var(--gray80);
432
+ --uui-color-contrast: var(--white);
456
433
  }
457
434
 
458
435
  .uui-color-gray90 {
@@ -462,133 +439,205 @@
462
439
  --uui-color-50: var(--gray90);
463
440
  --uui-color-60: var(--gray90);
464
441
  --uui-color-70: var(--gray90);
465
- --uui-color-text: var(--gray90);
466
- --uui-color-contrast-text: var(--uui-text-white);
442
+ --uui-color-contrast: var(--white);
467
443
  }
468
444
 
469
445
  .uui-color-yellow {
470
446
  --uui-color-5: var(--yellow-5);
471
447
  --uui-color-10: var(--yellow-10);
472
448
  --uui-color-20: var(--yellow-20);
473
- --uui-color-50: var(--yellow-30);
474
- --uui-color-60: var(--yellow-40);
475
- --uui-color-70: var(--yellow-50);
476
- --uui-color-text: var(--yellow-50);
477
- --uui-color-contrast-text: var(--uui-text-white);
449
+ --uui-color-50: var(--yellow-50);
450
+ --uui-color-60: var(--yellow-60);
451
+ --uui-color-70: var(--yellow-70);
452
+ --uui-color-contrast: var(--gray80);
478
453
  }
479
454
 
480
455
  .uui-color-orange {
481
456
  --uui-color-5: var(--orange-5);
482
457
  --uui-color-10: var(--orange-10);
483
458
  --uui-color-20: var(--orange-20);
484
- --uui-color-50: var(--orange-30);
485
- --uui-color-60: var(--orange-40);
486
- --uui-color-70: var(--orange-50);
487
- --uui-color-text: var(--orange-50);
488
- --uui-color-contrast-text: var(--uui-text-white);
459
+ --uui-color-50: var(--orange-50);
460
+ --uui-color-60: var(--orange-60);
461
+ --uui-color-70: var(--orange-70);
462
+ --uui-color-contrast: var(--gray80);
489
463
  }
490
464
 
491
465
  .uui-color-fuchsia {
492
466
  --uui-color-5: var(--fuchsia-5);
493
467
  --uui-color-10: var(--fuchsia-10);
494
468
  --uui-color-20: var(--fuchsia-20);
495
- --uui-color-50: var(--fuchsia-30);
496
- --uui-color-60: var(--fuchsia-40);
497
- --uui-color-70: var(--fuchsia-50);
498
- --uui-color-text: var(--fuchsia-50);
499
- --uui-color-contrast-text: var(--uui-text-white);
469
+ --uui-color-50: var(--fuchsia-50);
470
+ --uui-color-60: var(--fuchsia-60);
471
+ --uui-color-70: var(--fuchsia-70);
472
+ --uui-color-contrast: var(--white);
500
473
  }
501
474
 
502
475
  .uui-color-purple {
503
476
  --uui-color-5: var(--purple-5);
504
477
  --uui-color-10: var(--purple-10);
505
478
  --uui-color-20: var(--purple-20);
506
- --uui-color-50: var(--purple-30);
507
- --uui-color-60: var(--purple-40);
508
- --uui-color-70: var(--purple-50);
509
- --uui-color-text: var(--purple-50);
510
- --uui-color-contrast-text: var(--uui-text-white);
479
+ --uui-color-50: var(--purple-50);
480
+ --uui-color-60: var(--purple-60);
481
+ --uui-color-70: var(--purple-70);
482
+ --uui-color-contrast: var(--white);
511
483
  }
512
484
 
513
485
  .uui-color-violet {
514
486
  --uui-color-5: var(--violet-5);
515
487
  --uui-color-10: var(--violet-10);
516
488
  --uui-color-20: var(--violet-20);
517
- --uui-color-50: var(--violet-30);
518
- --uui-color-60: var(--violet-40);
519
- --uui-color-70: var(--violet-50);
520
- --uui-color-text: var(--violet-50);
521
- --uui-color-contrast-text: var(--uui-text-white);
489
+ --uui-color-50: var(--violet-50);
490
+ --uui-color-60: var(--violet-60);
491
+ --uui-color-70: var(--violet-70);
492
+ --uui-color-contrast: var(--white);
522
493
  }
523
494
 
524
495
  .uui-color-cobalt {
496
+ --uui-color-5: var(--cobalt-5);
525
497
  --uui-color-10: var(--cobalt-10);
526
498
  --uui-color-20: var(--cobalt-20);
527
- --uui-color-50: var(--cobalt-30);
528
- --uui-color-60: var(--cobalt-40);
529
- --uui-color-70: var(--cobalt-50);
530
- --uui-color-text: var(--cobalt-50);
531
- --uui-color-contrast-text: var(--uui-text-white);
499
+ --uui-color-50: var(--cobalt-50);
500
+ --uui-color-60: var(--cobalt-60);
501
+ --uui-color-70: var(--cobalt-70);
502
+ --uui-color-contrast: var(--white);
532
503
  }
533
504
 
534
505
  .uui-color-cyan {
506
+ --uui-color-5: var(--cyan-5);
535
507
  --uui-color-10: var(--cyan-10);
536
508
  --uui-color-20: var(--cyan-20);
537
- --uui-color-50: var(--cyan-30);
538
- --uui-color-60: var(--cyan-40);
539
- --uui-color-70: var(--cyan-50);
540
- --uui-color-text: var(--cyan-50);
541
- --uui-color-contrast-text: var(--uui-text-white);
509
+ --uui-color-50: var(--cyan-50);
510
+ --uui-color-60: var(--cyan-60);
511
+ --uui-color-70: var(--cyan-70);
512
+ --uui-color-contrast: var(--gray80);
542
513
  }
543
514
 
544
515
  .uui-color-mint {
516
+ --uui-color-5: var(--mint-5);
545
517
  --uui-color-10: var(--mint-10);
546
518
  --uui-color-20: var(--mint-20);
547
- --uui-color-50: var(--mint-30);
548
- --uui-color-60: var(--mint-40);
549
- --uui-color-70: var(--mint-50);
550
- --uui-color-text: var(--mint-50);
551
- --uui-color-contrast-text: var(--uui-text-white);
519
+ --uui-color-50: var(--mint-50);
520
+ --uui-color-60: var(--mint-60);
521
+ --uui-color-70: var(--mint-70);
522
+ --uui-color-contrast: var(--gray80);
523
+ }
524
+
525
+ /* Badge */
526
+
527
+ .uui-badge.uui-color-white.uui-fill-outline {
528
+ --uui-badge-bg-hover: var(--uui-neutral-10);
529
+ --uui-badge-border: var(--uui-neutral-30);
530
+ --uui-badge-border-hover: var(--uui-neutral-30);
531
+ --uui-badge-caption: var(--uui-neutral-80);
532
+ --uui-badge-caption-hover: var(--uui-neutral-80);
533
+ }
534
+
535
+ .uui-badge.uui-color-neutral,
536
+ .uui-badge.uui-color-gray30 {
537
+ --uui-badge-bg: var(--uui-neutral-30);
538
+ --uui-badge-bg-hover: var(--uui-neutral-40);
539
+ --uui-badge-border: var(--uui-neutral-30);
540
+ --uui-badge-border-hover: var(--uui-neutral-40);
541
+ --uui-badge-caption: var(--uui-neutral-80);
542
+ --uui-badge-caption-hover: var(--uui-neutral-80);
543
+
544
+ &.uui-fill-outline {
545
+ --uui-badge-bg: var(--uui-neutral-20);
546
+ --uui-badge-bg-hover: var(--uui-neutral-30);
547
+ --uui-badge-border: var(--uui-neutral-40);
548
+ --uui-badge-caption: var(--uui-neutral-80);
549
+ --uui-badge-caption-hover: var(--uui-neutral-80);
550
+ }
551
+ }
552
+
553
+ .uui-badge.uui-color-gray10 {
554
+ --uui-badge-bg: var(--uui-neutral-10);
555
+ --uui-badge-bg-hover: var(--uui-neutral-20);
556
+ --uui-badge-border: var(--uui-neutral-10);
557
+ --uui-badge-border-hover: var(--uui-neutral-20);
558
+
559
+ &.uui-fill-outline {
560
+ --uui-badge-border: var(--uui-neutral-30);
561
+ --uui-badge-caption: var(--uui-neutral-80);
562
+ --uui-badge-caption-hover: var(--uui-neutral-80);
563
+ }
564
+ }
565
+
566
+ .uui-badge.uui-color-gray60.uui-fill-outline {
567
+ --uui-badge-bg-hover: var(--uui-neutral-30);
568
+ --uui-badge-border: var(--uui-neutral-60);
569
+ --uui-badge-border-hover: var(--uui-neutral-60);
570
+ --uui-badge-caption: var(--uui-neutral-80);
571
+ --uui-badge-caption-hover: var(--uui-neutral-80);
572
+ }
573
+
574
+ .uui-badge.uui-color-yellow.uui-fill-outline {
575
+ --uui-badge-border: var(--yellow-20);
552
576
  }
553
577
 
578
+ /* Button */
579
+
580
+ .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-gray50, .uui-color-gray60):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
581
+ --uui-btn-caption: var(--uui-neutral-70);
582
+ }
583
+
584
+ /* IconButton */
585
+
554
586
  .uui-icon_button.uui-color-neutral,
555
- .uui-icon_button.uui-color-gray60,
587
+ .uui-icon_button.uui-color-gray60 {
588
+ --uui-icon-btn: var(--uui-neutral-60);
589
+ --uui-icon-btn-hover: var(--uui-neutral-70);
590
+ --uui-icon-btn-active: var(--uui-neutral-80);
591
+ }
592
+
556
593
  .uui-icon_button.uui-color-secondary {
557
- --uui-color-5: var(--uui-secondary-5);
558
- --uui-color-10: var(--uui-secondary-10);
559
- --uui-color-20: var(--uui-secondary-20);
560
- --uui-color-50: var(--uui-secondary-50);
561
- --uui-color-60: var(--uui-secondary-60);
562
- --uui-color-70: var(--uui-secondary-70);
563
- --uui-color-text: var(--uui-secondary-60);
564
- --uui-color-contrast-text: var(--uui-text-white);
594
+ --uui-icon-btn: var(--uui-neutral-50);
595
+ --uui-icon-btn-hover: var(--uui-neutral-60);
596
+ --uui-icon-btn-active: var(--uui-neutral-70);
565
597
  }
566
598
 
599
+ /* TooltipContainer */
600
+
567
601
  .uui-tooltip-container.uui-color-white,
568
602
  .uui-tooltip-container.uui-color-neutral {
569
- --uui-color-50: var(--white);
570
- --uui-color-contrast-text: var(--uui-text-dark);
603
+ --uui-tooltip-bg: var(--white);
604
+ --uui-tooltip-text: var(--uui-neutral-80);
571
605
  }
572
606
 
573
607
  .uui-tooltip-container.uui-color-red,
574
608
  .uui-tooltip-container.uui-color-critical {
575
- --uui-color-50: var(--uui-critical-60);
609
+ --uui-tooltip-bg: var(--uui-critical-60);
576
610
  }
577
611
 
578
612
  .uui-tooltip-container.uui-color-gray,
579
613
  .uui-tooltip-container.uui-color-contrast {
580
- --uui-color-50: var(--gray80);
581
- --uui-color-contrast-text: var(--uui-text-white);
614
+ --uui-tooltip-bg: var(--uui-neutral-80);
615
+ --uui-tooltip-text: var(--white);
616
+ }
617
+
618
+ /* CountIndicator */
619
+
620
+ .uui-count_indicator.uui-color-gray,
621
+ .uui-count_indicator.uui-color-neutral {
622
+ --uui-count_indicator-bg: var(--uui-neutral-30);
623
+ --uui-count_indicator-border: var(--uui-neutral-30);
624
+ }
625
+
626
+ .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning) {
627
+ --uui-count_indicator-caption: var(--uui-neutral-70);
582
628
  }
583
629
 
584
- /* Informer */
630
+ /* Status Indicator */
585
631
 
586
- .uui-informer.uui-color-gray,
587
- .uui-informer.uui-color-neutral {
588
- --uui-color-50: var(--uui-neutral-30);
589
- --uui-informer-caption: var(--uui-text-dark);
632
+ .uui-status_indicator.uui-color-white.uui-fill-outline {
633
+ .uui-status_indicator_dot {
634
+ background-color: color-mix(in srgb, var(--white) 20%, transparent);
635
+ border: 1px solid var(--uui-neutral-40);
636
+ }
590
637
  }
591
638
 
639
+ /* FlexRow */
640
+
592
641
  .uui-flex-row.uui-color-none {
593
642
  --uui-flex-row-bg: transparent;
594
643
  }
@@ -617,7 +666,7 @@
617
666
  --uui-tag-border-radius: 0;
618
667
  }
619
668
 
620
- // fonts
669
+ /* fonts */
621
670
 
622
671
  .uui-font-sans {
623
672
  --uui-text-font: var(--uui-font);
@@ -653,3 +702,7 @@
653
702
  }
654
703
  }
655
704
 
705
+ .uui-theme-promo {
706
+ @include theme-promo();
707
+ }
708
+