@epam/assets 4.11.0-alpha.1 → 5.0.0-alpha.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 (25) hide show
  1. package/less/control-mods.less +1 -1
  2. package/less/control-size.less +1 -1
  3. package/less/effects.less +1 -1
  4. package/less/globals.less +1 -1
  5. package/less/index.less +1 -1
  6. package/less/loveship-color-vars.less +1 -1
  7. package/less/loveship-colors.less +1 -1
  8. package/less/text-size.less +1 -1
  9. package/package.json +2 -2
  10. package/scss/contrast.scss +1 -1
  11. package/scss/control-layout.scss +1 -1
  12. package/scss/control-size.scss +1 -1
  13. package/scss/dnd.scss +1 -1
  14. package/scss/effects.scss +1 -1
  15. package/scss/loveship-colors.scss +19 -19
  16. package/scss/promo/font-faces.scss +1 -1
  17. package/styles/error-pages.less +1 -1
  18. package/styles/index.less +1 -1
  19. package/styles/menu.less +1 -2
  20. package/styles/scss/error-pages.scss +1 -1
  21. package/styles/scss/index.scss +1 -1
  22. package/styles/scss/menu.scss +1 -2
  23. package/theme/theme_loveship.scss +307 -268
  24. package/theme/theme_promo.scss +217 -170
  25. package/theme/theme_vanilla_thunder.scss +1014 -0
package/theme/theme_loveship.scss CHANGED
@@ -1,5 +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
+ // refactor indentions for this page using co-pilot
4
+
3
5
  :global(.uui-theme-loveship) {
4
6
  --font-regular: 'Sans Regular', Arial, sans-serif;
5
7
  --font-semibold: 'Sans Semibold', Arial, sans-serif;
@@ -10,6 +12,12 @@
10
12
  --font-redacted: 'Redacted';
11
13
  --font-light: 'Sans Light', Arial, sans-serif;
12
14
 
15
+ --orange-10: #FFE1BD;
16
+ --orange-20: #FFD091;
17
+ --orange-30: #E44E00;
18
+ --orange-40: #C63100;
19
+ --orange-50: #991900;
20
+
13
21
  --fuchia-10: #FFD7D9;
14
22
  --fuchia-20: #FFA9B3;
15
23
  --fuchia-30: #CD0053;
@@ -77,17 +85,6 @@
77
85
  --fire-dark: #CC2929;
78
86
  --fire-darkest: #B32424;
79
87
 
80
- --gray5: #FAFAFC;
81
- --gray10: #F5F6FA;
82
- --gray20: #EBEDF5;
83
- --gray30: #E1E3EB;
84
- --gray40: #CED0DB;
85
- --gray50: #ACAFBF;
86
- --gray60: #6C6F80;
87
- --gray70: #474A59;
88
- --gray80: #303240;
89
- --gray90: #1D1E26;
90
-
91
88
  --blue-lightest: #CEEFFF;
92
89
  --blue-light: #B5E6FF;
93
90
  --blue: #008ACE;
@@ -157,6 +154,8 @@
157
154
  --uui-color-night600-900: #3D3F49;
158
155
  /* end Loveship old colors */
159
156
 
157
+ /* core variables start */
158
+
160
159
  --uui-accent: var(--green);
161
160
  --uui-accent-light: var(--green-light);
162
161
  --uui-accent-lightest: var(--green-lightest);
@@ -170,14 +169,11 @@
170
169
  --uui-primary-dark: var(--sky-dark);
171
170
  --uui-primary-darkest: var(--sky-darkest);
172
171
 
173
- --uui-secondary: var(--night500);
172
+ --uui-secondary: var(--night600);
174
173
  --uui-secondary-light: var(--night300);
175
174
  --uui-secondary-lightest: var(--night200);
176
- --uui-secondary-dark: var(--night600);
177
- --uui-secondary-darkest: var(--night700);
178
- --uui-secondary-hover: var(--gray60);
179
- --uui-secondary-active: var(--gray70);
180
- --uui-secondary-disabled: var(--night400);
175
+ --uui-secondary-dark: var(--night700);
176
+ --uui-secondary-darkest: var(--night800);
181
177
 
182
178
  --uui-negative: var(--fire);
183
179
  --uui-negative-light: var(--fire-light);
@@ -185,15 +181,10 @@
185
181
  --uui-negative-dark: var(--fire-dark);
186
182
  --uui-negative-darkest: var(--fire-darkest);
187
183
 
188
- --uui-button-bg-halftone: var(--white);
189
- --uui-button-caption-disabled: var(--night500);
190
- --uui-contrast: var(--white);
191
-
192
184
  --uui-link: var(--sky);
193
185
  --uui-link-hover: var(--sky-dark);
194
186
  --uui-link-visited: #8018A0;
195
187
  --uui-link-disabled: var(--night500);
196
-
197
188
  --uui-visited: #5214CC;
198
189
 
199
190
  --uui-info: var(--sky);
@@ -235,15 +226,26 @@
235
226
 
236
227
  --uui-surface: var(--white);
237
228
  --uui-surface-hover: var(--night200);
238
- --uui-surface-light: var(--white);
239
229
  --uui-surface-inverted: var(--night900);
230
+ /* new start */
231
+ --uui-surface-light: var(--night50);
232
+ --uui-surface-light-hover: var(--night100);
233
+ --uui-surface-contrast: var(--night800);
234
+ --uui-surface-contrast-hover: var(--night900);
235
+ --uui-surface-contrast-active: var(--night900);
236
+ /* new end */
240
237
 
241
238
  --uui-background: var(--night100);
242
239
  --uui-divider: var(--night400);
240
+ --uui-divider-light: var(--night300);
241
+ --uui-contrast: var(--white);
243
242
  --uui-disabled: var(--night300);
244
243
 
245
- --uui-scroll-bar-bg: var(--night400);
246
- --uui-scroll-bar-bg-active: var(--night600);
244
+ --uui-scroll-bars-bg: var(--night400);
245
+ --uui-scroll-bars-bg-active: var(--night600);
246
+
247
+ --uui-button-bg-halftone: var(--white);
248
+ --uui-button-caption-disabled: var(--night500);
247
249
 
248
250
  --uui-text-brand: var(--night900);
249
251
  --uui-text-primary: var(--night800);
@@ -251,8 +253,6 @@
251
253
  --uui-text-disabled: var(--night500);
252
254
  --uui-text-contrast: var(--night50);
253
255
 
254
- --uui-caption: var(--white);
255
-
256
256
  --uui-control-bg: var(--white);
257
257
  --uui-control-bg-checked: var(--uui-primary);
258
258
  --uui-control-bg-checked-hover: var(--uui-primary-dark);
@@ -260,6 +260,8 @@
260
260
  --uui-control-bg-hover: var(--night600);
261
261
  --uui-control-bg-disabled: var(--night50);
262
262
  --uui-control-bg-readonly: var(--night50);
263
+ --uui-control_switch-bg: var(--night400);
264
+ --uui-control_switch_toggler-bg: var(--white);
263
265
 
264
266
  --uui-control-border-checked-disabled: var(--uui-primary-light);
265
267
  --uui-control-border: var(--night400);
@@ -269,11 +271,8 @@
269
271
  --uui-control-border-disabled: var(--uui-disabled);
270
272
  --uui-control-border-readonly: var(--uui-disabled);
271
273
 
272
- --uui-control-textinput-border-hover: var(--night600);
273
-
274
- --uui-control-rest: var(--uui-primary);
275
- --uui-control-hover: var(--uui-primary-dark);
276
- --uui-control-active: var(--uui-primary-darkest);
274
+ --uui-control_switch-border-hover: var(--night600);
275
+ --uui-control_textinput-border-hover: var(--night600);
277
276
 
278
277
  --uui-control-label: var(--uui-text-primary);
279
278
  --uui-control-label-disabled: var(--uui-text-disabled);
@@ -293,23 +292,28 @@
293
292
 
294
293
  --uui-control-checkbox-icon: var(--white);
295
294
 
295
+ --uui-tag-bg: var(--night300);
296
+ --uui-tag-bg-hover: var(--night400);
297
+
296
298
  --uui-skeleton: var(--night400);
297
299
  --uui-skeleton-gradient: linear-gradient(90deg, var(--night400) 0%, var(--night100) 50%, var(--night400) 100%);
298
300
 
299
301
  --uui-overlay: rgba(29, 30, 38, 0.8);
300
302
  --uui-border-radius: 3px;
301
- --uui-scroll: var(--night600);
302
- --uui-surface-inverted-light: var(--night800);
303
- --uui-btn-disabled: var(--gray50);
304
- --uui-shadow: 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10);
305
- --uui-surface-dark: var(--gray90);
303
+ --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
304
+ --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);
305
+ --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);
306
+
307
+ /* core variables end */
308
+
309
+ /* find below the not core variables that are used and highlight them in the code */
306
310
 
