@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_promo.scss CHANGED
@@ -110,7 +110,6 @@
110
110
  --uui-secondary-darkest: var(--gray70);
111
111
  --uui-secondary-hover: var(--gray60);
112
112
  --uui-secondary-active: var(--gray70);
113
- --uui-secondary-disabled: var(--gray40);
114
113
 
115
114
  --uui-negative: var(--red);
116
115
  --uui-negative-light: var(--red-light);
@@ -118,13 +117,11 @@
118
117
  --uui-negative-dark: var(--red-dark);
119
118
  --uui-negative-darkest: var(--red-darkest);
120
119
 
121
- --uui-button-bg-halftone: var(--white);
122
- --uui-button-caption-disabled: var(--gray50);
123
-
124
120
  --uui-link: var(--blue);
125
121
  --uui-link-hover: var(--blue-dark);
126
122
  --uui-link-visited: #5214CC;
127
123
  --uui-link-disabled: var(--gray50);
124
+ --uui-visited: #5214CC;
128
125
 
129
126
  --uui-info: var(--blue);
130
127
  --uui-info-lightest: var(--blue-lightest);
@@ -165,15 +162,26 @@
165
162
 
166
163
  --uui-surface: var(--white);
167
164
  --uui-surface-hover: var(--gray30);
168
- --uui-surface-light: var(--white);
169
165
  --uui-surface-inverted: var(--gray90);
170
- --uui-surface-inverted-light: var(--gray80);
166
+ /* new start */
167
+ --uui-surface-light: var(--gray5);
168
+ --uui-surface-light-hover: var(--gray10);
169
+ --uui-surface-contrast: var(--gray80);
170
+ --uui-surface-contrast-hover: var(--gray90);
171
+ --uui-surface-contrast-active: var(--gray90);
172
+ /* new end */
171
173
 
172
- --uui-visited: #5214CC;
173
- --uui-disabled: var(--gray30);
174
174
  --uui-background: var(--gray10);
175
- --uui-contrast: var(--white);
176
175
  --uui-divider: var(--gray40);
176
+ --uui-divider-light: var(--gray30);
177
+ --uui-contrast: var(--white);
178
+ --uui-disabled: var(--gray30);
179
+
180
+ --uui-scroll-bars-bg: var(--gray40);
181
+ --uui-scroll-bars-bg-active: var(--gray60);
182
+
183
+ --uui-button-bg-halftone: var(--white);
184
+ --uui-button-caption-disabled: var(--gray50);
177
185
 
178
186
  --uui-text-brand: var(--gray90);
179
187
  --uui-text-primary: var(--gray80);
@@ -181,19 +189,15 @@
181
189
  --uui-text-disabled: var(--gray50);
182
190
  --uui-text-contrast: var(--gray5);
183
191
 
184
- --uui-caption: var(--white);
185
-
186
- --uui-control-rest: var(--uui-primary);
187
- --uui-control-hover: var(--uui-primary-dark);
188
- --uui-control-active: var(--uui-primary-darkest);
189
-
190
192
  --uui-control-bg: var(--white);
191
193
  --uui-control-bg-checked: var(--uui-primary);
192
194
  --uui-control-bg-checked-hover: var(--uui-primary-dark);
193
195
  --uui-control-bg-checked-disabled: var(--uui-primary-light);
196
+ --uui-control-bg-hover: var(--gray60);
194
197
  --uui-control-bg-disabled: var(--gray5);
195
198
  --uui-control-bg-readonly: var(--gray5);
196
- --uui-control-bg-hover: var(--gray60);
199
+ --uui-control_switch-bg: var(--gray40);
200
+ --uui-control_switch_toggler-bg: var(--white);
197
201
 
198
202
  --uui-control-border-checked-disabled: var(--uui-primary-light);
199
203
  --uui-control-border: var(--gray40);
@@ -203,7 +207,8 @@
203
207
  --uui-control-border-disabled: var(--uui-disabled);
204
208
  --uui-control-border-readonly: var(--uui-disabled);
205
209
 
206
- --uui-control-textinput-border-hover: var(--gray60);
210
+ --uui-control_switch-border-hover: var(--gray60);
211
+ --uui-control_textinput-border-hover: var(--gray60);
207
212
 
