@epam/assets 4.11.0-alpha.1 → 5.0.0-alpha.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 (4) hide show
  1. package/package.json +2 -2
  2. package/theme/theme_loveship.scss +282 -260
  3. package/theme/theme_promo.scss +208 -164
  4. package/theme/theme_vanilla_thunder.scss +986 -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);
@@ -175,9 +174,8 @@
175
174
  --uui-secondary-lightest: var(--night200);
176
175
  --uui-secondary-dark: var(--night600);
177
176
  --uui-secondary-darkest: var(--night700);
178
- --uui-secondary-hover: var(--gray60);
179
- --uui-secondary-active: var(--gray70);
180
- --uui-secondary-disabled: var(--night400);
177
+ --uui-secondary-hover: var(--night600);
178
+ --uui-secondary-active: var(--night700);
181
179
 
182
180
  --uui-negative: var(--fire);
183
181
  --uui-negative-light: var(--fire-light);
@@ -185,15 +183,10 @@
185
183
  --uui-negative-dark: var(--fire-dark);
186
184
  --uui-negative-darkest: var(--fire-darkest);
187
185
 
188
- --uui-button-bg-halftone: var(--white);
189
- --uui-button-caption-disabled: var(--night500);
190
- --uui-contrast: var(--white);
191
-
192
186
  --uui-link: var(--sky);
193
187
  --uui-link-hover: var(--sky-dark);
194
188
  --uui-link-visited: #8018A0;
195
189
  --uui-link-disabled: var(--night500);
196
-
197
190
  --uui-visited: #5214CC;
198
191
 
199
192
  --uui-info: var(--sky);
@@ -235,15 +228,26 @@
235
228
 
236
229
  --uui-surface: var(--white);
237
230
  --uui-surface-hover: var(--night200);
238
- --uui-surface-light: var(--white);
239
231
  --uui-surface-inverted: var(--night900);
232
+ /* new start */
233
+ --uui-surface-light: var(--night50);
234
+ --uui-surface-light-hover: var(--night100);
235
+ --uui-surface-contrast: var(--night800);
236
+ --uui-surface-contrast-hover: var(--night900);
237
+ --uui-surface-contrast-active: var(--night900);
238
+ /* new end */
240
239
 
241
240
  --uui-background: var(--night100);
242
241
  --uui-divider: var(--night400);
242
+ --uui-divider-light: var(--night300);
243
+ --uui-contrast: var(--white);
243
244
  --uui-disabled: var(--night300);
244
245
 
245
- --uui-scroll-bar-bg: var(--night400);
246
- --uui-scroll-bar-bg-active: var(--night600);
246
+ --uui-scroll-bars-bg: var(--night400);
247
+ --uui-scroll-bars-bg-active: var(--night600);
248
+
249
+ --uui-button-bg-halftone: var(--white);
250
+ --uui-button-caption-disabled: var(--night500);
247
251
 
248
252
  --uui-text-brand: var(--night900);
249
253
  --uui-text-primary: var(--night800);
@@ -251,8 +255,6 @@
251
255
  --uui-text-disabled: var(--night500);
252
256
  --uui-text-contrast: var(--night50);
253
257
 
254
- --uui-caption: var(--white);
255
-
256
258
  --uui-control-bg: var(--white);
257
259
  --uui-control-bg-checked: var(--uui-primary);
258
260
  --uui-control-bg-checked-hover: var(--uui-primary-dark);
@@ -260,6 +262,8 @@
260
262
  --uui-control-bg-hover: var(--night600);
261
263
  --uui-control-bg-disabled: var(--night50);
262
264
  --uui-control-bg-readonly: var(--night50);
265
+ --uui-control_switch-bg: var(--night400);
266
+ --uui-control_switch_toggler-bg: var(--white);
263
267
 
264
268
  --uui-control-border-checked-disabled: var(--uui-primary-light);
265
269
  --uui-control-border: var(--night400);
@@ -269,11 +273,8 @@
269
273
  --uui-control-border-disabled: var(--uui-disabled);
270
274
  --uui-control-border-readonly: var(--uui-disabled);
271
275
 
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);
276
+ --uui-control_switch-border-hover: var(--night600);
277
+ --uui-control_textinput-border-hover: var(--night600);
277
278
 
278
279
  --uui-control-label: var(--uui-text-primary);
279
280
  --uui-control-label-disabled: var(--uui-text-disabled);
@@ -293,23 +294,28 @@
293
294
 
294
295
  --uui-control-checkbox-icon: var(--white);
295
296
 
297
+ --uui-tag-bg: var(--night300);
298
+ --uui-tag-bg-hover: var(--night400);
299
+
296
300
  --uui-skeleton: var(--night400);
297
301
  --uui-skeleton-gradient: linear-gradient(90deg, var(--night400) 0%, var(--night100) 50%, var(--night400) 100%);
298
302
 
299
303
  --uui-overlay: rgba(29, 30, 38, 0.8);
