@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_electric.scss CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  @import '../scss/electric/font-faces';
5
5
 
6
- .uui-theme-electric {
6
+ @mixin theme-electric {
7
7
  --uui-font: 'Source Sans Pro', sans-serif;
8
8
  --font-primary: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
9
9
  --font-promo: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
@@ -54,58 +54,58 @@
54
54
  --yellow-5: #FFFFF0;
55
55
  --yellow-10: #FFFECC;
56
56
  --yellow-20: #FFFCA4;
57
- --yellow-30: #FDD63B;
58
- --yellow-40: #F9B71D;
59
- --yellow-50: #D3910C;
57
+ --yellow-50: #FDD63B;
58
+ --yellow-60: #F9B71D;
59
+ --yellow-70: #D3910C;
60
60
 
61
61
  --orange-5: #FEF8F4;
62
62
  --orange-10: #FFE8D7;
63
63
  --orange-20: #FFCCA7;
64
- --orange-30: #FF8B3E;
65
- --orange-40: #F76B0D;
66
- --orange-50: #BD4B00;
64
+ --orange-50: #FF8B3E;
65
+ --orange-60: #F76B0D;
66
+ --orange-70: #BD4B00;
67
67
 
68
68
  --fuchsia-5: #FFF7FB;
69
69
  --fuchsia-10: #F9D8E7;
70
70
  --fuchsia-20: #EDADC8;
71
- --fuchsia-30: #EA4386;
72
- --fuchsia-40: #D61E68;
73
- --fuchsia-50: #AE1955;
71
+ --fuchsia-50: #EA4386;
72
+ --fuchsia-60: #D61E68;
73
+ --fuchsia-70: #AE1955;
74
74
 
75
75
  --purple-5: #FDF6FE;
76
76
  --purple-10: #F2CCFA;
77
77
  --purple-20: #E79DF5;
78
- --purple-30: #B114D1;
79
- --purple-40: #860F9E;
80
- --purple-50: #5E0B6F;
78
+ --purple-50: #B114D1;
79
+ --purple-60: #860F9E;
80
+ --purple-70: #5E0B6F;
81
81
 
82
- --lavanda-5: #F8F6FE;
83
- --lavanda-10: #DBCCFA;
84
- --lavanda-20: #BB9DF5;
85
- --lavanda-30: #773CEC;
86
- --lavanda-40: #5514D6;
87
- --lavanda-50: #40109E;
82
+ --violet-5: #F8F6FE;
83
+ --violet-10: #DBCCFA;
84
+ --violet-20: #BB9DF5;
85
+ --violet-50: #773CEC;
86
+ --violet-60: #5514D6;
87
+ --violet-70: #40109E;
88
88
 
89
89
  --cobalt-5: #F8FAFF;
90
90
  --cobalt-10: #D9E2FC;
91
91
  --cobalt-20: #AEC0F5;
92
- --cobalt-30: #0F98FF;
93
- --cobalt-40: #006FE5;
94
- --cobalt-50: #0954A5;
92
+ --cobalt-50: #0F98FF;
93
+ --cobalt-60: #006FE5;
94
+ --cobalt-70: #0954A5;
95
95
 
96
96
  --cyan-5: #F5FBFF;
97
97
  --cyan-10: #D1FAFA;
98
98
  --cyan-20: #AAEEEE;
99
- --cyan-30: #14CCCC;
100
- --cyan-40: #0F9E9E;
101
- --cyan-50: #0B6F6F;
99
+ --cyan-50: #14CCCC;
100
+ --cyan-60: #0F9E9E;
101
+ --cyan-70: #0B6F6F;
102
102
 
103
103
  --mint-5: #F2FCF5;
104
104
  --mint-10: #DDF3E4;
105
105
  --mint-20: #B4DFC4;
106
- --mint-30: #4FC48C;
107
- --mint-40: #2E9E68;
108
- --mint-50: #236E4A;
106
+ --mint-50: #4FC48C;
107
+ --mint-60: #2E9E68;
108
+ --mint-70: #236E4A;
109
109
 
110
110
  --gradient-1: linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
111
111
  --gradient-2: linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
@@ -123,6 +123,7 @@
123
123
  --uui-accent-50: var(--emerald-50);
124
124
  --uui-accent-60: var(--emerald-60);
125
125
  --uui-accent-70: var(--emerald-70);
126
+ --uui-accent-contrast: var(--white);
126
127
 
127
128
  --uui-primary-5: var(--electric-5);
128
129
  --uui-primary-10: var(--electric-10);
@@ -130,6 +131,7 @@
130
131
  --uui-primary-50: var(--electric-50);
131
132
  --uui-primary-60: var(--electric-60);
132
133
  --uui-primary-70: var(--electric-70);
134
+ --uui-primary-contrast: var(--white);
133
135
 
134
136
  --uui-secondary-5: var(--night200);
135
137
  --uui-secondary-10: var(--night300);
@@ -137,6 +139,7 @@
137
139
  --uui-secondary-50: var(--night600);
138
140
  --uui-secondary-60: var(--night700);
139
141
  --uui-secondary-70: var(--night800);
142
+ --uui-secondary-contrast: var(--white);
140
143
 
141
144
  --uui-critical-5: var(--fire-5);
142
145
  --uui-critical-10: var(--fire-10);
@@ -144,6 +147,7 @@
144
147
  --uui-critical-50: var(--fire-50);
145
148
  --uui-critical-60: var(--fire-60);
146
149
  --uui-critical-70: var(--fire-70);
150
+ --uui-critical-contrast: var(--white);
147
151
 
148
152
  /* semantic colors */
149
153
 
@@ -153,6 +157,7 @@
153
157
  --uui-info-50: var(--electric-50);
154
158
  --uui-info-60: var(--electric-60);
155
159
  --uui-info-70: var(--electric-70);
160
+ --uui-info-contrast: var(--white);
156
161
 
157
162
  --uui-success-5: var(--emerald-5);
158
163
  --uui-success-10: var(--emerald-10);
@@ -160,13 +165,14 @@
160
165
  --uui-success-50: var(--emerald-50);
161
166
  --uui-success-60: var(--emerald-60);
162
167
  --uui-success-70: var(--emerald-70);
168
+ --uui-success-contrast: var(--white);
163
169
 
164
170
  --uui-warning-5: var(--sun-5);
165
171
  --uui-warning-10: var(--sun-10);
166
172
  --uui-warning-20: var(--sun-20);
167
173
  --uui-warning-50: var(--sun-50);
168
174
  --uui-warning-60: var(--sun-60);
169
- --uui-warning-70: var(--sun-70);
175
+ --uui-warning-contrast: var(--uui-neutral-80);
170
176
 
171
177
  --uui-error-5: var(--fire-5);
172
178
  --uui-error-10: var(--fire-10);
@@ -174,6 +180,7 @@
174
180
  --uui-error-50: var(--fire-50);
175
181
  --uui-error-60: var(--fire-60);
176
182
  --uui-error-70: var(--fire-70);
183
+ --uui-error-contrast: var(--white);
177
184
 
178
185
  --uui-neutral-0: #FFFFFF;
179
186
  --uui-neutral-5: var(--night50);
@@ -186,6 +193,7 @@
186
193
  --uui-neutral-70: var(--night700);
187
194
  --uui-neutral-80: var(--night800);
188
195
  --uui-neutral-90: var(--night900);
196
+ --uui-neutral-95: var(--night950);
189
197
  --uui-neutral-100: #000000;
190
198
 
191
199
  /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
@@ -193,17 +201,10 @@
193
201
  --uui-app-bg: var(--uui-neutral-10);
194
202
  --uui-overlay: rgba(29, 30, 38, 0.8);
195
203
 
196
- --uui-surface: var(--uui-neutral-0);
197
- --uui-surface-low: var(--uui-neutral-5);
198
- --uui-surface-lower: var(--uui-neutral-10);
199
- --uui-surface-lowest: var(--uui-neutral-20);
200
- --uui-surface-contrast: var(--uui-neutral-70);
201
- --uui-surface-contrast-low: var(--uui-neutral-80);
202
- --uui-surface-contrast-lower: var(--uui-neutral-90);
203
-
204
- --uui-surface-active: var(--sky-lightest);
205
- --uui-surface-critical: var(--fire-lightest);
206
- --uui-surface-warning: var(--sun-lightest);
204
+ --uui-surface-sunken: var(--uui-neutral-5);
205
+ --uui-surface-main: var(--uui-neutral-0);
206
+ --uui-surface-higher: var(--uui-neutral-10);
207
+ --uui-surface-highest: var(--uui-neutral-20);
207
208
 
208
209
  --uui-divider: var(--uui-neutral-40);
209
210
  --uui-divider-light: var(--uui-neutral-30);
@@ -214,36 +215,31 @@
214
215
  --uui-text-tertiary: var(--uui-neutral-60);
215
216
  --uui-text-disabled: var(--uui-neutral-50);
216
217
  --uui-text-contrast: var(--uui-neutral-5);
217
- --uui-text-white: var(--white);
218
- --uui-text-dark: var(--night800);
219
218
 
220
- --uui-text-info: var(--uui-info-50);
221
- --uui-text-warning: var(--uui-warning-50);
222
- --uui-text-error: var(--uui-error-50);
223
- --uui-text-success: var(--uui-success-50);
219
+ --uui-text-info: var(--uui-info-70);
220
+ --uui-text-warning: var(--uui-warning-70);
221
+ --uui-text-critical: var(--uui-critical-70);
222
+ --uui-text-success: var(--uui-success-70);
224
223
 
225
224
  /* not accepted part */
226
225
 
227
- --uui-disabled: var(--uui-neutral-30); // TODO: name does not clearly reflect the meaning
228
-
229
226
  /* control specific */
230
227
 
231
- --uui-link: var(--sky);
232
- --uui-link-hover: var(--sky-dark);
233
- --uui-link-wite-hover: var(--uui-neutral-40);
234
- --uui-link-black-hover: var(--uui-neutral-80);
228
+ --uui-link: var(--electric-50);
229
+ --uui-link-hover: var(--electric-60);
235
230
  --uui-link-visited: #8018A0;
231
+ --uui-link-visited-hover: #601278;
236
232
  --uui-link-disabled: var(--uui-neutral-50);
237
233
 
238
- --uui-icon: var(--uui-neutral-60);
239
- --uui-icon-hover: var(--uui-neutral-70);
240
- --uui-icon-active: var(--uui-neutral-80);
241
- --uui-icon-disabled: var(--uui-neutral-50);
234
+ --uui-icon: var(--uui-neutral-95);
235
+ --uui-icon-hover: var(--uui-neutral-100);
236
+ --uui-icon-active: var(--uui-neutral-100);
237
+ --uui-icon-disabled: var(--uui-neutral-40);
242
238
 
243
239
  --uui-scroll_bars-bg: var(--uui-neutral-40);
244
240
  --uui-scroll_bars-bg-active: var(--uui-neutral-60);
245
241
 
246
- --uui-control-bg: var(--uui-surface);
242
+ --uui-control-bg: var(--uui-surface-main);
247
243
  --uui-control-bg-hover: var(--uui-neutral-60);
248
244
  --uui-control-bg-disabled: var(--uui-neutral-5);
249
245
  --uui-control-bg-readonly: var(--uui-neutral-5);
@@ -268,9 +264,9 @@
268
264
 
269
265
  --uui-control-checkbox-icon: var(--uui-neutral-0);
270
266
 
271
- --uui-control-focus: #008ACE80;
267
+ --uui-outline-focus: #008ACE80;
272
268
 
273
- --uui-search-result-highlight: var(--uui-warning-10);
269
+ --uui-search_result-bg-highlight: var(--uui-warning-10);
274
270
 
275
271
  --uui-skeleton: var(--uui-neutral-40);
276
272
  --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
@@ -286,8 +282,6 @@
286
282
 
287
283
  /* override variables */
288
284
 
289
- --uui-accordion-border-radius: 6px;
290
-
291
285
  /* begin color classes */
292
286
 
293
287
  .uui-color-accent,
@@ -299,10 +293,10 @@
299
293
  --uui-color-50: var(--uui-accent-50);
300
294
  --uui-color-60: var(--uui-accent-60);
301
295
  --uui-color-70: var(--uui-accent-70);
302
- --uui-color-text: var(--uui-accent-50);
303
- --uui-color-contrast-text: var(--uui-text-white);
296
+ --uui-color-contrast: var(--white);
304
297
  }
305
298
 
299
+ .uui-button.uui-color-accent,
306
300
  .uui-color-primary,
307
301
  .uui-color-electric,
308
302
  .uui-color-info {
@@ -312,8 +306,7 @@
312
306
  --uui-color-50: var(--uui-primary-50);
313
307
  --uui-color-60: var(--uui-primary-60);
314
308
  --uui-color-70: var(--uui-primary-70);
315
- --uui-color-text: var(--uui-primary-50);
316
- --uui-color-contrast-text: var(--uui-text-white);
309
+ --uui-color-contrast: var(--white);
317
310
  }
318
311
 
319
312
  .uui-color-fire,
@@ -325,20 +318,28 @@
325
318
  --uui-color-50: var(--uui-critical-50);
326
319
  --uui-color-60: var(--uui-critical-60);
327
320
  --uui-color-70: var(--uui-critical-70);
328
- --uui-color-text: var(--uui-critical-50);
329
- --uui-color-contrast-text: var(--uui-text-white);
321
+ --uui-color-contrast: var(--white);
330
322
  }