208
213
  --uui-control-label: var(--uui-text-primary);
209
214
  --uui-control-label-disabled: var(--uui-text-disabled);
@@ -223,24 +228,28 @@
223
228
 
224
229
  --uui-control-checkbox-icon: var(--white);
225
230
 
231
+ --uui-tag-bg: var(--gray30);
232
+ --uui-tag-bg-hover: var(--gray40);
233
+
226
234
  --uui-skeleton: var(--gray40);
227
235
  --uui-skeleton-gradient: linear-gradient(90deg, var(--gray40) 0%, var(--gray10) 50%, var(--gray40) 100%);
228
236
 
229
237
  --uui-overlay: rgba(29, 30, 38, 0.8);
230
- --uui-shadow: 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10);
231
- --uui-scroll: var(--gray60);
232
- --uui-surface-dark: var(--gray90);
233
- --uui-border-radius: 0px;
238
+ --uui-border-radius: 0;
239
+ --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
240
+ --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);
241
+ --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);
234
242
 
235
- /* Button-vars */
236
- --uui-btn-border-radius: var(--uui-border-radius);
243
+ /* core variables end */
244
+
245
+ /* find below the not core variables that are used and highlight them in the code */
237
246
 
238
247
  /* TextInput vars */
239
248
  --uui-text-input-bg: var(--uui-control-bg);
240
249
  --uui-text-input-bg-disabled: var(--uui-control-bg-disabled);
241
250
  --uui-text-input-bg-readonly: var(--uui-control-bg-readonly);
242
251
  --uui-text-input-border: var(--uui-control-border);
243
- --uui-text-input-border-hover: var(--uui-control-textinput-border-hover);
252
+ --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
244
253
  --uui-text-input-border-active: var(--uui-control-border-checked);
245
254
  --uui-text-input-border-error: var(--uui-negative);
246
255
  --uui-text-input-border-disabled: var(--uui-control-border-disabled);
@@ -255,13 +264,21 @@
255
264
  --uui-text-input-icon-clickable-hover: var(--uui-icon-hover);
256
265
  --uui-text-input-border-radius: var(--uui-border-radius);
257
266
 
267
+ --uui-text-input-font: var(--font-regular);
268
+
269
+ /* Button vars */
270
+ --uui-btn-border-radius: var(--uui-border-radius);
271
+
272
+ --uui-btn-font: var(--font-semibold);
273
+
258
274
  /* LinkButton vars */
259
275
  --uui-link-button-text: var(--uui-primary);
260
276
  --uui-link-button-text-hover: var(--uui-primary-dark);
261
277
  --uui-link-button-text-active: var(--uui-primary-darkest);
262
278
  --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
279
+ --uui-link-button-font: var(--font-semibold);
263
280
 
264
- /* DatePicker vars */
281
+ /* DatePicker vars */
265
282
  --uui-dtp-title-bg: var(--uui-control-bg);
266
283
  --uui-dtp-title-bg-hover: var(--uui-primary-halftone);
267
284
  --uui-dtp-text-selected: var(--uui-control-border-checked);
@@ -269,7 +286,10 @@
269
286
  --uui-dtp-next-prev-icon: var(--uui-icon);
270
287
  --uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);
271
288
 
272
- /* RangeDatePicker vars */
289
+ --uui-dtp_header-font: var(--font-semibold);
290
+ --uui-dtp_body-content-font: var(--font-regular);
291
+
292
+ /* RangeDatePicker vars */
273
293
  --uui-rdtp-bg: var(--uui-control-bg);
274
294
  --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);
275
295
 
@@ -282,13 +302,16 @@
282
302
  --uui-calendar-text-filtered: var(--uui-control-text-disabled);
283
303
  --uui-calendar-bg-selected: var(--uui-secondary);
284
304
 
305
+ --uui-calendar-content-font: var(--font-regular);
306
+ --uui-calendar-weekday-font: var(--font-regular);
307
+ --uui-calendar-selected_day-font: var(--font-semibold);
308
+
285
309
  /* tab-button-vars */
286
310
  --uui-tab-button-text: var(--uui-text-primary);
287
311
  --uui-tab-button-text-hover: var(--uui-primary);
288
312
  --uui-tab-button-text-active: var(--uui-primary);