300
304
  --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);
305
+ --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
306
+ --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0px 6px rgba(29, 30, 38, 0.05);
307
+ --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);
308
+
309
+ /* core variables end */
310
+
311
+ /* find below the not core variables that are used and highlight them in the code */
306
312
 
307
313
  /* TextInput vars */
308
314
  --uui-text-input-bg: var(--uui-control-bg);
309
315
  --uui-text-input-bg-disabled: var(--uui-control-bg-disabled);
310
316
  --uui-text-input-bg-readonly: var(--uui-control-bg-readonly);
311
317
  --uui-text-input-border: var(--uui-control-border);
312
- --uui-text-input-border-hover: var(--uui-control-textinput-border-hover);
318
+ --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
313
319
  --uui-text-input-border-active: var(--uui-control-border-checked);
314
320
  --uui-text-input-border-error: var(--uui-negative);
315
321
  --uui-text-input-border-disabled: var(--uui-control-border-disabled);
@@ -324,14 +330,19 @@
324
330
  --uui-text-input-icon-clickable-hover: var(--uui-icon-hover);
325
331
  --uui-text-input-border-radius: var(--uui-border-radius);
326
332
 
333
+ --uui-text-input-font: var(--font-regular);
334
+
327
335
  /* Button vars */
328
336
  --uui-btn-border-radius: var(--uui-border-radius);
329
337
 
338
+ --uui-btn-font: var(--font-semibold);
339
+
330
340
  /* LinkButton vars */
331
341
  --uui-link-button-text: var(--uui-primary);
332
342
  --uui-link-button-text-hover: var(--uui-primary-dark);
333
343
  --uui-link-button-text-active: var(--uui-primary-darkest);
334
344
  --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
345
+ --uui-link-button-font: var(--font-semibold);
335
346
 
336
347
  /* DatePicker vars */
337
348
  --uui-dtp-title-bg: var(--uui-control-bg);
@@ -341,6 +352,9 @@
341
352
  --uui-dtp-next-prev-icon: var(--uui-icon);
342
353
  --uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);
343
354
 
355
+ --uui-dtp_header-font: var(--font-semibold);
356
+ --uui-dtp_body-content-font: var(--font-regular);
357
+
344
358
  /* RangeDatePicker vars */
345
359
  --uui-rdtp-bg: var(--uui-control-bg);
346
360
  --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);
@@ -354,13 +368,16 @@
354
368
  --uui-calendar-text-filtered: var(--uui-control-text-disabled);
355
369
  --uui-calendar-bg-selected: var(--uui-secondary);
356
370
 
371
+ --uui-calendar-content-font: var(--font-regular);
372
+ --uui-calendar-weekday-font: var(--font-regular);
373
+ --uui-calendar-selected_day-font: var(--font-semibold);
374
+
357
375
  /* tab-button-vars */
358
376
  --uui-tab-button-text: var(--uui-text-primary);
359
377
  --uui-tab-button-text-hover: var(--uui-primary);
360
378
  --uui-tab-button-text-active: var(--uui-primary);
361
379
  --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);
380
+ --uui-tab-button-font: var(--font-semibold);
364
381
 
365
382
  /* radio-input-vars */
366
383
  --uui-radio-input-bg: var(--uui-control-bg);
@@ -377,6 +394,8 @@
377
394
  --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
378
395
  --uui-radio-input-error: var(--uui-negative);
379
396
 
397
+ --uui-radio-input-font: var(--font-regular);
398
+
380
399
  /* Checkbox vars */
381
400
  --uui-checkbox-border: var(--uui-control-border);
382
401
  --uui-checkbox-border-hover: var(--uui-control-border-hover);
@@ -394,23 +413,26 @@
394
413
  --uui-checkbox-label-disabled: var(--uui-control-label-disabled);
395
414
  --uui-checkbox-border-radius: var(--uui-border-radius);
396
415
 
416
+ --uui-checkbox-font: var(--font-regular);
417
+
397
418
  /* Tag vars */
398
- --uui-tag-bg: var(--night300);
399
- --uui-tag-bg-hover: var(--night400);
400
419
  --uui-tag-caption: var(--uui-text-primary);
401
420
  --uui-tag-fill: var(--uui-icon);
402
421
  --uui-tag-fill-hover: var(--uui-icon-hover);
403
- --uui-tag-count-bg: var(--white);
422
+ --uui-tag-count-bg: var(--uui-surface);
404
423
  --uui-tag-count: var(--uui-text-secondary);
405
424
  --uui-tag-label: var(--uui-text-secondary);
406
425
  --uui-tag-border-radius: 30px;
407
426
 
427
+ --uui-tag-font: var(--font-regular);
428
+ --uui-tag-count-font: var(--font-semibold);
429
+
408
430
  /* TextArea vars */
409
431
  --uui-text-area-bg: var(--uui-control-bg);
410
432
  --uui-text-area-bg-disabled: var(--uui-control-bg-disabled);