331
323
 
332
- .uui-color-gray,
333
- .uui-color-secondary { // +
324
+ .uui-color-white {
325
+ --uui-color-5: var(--white);
326
+ --uui-color-10: var(--white);
327
+ --uui-color-20: var(--white);
328
+ --uui-color-50: var(--white);
329
+ --uui-color-60: var(--night100);
330
+ --uui-color-70: var(--night200);
331
+ --uui-color-contrast: var(--night800);
332
+ }
333
+
334
+ .uui-color-neutral,
335
+ .uui-color-secondary {
334
336
  --uui-color-5: var(--uui-secondary-5);
335
337
  --uui-color-10: var(--uui-secondary-10);
336
338
  --uui-color-20: var(--uui-secondary-20);
337
339
  --uui-color-50: var(--uui-secondary-50);
338
340
  --uui-color-60: var(--uui-secondary-60);
339
341
  --uui-color-70: var(--uui-secondary-70);
340
- --uui-color-text: var(--uui-secondary-60);
341
- --uui-color-contrast-text: var(--uui-text-white);
342
+ --uui-color-contrast: var(--white);
342
343
  }
343
344
 
344
345
  .uui-color-sun,
@@ -349,109 +350,139 @@
349
350
  --uui-color-50: var(--sun-50);
350
351
  --uui-color-60: var(--sun-60);
351
352
  --uui-color-70: var(--sun-70);
352
- --uui-color-text: var(--sun-70);
353
- --uui-color-contrast-text: var(--uui-text-dark);
353
+ --uui-color-contrast: var(--uui-neutral-80);
354
354
  }