289
313
  --uui-tab-button-text-disabled: var(--uui-text-disabled);
290
- --uui-tab-button-count-bg: var(--gray30);
291
- --uui-tab-button-count: var(--uui-text-secondary);
314
+ --uui-tab-button-font: var(--font-semibold);
292
315
 
293
316
  /* radio-input-vars */
294
317
  --uui-radio-input-bg: var(--uui-control-bg);
@@ -305,6 +328,8 @@
305
328
  --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
306
329
  --uui-radio-input-error: var(--uui-negative);
307
330
 
331
+ --uui-radio-input-font: var(--font-regular);
332
+
308
333
  /* Checkbox vars */
309
334
  --uui-checkbox-border: var(--uui-control-border);
310
335
  --uui-checkbox-border-hover: var(--uui-control-border-hover);
@@ -322,26 +347,26 @@
322
347
  --uui-checkbox-label-disabled: var(--uui-control-label-disabled);
323
348
  --uui-checkbox-border-radius: var(--uui-border-radius);
324
349
 
350
+ --uui-checkbox-font: var(--font-regular);
351
+
325
352
  /* Tag vars */
326
- --uui-tag-bg: var(--gray30);
327
- --uui-tag-bg-hover: var(--gray40);
328
353
  --uui-tag-caption: var(--uui-text-primary);
329
354
  --uui-tag-fill: var(--uui-icon);
330
355
  --uui-tag-fill-hover: var(--uui-icon-hover);
331
- --uui-tag-count-bg: var(--white);
356
+ --uui-tag-count-bg: var(--uui-surface);
332
357
  --uui-tag-count: var(--uui-text-secondary);
333
358
  --uui-tag-label: var(--uui-text-secondary);
334
359
  --uui-tag-border-radius: var(--uui-border-radius);
335
360
 
336
- /* Badge vars */
337
- --uui-badge-border-radius: 100px;
361
+ --uui-tag-font: var(--font-regular);
362
+ --uui-tag-count-font: var(--font-semibold);
338
363
 
339
364
  /* TextArea vars */
340
365
  --uui-text-area-bg: var(--uui-control-bg);
341
366
  --uui-text-area-bg-disabled: var(--uui-control-bg-disabled);
342
367
  --uui-text-area-border: var(--uui-control-border);
343
368
  --uui-text-area-border-disabled: var(--uui-control-border-disabled);
344
- --uui-text-area-border-hover: var(--uui-control-textinput-border-hover);
369
+ --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
345
370
  --uui-text-area-border-active: var(--uui-control-border-checked);
346
371
  --uui-text-area-border-error: var(--uui-negative);
347
372
  --uui-text-area-placeholder: var(--uui-control-placeholder);
@@ -350,26 +375,29 @@
350
375
  --uui-text-area-icon: var(--uui-icon);
351
376
  --uui-text-area-border-radius: var(--uui-border-radius);
352
377
 
378
+ --uui-text-area-font: var(--font-regular);
379
+ --uui-text-area-counter-font: var(--font-regular);
380
+
353
381
  /* DropMarker vars */
354
382
  --uui-drop-marker: var(--uui-primary);
355
383
  --uui-drop-marker-blocked: var(--uui-error);
356
384
 
357
- /* ScrollBars vars */
358
- --uui-scroll-bars-bg: var(--gray40);
359
- --uui-scroll-bars-bg-active: var(--gray60);
360
-
361
385
  /* Tooltip vars */
362
- /* noinspection CssInvalidFunction */
363
- --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 */
386
+ --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 0 3px 0 rgba(29, 30, 38, 0.15)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
364
387
  --uui-tooltip-arrow-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
365
388
  --uui-tooltip-border-radius: var(--uui-border-radius);
366
389
 
390
+ --uui-tooltip-font: var(--font-regular);
391
+
392
+ /* PickerInput vars */
393
+ --uui-picker_input-bg: var(--uui-surface);
394
+
367
395
  /* PickerToggler vars */
368
396
  --uui-picker-toggler-bg: var(--uui-control-bg);
369
397
  --uui-picker-toggler-bg-disabled: var(--uui-control-bg-disabled);
370
398
  --uui-picker-toggler-border: var(--uui-control-border);