411
433
  --uui-text-area-border: var(--uui-control-border);
412
434
  --uui-text-area-border-disabled: var(--uui-control-border-disabled);
413
- --uui-text-area-border-hover: var(--uui-control-textinput-border-hover);
435
+ --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
414
436
  --uui-text-area-border-active: var(--uui-control-border-checked);
415
437
  --uui-text-area-border-error: var(--uui-negative);
416
438
  --uui-text-area-placeholder: var(--uui-control-placeholder);
@@ -419,26 +441,29 @@
419
441
  --uui-text-area-icon: var(--uui-icon);
420
442
  --uui-text-area-border-radius: var(--uui-border-radius);
421
443
 
444
+ --uui-text-area-font: var(--font-regular);
445
+ --uui-text-area-counter-font: var(--font-regular);
446
+
422
447
  /* DropMarker vars */
423
448
  --uui-drop-marker: var(--uui-primary);
424
449
  --uui-drop-marker-blocked: var(--uui-error);
425
450
 
426
- /* ScrollBars vars */
427
- --uui-scroll-bars-bg: var(--gray40);
428
- --uui-scroll-bars-bg-active: var(--gray60);
429
-
430
451
  /* 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 */
452
+ --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgba(44, 47, 60, 0.30), 0 1px 4px 0 rgba(44, 47, 60, 0.50)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
433
453
  --uui-tooltip-arrow-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
434
454
  --uui-tooltip-border-radius: var(--uui-border-radius);
435
455
 
456
+ --uui-tooltip-font: var(--font-regular);
457
+
458
+ /* PickerInput vars */
459
+ --uui-picker_input-bg: var(--uui-surface);
460
+
436
461
  /* PickerToggler vars */
437
462
  --uui-picker-toggler-bg: var(--uui-control-bg);
438
463
  --uui-picker-toggler-bg-disabled: var(--uui-control-bg-disabled);
439
464
  --uui-picker-toggler-border: var(--uui-control-border);
440
465
  --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
441
- --uui-picker-toggler-border-hover: var(--uui-control-textinput-border-hover);
466
+ --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
442
467
  --uui-picker-toggler-border-active: var(--uui-control-border-checked);
443
468
  --uui-picker-toggler-border-error: var(--uui-negative);
444
469
  --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
@@ -450,36 +475,16 @@
450
475
  --uui-picker-toggler-icon-clickable-hover: var(--uui-icon-hover);
451
476
  --uui-picker-toggler-border-radius: var(--uui-border-radius);
452
477
 
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);
478
+ --uui-picker-toggler-font: var(--font-regular);
474
479
 
475
480
  /* Panel */
476
481
  --uui-panel-border-radius: var(--uui-border-radius);
477
- --uui-panel-shadow: var(--uui-shadow);
482
+ --uui-panel-shadow: var(--uui-shadow-level-1);
478
483
 
479
484
  /* Modals */
480
485
  --uui-modals-border-radius: var(--uui-border-radius);
481
486
  --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);
487
+ --uui-modals-shadow: var(--uui-shadow-level-3);
483
488
  --uui-modals-bg: var(--uui-surface);
484
489
 
485
490
  /* TextPlaceholder */
@@ -491,10 +496,14 @@
491
496
  --uui-labeled-input-disabled: var(--uui-text-disabled);
492
497
  --uui-labeled-input-error: var(--uui-error);
493
498
  --uui-labeled-input-fill: var(--uui-icon);
494
- --uui-labeled-input-info-fill: var(--uui-info);
499
+ --uui-labeled-input-info-fill: var(--uui-icon);
495
500
  --uui-labeled-input-optional-text: var(--uui-text-secondary);
496
501
  --uui-labeled-input-asterisk: var(--uui-error);
497
502
 
503
+ --uui-labeled-input-font: var(--font-semibold);
504
+ --uui-labeled-input-optional-font: var(--font-italic);
505
+ --uui-labeled-input-invalid-msg-font: var(--font-regular);
506
+
498
507
  /* Accordion */
499
508
  --uui-accordion-bg: var(--uui-surface);
500
509
  --uui-accordion-border: var(--uui-divider);
@@ -504,12 +513,15 @@
504
513
  --uui-accordion-icon: var(--uui-icon);
505
514
  --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);
506
515
  --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);
516
+ --uui-accordion-shadow: var(--uui-shadow-level-1);
517
+ --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
518
+
519
+ --uui-accordion-toggler-font: var(--font-semibold);
520
+ --uui-accordion-body-font: var(--font-regular);
509
521
 
510
522
  /* Switch */
511
- --uui-switch-bg: var(--night400);
512
- --uui-switch-border-hover: var(--night600);
523
+ --uui-switch-bg: var(--uui-control_switch-bg);
524
+ --uui-switch-border-hover: var(--uui-control_switch-border-hover);
513
525
  --uui-switch-bg-checked: var(--uui-control-bg-checked);