307
311
  /* TextInput vars */
308
312
  --uui-text-input-bg: var(--uui-control-bg);
309
313
  --uui-text-input-bg-disabled: var(--uui-control-bg-disabled);
310
314
  --uui-text-input-bg-readonly: var(--uui-control-bg-readonly);
311
315
  --uui-text-input-border: var(--uui-control-border);
312
- --uui-text-input-border-hover: var(--uui-control-textinput-border-hover);
316
+ --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
313
317
  --uui-text-input-border-active: var(--uui-control-border-checked);
314
318
  --uui-text-input-border-error: var(--uui-negative);
315
319
  --uui-text-input-border-disabled: var(--uui-control-border-disabled);
@@ -324,14 +328,19 @@
324
328
  --uui-text-input-icon-clickable-hover: var(--uui-icon-hover);
325
329
  --uui-text-input-border-radius: var(--uui-border-radius);
326
330
 
331
+ --uui-text-input-font: var(--font-regular);
332
+
327
333
  /* Button vars */
328
334
  --uui-btn-border-radius: var(--uui-border-radius);
329
335
 
336
+ --uui-btn-font: var(--font-semibold);
337
+
330
338
  /* LinkButton vars */
331
339
  --uui-link-button-text: var(--uui-primary);
332
340
  --uui-link-button-text-hover: var(--uui-primary-dark);
333
341
  --uui-link-button-text-active: var(--uui-primary-darkest);
334
342
  --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
343
+ --uui-link-button-font: var(--font-semibold);
335
344
 
336
345
  /* DatePicker vars */
337
346
  --uui-dtp-title-bg: var(--uui-control-bg);
@@ -341,6 +350,9 @@
341
350
  --uui-dtp-next-prev-icon: var(--uui-icon);
342
351
  --uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);
343
352
 
353
+ --uui-dtp_header-font: var(--font-semibold);
354
+ --uui-dtp_body-content-font: var(--font-regular);
355
+
344
356
  /* RangeDatePicker vars */
345
357
  --uui-rdtp-bg: var(--uui-control-bg);
346
358
  --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);
@@ -352,15 +364,17 @@
352
364
  --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
353
365
  --uui-calendar-text: var(--uui-control-text);
354
366
  --uui-calendar-text-filtered: var(--uui-control-text-disabled);
355
- --uui-calendar-bg-selected: var(--uui-secondary);
367
+
368
+ --uui-calendar-content-font: var(--font-regular);
369
+ --uui-calendar-weekday-font: var(--font-regular);
370
+ --uui-calendar-selected_day-font: var(--font-semibold);
356
371
 
357
372
  /* tab-button-vars */
358
373
  --uui-tab-button-text: var(--uui-text-primary);
359
374
  --uui-tab-button-text-hover: var(--uui-primary);
360
375
  --uui-tab-button-text-active: var(--uui-primary);
361
376
  --uui-tab-button-text-disabled: var(--uui-text-disabled);
362
- --uui-tab-button-count-bg: var(--gray30);
363
- --uui-tab-button-count: var(--uui-text-secondary);
377
+ --uui-tab-button-font: var(--font-semibold);
364
378
 
365
379
  /* radio-input-vars */
366
380
  --uui-radio-input-bg: var(--uui-control-bg);
@@ -377,6 +391,8 @@
377
391
  --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
378
392
  --uui-radio-input-error: var(--uui-negative);
379
393
 
394
+ --uui-radio-input-font: var(--font-regular);
395
+
380
396
  /* Checkbox vars */
381
397
  --uui-checkbox-border: var(--uui-control-border);
382
398
  --uui-checkbox-border-hover: var(--uui-control-border-hover);
@@ -394,23 +410,26 @@
394
410
  --uui-checkbox-label-disabled: var(--uui-control-label-disabled);
395
411
  --uui-checkbox-border-radius: var(--uui-border-radius);
396
412
 
413
+ --uui-checkbox-font: var(--font-regular);
414
+
397
415
  /* Tag vars */
398
- --uui-tag-bg: var(--night300);
399
- --uui-tag-bg-hover: var(--night400);
400
416
  --uui-tag-caption: var(--uui-text-primary);
401
417
  --uui-tag-fill: var(--uui-icon);
402
418
  --uui-tag-fill-hover: var(--uui-icon-hover);
403
- --uui-tag-count-bg: var(--white);
419
+ --uui-tag-count-bg: var(--uui-surface);
404
420
  --uui-tag-count: var(--uui-text-secondary);