371
399
  --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
372
- --uui-picker-toggler-border-hover: var(--uui-control-textinput-border-hover);
400
+ --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
373
401
  --uui-picker-toggler-border-active: var(--uui-control-border-checked);
374
402
  --uui-picker-toggler-border-error: var(--uui-negative);
375
403
  --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
@@ -381,36 +409,16 @@
381
409
  --uui-picker-toggler-icon-clickable-hover: var(--uui-icon-hover);
382
410
  --uui-picker-toggler-border-radius: var(--uui-border-radius);
383
411
 
384
- /* DataTable vars */
385
- --uui-dt-cell-bg: transparent;
386
- --uui-dt-cell-resize-bg: #EF55331F;
387
- --uui-dt-cell-border: transparent;
388
- --uui-dt-cell-editor-bg-invalid: var(--red-lightest);
389
- --uui-dt-cell-editor-hover-border: var(--uui-control-textinput-border-hover);
390
- --uui-dt-cell-editor-focus-border: var(--uui-control-border-checked);
391
- --uui-dt-cell-editor-invalid-border: var(--uui-negative);
392
-
393
- --uui-dt-row-bg: var(--white);
394
- --uui-dt-row-bg-hover: var(--gray10);
395
- --uui-dt-row-bg-invalid: #FEF7F6;
396
- --uui-dt-row-bg-selected: #EBF7FF;
397
- --uui-dt-row-border: transparent;
398
-
399
- --uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
400
- --uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
401
- --uui-dt-right-shadow: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
402
- --uui-dt-left-marker-shadow: inset 2px 0 0 0 var(--uui-primary);
403
- --uui-dt-right-marker-shadow: inset -2px 0 0 0 var(--uui-primary);
404
- --uui-dt-header-hover-shadow: inset 1px 0 0 var(--gray30), inset -1px 0 0 var(--gray30);
412
+ --uui-picker-toggler-font: var(--font-regular);
405
413
 
406
414
  /* Panel */
407
415
  --uui-panel-border-radius: var(--uui-border-radius);
408
- --uui-panel-shadow: var(--uui-shadow);
416
+ --uui-panel-shadow: var(--uui-shadow-level-1);
409
417
 
410
418
  /* Modals */
411
419
  --uui-modals-border-radius: var(--uui-border-radius);
412
420
  --uui-modals-overlay: rgba(29, 30, 38, 0.8);
413
- --uui-modals-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.05), 0 3px 12px 0 rgba(29, 30, 38, 0.05);
421
+ --uui-modals-shadow: var(--uui-shadow-level-3);
414
422
  --uui-modals-bg: var(--uui-surface);
415
423
 
416
424
  /* TextPlaceholder */
@@ -426,6 +434,10 @@
426
434
  --uui-labeled-input-optional-text: var(--uui-text-secondary);
427
435
  --uui-labeled-input-asterisk: var(--uui-error);
428
436
 
437
+ --uui-labeled-input-font: var(--font-semibold);
438
+ --uui-labeled-input-optional-font: var(--font-italic);
439
+ --uui-labeled-input-invalid-msg-font: var(--font-regular);
440
+
429
441
  /* Accordion */
430
442
  --uui-accordion-bg: var(--uui-surface);
431
443
  --uui-accordion-border: var(--uui-divider);
@@ -435,12 +447,15 @@
435
447
  --uui-accordion-icon: var(--uui-icon);
436
448
  --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);
437
449
  --uui-accordion-focus: var(--uui-primary);
438
- --uui-accordion-shadow: 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10);
439
- --uui-accordion-shadow-hovered: 0 6px 12px 0 rgba(29, 30, 38, 0.10), 0 3px 6px 0 rgba(29, 30, 38, 0.10);
450
+ --uui-accordion-shadow: var(--uui-shadow-level-1);
451
+ --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
452
+
453
+ --uui-accordion-toggler-font: var(--font-semibold);
454
+ --uui-accordion-body-font: var(--font-regular);
440
455
 
441
456
  /* Switch */
442
- --uui-switch-bg: var(--gray40);
443
- --uui-switch-border-hover: var(--gray60);
457
+ --uui-switch-bg: var(--uui-control_switch-bg);
458
+ --uui-switch-border-hover: var(--uui-control_switch-border-hover);
444
459
  --uui-switch-bg-checked: var(--uui-control-bg-checked);