514
526
  --uui-switch-bg-hover: var(--uui-control-bg-hover);
515
527
  --uui-switch-bg-disabled: var(--uui-control-bg-disabled);
@@ -523,7 +535,7 @@
523
535
  --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);
524
536
  --uui-switch-label: var(--uui-control-label);
525
537
  --uui-switch-label-disabled: var(--uui-control-label-disabled);
526
- --uui-switch-toggler-bg: var(--white);
538
+ --uui-switch-toggler-bg: var(--uui-control_switch_toggler-bg);
527
539
  --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
528
540
  --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);
529
541
  --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
@@ -531,65 +543,88 @@
531
543
  --uui-switch-toggler-border-checked-hover: var(--uui-control-bg-checked-hover);
532
544
  --uui-switch-toggler-border-checked-disabled: var(--uui-control-bg-checked-disabled);
533
545
 
546
+ --uui-switch-font: var(--font-regular);
547
+
534
548
  /* DropdownContainer */
535
549
  --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);
550
+ --uui-dropdown-container-shadow: var(--uui-shadow-level-2);
551
+ --uui-dropdown-container-bg: var(--uui-surface);
552
+
553
+ /* DropdownMenu */
554
+ // TODO: update tokens
555
+ --uui-dropdown-menu-bg: var(--uui-surface);
556
+ --uui-dropdown-menu-shadow: var(--uui-shadow-level-2);
557
+ --uui-dropdown-menu-splitter: var(--uui-divider);
558
+ --uui-dropdown-menu-item-hover: var(--uui-surface-hover);
559
+ --uui-dropdown-menu-item-active: var(--uui-surface-hover);
560
+ --uui-dropdown-menu-item-text: var(--uui-text-primary);
561
+
562
+ --uui-dropdown-menu-body-font: var(--font-regular);
563
+ --uui-dropdown-menu-item-font: var(--font-regular);
538
564
 
539
565
  /* 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);
566
+ --uui-main_menu-text: var(--uui-text-contrast);
567
+ --uui-main_menu-bg: var(--uui-surface-contrast);
568
+ --uui-main_menu-hover: var(--uui-surface-contrast-hover);
569
+ --uui-main_menu-active: var(--uui-surface-contrast-active);
545
570
  --uui-main_menu-border-active: var(--uui-primary);
546
- --uui-main_menu-border-light: var(--white);
547
571
 
548
- --uui-main_menu-dropdown-bg: var(--gray90);
572
+ --uui-main_menu-dropdown-bg: var(--uui-surface-inverted);
549
573
  --uui-main_menu-dropdown-hover: var(--uui-primary);
574
+ --uui-main_menu-dropdown-shadow: none;
575
+ --uui-main_menu-dropdown-border-radius: none;
550
576
 
551
- --uui-main_menu-search-bg: var(--gray70);
552
- --uui-main_menu-search-border: var(--gray70);
577
+ --uui-main_menu-search-bg: var(--uui-secondary-darkest);
578
+ --uui-main_menu-search-border: var(--uui-secondary-darkest);
553
579
  --uui-main_menu-search-placeholder: var(--uui-text-disabled);
554
580
  --uui-main_menu-search-text: var(--uui-contrast);
555
581
  --uui-main_menu-search-icon: var(--uui-icon-disabled);
556
582
 
557
- --uui-main_menu-icon: var(--white);
558
- --uui-main_menu-icon-hover: var(--white);
559
- --uui-main_menu-icon-active: var(--white);
583
+ --uui-main_menu-icon: var(--uui-text-contrast);
584
+ --uui-main_menu-icon-hover: var(--uui-text-contrast);
585
+ --uui-main_menu-icon-active: var(--uui-text-contrast);
586
+
587
+ --uui-main_menu-font: var(--font-semibold);
588
+ --uui-main_menu-search-font: var(--font-regular);
560
589
 
561
590
  /* BurgerMenu */
562
- --uui-burger_menu-bg: var(--gray90);
591
+ --uui-burger_menu-bg: var(--uui-surface-inverted);
563
592
  --uui-burger_menu-bg-hover: var(--uui-primary-dark);
564
- --uui-burger_menu-caption: var(--uui-contrast);
593
+ --uui-burger_menu-caption: var(--uui-text-contrast);
565
594
  --uui-burger_menu-caption-hover: var(--uui-primary);
566
595
  --uui-burger_menu-overlay: var(--uui-overlay);
567
- --uui-burger_icon: var(--white);
596
+ --uui-burger_icon: var(--uui-text-contrast);
568
597
  --uui-burger_item: var(--uui-text-brand);
569
598
 
570
599
  /* BurgerGroupHeader */
571
- --uui-burger_group-text: var(--gray50);
572
- --uui-burger_group-bg: var(--gray80);
573
- --uui-burger_group-line: var(--gray60);
600
+ --uui-burger_group-text: var(--uui-text-disabled);
601
+ --uui-burger_group-bg: var(--uui-surface-contrast);
602
+ --uui-burger_group-line: var(--uui-text-secondary);
603
+
604
+ --uui-burger_group-font: var(--font-regular);
574
605
 