405
421
  --uui-tag-label: var(--uui-text-secondary);
406
422
  --uui-tag-border-radius: 30px;
407
423
 
424
+ --uui-tag-font: var(--font-regular);
425
+ --uui-tag-count-font: var(--font-semibold);
426
+
408
427
  /* TextArea vars */
409
428
  --uui-text-area-bg: var(--uui-control-bg);
410
429
  --uui-text-area-bg-disabled: var(--uui-control-bg-disabled);
411
430
  --uui-text-area-border: var(--uui-control-border);
412
431
  --uui-text-area-border-disabled: var(--uui-control-border-disabled);
413
- --uui-text-area-border-hover: var(--uui-control-textinput-border-hover);
432
+ --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
414
433
  --uui-text-area-border-active: var(--uui-control-border-checked);
415
434
  --uui-text-area-border-error: var(--uui-negative);
416
435
  --uui-text-area-placeholder: var(--uui-control-placeholder);
@@ -419,26 +438,29 @@
419
438
  --uui-text-area-icon: var(--uui-icon);
420
439
  --uui-text-area-border-radius: var(--uui-border-radius);
421
440
 
441
+ --uui-text-area-font: var(--font-regular);
442
+ --uui-text-area-counter-font: var(--font-regular);
443
+
422
444
  /* DropMarker vars */
423
445
  --uui-drop-marker: var(--uui-primary);
424
446
  --uui-drop-marker-blocked: var(--uui-error);
425
447
 
426
- /* ScrollBars vars */
427
- --uui-scroll-bars-bg: var(--gray40);
428
- --uui-scroll-bars-bg-active: var(--gray60);
429
-
430
448
  /* Tooltip vars */
431
- /* noinspection CssInvalidFunction */
432
- --uui-tooltip-shadow: var(--uui-shadow, 0 1px 4px 0 rgba(44, 47, 60, 0.05), 0 2px 18px 0 rgba(44, 47, 60, 0.03)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
449
+ --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgba(44, 47, 60, 0.3), 0 1px 4px 0 rgba(44, 47, 60, 0.5)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
433
450
  --uui-tooltip-arrow-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
434
451
  --uui-tooltip-border-radius: var(--uui-border-radius);
435
452
 
453
+ --uui-tooltip-font: var(--font-regular);
454
+
455
+ /* PickerInput vars */
456
+ --uui-picker_input-bg: var(--uui-surface);
457
+
436
458
  /* PickerToggler vars */
437
459
  --uui-picker-toggler-bg: var(--uui-control-bg);
438
460
  --uui-picker-toggler-bg-disabled: var(--uui-control-bg-disabled);
439
461
  --uui-picker-toggler-border: var(--uui-control-border);
440
462
  --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
441
- --uui-picker-toggler-border-hover: var(--uui-control-textinput-border-hover);
463
+ --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
442
464
  --uui-picker-toggler-border-active: var(--uui-control-border-checked);
443
465
  --uui-picker-toggler-border-error: var(--uui-negative);
444
466
  --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
@@ -450,36 +472,16 @@
450
472
  --uui-picker-toggler-icon-clickable-hover: var(--uui-icon-hover);
451
473
  --uui-picker-toggler-border-radius: var(--uui-border-radius);
452
474
 
453
- /* DataTable vars */
454
- --uui-dt-cell-bg: transparent;
455
- --uui-dt-cell-resize-bg: #EF55331F;
456
- --uui-dt-cell-border: transparent;
457
- --uui-dt-cell-editor-bg-invalid: var(--red-lightest);
458
- --uui-dt-cell-editor-hover-border: var(--uui-control-textinput-border-hover);
459
- --uui-dt-cell-editor-focus-border: var(--uui-control-border-checked);
460
- --uui-dt-cell-editor-invalid-border: var(--uui-negative);
461
-
462
- --uui-dt-row-bg: var(--white);
463
- --uui-dt-row-bg-hover: var(--gray10);
464
- --uui-dt-row-bg-invalid: #FEF7F6;
465
- --uui-dt-row-bg-selected: #EBF7FF;
466
- --uui-dt-row-border: transparent;
467
-
468
- --uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
469
- --uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
470
- --uui-dt-right-shadow: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
471
- --uui-dt-left-marker-shadow: inset 2px 0 0 0 var(--uui-primary);
472
- --uui-dt-right-marker-shadow: inset -2px 0 0 0 var(--uui-primary);
473
- --uui-dt-header-hover-shadow: inset 1px 0 0 var(--gray30), inset -1px 0 0 var(--gray30);
475
+ --uui-picker-toggler-font: var(--font-regular);
474
476
 
475
477
  /* Panel */
476
478
  --uui-panel-border-radius: var(--uui-border-radius);
477
- --uui-panel-shadow: var(--uui-shadow);
479
+ --uui-panel-shadow: var(--uui-shadow-level-1);
478
480
 
479
481
  /* Modals */
480
482
  --uui-modals-border-radius: var(--uui-border-radius);
481
483
  --uui-modals-overlay: rgba(29, 30, 38, 0.8);
482
- --uui-modals-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05);
484
+ --uui-modals-shadow: var(--uui-shadow-level-3);
483
485
  --uui-modals-bg: var(--uui-surface);
484
486
 
485
487
  /* TextPlaceholder */
@@ -491,10 +493,14 @@
491
493
  --uui-labeled-input-disabled: var(--uui-text-disabled);
492
494
  --uui-labeled-input-error: var(--uui-error);
493
495
  --uui-labeled-input-fill: var(--uui-icon);
494
- --uui-labeled-input-info-fill: var(--uui-info);
496
+ --uui-labeled-input-info-fill: var(--uui-icon);
495
497
  --uui-labeled-input-optional-text: var(--uui-text-secondary);
496
498
  --uui-labeled-input-asterisk: var(--uui-error);
497
499
 
500
+ --uui-labeled-input-font: var(--font-semibold);
501
+ --uui-labeled-input-optional-font: var(--font-italic);
502
+ --uui-labeled-input-invalid-msg-font: var(--font-regular);
503
+
498
504
  /* Accordion */
499
505
  --uui-accordion-bg: var(--uui-surface);
500
506
  --uui-accordion-border: var(--uui-divider);
@@ -504,12 +510,15 @@
504
510
  --uui-accordion-icon: var(--uui-icon);
505
511
  --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);
506
512
  --uui-accordion-focus: var(--uui-primary);
507
- --uui-accordion-shadow: 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10);
508
- --uui-accordion-shadow-hovered: 0 6px 12px 0 rgba(29, 30, 38, 0.10), 0 3px 6px 0 rgba(29, 30, 38, 0.10);
513
+ --uui-accordion-shadow: var(--uui-shadow-level-1);
514
+ --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
515
+
516
+ --uui-accordion-toggler-font: var(--font-semibold);
517
+ --uui-accordion-body-font: var(--font-regular);
509
518
 