355
355
 
356
356
  .uui-color-yellow {
357
357
  --uui-color-5: var(--yellow-5);
358
358
  --uui-color-10: var(--yellow-10);
359
359
  --uui-color-20: var(--yellow-20);
360
- --uui-color-50: var(--yellow-30);
361
- --uui-color-60: var(--yellow-40);
362
- --uui-color-70: var(--yellow-50);
363
- --uui-color-text: var(--yellow-50);
364
- --uui-color-contrast-text: var(--uui-text-dark);
360
+ --uui-color-50: var(--yellow-50);
361
+ --uui-color-60: var(--yellow-60);
362
+ --uui-color-70: var(--yellow-70);
363
+ --uui-color-contrast: var(--uui-neutral-80);
365
364
  }
366
365
 
367
366
  .uui-color-orange {
368
367
  --uui-color-5: var(--orange-5);
369
368
  --uui-color-10: var(--orange-10);
370
369
  --uui-color-20: var(--orange-20);
371
- --uui-color-50: var(--orange-30);
372
- --uui-color-60: var(--orange-40);
373
- --uui-color-70: var(--orange-50);
374
- --uui-color-text: var(--orange-50);
375
- --uui-color-contrast-text: var(--uui-text-dark);
370
+ --uui-color-50: var(--orange-50);
371
+ --uui-color-60: var(--orange-60);
372
+ --uui-color-70: var(--orange-70);
373
+ --uui-color-contrast: var(--uui-neutral-80);
376
374
  }