575
606
  /* 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);
607
+ --uui-burger_btn_caption: var(--uui-text-contrast);
608
+ --uui-burger_btn_caption-hover: var(--uui-primary);
609
+ --uui-burger_btn_caption-active: var(--uui-primary);
610
+ --uui-burger_btn-border: var(--uui-disabled);
611
+
612
+ --uui-burger_btn-font: var(--font-regular);
580
613
 
581
614
  /* 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);
615
+ --uui-burger_search: var(--uui-text-contrast);
616
+ --uui-burger_search-fill: var(--uui-text-disabled);
617
+ --uui-burger_search-bg: var(--uui-surface-contrast);
618
+ --uui-burger_search-placeholder: var(--uui-text-disabled);
619
+
620
+ --uui-burger_search-font: var(--font-regular);
586
621
 
587
622
  /* NumericInput */
588
623
  --uui-numeric-input-bg: var(--uui-control-bg);
589
624
  --uui-numeric-input-bg-disabled: var(--uui-control-bg-disabled);
590
625
  --uui-numeric-input-border: var(--uui-control-border);
591
626
  --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
592
- --uui-numeric-input-border-hover: var(--uui-control-textinput-border-hover);
627
+ --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
593
628
  --uui-numeric-input-border-active: var(--uui-control-border-checked);
594
629
  --uui-numeric-input-border-error: var(--uui-negative);
595
630
  --uui-numeric-input-placeholder: var(--uui-control-placeholder);
@@ -604,7 +639,7 @@
604
639
  --uui-time-picker-bg-disabled: var(--uui-control-bg-disabled);
605
640
  --uui-time-picker-border: var(--uui-control-border);
606
641
  --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
607
- --uui-time-picker-border-hover: var(--uui-control-textinput-border-hover);
642
+ --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
608
643
  --uui-time-picker-border-active: var(--uui-control-border-checked);
609
644
  --uui-time-picker-border-error: var(--uui-negative);
610
645
  --uui-time-picker-placeholder: var(--uui-control-placeholder);
@@ -619,7 +654,7 @@
619
654
  --uui-search-input-bg-disabled: var(--uui-control-bg-disabled);
620
655
  --uui-search-input-border: var(--uui-control-border);
621
656
  --uui-search-input-border-disabled: var(--uui-control-border-disabled);
622
- --uui-search-input-border-hover: var(--uui-control-textinput-border-hover);
657
+ --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
623
658
  --uui-search-input-border-active: var(--uui-control-border-checked);
624
659
  --uui-search-input-border-error: var(--uui-negative);
625
660
  --uui-search-input-placeholder: var(--uui-control-placeholder);
@@ -631,30 +666,38 @@
631
666
  --uui-search-input-border-radius: var(--uui-border-radius);
632
667
 
633
668
  /* 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);
669
+ --uui-popover-shadow: var(--uui-shadow-level-2);
635
670
 
636
671
  /* Footer */
637
- --uui-footer-bg: var(--night800);
672
+ --uui-footer-bg: var(--uui-surface-contrast);
638
673
 
639
674
  /* FilterPanelItemToggler vars */
640
675
  --uui-filters-toggler-border: var(--uui-text-input-border);
641
676
  --uui-filters-toggler-border-hover: var(--uui-text-input-border-hover);
642
677
  --uui-filters-toggler-border-radius: var(--uui-border-radius);
643
- --uui-filters-toggler-bg: var(--white);
644
- --uui-filters-toggler-bg-hover: var(--night100);
678
+ --uui-filters-toggler-bg: var(--uui-surface);
679
+ --uui-filters-toggler-bg-hover: var(--uui-surface-light-hover);
645
680
  --uui-filters-toggler-text: var(--uui-text-brand);
646
681
  --uui-filters-toggler-label: var(--uui-text-secondary);
647
682
  --uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);
683
+ --uui-filters-toggler-shadow: none;
684
+
685
+ --uui-filters-toggler-font: var(--font-regular);
686
+ --uui-filters-panel-header-font: var(--font-regular);
648
687
 
649
688
  /* NotificationCard */
650
689
  --uui-notification-card-border-radius: var(--uui-border-radius);
651
690
  --uui-notification-card-border-width: 0;
652
691
  --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);
692
+ --uui-notification-card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
654
693
 
655
694
  /* Alert */
656
695
  --uui-alert-border-radius: 6px;
657
696
 
697
+ /* Panel */
698
+
699
+ --uui-panel-bg: var(--uui-surface);
700
+
658
701
  /* Spinner */
659
702
  --uui-spinner: var(--uui-primary);
660
703
 
@@ -662,21 +705,46 @@
662
705
  --uui-blocker-bg: var(--uui-background);
663
706
  --uui-blocker-bg-with-opacity: #F5F6FA80;