510
519
  /* Switch */
511
- --uui-switch-bg: var(--night400);
512
- --uui-switch-border-hover: var(--night600);
520
+ --uui-switch-bg: var(--uui-control_switch-bg);
521
+ --uui-switch-border-hover: var(--uui-control_switch-border-hover);
513
522
  --uui-switch-bg-checked: var(--uui-control-bg-checked);
514
523
  --uui-switch-bg-hover: var(--uui-control-bg-hover);
515
524
  --uui-switch-bg-disabled: var(--uui-control-bg-disabled);
@@ -523,7 +532,7 @@
523
532
  --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);
524
533
  --uui-switch-label: var(--uui-control-label);
525
534
  --uui-switch-label-disabled: var(--uui-control-label-disabled);
526
- --uui-switch-toggler-bg: var(--white);
535
+ --uui-switch-toggler-bg: var(--uui-control_switch_toggler-bg);
527
536
  --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
528
537
  --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);
529
538
  --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
@@ -531,65 +540,88 @@
531
540
  --uui-switch-toggler-border-checked-hover: var(--uui-control-bg-checked-hover);
532
541
  --uui-switch-toggler-border-checked-disabled: var(--uui-control-bg-checked-disabled);
533
542
 
543
+ --uui-switch-font: var(--font-regular);
544
+
534
545
  /* DropdownContainer */
535
546
  --uui-dropdown-container-border-radius: 6px;
536
- --uui-dropdown-container-shadow: 0 3px 6px 0 rgba(29, 30, 38, 0.1), 0 1px 3px 0 rgba(29, 30, 38, 0.1);
537
- --uui-dropdown-container-bg: var(--white);
547
+ --uui-dropdown-container-shadow: var(--uui-shadow-level-2);
548
+ --uui-dropdown-container-bg: var(--uui-surface);
549
+
550
+ /* DropdownMenu */
551
+ // TODO: update tokens
552
+ --uui-dropdown-menu-bg: var(--uui-surface);
553
+ --uui-dropdown-menu-shadow: var(--uui-shadow-level-2);
554
+ --uui-dropdown-menu-splitter: var(--uui-divider);
555
+ --uui-dropdown-menu-item-hover: var(--uui-surface-hover);
556
+ --uui-dropdown-menu-item-active: var(--uui-surface-hover);
557
+ --uui-dropdown-menu-item-text: var(--uui-text-primary);
558
+
559
+ --uui-dropdown-menu-body-font: var(--font-regular);
560
+ --uui-dropdown-menu-item-font: var(--font-regular);
538
561
 
539
562
  /* MainMenu */
540
- --uui-main_menu-text: var(--white);
541
- --uui-main_menu-bg: var(--gray80);
542
- --uui-main_menu-bg-hover: var(--gray80);
543
- --uui-main_menu-active: var(--gray90);
544
- --uui-main_menu-hover: var(--gray90);
563
+ --uui-main_menu-text: var(--uui-text-contrast);
564
+ --uui-main_menu-bg: var(--uui-surface-contrast);
565
+ --uui-main_menu-hover: var(--uui-surface-contrast-hover);
566
+ --uui-main_menu-active: var(--uui-surface-contrast-active);
545
567
  --uui-main_menu-border-active: var(--uui-primary);
546
- --uui-main_menu-border-light: var(--white);
547
568
 
548
- --uui-main_menu-dropdown-bg: var(--gray90);
569
+ --uui-main_menu-dropdown-bg: var(--uui-surface-inverted);
549
570
  --uui-main_menu-dropdown-hover: var(--uui-primary);
571
+ --uui-main_menu-dropdown-shadow: none;
572
+ --uui-main_menu-dropdown-border-radius: none;
550
573
 
551
- --uui-main_menu-search-bg: var(--gray70);
552
- --uui-main_menu-search-border: var(--gray70);
574
+ --uui-main_menu-search-bg: var(--uui-secondary-darkest);
575
+ --uui-main_menu-search-border: var(--uui-secondary-darkest);
553
576
  --uui-main_menu-search-placeholder: var(--uui-text-disabled);
554
577
  --uui-main_menu-search-text: var(--uui-contrast);
555
578
  --uui-main_menu-search-icon: var(--uui-icon-disabled);
556
579
 
557
- --uui-main_menu-icon: var(--white);
558
- --uui-main_menu-icon-hover: var(--white);
559
- --uui-main_menu-icon-active: var(--white);
580
+ --uui-main_menu-icon: var(--uui-text-contrast);
581
+ --uui-main_menu-icon-hover: var(--uui-text-contrast);
582
+ --uui-main_menu-icon-active: var(--uui-text-contrast);
583
+
584
+ --uui-main_menu-font: var(--font-semibold);
585
+ --uui-main_menu-search-font: var(--font-regular);
560
586
 
561
587
  /* BurgerMenu */
562
- --uui-burger_menu-bg: var(--gray90);
588
+ --uui-burger_menu-bg: var(--uui-surface-inverted);
563
589
  --uui-burger_menu-bg-hover: var(--uui-primary-dark);
564
- --uui-burger_menu-caption: var(--uui-contrast);
590
+ --uui-burger_menu-caption: var(--uui-text-contrast);
565
591
  --uui-burger_menu-caption-hover: var(--uui-primary);
566
592
  --uui-burger_menu-overlay: var(--uui-overlay);
567
- --uui-burger_icon: var(--white);
593
+ --uui-burger_icon: var(--uui-text-contrast);
568
594
  --uui-burger_item: var(--uui-text-brand);
569
595
 
570
596
  /* BurgerGroupHeader */
571
- --uui-burger_group-text: var(--gray50);
572
- --uui-burger_group-bg: var(--gray80);
573
- --uui-burger_group-line: var(--gray60);
597
+ --uui-burger_group-text: var(--uui-text-disabled);
598
+ --uui-burger_group-bg: var(--uui-surface-contrast);
599
+ --uui-burger_group-line: var(--uui-text-secondary);
600
+
601
+ --uui-burger_group-font: var(--font-regular);
574
602
 
575
603
  /* BurgerButton */
576
- --uui-burger_btn: var(--white);
577
- --uui-burger_btn-hover: var(--uui-primary);
578
- --uui-burger_btn-active: var(--uui-primary);
579
- --uui-burger_btn-border: var(--gray30);
604
+ --uui-burger_btn_caption: var(--uui-text-contrast);
605
+ --uui-burger_btn_caption-hover: var(--uui-primary);
606
+ --uui-burger_btn_caption-active: var(--uui-primary);
607
+ --uui-burger_btn-border: var(--uui-disabled);
608
+
609
+ --uui-burger_btn-font: var(--font-regular);
580
610
 