445
460
  --uui-switch-bg-hover: var(--uui-control-bg-hover);
446
461
  --uui-switch-bg-disabled: var(--uui-control-bg-disabled);
@@ -454,7 +469,7 @@
454
469
  --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);
455
470
  --uui-switch-label: var(--uui-control-label);
456
471
  --uui-switch-label-disabled: var(--uui-control-label-disabled);
457
- --uui-switch-toggler-bg: var(--white);
472
+ --uui-switch-toggler-bg: var(--uui-control_switch_toggler-bg);
458
473
  --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
459
474
  --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);
460
475
  --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
@@ -462,65 +477,88 @@
462
477
  --uui-switch-toggler-border-checked-hover: var(--uui-control-bg-checked-hover);
463
478
  --uui-switch-toggler-border-checked-disabled: var(--uui-control-bg-checked-disabled);
464
479
 
480
+ --uui-switch-font: var(--font-regular);
481
+
465
482
  /* DropdownContainer */
466
483
  --uui-dropdown-container-border-radius: 0;
467
- --uui-dropdown-container-shadow: 0 6px 18px 0 rgba(29, 30, 38, 0.1), 0 3px 12px 0 rgba(29, 30, 38, 0.1);
468
- --uui-dropdown-container-bg: var(--white);
484
+ --uui-dropdown-container-shadow: var(--uui-shadow-level-2);
485
+ --uui-dropdown-container-bg: var(--uui-surface);
486
+
487
+ /* DropdownMenu */
488
+ // TODO: update tokens
489
+ --uui-dropdown-menu-bg: var(--uui-surface);
490
+ --uui-dropdown-menu-shadow: var(--uui-shadow-level-2);
491
+ --uui-dropdown-menu-splitter: var(--uui-divider);
492
+ --uui-dropdown-menu-item-hover: var(--uui-surface-hover);
493
+ --uui-dropdown-menu-item-active: var(--uui-surface-hover);
494
+ --uui-dropdown-menu-item-text: var(--uui-text-primary);
495
+
496
+ --uui-dropdown-menu-body-font: var(--font-regular);
497
+ --uui-dropdown-menu-item-font: var(--font-regular);
469
498
 
470
499
  /* MainMenu */
471
- --uui-main_menu-text: var(--white);
472
- --uui-main_menu-bg: var(--gray80);
473
- --uui-main_menu-bg-hover: var(--gray80);
474
- --uui-main_menu-active: var(--gray90);
475
- --uui-main_menu-hover: var(--gray90);
500
+ --uui-main_menu-text: var(--uui-text-contrast);
501
+ --uui-main_menu-bg: var(--uui-surface-contrast);
502
+ --uui-main_menu-hover: var(--uui-surface-contrast-hover);
503
+ --uui-main_menu-active: var(--uui-surface-contrast-active);
476
504
  --uui-main_menu-border-active: var(--uui-primary);
477
- --uui-main_menu-border-light: var(--white);
478
505
 
479
- --uui-main_menu-dropdown-bg: var(--gray90);
506
+ --uui-main_menu-dropdown-bg: var(--uui-surface-inverted);
480
507
  --uui-main_menu-dropdown-hover: var(--uui-primary);
508
+ --uui-main_menu-dropdown-shadow: none;
509
+ --uui-main_menu-dropdown-border-radius: none;
481
510
 
482
- --uui-main_menu-search-bg: var(--gray70);
483
- --uui-main_menu-search-border: var(--gray70);
511
+ --uui-main_menu-search-bg: var(--uui-secondary-darkest);
512
+ --uui-main_menu-search-border: var(--uui-secondary-darkest);
484
513
  --uui-main_menu-search-placeholder: var(--uui-text-disabled);
485
514
  --uui-main_menu-search-text: var(--uui-contrast);
486
515
  --uui-main_menu-search-icon: var(--uui-icon-disabled);
487
516
 