664
707
 
665
- /* modification of the states of table components */
708
+ /* FlexRow */
709
+ --uui-flex-row-border-bottom: 1px solid var(--uui-divider);
666
710
 
667
- :global(.uui-dt-cell-border) {
668
- --uui-dt-cell-border: var(--gray30);
669
- }
711
+ /* DataTable vars */
712
+ --uui-dt-border: var(--uui-divider-light);
670
713
 
671
- :global(.uui-dt-row-border) {
672
- --uui-dt-row-border: var(--gray30);
673
- }
714
+ --uui-dt-cell-bg: transparent;
715
+ --uui-dt-cell-bg-resize: #EF55331F;
716
+ --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);
717
+ --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);
718
+ --uui-dt-cell-border-focus: var(--uui-control-border-checked);
719
+
720
+ --uui-dt-row-bg: var(--uui-surface);
721
+ --uui-dt-row-bg-hover: var(--uui-surface-light-hover);
722
+ --uui-dt-row-bg-invalid: #FEF7F6;
723
+ --uui-dt-row-bg-selected: #EBF7FF;
724
+
725
+ --uui-dt-header-row-bg: var(--uui-surface-light);
726
+ --uui-dt-header-row-bg-hover: var(--uui-surface-hover);
727
+
728
+ --uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
729
+ --uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
730
+ --uui-dt-right-shadow: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
731
+ --uui-dt_header-drop_marker: var(--uui-primary);
732
+
733
+ --uui-dt-header-cell-font: var(--font-semibold);
734
+
735
+ /* AvatarStack */
736
+
737
+ --uui-avatar-stack-font: var(--font-semibold);
738
+
739
+ /* Badge */
740
+
741
+ --uui-badge-font: var(--font-regular);
742
+ --uui-badge-count-font: var(--font-semibold);
743
+
744
+ /* Pagination */
745
+
746
+ --uui-pagination-font: var(--font-regular);
674
747
 
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
748
 
681
749
  /* ------------------------------------ */
682
750
 
@@ -780,28 +848,32 @@
780
848
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
781
849
  }
782
850
 
783
- :global(.icon-button-sky) {
851
+ :global(.icon-button-sky),
852
+ :global(.icon-button-info) {
784
853
  --uui-icon-btn: var(--uui-info);
785
854
  --uui-icon-btn-hover: var(--uui-info-dark);
786
855
  --uui-icon-btn-active: var(--uui-info-darkest);
787
856
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
788
857
  }
789
858
 
790
- :global(.icon-button-grass) {
859
+ :global(.icon-button-grass),
860
+ :global(.icon-button-success) {
791
861
  --uui-icon-btn: var(--uui-success);
792
862
  --uui-icon-btn-hover: var(--uui-success-dark);
793
863
  --uui-icon-btn-active: var(--uui-success-darkest);
794
864
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
795
865
  }
796
866
 
797
- :global(.icon-button-sun) {
867
+ :global(.icon-button-sun),
868
+ :global(.icon-button-warning) {
798
869
  --uui-icon-btn: var(--uui-warning);
799
870
  --uui-icon-btn-hover: var(--uui-warning-dark);
800
871
  --uui-icon-btn-active: var(--uui-warning-darkest);
801
872
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
802
873
  }
803
874
 
804
- :global(.icon-button-fire) {
875
+ :global(.icon-button-fire),
876
+ :global(.icon-button-error) {
805
877
  --uui-icon-btn: var(--uui-error);
806
878
  --uui-icon-btn-hover: var(--uui-error-dark);
807
879
  --uui-icon-btn-active: var(--uui-error-darkest);
@@ -864,7 +936,8 @@
864
936
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
865
937
  }
866
938
 
867
- :global(.icon-button-night500) {
939
+ :global(.icon-button-night500),
940
+ :global(.icon-button-secondary) {
868
941
  --uui-icon-btn: var(--gray50);
869
942
  --uui-icon-btn-hover: var(--uui-color-night500-800);
870
943
  --uui-icon-btn-active: var(--uui-color-night500-900);
@@ -873,90 +946,83 @@
873
946
 
874
947
  :global(.icon-button-night600),
875
948
  :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);
949
+ --uui-icon-btn: var(--uui-icon);
950
+ --uui-icon-btn-hover: var(--uui-icon-hover);
951
+ --uui-icon-btn-active: var(--uui-icon-active);
952
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
880
953
  }
881
954
 
882
955
  :global(.notification-card-sun),
883
956
  :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
- }
957
+ --uui-notification-card-fill: var(--uui-warning);
958
+ --uui-notification-card-border: var(--uui-warning);
959
+ --uui-notification-card-bg: var(--uui-surface);
960
+ --uui-notification-card-text: var(--uui-text-primary);
961
+ }
889
962
 
890
963
  :global(.notification-card-success),
891
964
  :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
- }
965
+ --uui-notification-card-fill: var(--uui-success);
966
+ --uui-notification-card-border: var(--uui-success);
967
+ --uui-notification-card-bg: var(--uui-surface);
968
+ --uui-notification-card-text: var(--uui-text-primary);
969
+ }
897
970
 