581
611
  /* BurgerSearch */
582
- --uui-burger_search: var(--gray40);
583
- --uui-burger_search-fill: var(--gray50);
584
- --uui-burger_search-bg: var(--gray80);
585
- --uui-burger_search-placeholder: var(--gray50);
612
+ --uui-burger_search: var(--uui-text-contrast);
613
+ --uui-burger_search-fill: var(--uui-text-disabled);
614
+ --uui-burger_search-bg: var(--uui-surface-contrast);
615
+ --uui-burger_search-placeholder: var(--uui-text-disabled);
616
+
617
+ --uui-burger_search-font: var(--font-regular);
586
618
 
587
619
  /* NumericInput */
588
620
  --uui-numeric-input-bg: var(--uui-control-bg);
589
621
  --uui-numeric-input-bg-disabled: var(--uui-control-bg-disabled);
590
622
  --uui-numeric-input-border: var(--uui-control-border);
591
623
  --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
592
- --uui-numeric-input-border-hover: var(--uui-control-textinput-border-hover);
624
+ --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
593
625
  --uui-numeric-input-border-active: var(--uui-control-border-checked);
594
626
  --uui-numeric-input-border-error: var(--uui-negative);
595
627
  --uui-numeric-input-placeholder: var(--uui-control-placeholder);
@@ -604,7 +636,7 @@
604
636
  --uui-time-picker-bg-disabled: var(--uui-control-bg-disabled);
605
637
  --uui-time-picker-border: var(--uui-control-border);
606
638
  --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
607
- --uui-time-picker-border-hover: var(--uui-control-textinput-border-hover);
639
+ --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
608
640
  --uui-time-picker-border-active: var(--uui-control-border-checked);
609
641
  --uui-time-picker-border-error: var(--uui-negative);
610
642
  --uui-time-picker-placeholder: var(--uui-control-placeholder);
@@ -619,7 +651,7 @@
619
651
  --uui-search-input-bg-disabled: var(--uui-control-bg-disabled);
620
652
  --uui-search-input-border: var(--uui-control-border);
621
653
  --uui-search-input-border-disabled: var(--uui-control-border-disabled);
622
- --uui-search-input-border-hover: var(--uui-control-textinput-border-hover);
654
+ --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
623
655
  --uui-search-input-border-active: var(--uui-control-border-checked);
624
656
  --uui-search-input-border-error: var(--uui-negative);
625
657
  --uui-search-input-placeholder: var(--uui-control-placeholder);
@@ -631,30 +663,38 @@
631
663
  --uui-search-input-border-radius: var(--uui-border-radius);
632
664
 
633
665
  /* Popover */
634
- --uui-popover-shadow: 0 5px 18px 0 rgba(29, 30, 38, 0.1), 0 3px 12px 0 rgba(29, 30, 38, 0.1);
666
+ --uui-popover-shadow: var(--uui-shadow-level-2);
635
667
 
636
668
  /* Footer */
637
- --uui-footer-bg: var(--night800);
669
+ --uui-footer-bg: var(--uui-surface-contrast);
638
670
 
639
671
  /* FilterPanelItemToggler vars */
640
672
  --uui-filters-toggler-border: var(--uui-text-input-border);
641
673
  --uui-filters-toggler-border-hover: var(--uui-text-input-border-hover);
642
674
  --uui-filters-toggler-border-radius: var(--uui-border-radius);
643
- --uui-filters-toggler-bg: var(--white);
644
- --uui-filters-toggler-bg-hover: var(--night100);
675
+ --uui-filters-toggler-bg: var(--uui-surface);
676
+ --uui-filters-toggler-bg-hover: var(--uui-surface-light-hover);
645
677
  --uui-filters-toggler-text: var(--uui-text-brand);
646
678
  --uui-filters-toggler-label: var(--uui-text-secondary);
647
679
  --uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);
680
+ --uui-filters-toggler-shadow: none;
681
+
682
+ --uui-filters-toggler-font: var(--font-regular);
683
+ --uui-filters-panel-header-font: var(--font-regular);
648
684
 
649
685
  /* NotificationCard */
650
686
  --uui-notification-card-border-radius: var(--uui-border-radius);
651
687
  --uui-notification-card-border-width: 0;
652
688
  --uui-notification-card-border-top-width: 6px;
653
- --uui-notification-card-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
689
+ --uui-notification-card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
654
690
 
655
691
  /* Alert */
656
692
  --uui-alert-border-radius: 6px;
657
693
 
694
+ /* Panel */
695
+
696
+ --uui-panel-bg: var(--uui-surface);
697
+
658
698
  /* Spinner */
659
699
  --uui-spinner: var(--uui-primary);
660
700
 
@@ -662,35 +702,63 @@
662
702
  --uui-blocker-bg: var(--uui-background);
663
703
  --uui-blocker-bg-with-opacity: #F5F6FA80;
664
704
 
665
- /* modification of the states of table components */
705
+ /* FlexRow */
706
+ --uui-flex-row-border-bottom: 1px solid var(--uui-divider);
666
707
 
667
- :global(.uui-dt-cell-border) {
668
- --uui-dt-cell-border: var(--gray30);
669
- }
708
+ /* DataTable vars */
709
+ --uui-dt-border: var(--uui-divider-light);
670
710
 
671
- :global(.uui-dt-row-border) {
672
- --uui-dt-row-border: var(--gray30);
673
- }
711
+ --uui-dt-cell-bg: transparent;
712
+ --uui-dt-cell-bg-resize: #EF55331F;
713
+ --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);
714
+ --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);
715
+ --uui-dt-cell-border-focus: var(--uui-control-border-checked);
716
+
717
+ --uui-dt-row-bg: var(--uui-surface);
718
+ --uui-dt-row-bg-hover: var(--uui-surface-light-hover);
719
+ --uui-dt-row-bg-invalid: #FEF7F6;
720
+ --uui-dt-row-bg-selected: #EBF7FF;
721
+
722
+ --uui-dt-header-row-bg: var(--uui-surface-light);
723
+ --uui-dt-header-row-bg-hover: var(--uui-surface-hover);
724
+
725
+ --uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
726
+ --uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
727
+ --uui-dt-right-shadow: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
728
+ --uui-dt_header-drop_marker: var(--uui-primary);
729
+
730
+ --uui-dt-header-cell-font: var(--font-semibold);
731
+
732
+ /* AvatarStack */
733
+
734
+ --uui-avatar-stack-font: var(--font-semibold);
735
+
736
+ /* Badge */
737
+
738
+ --uui-badge-font: var(--font-regular);
739
+ --uui-badge-count-font: var(--font-semibold);
740
+
741
+ /* Pagination */
742
+
743
+ --uui-pagination-font: var(--font-regular);
674
744
 