377
375
 
378
376
  .uui-color-fuchsia {
379
377
  --uui-color-5: var(--fuchsia-5);
380
378
  --uui-color-10: var(--fuchsia-10);
381
379
  --uui-color-20: var(--fuchsia-20);
382
- --uui-color-50: var(--fuchsia-30);
383
- --uui-color-60: var(--fuchsia-40);
384
- --uui-color-70: var(--fuchsia-50);
385
- --uui-color-text: var(--fuchsia-50);
386
- --uui-color-contrast-text: var(--uui-text-white);
380
+ --uui-color-50: var(--fuchsia-50);
381
+ --uui-color-60: var(--fuchsia-60);
382
+ --uui-color-70: var(--fuchsia-70);
383
+ --uui-color-contrast: var(--white);
387
384
  }
388
385
 
389
386
  .uui-color-purple {
390
387
  --uui-color-5: var(--purple-5);
391
388
  --uui-color-10: var(--purple-10);
392
389
  --uui-color-20: var(--purple-20);
393
- --uui-color-50: var(--purple-30);
394
- --uui-color-60: var(--purple-40);
395
- --uui-color-70: var(--purple-50);
396
- --uui-color-text: var(--purple-50);
397
- --uui-color-contrast-text: var(--uui-text-white);
390
+ --uui-color-50: var(--purple-50);
391
+ --uui-color-60: var(--purple-60);
392
+ --uui-color-70: var(--purple-70);
393
+ --uui-color-contrast: var(--white);
398
394
  }