898
971
  :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
- }
972
+ :global(.notification-card-sky) {
973
+ --uui-notification-card-fill: var(--uui-info);
974
+ --uui-notification-card-border: var(--uui-info);
975
+ --uui-notification-card-bg: var(--uui-surface);
976
+ --uui-notification-card-text: var(--uui-text-primary);
977
+ }
905
978
 
906
979
  :global(.notification-card-error),
907
980
  :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
- }
981
+ --uui-notification-card-fill: var(--uui-error);
982
+ --uui-notification-card-border: var(--uui-error);
983
+ --uui-notification-card-bg: var(--uui-surface);
984
+ --uui-notification-card-text: var(--uui-text-primary);
985
+ }
913
986
 
914
987
  :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;
988
+ --uui-notification-card-fill: var(--night600);
989
+ --uui-notification-card-border: var(--night600);
990
+ --uui-notification-card-bg: var(--uui-surface);
991
+ --uui-notification-card-text: var(--uui-text-primary);
927
992
  }
928
993
 
929
994
  :global(.alert-error),
930
995
  :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
- }
996
+ --uui-alert-text: var(--uui-text-primary);
997
+ --uui-alert-bg: #F5E5E9;
998
+ --uui-alert-border: var(--uui-error);
999
+ --uui-alert-icon: var(--uui-error);
1000
+ }
936
1001
 
937
1002
  :global(.alert-warning),
938
1003
  :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
- }
1004
+ --uui-alert-text: var(--uui-text-primary);
1005
+ --uui-alert-bg: #F6EEE1;
1006
+ --uui-alert-border: var(--uui-warning);
1007
+ --uui-alert-icon: var(--uui-warning);
1008
+ }
1009
+
944
1010
 
945
1011
  :global(.alert-success),
946
1012
  :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
- }
1013
+ --uui-alert-text: var(--uui-text-primary);
1014
+ --uui-alert-bg: #E7EEE1;
1015
+ --uui-alert-border: var(--uui-success);
1016
+ --uui-alert-icon: var(--uui-success);
1017
+ }
952
1018
 
953
1019
  :global(.alert-info),
954
1020
  :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
- }
1021
+ --uui-alert-text: var(--uui-text-primary);
1022
+ --uui-alert-bg: #DCEDF6;
1023
+ --uui-alert-border: var(--uui-info);
1024
+ --uui-alert-icon: var(--uui-info);
1025
+ }
960
1026
 