488
- --uui-main_menu-icon: var(--white);
489
- --uui-main_menu-icon-hover: var(--white);
490
- --uui-main_menu-icon-active: var(--white);
517
+ --uui-main_menu-icon: var(--uui-text-contrast);
518
+ --uui-main_menu-icon-hover: var(--uui-text-contrast);
519
+ --uui-main_menu-icon-active: var(--uui-text-contrast);
520
+
521
+ --uui-main_menu-font: var(--font-semibold);
522
+ --uui-main_menu-search-font: var(--font-regular);
491
523
 
492
524
  /* BurgerMenu */
493
- --uui-burger_menu-bg: var(--gray90);
525
+ --uui-burger_menu-bg: var(--uui-surface-inverted);
494
526
  --uui-burger_menu-bg-hover: var(--uui-primary-dark);
495
- --uui-burger_menu-caption: var(--uui-contrast);
527
+ --uui-burger_menu-caption: var(--uui-text-contrast);
496
528
  --uui-burger_menu-caption-hover: var(--uui-primary);
497
529
  --uui-burger_menu-overlay: var(--uui-overlay);
498
- --uui-burger_icon: var(--white);
530
+ --uui-burger_icon: var(--uui-text-contrast);
499
531
  --uui-burger_item: var(--uui-text-brand);
500
532
 
501
533
  /* BurgerGroupHeader */
502
- --uui-burger_group-text: var(--gray50);
503
- --uui-burger_group-bg: var(--gray80);
504
- --uui-burger_group-line: var(--gray60);
534
+ --uui-burger_group-text: var(--uui-text-disabled);
535
+ --uui-burger_group-bg: var(--uui-surface-contrast);
536
+ --uui-burger_group-line: var(--uui-text-secondary);
537
+
538
+ --uui-burger_group-font: var(--font-regular);
505
539
 
506
540
  /* BurgerButton */
507
- --uui-burger_btn: var(--white);
508
- --uui-burger_btn-hover: var(--uui-primary);
509
- --uui-burger_btn-active: var(--uui-primary);
510
- --uui-burger_btn-border: var(--gray30);
541
+ --uui-burger_btn_caption: var(--uui-text-contrast);
542
+ --uui-burger_btn_caption-hover: var(--uui-primary);
543
+ --uui-burger_btn_caption-active: var(--uui-primary);
544
+ --uui-burger_btn-border: var(--uui-disabled);
545
+
546
+ --uui-burger_btn-font: var(--font-regular);
511
547
 
512
548
  /* BurgerSearch */
513
- --uui-burger_search: var(--gray40);
514
- --uui-burger_search-fill: var(--gray50);
515
- --uui-burger_search-bg: var(--gray80);
516
- --uui-burger_search-placeholder: var(--gray50);
549
+ --uui-burger_search: var(--uui-text-contrast);
550
+ --uui-burger_search-fill: var(--uui-text-disabled);
551
+ --uui-burger_search-bg: var(--uui-surface-contrast);
552
+ --uui-burger_search-placeholder: var(--uui-text-disabled);
553
+
554
+ --uui-burger_search-font: var(--font-regular);
517
555
 
518
556
  /* NumericInput */
519
557
  --uui-numeric-input-bg: var(--uui-control-bg);
520
558
  --uui-numeric-input-bg-disabled: var(--uui-control-bg-disabled);
521
559
  --uui-numeric-input-border: var(--uui-control-border);
522
560
  --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
523
- --uui-numeric-input-border-hover: var(--uui-control-textinput-border-hover);
561
+ --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
524
562
  --uui-numeric-input-border-active: var(--uui-control-border-checked);
525
563
  --uui-numeric-input-border-error: var(--uui-negative);
526
564
  --uui-numeric-input-placeholder: var(--uui-control-placeholder);
@@ -535,7 +573,7 @@
535
573
  --uui-time-picker-bg-disabled: var(--uui-control-bg-disabled);
536
574
  --uui-time-picker-border: var(--uui-control-border);
537
575
  --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
538
- --uui-time-picker-border-hover: var(--uui-control-textinput-border-hover);
576
+ --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
539
577
  --uui-time-picker-border-active: var(--uui-control-border-checked);
540
578
  --uui-time-picker-border-error: var(--uui-negative);
541
579
  --uui-time-picker-placeholder: var(--uui-control-placeholder);
@@ -550,7 +588,7 @@
550
588
  --uui-search-input-bg-disabled: var(--uui-control-bg-disabled);