399
395
 
400
- .uui-color-lavanda {
401
- --uui-color-5: var(--lavanda-5);
402
- --uui-color-10: var(--lavanda-10);
403
- --uui-color-20: var(--lavanda-20);
404
- --uui-color-50: var(--lavanda-30);
405
- --uui-color-60: var(--lavanda-40);
406
- --uui-color-70: var(--lavanda-50);
407
- --uui-color-text: var(--lavanda-50);
408
- --uui-color-contrast-text: var(--uui-text-white);
396
+ .uui-color-violet {
397
+ --uui-color-5: var(--violet-5);
398
+ --uui-color-10: var(--violet-10);
399
+ --uui-color-20: var(--violet-20);
400
+ --uui-color-50: var(--violet-50);
401
+ --uui-color-60: var(--violet-60);
402
+ --uui-color-70: var(--violet-70);
403
+ --uui-color-contrast: var(--white);
409
404
  }
410
405
 
411
406
  .uui-color-cobalt {
412
407
  --uui-color-5: var(--cobalt-5);
413
408
  --uui-color-10: var(--cobalt-10);
414
409
  --uui-color-20: var(--cobalt-20);
415
- --uui-color-50: var(--cobalt-30);
416
- --uui-color-60: var(--cobalt-40);
417
- --uui-color-70: var(--cobalt-50);
418
- --uui-color-text: var(--cobalt-50);
419
- --uui-color-contrast-text: var(--uui-text-white);
410
+ --uui-color-50: var(--cobalt-50);
411
+ --uui-color-60: var(--cobalt-60);
412
+ --uui-color-70: var(--cobalt-70);
413
+ --uui-color-contrast: var(--white);
420
414
  }
421
415
 
422
416
  .uui-color-cyan {
423
417
  --uui-color-5: var(--cyan-5);
424
418
  --uui-color-10: var(--cyan-10);
425
419
  --uui-color-20: var(--cyan-20);
426
- --uui-color-50: var(--cyan-30);
427
- --uui-color-60: var(--cyan-40);
428
- --uui-color-70: var(--cyan-50);
429
- --uui-color-text: var(--cyan-50);
430
- --uui-color-contrast-text: var(--uui-text-dark);
420
+ --uui-color-50: var(--cyan-50);
421
+ --uui-color-60: var(--cyan-60);
422
+ --uui-color-70: var(--cyan-70);
423
+ --uui-color-contrast: var(--uui-neutral-80);
431
424
  }
432
425
 
433
426
  .uui-color-mint {
434
427
  --uui-color-5: var(--mint-5);
435
428
  --uui-color-10: var(--mint-10);
436
429
  --uui-color-20: var(--mint-20);
437
- --uui-color-50: var(--mint-30);
438
- --uui-color-60: var(--mint-40);
439
- --uui-color-70: var(--mint-50);
440
- --uui-color-text: var(--mint-50);
441
- --uui-color-contrast-text: var(--uui-text-dark);
430
+ --uui-color-50: var(--mint-50);
431
+ --uui-color-60: var(--mint-60);
432
+ --uui-color-70: var(--mint-70);
433
+ --uui-color-contrast: var(--uui-neutral-80);
434
+ }
435
+
436
+ /* Accordion */
437
+
438
+ .uui-accordion-container {
439
+ --uui-accordion-border-radius: 6px;
440
+ }
441
+
442
+ /* FileCard */
443
+
444
+ .uui-file_card {
445
+ --uui-file_card-border-radius: 6px;
446
+ }
447
+
448
+ /* Badge */
449
+
450
+ .uui-badge.uui-color-white.uui-fill-outline {
451
+ --uui-badge-bg-hover: var(--uui-neutral-10);
452
+ --uui-badge-border: var(--uui-neutral-30);
453
+ --uui-badge-border-hover: var(--uui-neutral-30);
454
+ --uui-badge-caption: var(--uui-neutral-80);
455
+ --uui-badge-caption-hover: var(--uui-neutral-80);
442
456
  }
443
457
 
444
458
  .uui-badge.uui-color-neutral {
445
- --uui-color-5: var(--night200);
446
- --uui-color-10: var(--night300);
447
- --uui-color-20: var(--night400);
448
- --uui-color-50: var(--night300);
449
- --uui-color-60: var(--night400);
450
- --uui-color-70: var(--night500);
451
- --uui-color-text: var(--uui-text-primary);
452
- --uui-color-contrast-text: var(--uui-text-primary);
459
+ --uui-badge-bg: var(--uui-neutral-30);
460
+ --uui-badge-border: var(--uui-neutral-30);
461
+ --uui-badge-bg-hover: var(--uui-neutral-40);
462
+ --uui-badge-border-hover: var(--uui-neutral-40);
463
+ --uui-color-contrast: var(--uui-neutral-80);
464
+
465
+ &.uui-fill-outline {
466
+ --uui-badge-bg: var(--uui-neutral-20);
467
+ --uui-badge-border: var(--uui-neutral-40);
468
+ --uui-badge-bg-hover: var(--uui-neutral-30);
469
+ --uui-badge-caption: var(--uui-neutral-80);
470
+ --uui-badge-caption-hover: var(--uui-neutral-80);
471
+ }
453
472
  }
454
473
 
474
+ .uui-badge.uui-color-yellow.uui-fill-outline {
475
+ --uui-badge-border: var(--yellow-20);
476
+ }
477
+
478
+ /* Button */
479
+
480
+ .uui-button:is(.uui-color-secondary, .uui-color-neutral):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
481
+ --uui-btn-caption: var(--uui-neutral-70);
482
+ }
483
+
484
+ /* IconButton */
485
+
455
486
  .uui-icon_button.uui-color-neutral {
456
487
  --uui-color-5: var(--uui-secondary-5);
457
488
  --uui-color-10: var(--uui-secondary-10);
@@ -459,28 +490,47 @@
459
490
  --uui-color-50: var(--uui-secondary-50);
460
491
  --uui-color-60: var(--uui-secondary-60);
461
492
  --uui-color-70: var(--uui-secondary-70);
462
- --uui-color-text: var(--uui-secondary-60);
463
- --uui-color-contrast-text: var(--uui-text-white);
493
+ --uui-color-contrast: var(--white);
464
494
  }