675
- :global(.uui-table-header-row) {
676
- --uui-dt-row-bg: var(--gray5);
677
- --uui-dt-row-bg-hover: var(--gray20);
678
- --uui-dt-row-border: var(--gray30);
679
- }
680
745
 
681
746
  /* ------------------------------------ */
682
747
 
683
- :global(.tooltip-contrast) {
684
- --uui-tooltip-bg: var(--uui-surface-inverted);
748
+ :global(.tooltip-contrast),
749
+ :global(.tooltip-night800) {
750
+ --uui-tooltip-bg: var(--uui-surface-contrast);
685
751
  --uui-tooltip-text: var(--uui-contrast);
686
752
  }
687
753
 
688
- :global(.tooltip-default) {
754
+ :global(.tooltip-default),
755
+ :global(.tooltip-white) {
689
756
  --uui-tooltip-bg: var(--uui-surface);
690
757
  --uui-tooltip-text: var(--uui-text-primary);
691
758
  }
692
759
 
693
- :global(.tooltip-critical) {
760
+ :global(.tooltip-critical),
761
+ :global(.tooltip-fire) {
694
762
  --uui-tooltip-bg: var(--uui-error-dark);
695
763
  --uui-tooltip-text: var(--uui-contrast);
696
764
  }
@@ -746,7 +814,24 @@
746
814
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
747
815
  }
748
816
 
749
- :global(.button-night500), :global(.button-secondary) {
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) {
750
835
  --uui-btn-bg: var(--uui-secondary);
751
836
  --uui-btn-bg-hover: var(--uui-secondary-dark);
752
837
  --uui-btn-bg-active: var(--uui-secondary-darkest);
@@ -780,28 +865,32 @@
780
865
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
781
866
  }
782
867
 
783
- :global(.icon-button-sky) {
868
+ :global(.icon-button-sky),
869
+ :global(.icon-button-info) {
784
870
  --uui-icon-btn: var(--uui-info);
785
871
  --uui-icon-btn-hover: var(--uui-info-dark);
786
872
  --uui-icon-btn-active: var(--uui-info-darkest);
787
873
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
788
874
  }
789
875
 
790
- :global(.icon-button-grass) {
876
+ :global(.icon-button-grass),
877
+ :global(.icon-button-success) {
791
878
  --uui-icon-btn: var(--uui-success);
792
879
  --uui-icon-btn-hover: var(--uui-success-dark);
793
880
  --uui-icon-btn-active: var(--uui-success-darkest);
794
881
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
795
882
  }
796
883
 
797
- :global(.icon-button-sun) {
884
+ :global(.icon-button-sun),
885
+ :global(.icon-button-warning) {
798
886
  --uui-icon-btn: var(--uui-warning);
799
887
  --uui-icon-btn-hover: var(--uui-warning-dark);
800
888
  --uui-icon-btn-active: var(--uui-warning-darkest);
801
889
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
802
890
  }
803
891
 
804
- :global(.icon-button-fire) {
892
+ :global(.icon-button-fire),
893
+ :global(.icon-button-error) {
805
894
  --uui-icon-btn: var(--uui-error);
806
895
  --uui-icon-btn-hover: var(--uui-error-dark);
807
896
  --uui-icon-btn-active: var(--uui-error-darkest);
@@ -864,7 +953,8 @@
864
953
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
865
954
  }
866
955
 
867
- :global(.icon-button-night500) {
956
+ :global(.icon-button-night500),
957
+ :global(.icon-button-secondary) {
868
958
  --uui-icon-btn: var(--gray50);
869
959
  --uui-icon-btn-hover: var(--uui-color-night500-800);
870
960
  --uui-icon-btn-active: var(--uui-color-night500-900);
@@ -873,90 +963,83 @@
873
963
 
874
964
  :global(.icon-button-night600),
875
965
  :global(.icon-button-default) {
876
- --uui-icon-btn: var(--gray60);
877
- --uui-icon-btn-hover: var(--uui-color-night600-800);
878
- --uui-icon-btn-active: var(--uui-color-night600-900);
879
- --uui-icon-btn-disabled: var(--uui-icon-disabled);
966
+ --uui-icon-btn: var(--uui-icon);
967
+ --uui-icon-btn-hover: var(--uui-icon-hover);
968
+ --uui-icon-btn-active: var(--uui-icon-active);
969
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
880
970
  }
881
971
 
882
972
  :global(.notification-card-sun),
883
973
  :global(.notification-card-warning) {
884
- --uui-notification-card-fill: var(--uui-warning);
885
- --uui-notification-card-border: var(--uui-warning);
886
- --uui-notification-card-bg: var(--uui-surface);
887
- --uui-notification-card-text: var(--uui-text-primary);
888
- }
974
+ --uui-notification-card-fill: var(--uui-warning);
975
+ --uui-notification-card-border: var(--uui-warning);
976
+ --uui-notification-card-bg: var(--uui-surface);
977
+ --uui-notification-card-text: var(--uui-text-primary);
978
+ }
889
979
 
890
980
  :global(.notification-card-success),
891
981
  :global(.notification-card-grass) {
892
- --uui-notification-card-fill: var(--uui-success);
893
- --uui-notification-card-border: var(--uui-success);
894
- --uui-notification-card-bg: var(--uui-surface);
895
- --uui-notification-card-text: var(--uui-text-primary);
896
- }
982
+ --uui-notification-card-fill: var(--uui-success);
983
+ --uui-notification-card-border: var(--uui-success);
984
+ --uui-notification-card-bg: var(--uui-surface);
985
+ --uui-notification-card-text: var(--uui-text-primary);
986
+ }
897
987
 
898
988
  :global(.notification-card-info),
899
- :global(.notification-card-sky ) {
900
- --uui-notification-card-fill: var(--uui-info);
901
- --uui-notification-card-border: var(--uui-info);
902
- --uui-notification-card-bg: var(--uui-surface);
903
- --uui-notification-card-text: var(--uui-text-primary);
904
- }
989
+ :global(.notification-card-sky) {
990
+ --uui-notification-card-fill: var(--uui-info);
991
+ --uui-notification-card-border: var(--uui-info);
992
+ --uui-notification-card-bg: var(--uui-surface);
993
+ --uui-notification-card-text: var(--uui-text-primary);
994
+ }
905
995
 
906
996
  :global(.notification-card-error),
907
997
  :global(.notification-card-fire) {
908
- --uui-notification-card-fill: var(--uui-error);
909
- --uui-notification-card-border: var(--uui-error);
910
- --uui-notification-card-bg: var(--uui-surface);
911
- --uui-notification-card-text: var(--uui-text-primary);
912
- }
998
+ --uui-notification-card-fill: var(--uui-error);
999
+ --uui-notification-card-border: var(--uui-error);
1000
+ --uui-notification-card-bg: var(--uui-surface);
1001
+ --uui-notification-card-text: var(--uui-text-primary);
1002
+ }
913
1003
 
914
1004
  :global(.notification-card-night600) {
915
- --uui-notification-card-fill: var(--night600);
916
- --uui-notification-card-border: var(--night600);
917
- --uui-notification-card-bg: var(--uui-surface);
918
- --uui-notification-card-text: var(--uui-text-primary);
919
- }
920
-
921
- :global(.orange) {
922
- --orange-10: #FFE1BD;
923
- --orange-20: #FFD091;
924
- --orange-30: #E44E00;
925
- --orange-40: #C63100;
926
- --orange-50: #991900;
1005
+ --uui-notification-card-fill: var(--night600);
1006
+ --uui-notification-card-border: var(--night600);
1007
+ --uui-notification-card-bg: var(--uui-surface);
1008
+ --uui-notification-card-text: var(--uui-text-primary);
927
1009
  }
928
1010
 
929
1011
  :global(.alert-error),
930
1012
  :global(.alert-fire) {
931
- --uui-alert-text: var(--uui-text-primary);
932
- --uui-alert-bg: #F5E5E9;
933
- --uui-alert-border: var(--uui-error);
934
- --uui-alert-icon: var(--uui-error);
935
- }
1013
+ --uui-alert-text: var(--uui-text-primary);
1014
+ --uui-alert-bg: #F5E5E9;
1015
+ --uui-alert-border: var(--uui-error);
1016
+ --uui-alert-icon: var(--uui-error);
1017
+ }
936
1018
 
937
1019
  :global(.alert-warning),
938
1020
  :global(.alert-sun) {
939
- --uui-alert-text: var(--uui-text-primary);
940
- --uui-alert-bg: #F6EEE1;
941
- --uui-alert-border: var(--uui-warning);
942
- --uui-alert-icon: var(--uui-warning);
943
- }
1021
+ --uui-alert-text: var(--uui-text-primary);
1022
+ --uui-alert-bg: #F6EEE1;
1023
+ --uui-alert-border: var(--uui-warning);
1024
+ --uui-alert-icon: var(--uui-warning);
1025
+ }
1026
+
944
1027
 
945
1028
  :global(.alert-success),
946
1029
  :global(.alert-grass) {
947
- --uui-alert-text: var(--uui-text-primary);
948
- --uui-alert-bg: #E7EEE1;
949
- --uui-alert-border: var(--uui-success);
950
- --uui-alert-icon: var(--uui-success);
951
- }
1030
+ --uui-alert-text: var(--uui-text-primary);
1031
+ --uui-alert-bg: #E7EEE1;
1032
+ --uui-alert-border: var(--uui-success);
1033
+ --uui-alert-icon: var(--uui-success);
1034
+ }
952
1035
 
953
1036
  :global(.alert-info),
954
1037
  :global(.alert-sky) {
955
- --uui-alert-text: var(--uui-text-primary);
956
- --uui-alert-bg: #DCEDF6;
957
- --uui-alert-border: var(--uui-info);
958
- --uui-alert-icon: var(--uui-info);
959
- }
1038
+ --uui-alert-text: var(--uui-text-primary);
1039
+ --uui-alert-bg: #DCEDF6;
1040
+ --uui-alert-border: var(--uui-info);
1041
+ --uui-alert-icon: var(--uui-info);
1042
+ }
960
1043
 
961
1044
  :global(.badge-default), :global(.badge-night300) {
962
1045
  --uui-badge-bg: var(--night300);
@@ -974,7 +1057,7 @@
974
1057
  :global(.badge-info), :global(.badge-sky) {
975
1058
  --uui-badge-bg: var(--uui-info);
976
1059
  --uui-badge-bg-hover: var(--uui-info-dark);
977
- --uui-badge-caption-solid: var(--white);
1060
+ --uui-badge-caption-solid: var(--uui-text-contrast);
978
1061
  --uui-badge-count-bg: var(--white);
979
1062
  --uui-badge-count: var(--uui-text-secondary);
980
1063
  --uui-badge-bg-halftone: var(--uui-info-lightest);
@@ -987,7 +1070,7 @@
987
1070
  :global(.badge-success), :global(.badge-grass) {
988
1071
  --uui-badge-bg: var(--uui-success);
989
1072
  --uui-badge-bg-hover: var(--uui-success-dark);
990
- --uui-badge-caption-solid: var(--white);
1073
+ --uui-badge-caption-solid: var(--uui-text-contrast);
991
1074
  --uui-badge-count-bg: var(--white);
992
1075
  --uui-badge-count: var(--uui-text-secondary);
993
1076
  --uui-badge-bg-halftone: var(--uui-success-lightest);
@@ -1026,7 +1109,7 @@
1026
1109
  :global(.badge-cobalt) {
1027
1110
  --uui-badge-bg: var(--uui-color-cobalt-700);
1028
1111
  --uui-badge-bg-hover: var(--uui-color-cobalt-800);
1029
- --uui-badge-caption-solid: var(--white);
1112
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1030
1113
  --uui-badge-count-bg: var(--white);
1031
1114
  --uui-badge-count: var(--uui-text-secondary);
1032
1115
  --uui-badge-bg-halftone: var(--uui-color-cobalt-500);
@@ -1052,7 +1135,7 @@
1052
1135
  :global(.badge-fuchsia) {
1053
1136
  --uui-badge-bg: var(--uui-color-fuchsia-700);
1054
1137
  --uui-badge-bg-hover: var(--uui-color-fuchsia-800);
1055
- --uui-badge-caption-solid: var(--white);
1138
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1056
1139
  --uui-badge-count-bg: var(--white);
1057
1140
  --uui-badge-count: var(--uui-text-secondary);
1058
1141
  --uui-badge-bg-halftone: var(--uui-color-fuchsia-500);
@@ -1117,7 +1200,7 @@
1117
1200
  :global(.badge-night500) {
1118
1201
  --uui-badge-bg: var(--uui-color-night500-700);
1119
1202
  --uui-badge-bg-hover: var(--uui-color-night500-800);
1120
- --uui-badge-caption-solid: var(--white);
1203
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1121
1204
  --uui-badge-count-bg: var(--white);
1122
1205
  --uui-badge-count: var(--uui-text-secondary);
1123
1206
  --uui-badge-bg-halftone: var(--white);
@@ -1130,7 +1213,7 @@
1130
1213
  :global(.badge-night600) {
1131
1214
  --uui-badge-bg: var(--uui-color-night600-700);
1132
1215
  --uui-badge-bg-hover: var(--uui-color-night600-800);
1133
- --uui-badge-caption-solid: var(--white);
1216
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1134
1217
  --uui-badge-count-bg: var(--white);
1135
1218
  --uui-badge-count: var(--uui-text-secondary);
1136
1219
  --uui-badge-bg-halftone: var(--white);
@@ -1143,7 +1226,7 @@
1143
1226
  :global(.badge-violet) {
1144
1227
  --uui-badge-bg: var(--lavanda-30);
1145
1228
  --uui-badge-bg-hover: var(--lavanda-40);
1146
- --uui-badge-caption-solid: var(--white);
1229
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1147
1230
  --uui-badge-count-bg: var(--white);
1148
1231
  --uui-badge-count: var(--uui-text-secondary);
1149
1232
  --uui-badge-bg-halftone: var(--lavanda-10);
@@ -1156,7 +1239,7 @@
1156
1239
  :global(.badge-orange) {
1157
1240
  --uui-badge-bg: var(--orange-30);
1158
1241
  --uui-badge-bg-hover: var(--orange-40);
1159
- --uui-badge-caption-solid: var(--white);
1242
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1160
1243
  --uui-badge-count-bg: var(--white);
1161
1244
  --uui-badge-count: var(--uui-text-secondary);
1162
1245
  --uui-badge-bg-halftone: var(--orange-10);
@@ -1169,7 +1252,7 @@
1169
1252
  :global(.badge-purple) {
1170
1253
  --uui-badge-bg: var(--purple-30);
1171
1254
  --uui-badge-bg-hover: var(--purple-40);
1172
- --uui-badge-caption-solid: var(--white);
1255
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1173
1256
  --uui-badge-count-bg: var(--white);
1174
1257
  --uui-badge-count: var(--uui-text-secondary);
1175
1258
  --uui-badge-bg-halftone: var(--purple-10);
@@ -1179,81 +1262,21 @@
1179
1262
  --uui-badge-caption-halftone: var(--purple-50);
1180
1263
  }
1181
1264
 
1182
- :global(.badge-vars) {
1183
- --uui-badge-border-radius: 100px;
1184
- }
1185
-
1186
- :global(.picker-toggler-vars) {
1187
- --uui-picker-toggler-bg: var(--uui-control-bg);
1188
- --uui-picker-toggler-bg-disabled: var(--uui-control-bg-disabled);
1189
- --uui-picker-toggler-border: var(--uui-control-border);
1190
- --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
1191
- --uui-picker-toggler-border-hover: var(--uui-control-textinput-border-hover);
1192
- --uui-picker-toggler-border-active: var(--uui-control-border-checked);
1193
- --uui-picker-toggler-border-error: var(--uui-negative);
1194
- --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
1195
- --uui-picker-toggler-text: var(--uui-control-text);
1196
- --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);
1197
- --uui-picker-toggler-icon: var(--uui-control-icon);
1198
- --uui-picker-toggler-icon-disabled: var(--uui-control-icon-disabled);
1199
- --uui-picker-toggler-icon-clickable: var(--uui-icon);
1200
- --uui-picker-toggler-icon-clickable-hover: var(--uui-icon-hover);
1201
- --uui-picker-toggler-border-radius: var(--uui-border-radius);
1202
- }
1203
-
1204
- :global(.informer-color-default) {
1265
+ :global(.informer-default) {
1205
1266
  --uui-informer-bg: var(--night300);
1206
1267
  --uui-informer-caption: var(--night600);
1207
1268
  }
1208
1269
 
1209
- :global(.informer-color-focus) {
1270
+ :global(.informer-focus) {
1210
1271
  --uui-informer-bg: var(--fire);
1211
1272
  --uui-informer-caption: var(--uui-contrast);
1212
1273
  }
1213
1274
 
1214
- :global(.informer-color-white) {
1275
+ :global(.informer-white) {
1215
1276
  --uui-informer-bg: var(--uui-surface);
1216
1277
  --uui-informer-caption: var(--uui-text-secondary);
1217
1278
  }
1218
1279
 
1219
- :global(.informer-vars) {
1220
- --uui-informer-border-radius: 50px;
1221
- }
1222
-
1223
- :global(.icon-container-color-info),
1224
- :global(.icon-container-color-sky) {
1225
- --uui-icon-container-fill: var(--uui-info);
1226
- }
1227
-
1228
- :global(.icon-container-color-success),
1229
- :global(.icon-container-color-grass) {
1230
- --uui-icon-container-fill: var(--uui-success);
1231
- }
1232
-
1233
- :global(.icon-container-color-warning),
1234
- :global(.icon-container-color-sun) {
1235
- --uui-icon-container-fill: var(--uui-warning);
1236
- }
1237
-
1238
- :global(.icon-container-color-error),
1239
- :global(.icon-container-color-fire) {
1240
- --uui-icon-container-fill: var(--uui-error);
1241
- }
1242
-
1243
- :global(.icon-container-color-default),
1244
- :global(.icon-container-color-night600) {
1245
- --uui-icon-container-fill: var(--uui-icon);
1246
- }
1247
-
1248
- :global(.icon-container-color-secondary),
1249
- :global(.icon-container-color-night500) {
1250
- --uui-icon-container-fill: var(--uui-secondary);
1251
- }
1252
-
1253
- :global(.icon-container-color-night400) {
1254
- --uui-icon-container-fill: var(--uui-secondary-disabled);
1255
- }
1256
-
1257
1280
  :global(.uui-text-brand),
1258
1281
  :global(.uui-text-night900) {
1259
1282
  --uui-text: var(--uui-text-brand);
@@ -1313,6 +1336,22 @@
1313
1336
  --uui-dropdown-container-bg: var(--night700);
1314
1337
  }
1315
1338
 
1339
+ :global(.flex-row-background-white) {
1340
+ --uui-flex-row-bg: var(--uui-surface);
1341
+ }
1342
+
1343
+ :global(.flex-row-background-night50) {
1344
+ --uui-flex-row-bg: var(--night50);
1345
+ }
1346
+
1347
+ :global(.flex-row-background-night100) {
1348
+ --uui-flex-row-bg: var(--night100);
1349
+ }
1350
+
1351
+ :global(.flex-row-background-none) {
1352
+ --uui-flex-row-bg: transparent;
1353
+ }
1354
+
1316
1355
  :global(.panel-white) {
1317
1356
  --uui-panel-bg: var(--uui-surface);
1318
1357
  }