551
589
  --uui-search-input-border: var(--uui-control-border);
552
590
  --uui-search-input-border-disabled: var(--uui-control-border-disabled);
553
- --uui-search-input-border-hover: var(--uui-control-textinput-border-hover);
591
+ --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
554
592
  --uui-search-input-border-active: var(--uui-control-border-checked);
555
593
  --uui-search-input-border-error: var(--uui-negative);
556
594
  --uui-search-input-placeholder: var(--uui-control-placeholder);
@@ -562,10 +600,23 @@
562
600
  --uui-search-input-border-radius: var(--uui-border-radius);
563
601
 
564
602
  /* Popover */
565
- --uui-popover-shadow: 0 5px 18px 0 rgba(29, 30, 38, 0.1), 0 3px 12px 0 rgba(29, 30, 38, 0.1);
603
+ --uui-popover-shadow: var(--uui-shadow-level-2);
566
604
 
567
605
  /* Footer */
568
- --uui-footer-bg: var(--gray80);
606
+ --uui-footer-bg: var(--uui-surface-contrast);
607
+
608
+ /* FilterPanelItemToggler vars */
609
+ --uui-filters-toggler-border: var(--uui-text-input-border);
610
+ --uui-filters-toggler-border-hover: var(--uui-text-input-border-hover);
611
+ --uui-filters-toggler-border-radius: var(--uui-border-radius);
612
+ --uui-filters-toggler-bg: var(--uui-surface);
613
+ --uui-filters-toggler-bg-hover: var(--uui-surface-light-hover);
614
+ --uui-filters-toggler-text: var(--uui-text-brand);
615
+ --uui-filters-toggler-label: var(--uui-text-secondary);
616
+ --uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);
617
+
618
+ --uui-filters-toggler-font: var(--font-regular);
619
+ --uui-filters-panel-header-font: var(--font-regular);
569
620
 
570
621
  /* NotificationCard */
571
622
  --uui-notification-card-border-radius: var(--uui-border-radius);
@@ -576,15 +627,9 @@
576
627
  /* Alert */
577
628
  --uui-alert-border-radius: var(--uui-border-radius);
578
629
 
579
- /* FilterPanelItemToggler vars */
580
- --uui-filters-toggler-border: var(--uui-text-input-border);
581
- --uui-filters-toggler-border-hover: var(--uui-text-input-border-hover);
582
- --uui-filters-toggler-border-radius: var(--uui-border-radius);
583
- --uui-filters-toggler-bg: var(--white);
584
- --uui-filters-toggler-bg-hover: var(--gray10);
585
- --uui-filters-toggler-text: var(--uui-text-brand);
586
- --uui-filters-toggler-label: var(--uui-text-secondary);
587
- --uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);
630
+ /* Panel */
631
+
632
+ --uui-panel-bg: var(--uui-surface);
588
633
 
589
634
  /* Spinner */
590
635
  --uui-spinner: var(--uui-primary);
@@ -593,21 +638,46 @@
593
638
  --uui-blocker-bg: var(--uui-background);
594
639
  --uui-blocker-bg-with-opacity: #F5F6FA80;
595
640
 
596
- /* modification of the states of table components */
641
+ /* FlexRow */
642
+ --uui-flex-row-border-bottom: 1px solid var(--uui-divider);
597
643
 
598
- :global(.uui-dt-cell-border) {
599
- --uui-dt-cell-border: var(--gray30);
600
- }
644
+ /* DataTable vars */
645
+ --uui-dt-border: var(--uui-divider-light);
601
646
 