465
495
 
496
+ /* TooltipContainer */
497
+
466
498
  .uui-tooltip-container.uui-color-neutral {
467
- --uui-color-50: var(--white);
468
- --uui-color-contrast-text: var(--uui-text-dark);
499
+ --uui-tooltip-bg: var(--white);
500
+ --uui-color-contrast: var(--uui-neutral-80);
469
501
  }
470
502
 
471
503
  .uui-tooltip-container.uui-color-critical {
472
- --uui-color-50: var(--uui-critical-60);
504
+ --uui-tooltip-bg: var(--uui-critical-60);
473
505
  }
474
506
 
475
507
  .uui-tooltip-container.uui-color-contrast {
476
- --uui-color-50: var(--night800);
477
- --uui-color-contrast-text: var(--uui-text-white);
508
+ --uui-tooltip-bg: var(--night800);
509
+ --uui-color-contrast: var(--white);
510
+ }
511
+
512
+ /* CuntIndicator */
513
+
514
+ .uui-count_indicator.uui-color-neutral {
515
+ --uui-count_indicator-bg: var(--uui-neutral-30);
516
+ --uui-count_indicator-border: var(--uui-neutral-30);
517
+ }
518
+
519
+ .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning) {
520
+ --uui-count_indicator-caption: var(--uui-neutral-70);
478
521
  }
479
522
 
480
- /* Informer */
523
+ /* Status Indicator */
481
524
 
482
- .uui-informer.uui-color-neutral {
483
- --uui-color-50: var(--uui-neutral-30);
484
- --uui-informer-caption: var(--uui-text-dark);
525
+ .uui-status_indicator.uui-color-white.uui-fill-outline {
526
+ .uui-status_indicator_dot {
527
+ background-color: color-mix(in srgb, var(--white) 20%, transparent);
528
+ border: 1px solid var(--uui-neutral-40);
529
+ }
485
530
  }
531
+
532
+ }
533
+
534
+ .uui-theme-electric {
535
+ @include theme-electric();
486
536
  }