961
1027
  :global(.badge-default), :global(.badge-night300) {
962
1028
  --uui-badge-bg: var(--night300);
@@ -974,7 +1040,7 @@
974
1040
  :global(.badge-info), :global(.badge-sky) {
975
1041
  --uui-badge-bg: var(--uui-info);
976
1042
  --uui-badge-bg-hover: var(--uui-info-dark);
977
- --uui-badge-caption-solid: var(--white);
1043
+ --uui-badge-caption-solid: var(--uui-text-contrast);
978
1044
  --uui-badge-count-bg: var(--white);
979
1045
  --uui-badge-count: var(--uui-text-secondary);
980
1046
  --uui-badge-bg-halftone: var(--uui-info-lightest);
@@ -987,7 +1053,7 @@
987
1053
  :global(.badge-success), :global(.badge-grass) {
988
1054
  --uui-badge-bg: var(--uui-success);
989
1055
  --uui-badge-bg-hover: var(--uui-success-dark);
990
- --uui-badge-caption-solid: var(--white);
1056
+ --uui-badge-caption-solid: var(--uui-text-contrast);
991
1057
  --uui-badge-count-bg: var(--white);
992
1058
  --uui-badge-count: var(--uui-text-secondary);
993
1059
  --uui-badge-bg-halftone: var(--uui-success-lightest);
@@ -1026,7 +1092,7 @@
1026
1092
  :global(.badge-cobalt) {
1027
1093
  --uui-badge-bg: var(--uui-color-cobalt-700);
1028
1094
  --uui-badge-bg-hover: var(--uui-color-cobalt-800);
1029
- --uui-badge-caption-solid: var(--white);
1095
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1030
1096
  --uui-badge-count-bg: var(--white);
1031
1097
  --uui-badge-count: var(--uui-text-secondary);
1032
1098
  --uui-badge-bg-halftone: var(--uui-color-cobalt-500);
@@ -1052,7 +1118,7 @@
1052
1118
  :global(.badge-fuchsia) {
1053
1119
  --uui-badge-bg: var(--uui-color-fuchsia-700);
1054
1120
  --uui-badge-bg-hover: var(--uui-color-fuchsia-800);
1055
- --uui-badge-caption-solid: var(--white);
1121
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1056
1122
  --uui-badge-count-bg: var(--white);
1057
1123
  --uui-badge-count: var(--uui-text-secondary);
1058
1124
  --uui-badge-bg-halftone: var(--uui-color-fuchsia-500);
@@ -1117,7 +1183,7 @@
1117
1183
  :global(.badge-night500) {
1118
1184
  --uui-badge-bg: var(--uui-color-night500-700);
1119
1185
  --uui-badge-bg-hover: var(--uui-color-night500-800);
1120
- --uui-badge-caption-solid: var(--white);
1186
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1121
1187
  --uui-badge-count-bg: var(--white);
1122
1188
  --uui-badge-count: var(--uui-text-secondary);
1123
1189
  --uui-badge-bg-halftone: var(--white);
@@ -1130,7 +1196,7 @@
1130
1196
  :global(.badge-night600) {
1131
1197
  --uui-badge-bg: var(--uui-color-night600-700);
1132
1198
  --uui-badge-bg-hover: var(--uui-color-night600-800);
1133
- --uui-badge-caption-solid: var(--white);
1199
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1134
1200
  --uui-badge-count-bg: var(--white);
1135
1201
  --uui-badge-count: var(--uui-text-secondary);
1136
1202
  --uui-badge-bg-halftone: var(--white);
@@ -1143,7 +1209,7 @@
1143
1209
  :global(.badge-violet) {
1144
1210
  --uui-badge-bg: var(--lavanda-30);
1145
1211
  --uui-badge-bg-hover: var(--lavanda-40);
1146
- --uui-badge-caption-solid: var(--white);
1212
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1147
1213
  --uui-badge-count-bg: var(--white);
1148
1214
  --uui-badge-count: var(--uui-text-secondary);
1149
1215
  --uui-badge-bg-halftone: var(--lavanda-10);
@@ -1156,7 +1222,7 @@
1156
1222
  :global(.badge-orange) {
1157
1223
  --uui-badge-bg: var(--orange-30);
1158
1224
  --uui-badge-bg-hover: var(--orange-40);
1159
- --uui-badge-caption-solid: var(--white);
1225
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1160
1226
  --uui-badge-count-bg: var(--white);
1161
1227
  --uui-badge-count: var(--uui-text-secondary);
1162
1228
  --uui-badge-bg-halftone: var(--orange-10);
@@ -1169,7 +1235,7 @@
1169
1235
  :global(.badge-purple) {
1170
1236
  --uui-badge-bg: var(--purple-30);
1171
1237
  --uui-badge-bg-hover: var(--purple-40);
1172
- --uui-badge-caption-solid: var(--white);
1238
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1173
1239
  --uui-badge-count-bg: var(--white);
1174
1240
  --uui-badge-count: var(--uui-text-secondary);
1175
1241
  --uui-badge-bg-halftone: var(--purple-10);
@@ -1179,81 +1245,21 @@
1179
1245
  --uui-badge-caption-halftone: var(--purple-50);
1180
1246
  }
1181
1247
 
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) {
1248
+ :global(.informer-default) {
1205
1249
  --uui-informer-bg: var(--night300);
1206
1250
  --uui-informer-caption: var(--night600);
1207
1251
  }
1208
1252
 
1209
- :global(.informer-color-focus) {
1253
+ :global(.informer-focus) {
1210
1254
  --uui-informer-bg: var(--fire);
1211
1255
  --uui-informer-caption: var(--uui-contrast);
1212
1256
  }
1213
1257
 
1214
- :global(.informer-color-white) {
1258
+ :global(.informer-white) {
1215
1259
  --uui-informer-bg: var(--uui-surface);
1216
1260
  --uui-informer-caption: var(--uui-text-secondary);
1217
1261
  }
1218
1262
 
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
1263
  :global(.uui-text-brand),
1258
1264
  :global(.uui-text-night900) {
1259
1265
  --uui-text: var(--uui-text-brand);
@@ -1313,6 +1319,22 @@
1313
1319
  --uui-dropdown-container-bg: var(--night700);
1314
1320
  }
1315
1321
 
1322
+ :global(.flex-row-background-white) {
1323
+ --uui-flex-row-bg: var(--uui-surface);
1324
+ }
1325
+
1326
+ :global(.flex-row-background-night50) {
1327
+ --uui-flex-row-bg: var(--night50);
1328
+ }
1329
+
1330
+ :global(.flex-row-background-night100) {
1331
+ --uui-flex-row-bg: var(--night100);
1332
+ }
1333
+
1334
+ :global(.flex-row-background-none) {
1335
+ --uui-flex-row-bg: transparent;
1336
+ }
1337
+
1316
1338
  :global(.panel-white) {
1317
1339
  --uui-panel-bg: var(--uui-surface);
1318
1340
  }
@@ -1320,4 +1342,4 @@
1320
1342
  :global(.panel-night50) {
1321
1343
  --uui-panel-bg: var(--night50);
1322
1344
  }
1323
- }
1345
+ }