602
- :global(.uui-dt-row-border) {
603
- --uui-dt-row-border: var(--gray30);
604
- }
647
+ --uui-dt-cell-bg: transparent;
648
+ --uui-dt-cell-bg-resize: #EF55331F;
649
+ --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);
650
+ --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);
651
+ --uui-dt-cell-border-focus: var(--uui-control-border-checked);
652
+
653
+ --uui-dt-row-bg: var(--uui-surface);
654
+ --uui-dt-row-bg-hover: var(--uui-surface-light-hover);
655
+ --uui-dt-row-bg-invalid: #FEF7F6;
656
+ --uui-dt-row-bg-selected: #EBF7FF;
657
+
658
+ --uui-dt-header-row-bg: var(--uui-surface-light);
659
+ --uui-dt-header-row-bg-hover: var(--uui-surface-hover);
660
+
661
+ --uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
662
+ --uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
663
+ --uui-dt-right-shadow: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
664
+ --uui-dt_header-drop_marker: var(--uui-primary);
665
+
666
+ --uui-dt-header-cell-font: var(--font-semibold);
667
+
668
+ /* AvatarStack */
669
+
670
+ --uui-avatar-stack-font: var(--font-semibold);
671
+
672
+ /* Badge */
673
+
674
+ --uui-badge-font: var(--font-regular);
675
+ --uui-badge-count-font: var(--font-semibold);
676
+
677
+ /* Pagination */
678
+
679
+ --uui-pagination-font: var(--font-regular);
605
680
 
606
- :global(.uui-table-header-row) {
607
- --uui-dt-row-bg: var(--gray5);
608
- --uui-dt-row-bg-hover: var(--gray20);
609
- --uui-dt-row-border: var(--gray30);
610
- }
611
681
 
612
682
  /* ------------------------------------ */
613
683
 
@@ -937,59 +1007,21 @@
937
1007
  --uui-alert-icon: var(--uui-primary);
938
1008
  }
939
1009
 
940
- :global(.informer-color-default) {
1010
+ :global(.informer-default) {
941
1011
  --uui-informer-bg: var(--gray30);
942
1012
  --uui-informer-caption: var(--gray60);
943
1013
  }
944
1014
 
945
- :global(.informer-color-focus) {
1015
+ :global(.informer-focus) {
946
1016
  --uui-informer-bg: var(--red);
947
1017
  --uui-informer-caption: var(--uui-contrast);
948
1018
  }
949
1019
 
950
- :global(.informer-color-white) {
1020
+ :global(.informer-white) {
951
1021
  --uui-informer-bg: var(--uui-surface);
952
1022
  --uui-informer-caption: var(--uui-text-secondary);
953
1023
  }
954
1024
 
955
- :global(.informer-vars) {
956
- --uui-informer-border-radius: 50px;
957
- }
958
-
959
- :global(.icon-container-color-info),
960
- :global(.icon-container-color-blue) {
961
- --uui-icon-container-fill: var(--uui-info);
962
- }
963
-
964
- :global(.icon-container-color-success),
965
- :global(.icon-container-color-green) {
966
- --uui-icon-container-fill: var(--uui-success);
967
- }
968
-
969
- :global(.icon-container-color-warning),
970
- :global(.icon-container-color-amber) {
971
- --uui-icon-container-fill: var(--uui-warning);
972
- }
973
-
974
- :global(.icon-container-color-error),
975
- :global(.icon-container-color-red) {
976
- --uui-icon-container-fill: var(--uui-error);
977
- }
978
-
979
- :global(.icon-container-color-default),
980
- :global(.icon-container-color-gray60) {
981
- --uui-icon-container-fill: var(--uui-icon);
982
- }
983
-
984
- :global(.icon-container-color-secondary),
985
- :global(.icon-container-color-gray50) {
986
- --uui-icon-container-fill: var(--uui-secondary);
987
- }
988
-
989
- :global(.icon-container-color-gray30) {
990
- --uui-icon-container-fill: var(--uui-secondary-light);
991
- }
992
-
993
1025
  :global(.uui-text-brand),
994
1026
  :global(.uui-text-gray90 ) {
995
1027
  --uui-text: var(--uui-text-brand);
@@ -1048,6 +1080,18 @@
1048
1080
  --uui-dropdown-container-bg: var(--gray70);
1049
1081
  }
1050
1082
 
1083
+ :global(.flex-row-background-white) {
1084
+ --uui-flex-row-bg: var(--uui-surface);
1085
+ }
1086
+
1087
+ :global(.flex-row-background-gray5) {
1088
+ --uui-flex-row-bg: var(--gray5);
1089
+ }
1090
+
1091
+ :global(.flex-row-background-none) {
1092
+ --uui-flex-row-bg: transparent;
1093
+ }
1094
+
1051
1095
  :global(.panel-white) {
1052
1096
  --uui-panel-bg: var(--uui-surface);
1053
1097
  }