@epam/assets 5.1.2-alpha.0 → 5.2.0-rc.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.
@@ -66,69 +66,59 @@
66
66
 
67
67
  /* core variables start */
68
68
 
69
- --uui-accent: var(--grass-300);
70
- --uui-accent-light: var(--grass-200);
71
- --uui-accent-lightest: var(--grass-100);
72
- --uui-accent-dark: var(--grass-400);
73
- --uui-accent-darkest: var(--grass-500);
74
-
75
- --uui-primary: var(--blue-300);
76
- --uui-primary-light: var(--blue-200);
77
- --uui-primary-lightest: var(--blue-100);
78
- --uui-primary-dark: var(--blue-400);
79
- --uui-primary-darkest: var(--blue-500);
80
-
81
- --uui-secondary: var(--night500);
82
- --uui-secondary-light: var(--night300);
83
- --uui-secondary-lightest: var(--night200);
84
- --uui-secondary-dark: var(--night600);
85
- --uui-secondary-darkest: var(--night700);
86
-
87
- --uui-negative: var(--sun-200);
88
- --uui-negative-light: var(--sun-100);
89
- --uui-negative-lightest: var(--sun-50);
90
- --uui-negative-dark: var(--sun-250);
91
- --uui-negative-darkest: var(--sun-300);
92
-
93
- --uui-link: var(--blue-300);
94
- --uui-link-hover: var(--blue-400);
95
- --uui-link-wite-hover: var(--night400);
96
- --uui-link-black-hover: var(--night800);
97
- --uui-link-visited: #8018A0;
98
- --uui-link-disabled: var(--chromatic-200);
99
-
100
- --uui-info: var(--blue-300);
101
- --uui-info-soft: var(--blue-0);
102
- --uui-info-lightest: var(--blue-0);
103
- --uui-info-light: var(--blue-100);
104
- --uui-info-dark: var(--blue-400);
105
- --uui-info-darkest: var(--blue-500);
106
-
107
- --uui-success: var(--grass-300);
108
- --uui-success-soft: var(--grass-25);
109
- --uui-success-lightest: var(--grass-100);
110
- --uui-success-light: var(--grass-200);
111
- --uui-success-dark: var(--grass-400);
112
- --uui-success-darkest: var(--grass-500);
113
-
114
- --uui-warning: var(--sun-200);
115
- --uui-warning-soft: var(--sun-50);
116
- --uui-warning-lightest: var(--sun-50);
117
- --uui-warning-light: var(--sun-100);
118
- --uui-warning-dark: var(--sun-250);
119
- --uui-warning-darkest: var(--sun-300);
120
-
121
- --uui-error: var(--fire);
122
- --uui-error-soft: var(--fire-soft);
123
- --uui-error-lightest: var(--fire-lightest);
124
- --uui-error-light: var(--fire-light);
125
- --uui-error-dark: var(--fire-dark);
126
- --uui-error-darkest: var(--fire-darkest);
127
-
128
- --uui-icon: var(--chromatic-300);
129
- --uui-icon-hover: var(--chromatic-400);
130
- --uui-icon-active: var(--chromatic-500);
131
- --uui-icon-disabled: var(--chromatic-200);
69
+ --uui-accent-10: var(--grass-100);
70
+ --uui-accent-20: var(--grass-200);
71
+ --uui-accent-50: var(--grass-300);
72
+ --uui-accent-60: var(--grass-400);
73
+ --uui-accent-70: var(--grass-500);
74
+
75
+ --uui-primary-10: var(--blue-100);
76
+ --uui-primary-20: var(--blue-200);
77
+ --uui-primary-50: var(--blue-300);
78
+ --uui-primary-60: var(--blue-400);
79
+ --uui-primary-70: var(--blue-500);
80
+
81
+ --uui-secondary-10: var(--night200);
82
+ --uui-secondary-20: var(--night300);
83
+ --uui-secondary-50: var(--night500);
84
+ --uui-secondary-60: var(--night600);
85
+ --uui-secondary-70: var(--night700);
86
+
87
+ --uui-negative-10: var(--sun-50);
88
+ --uui-negative-20: var(--sun-100);
89
+ --uui-negative-50: var(--sun-200);
90
+ --uui-negative-60: var(--sun-250);
91
+ --uui-negative-70: var(--sun-300);
92
+
93
+
94
+
95
+ --uui-info-5: var(--blue-0);
96
+ --uui-info-10: var(--blue-0);
97
+ --uui-info-20: var(--blue-100);
98
+ --uui-info-50: var(--blue-300);
99
+ --uui-info-60: var(--blue-400);
100
+ --uui-info-70: var(--blue-500);
101
+
102
+ --uui-success-5: var(--grass-25);
103
+ --uui-success-10: var(--grass-100);
104
+ --uui-success-20: var(--grass-200);
105
+ --uui-success-50: var(--grass-300);
106
+ --uui-success-60: var(--grass-400);
107
+ --uui-success-70: var(--grass-500);
108
+
109
+ --uui-warning-5: var(--sun-50);
110
+ --uui-warning-10: var(--sun-50);
111
+ --uui-warning-20: var(--sun-100);
112
+ --uui-warning-50: var(--sun-200);
113
+ --uui-warning-60: var(--sun-250);
114
+ --uui-warning-70: var(--sun-300);
115
+
116
+ --uui-error-5: var(--fire-soft);
117
+ --uui-error-10: var(--fire-lightest);
118
+ --uui-error-20: var(--fire-light);
119
+ --uui-error-50: var(--fire);
120
+ --uui-error-60: var(--fire-dark);
121
+ --uui-error-70: var(--fire-darkest);
132
122
 
133
123
  /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
134
124
 
@@ -159,10 +149,10 @@
159
149
  --uui-text-white: var(--chromatic-0);
160
150
  --uui-text-dark: var(--chromatic-500);
161
151
 
162
- --uui-text-info: var(--uui-info);
163
- --uui-text-warning: var(--uui-warning);
164
- --uui-text-error: var(--uui-error);
165
- --uui-text-success: var(--uui-success);
152
+ --uui-text-info: var(--uui-info-50);
153
+ --uui-text-warning: var(--uui-warning-50);
154
+ --uui-text-error: var(--uui-error-50);
155
+ --uui-text-success: var(--uui-success-50);
166
156
 
167
157
  /* not accepted part */
168
158
 
@@ -170,28 +160,38 @@
170
160
 
171
161
  /* control specific */
172
162
 
163
+ --uui-icon: var(--chromatic-300);
164
+ --uui-icon-hover: var(--chromatic-400);
165
+ --uui-icon-active: var(--chromatic-500);
166
+ --uui-icon-disabled: var(--chromatic-200);
167
+
168
+ --uui-link: var(--blue-300);
169
+ --uui-link-hover: var(--blue-400);
170
+ --uui-link-wite-hover: var(--night400);
171
+ --uui-link-black-hover: var(--night800);
172
+ --uui-link-visited: #8018A0;
173
+ --uui-link-disabled: var(--chromatic-200);
174
+
173
175
  --uui-scroll_bars-bg: var(--chromatic-200);
174
176
  --uui-scroll_bars-bg-active: var(--chromatic-300);
175
177
 
176
- --uui-button-bg-halftone: var(--chromatic-0);
177
-
178
178
  --uui-control-bg: var(--chromatic-0);
179
179
  --uui-control-bg-hover: var(--chromatic-300);
180
180
  --uui-control-bg-disabled: var(--chromatic-100);
181
181
  --uui-control-bg-readonly: var(--chromatic-100);
182
- --uui-control-bg-checked: var(--uui-primary);
183
- --uui-control-bg-checked-hover: var(--uui-primary-dark);
184
- --uui-control-bg-checked-disabled: var(--uui-primary-light);
182
+ --uui-control-bg-checked: var(--uui-primary-50);
183
+ --uui-control-bg-checked-hover: var(--uui-primary-60);
184
+ --uui-control-bg-checked-disabled: var(--uui-primary-20);
185
185
  --uui-control_switch-bg: var(--chromatic-200);
186
186
  --uui-control_switch-toggler-bg: var(--chromatic-0);
187
187
 
188
188
  --uui-control-border: var(--chromatic-200);
189
- --uui-control-border-hover: var(--uui-primary-dark);
189
+ --uui-control-border-hover: var(--uui-primary-60);
190
190
  --uui-control-border-disabled: var(--chromatic-150);
191
191
  --uui-control-border-readonly: var(--chromatic-150);
192
- --uui-control-border-checked: var(--uui-primary);
193
- --uui-control-border-checked-hover: var(--uui-primary-dark);
194
- --uui-control-border-checked-disabled: var(--uui-primary-light);
192
+ --uui-control-border-checked: var(--uui-primary-50);
193
+ --uui-control-border-checked-hover: var(--uui-primary-60);
194
+ --uui-control-border-checked-disabled: var(--uui-primary-20);
195
195
 
196
196
  --uui-control_switch-border-hover: var(--chromatic-300);
197
197
  --uui-control_textinput-border-hover: var(--chromatic-300);
@@ -221,6 +221,11 @@
221
221
  --uui-shadow-level-2: 0 6px 12px rgb(29 30 38 / 10%), 0 3px 12px rgb(29 30 38 / 10%), 0 0 6px rgb(29 30 38 / 5%);
222
222
  --uui-shadow-level-3: 0 0 10px rgb(29 30 38 / 5%), 0 6px 24px rgb(29 30 38 / 12%), 0 9px 15px rgb(29 30 38 / 10%);
223
223
 
224
+ --uui-control-focus: #008ACE80;
225
+
226
+ /* Search results text highlighting */
227
+ --uui-search-result-highlight: #FFEDC9;
228
+
224
229
  /* core variables end */
225
230
 
226
231
  /* find below the not core variables that are used and highlight them in the code */
@@ -232,7 +237,7 @@
232
237
  --uui-text-input-border: var(--uui-control-border);
233
238
  --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
234
239
  --uui-text-input-border-active: var(--uui-control-border-checked);
235
- --uui-text-input-border-error: var(--uui-error);
240
+ --uui-text-input-border-error: var(--uui-error-50);
236
241
  --uui-text-input-border-disabled: var(--uui-control-border-disabled);
237
242
  --uui-text-input-border-readonly: var(--uui-control-border-readonly);
238
243
  --uui-text-input-placeholder: var(--uui-control-placeholder);
@@ -256,9 +261,9 @@
256
261
 
257
262
 
258
263
  /* LinkButton vars */
259
- --uui-link-button-text: var(--uui-primary);
260
- --uui-link-button-text-hover: var(--uui-primary-dark);
261
- --uui-link-button-text-active: var(--uui-primary-darkest);
264
+ --uui-link-button-text: var(--uui-primary-50);
265
+ --uui-link-button-text-hover: var(--uui-primary-60);
266
+ --uui-link-button-text-active: var(--uui-primary-70);
262
267
  --uui-link-button-text-disabled: var(--uui-text-disabled);
263
268
 
264
269
  --uui-link-button-font: var(--font-inter);
@@ -274,11 +279,11 @@
274
279
 
275
280
  /* RangeDatePicker vars */
276
281
  --uui-rdtp-bg: var(--uui-control-bg);
277
- --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);
282
+ --uui-rdtp-bg-selected-date: var(--uui-primary-10);
278
283
 
279
284
  /* Calendar vars */
280
285
  --uui-calendar-selected-hover: var(--uui-control-bg);
281
- --uui-calendar-start-end-selected-hover: var(--uui-primary-dark);
286
+ --uui-calendar-start-end-selected-hover: var(--uui-primary-60);
282
287
  --uui-calendar-start-end-selected: var(--uui-control-border-checked);
283
288
  --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
284
289
  --uui-calendar-text: var(--uui-control-text);
@@ -293,8 +298,8 @@
293
298
 
294
299
  /* tab-button-vars */
295
300
  --uui-tab_button-text: var(--uui-text-primary);
296
- --uui-tab_button-text-hover: var(--uui-primary);
297
- --uui-tab_button-text-active: var(--uui-primary);
301
+ --uui-tab_button-text-hover: var(--uui-primary-50);
302
+ --uui-tab_button-text-active: var(--uui-primary-50);
298
303
  --uui-tab_button-text-disabled: var(--uui-text-disabled);
299
304
 
300
305
  --uui-tab_button-font: var(--font-inter);
@@ -313,7 +318,7 @@
313
318
  --uui-radio-input-fill-checked: var(--uui-control-border-checked);
314
319
  --uui-radio-input-fill-hover: var(--uui-control-border-hover);
315
320
  --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
316
- --uui-radio-input-error: var(--uui-error);
321
+ --uui-radio-input-error: var(--uui-error-50);
317
322
 
318
323
  --uui-radio-input-font: var(--font-inter);
319
324
  --uui-radio-input-font-weight: 400;
@@ -329,7 +334,7 @@
329
334
  --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);
330
335
  --uui-checkbox-bg-checked-hover: var(--uui-control-bg-checked-hover);
331
336
  --uui-checkbox-bg-checked-disabled: var(--uui-control-bg-checked-disabled);
332
- --uui-checkbox-error: var(--uui-error);
337
+ --uui-checkbox-error: var(--uui-error-50);
333
338
  --uui-checkbox-fill: var(--uui-control-checkbox-icon);
334
339
  --uui-checkbox-label: var(--uui-control-label);
335
340
  --uui-checkbox-label-disabled: var(--uui-control-label-disabled);
@@ -359,7 +364,7 @@
359
364
  --uui-text-area-border-disabled: var(--uui-control-border-disabled);
360
365
  --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
361
366
  --uui-text-area-border-active: var(--uui-control-border-checked);
362
- --uui-text-area-border-error: var(--uui-error);
367
+ --uui-text-area-border-error: var(--uui-error-50);
363
368
  --uui-text-area-placeholder: var(--uui-control-placeholder);
364
369
  --uui-text-area-text: var(--uui-control-text);
365
370
  --uui-text-area-text-disabled: var(--uui-control-text-disabled);
@@ -372,8 +377,8 @@
372
377
  --uui-text-area-counter-font-weight: 400;
373
378
 
374
379
  /* DropMarker vars */
375
- --uui-drop-marker: var(--uui-primary);
376
- --uui-drop-marker-blocked: var(--uui-error);
380
+ --uui-drop-marker: var(--uui-primary-50);
381
+ --uui-drop-marker-blocked: var(--uui-error-50);
377
382
 
378
383
  /* Tooltip vars */
379
384
  --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgb(44 47 60 / 30%), 0 1px 4px 0 rgb(44 47 60 / 50%)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
@@ -393,7 +398,7 @@
393
398
  --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
394
399
  --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
395
400
  --uui-picker-toggler-border-active: var(--uui-control-border-checked);
396
- --uui-picker-toggler-border-error: var(--uui-error);
401
+ --uui-picker-toggler-border-error: var(--uui-error-50);
397
402
  --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
398
403
  --uui-picker-toggler-text: var(--uui-control-text);
399
404
  --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);
@@ -423,11 +428,11 @@
423
428
  /* LabeledInput */
424
429
  --uui-labeled-input: var(--uui-text-primary);
425
430
  --uui-labeled-input-disabled: var(--uui-text-disabled);
426
- --uui-labeled-input-error: var(--uui-error);
431
+ --uui-labeled-input-error: var(--uui-error-50);
427
432
  --uui-labeled-input-fill: var(--uui-icon);
428
433
  --uui-labeled-input-info-fill: var(--uui-icon);
429
434
  --uui-labeled-input-optional-text: var(--uui-text-secondary);
430
- --uui-labeled-input-asterisk: var(--uui-error);
435
+ --uui-labeled-input-asterisk: var(--uui-error-50);
431
436
 
432
437
  --uui-labeled-input-font: var(--font-inter);
433
438
  --uui-labeled-input-font-weight: 500;
@@ -444,7 +449,7 @@
444
449
  --uui-accordion-text-disabled: var(--uui-text-disabled);
445
450
  --uui-accordion-icon: var(--uui-icon);
446
451
  --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);
447
- --uui-accordion-focus: var(--uui-primary);
452
+ --uui-accordion-focus: var(--uui-primary-50);
448
453
  --uui-accordion-shadow: var(--uui-shadow-level-1);
449
454
  --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
450
455
 
@@ -509,12 +514,12 @@
509
514
 
510
515
  --uui-main_menu-dropdown-bg: var(--uui-surface);
511
516
  //--uui-main_menu-dropdown-bg-hover: var(--uui-surface-contrast-low);
512
- --uui-main_menu-dropdown-hover: var(--uui-primary);
517
+ --uui-main_menu-dropdown-hover: var(--uui-primary-50);
513
518
  --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);
514
519
  --uui-main_menu-dropdown-border-radius: 8px;
515
520
 
516
- --uui-main_menu-search-bg: var(--uui-secondary-darkest);
517
- --uui-main_menu-search-border: var(--uui-secondary-darkest);
521
+ --uui-main_menu-search-bg: var(--uui-secondary-70);
522
+ --uui-main_menu-search-border: var(--uui-secondary-70);
518
523
  --uui-main_menu-search-placeholder: var(--uui-text-disabled);
519
524
  --uui-main_menu-search-text: var(--uui-text-contrast);
520
525
  --uui-main_menu-search-icon: var(--uui-icon-disabled);
@@ -532,7 +537,7 @@
532
537
  --uui-burger_menu-bg: var(--uui-surface);
533
538
  --uui-burger_menu-bg-hover: var(--uui-surface-lower);
534
539
  --uui-burger_menu-caption: var(--uui-text-contrast);
535
- --uui-burger_menu-caption-hover: var(--uui-primary);
540
+ --uui-burger_menu-caption-hover: var(--uui-primary-50);
536
541
  --uui-burger_menu-overlay: var(--uui-overlay);
537
542
  --uui-burger_icon: var(--uui-text-primary);
538
543
  --uui-burger_item: var(--uui-text-brand);
@@ -570,7 +575,7 @@
570
575
  --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
571
576
  --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
572
577
  --uui-numeric-input-border-active: var(--uui-control-border-checked);
573
- --uui-numeric-input-border-error: var(--uui-error);
578
+ --uui-numeric-input-border-error: var(--uui-error-50);
574
579
  --uui-numeric-input-placeholder: var(--uui-control-placeholder);
575
580
  --uui-numeric-input-text: var(--uui-control-text);
576
581
  --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);
@@ -585,7 +590,7 @@
585
590
  --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
586
591
  --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
587
592
  --uui-time-picker-border-active: var(--uui-control-border-checked);
588
- --uui-time-picker-border-error: var(--uui-error);
593
+ --uui-time-picker-border-error: var(--uui-error-50);
589
594
  --uui-time-picker-placeholder: var(--uui-control-placeholder);
590
595
  --uui-time-picker-text: var(--uui-control-text);
591
596
  --uui-time-picker-text-disabled: var(--uui-control-text-disabled);
@@ -600,7 +605,7 @@
600
605
  --uui-search-input-border-disabled: var(--uui-control-border-disabled);
601
606
  --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
602
607
  --uui-search-input-border-active: var(--uui-control-border-checked);
603
- --uui-search-input-border-error: var(--uui-error);
608
+ --uui-search-input-border-error: var(--uui-error-50);
604
609
  --uui-search-input-placeholder: var(--uui-control-placeholder);
605
610
  --uui-search-input-text: var(--uui-control-text);
606
611
  --uui-search-input-text-disabled: var(--uui-control-text-disabled);
@@ -645,7 +650,7 @@
645
650
  --uui-panel-bg: var(--uui-surface);
646
651
 
647
652
  /* Spinner */
648
- --uui-spinner: var(--uui-primary);
653
+ --uui-spinner: var(--uui-primary-50);
649
654
 
650
655
  /* Blocker */
651
656
  --uui-blocker-bg: var(--uui-app-bg);
@@ -658,7 +663,7 @@
658
663
 
659
664
  --uui-dt-cell-bg: transparent;
660
665
  --uui-dt-cell-bg-resize: #EF55331F;
661
- --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);
666
+ --uui-dt-cell-bg-invalid: var(--uui-negative-10);
662
667
  --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);
663
668
  --uui-dt-cell-border-focus: var(--uui-control-border-checked);
664
669
 
@@ -673,7 +678,7 @@
673
678
  --uui-dt-top-shadow: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
674
679
  --uui-dt-left-shadow: linear-gradient(to left, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
675
680
  --uui-dt-right-shadow: linear-gradient(to right, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
676
- --uui-dt_header-drop_marker: var(--uui-primary);
681
+ --uui-dt_header-drop_marker: var(--uui-primary-50);
677
682
 
678
683
  --uui-dt-header-cell-font: var(--font-inter);
679
684
  --uui-dt-header-cell-font-weight: 500;
@@ -695,7 +700,6 @@
695
700
  --uui-pagination-font: var(--font-inter);
696
701
  --uui-pagination-font-weight: 400;
697
702
 
698
-
699
703
  /* ------------------------------------ */
700
704
 
701
705
  .tooltip-contrast {
@@ -709,21 +713,21 @@
709
713
  }
710
714
 
711
715
  .tooltip-critical {
712
- --uui-tooltip-bg: var(--uui-error-dark);
716
+ --uui-tooltip-bg: var(--uui-error-60);
713
717
  --uui-tooltip-text: var(--uui-text-contrast);
714
718
  }
715
719
 
716
720
  .button-primary {
717
- --uui-btn-bg: var(--uui-primary);
718
- --uui-btn-bg-hover: var(--uui-primary-dark);
719
- --uui-btn-bg-active: var(--uui-primary-darkest);
720
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
721
+ --uui-btn-bg: var(--uui-primary-50);
722
+ --uui-btn-bg-hover: var(--uui-primary-60);
723
+ --uui-btn-bg-active: var(--uui-primary-70);
724
+ --uui-btn-bg-halftone: var(--chromatic-0);
721
725
  --uui-btn-bg-halftone-hover: var(--blue-0);
722
- --uui-btn-bg-halftone-active: var(--uui-primary-lightest);
726
+ --uui-btn-bg-halftone-active: var(--uui-primary-10);
723
727
  --uui-btn-bg-disabled: var(--uui-disabled);
724
728
  --uui-btn-border: var(--uui-primary);
725
- --uui-btn-border-hover: var(--uui-primary-dark);
726
- --uui-btn-border-active: var(--uui-primary-darkest);
729
+ --uui-btn-border-hover: var(--uui-primary-60);
730
+ --uui-btn-border-active: var(--uui-primary-70);
727
731
  --uui-btn-border-disabled: var(--uui-disabled);
728
732
  --uui-btn-caption: var(--uui-text-white);
729
733
  --uui-btn-caption-halftone: var(--uui-text-primary);
@@ -731,15 +735,15 @@
731
735
  }
732
736
 
733
737
  .button-accent {
734
- --uui-btn-bg: var(--uui-accent);
735
- --uui-btn-bg-hover: var(--uui-accent-dark);
736
- --uui-btn-bg-active: var(--uui-accent-darkest);
737
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
738
- --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
739
- --uui-btn-bg-halftone-active: var(--uui-accent-light);
740
- --uui-btn-border: var(--uui-accent);
741
- --uui-btn-border-hover: var(--uui-accent-dark);
742
- --uui-btn-border-active: var(--uui-accent-darkest);
738
+ --uui-btn-bg: var(--uui-accent-50);
739
+ --uui-btn-bg-hover: var(--uui-accent-60);
740
+ --uui-btn-bg-active: var(--uui-accent-70);
741
+ --uui-btn-bg-halftone: var(--chromatic-0);
742
+ --uui-btn-bg-halftone-hover: var(--uui-accent-10);
743
+ --uui-btn-bg-halftone-active: var(--uui-accent-20);
744
+ --uui-btn-border: var(--uui-accent-50);
745
+ --uui-btn-border-hover: var(--uui-accent-60);
746
+ --uui-btn-border-active: var(--uui-accent-70);
743
747
  --uui-btn-bg-disabled: var(--uui-disabled);
744
748
  --uui-btn-border-disabled: var(--uui-disabled);
745
749
  --uui-btn-caption: var(--uui-text-white);
@@ -748,15 +752,15 @@
748
752
  }
749
753
 
750
754
  .button-negative {
751
- --uui-btn-bg: var(--uui-negative);
752
- --uui-btn-bg-hover: var(--uui-negative-dark);
753
- --uui-btn-bg-active: var(--uui-negative-darkest);
754
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
755
- --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
756
- --uui-btn-bg-halftone-active: var(--uui-negative-light);
757
- --uui-btn-border: var(--uui-negative);
758
- --uui-btn-border-hover: var(--uui-negative-dark);
759
- --uui-btn-border-active: var(--uui-negative-darkest);
755
+ --uui-btn-bg: var(--uui-negative-50);
756
+ --uui-btn-bg-hover: var(--uui-negative-60);
757
+ --uui-btn-bg-active: var(--uui-negative-70);
758
+ --uui-btn-bg-halftone: var(--chromatic-0);
759
+ --uui-btn-bg-halftone-hover: var(--uui-negative-10);
760
+ --uui-btn-bg-halftone-active: var(--uui-negative-20);
761
+ --uui-btn-border: var(--uui-negative-50);
762
+ --uui-btn-border-hover: var(--uui-negative-60);
763
+ --uui-btn-border-active: var(--uui-negative-70);
760
764
  --uui-btn-bg-disabled: var(--uui-disabled);
761
765
  --uui-btn-border-disabled: var(--uui-disabled);
762
766
  --uui-btn-caption: var(--uui-text-white);
@@ -765,15 +769,15 @@
765
769
  }
766
770
 
767
771
  .button-secondary {
768
- --uui-btn-bg: var(--uui-secondary);
769
- --uui-btn-bg-hover: var(--uui-secondary-dark);
770
- --uui-btn-bg-active: var(--uui-secondary-darkest);
771
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
772
- --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
773
- --uui-btn-bg-halftone-active: var(--uui-secondary-light);
774
- --uui-btn-border: var(--uui-secondary);
775
- --uui-btn-border-hover: var(--uui-secondary-dark);
776
- --uui-btn-border-active: var(--uui-secondary-darkest);
772
+ --uui-btn-bg: var(--uui-secondary-50);
773
+ --uui-btn-bg-hover: var(--uui-secondary-60);
774
+ --uui-btn-bg-active: var(--uui-secondary-70);
775
+ --uui-btn-bg-halftone: var(--chromatic-0);
776
+ --uui-btn-bg-halftone-hover: var(--uui-secondary-10);
777
+ --uui-btn-bg-halftone-active: var(--uui-secondary-20);
778
+ --uui-btn-border: var(--uui-secondary-50);
779
+ --uui-btn-border-hover: var(--uui-secondary-60);
780
+ --uui-btn-border-active: var(--uui-secondary-70);
777
781
  --uui-btn-bg-disabled: var(--uui-disabled);
778
782
  --uui-btn-border-disabled: var(--uui-disabled);
779
783
  --uui-btn-caption: var(--uui-text-white);
@@ -785,9 +789,9 @@
785
789
  --uui-btn-bg: var(--white);
786
790
  --uui-btn-bg-hover: var(--blue-50);
787
791
  --uui-btn-bg-active: var(--blue-100);
788
- --uui-btn-bg-halftone: var(--uui-button-bg-halftone);
792
+ --uui-btn-bg-halftone: var(--chromatic-0);
789
793
  --uui-btn-bg-halftone-hover: var(--blue-50);
790
- --uui-btn-bg-halftone-active: var(--uui-primary-lightest);
794
+ --uui-btn-bg-halftone-active: var(--uui-primary-10);
791
795
  --uui-btn-bg-disabled: var(--chromatic-0);
792
796
  --uui-btn-border: var(--white);
793
797
  --uui-btn-border-hover: var(--blue-50);
@@ -799,30 +803,30 @@
799
803
  }
800
804
 
801
805
  .icon-button-info {
802
- --uui-icon-btn: var(--uui-info);
803
- --uui-icon-btn-hover: var(--uui-info-dark);
804
- --uui-icon-btn-active: var(--uui-info-darkest);
806
+ --uui-icon-btn: var(--uui-info-50);
807
+ --uui-icon-btn-hover: var(--uui-info-60);
808
+ --uui-icon-btn-active: var(--uui-info-70);
805
809
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
806
810
  }
807
811
 
808
812
  .icon-button-success {
809
- --uui-icon-btn: var(--uui-success);
810
- --uui-icon-btn-hover: var(--uui-success-dark);
811
- --uui-icon-btn-active: var(--uui-success-darkest);
813
+ --uui-icon-btn: var(--uui-success-50);
814
+ --uui-icon-btn-hover: var(--uui-success-60);
815
+ --uui-icon-btn-active: var(--uui-success-70);
812
816
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
813
817
  }
814
818
 
815
819
  .icon-button-warning {
816
- --uui-icon-btn: var(--uui-warning);
817
- --uui-icon-btn-hover: var(--uui-warning-dark);
818
- --uui-icon-btn-active: var(--uui-warning-darkest);
820
+ --uui-icon-btn: var(--uui-warning-50);
821
+ --uui-icon-btn-hover: var(--uui-warning-60);
822
+ --uui-icon-btn-active: var(--uui-warning-70);
819
823
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
820
824
  }
821
825
 
822
826
  .icon-button-error {
823
- --uui-icon-btn: var(--uui-error);
824
- --uui-icon-btn-hover: var(--uui-error-dark);
825
- --uui-icon-btn-active: var(--uui-error-darkest);
827
+ --uui-icon-btn: var(--uui-error-50);
828
+ --uui-icon-btn-hover: var(--uui-error-60);
829
+ --uui-icon-btn-active: var(--uui-error-70);
826
830
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
827
831
  }
828
832
 
@@ -841,29 +845,29 @@
841
845
  }
842
846
 
843
847
  .notification-card-warning {
844
- --uui-notification-card-fill: var(--uui-warning);
845
- --uui-notification-card-border: var(--uui-warning);
848
+ --uui-notification-card-fill: var(--uui-warning-50);
849
+ --uui-notification-card-border: var(--uui-warning-50);
846
850
  --uui-notification-card-bg: var(--uui-surface);
847
851
  --uui-notification-card-text: var(--uui-text-primary);
848
852
  }
849
853
 
850
854
  .notification-card-success {
851
- --uui-notification-card-fill: var(--uui-success);
852
- --uui-notification-card-border: var(--uui-success);
855
+ --uui-notification-card-fill: var(--uui-success-50);
856
+ --uui-notification-card-border: var(--uui-success-50);
853
857
  --uui-notification-card-bg: var(--uui-surface);
854
858
  --uui-notification-card-text: var(--uui-text-primary);
855
859
  }
856
860
 
857
861
  .notification-card-info {
858
- --uui-notification-card-fill: var(--uui-info);
859
- --uui-notification-card-border: var(--uui-info);
862
+ --uui-notification-card-fill: var(--uui-info-50);
863
+ --uui-notification-card-border: var(--uui-info-50);
860
864
  --uui-notification-card-bg: var(--uui-surface);
861
865
  --uui-notification-card-text: var(--uui-text-primary);
862
866
  }
863
867
 
864
868
  .notification-card-error {
865
- --uui-notification-card-fill: var(--uui-error);
866
- --uui-notification-card-border: var(--uui-error);
869
+ --uui-notification-card-fill: var(--uui-error-50);
870
+ --uui-notification-card-border: var(--uui-error-50);
867
871
  --uui-notification-card-bg: var(--uui-surface);
868
872
  --uui-notification-card-text: var(--uui-text-primary);
869
873
  }
@@ -871,29 +875,29 @@
871
875
  .alert-error {
872
876
  --uui-alert-text: var(--uui-text-primary);
873
877
  --uui-alert-bg: #F5E5E9;
874
- --uui-alert-border: var(--uui-error);
875
- --uui-alert-icon: var(--uui-error);
878
+ --uui-alert-border: var(--uui-error-50);
879
+ --uui-alert-icon: var(--uui-error-50);
876
880
  }
877
881
 
878
882
  .alert-warning {
879
883
  --uui-alert-text: var(--uui-text-primary);
880
884
  --uui-alert-bg: #F6EEE1;
881
- --uui-alert-border: var(--uui-warning);
882
- --uui-alert-icon: var(--uui-warning);
885
+ --uui-alert-border: var(--uui-warning-50);
886
+ --uui-alert-icon: var(--uui-warning-50);
883
887
  }
884
888
 
885
889
  .alert-success {
886
890
  --uui-alert-text: var(--uui-text-primary);
887
891
  --uui-alert-bg: #E7EEE1;
888
- --uui-alert-border: var(--uui-success);
889
- --uui-alert-icon: var(--uui-success);
892
+ --uui-alert-border: var(--uui-success-50);
893
+ --uui-alert-icon: var(--uui-success-50);
890
894
  }
891
895
 
892
896
  .alert-info {
893
897
  --uui-alert-text: var(--uui-text-primary);
894
898
  --uui-alert-bg: #DCEDF6;
895
- --uui-alert-border: var(--uui-info);
896
- --uui-alert-icon: var(--uui-info);
899
+ --uui-alert-border: var(--uui-info-50);
900
+ --uui-alert-icon: var(--uui-info-50);
897
901
  }
898
902
 
899
903
  .badge-default {
@@ -910,64 +914,64 @@
910
914
  }
911
915
 
912
916
  .badge-info {
913
- --uui-badge-bg: var(--uui-info);
914
- --uui-badge-bg-hover: var(--uui-info-dark);
917
+ --uui-badge-bg: var(--uui-info-50);
918
+ --uui-badge-bg-hover: var(--uui-info-60);
915
919
  --uui-badge-caption-solid: var(--white);
916
920
  --uui-badge-count-bg: var(--white);
917
921
  --uui-badge-count: var(--uui-text-secondary);
918
- --uui-badge-bg-halftone: var(--uui-info-lightest);
919
- --uui-badge-bg-halftone-hover: var(--uui-info-light);
920
- --uui-badge-border-halftone: var(--uui-info-light);
921
- --uui-badge-border-halftone-hover: var(--uui-info);
922
- --uui-badge-caption-halftone: var(--uui-info-darkest);
922
+ --uui-badge-bg-halftone: var(--uui-info-10);
923
+ --uui-badge-bg-halftone-hover: var(--uui-info-20);
924
+ --uui-badge-border-halftone: var(--uui-info-20);
925
+ --uui-badge-border-halftone-hover: var(--uui-info-50);
926
+ --uui-badge-caption-halftone: var(--uui-info-70);
923
927
  }
924
928
 
925
929
  .badge-success {
926
- --uui-badge-bg: var(--uui-success);
927
- --uui-badge-bg-hover: var(--uui-success-dark);
930
+ --uui-badge-bg: var(--uui-success-50);
931
+ --uui-badge-bg-hover: var(--uui-success-60);
928
932
  --uui-badge-caption-solid: var(--white);
929
933
  --uui-badge-count-bg: var(--white);
930
934
  --uui-badge-count: var(--uui-text-secondary);
931
- --uui-badge-bg-halftone: var(--uui-success-lightest);
932
- --uui-badge-bg-halftone-hover: var(--uui-success-light);
933
- --uui-badge-border-halftone: var(--uui-success-light);
934
- --uui-badge-border-halftone-hover: var(--uui-success);
935
- --uui-badge-caption-halftone: var(--uui-success-darkest);
935
+ --uui-badge-bg-halftone: var(--uui-success-10);
936
+ --uui-badge-bg-halftone-hover: var(--uui-success-20);
937
+ --uui-badge-border-halftone: var(--uui-success-20);
938
+ --uui-badge-border-halftone-hover: var(--uui-success-50);
939
+ --uui-badge-caption-halftone: var(--uui-success-70);
936
940
  }
937
941
 
938
942
  .badge-warning {
939
- --uui-badge-bg: var(--uui-warning);
940
- --uui-badge-bg-hover: var(--uui-warning-dark);
943
+ --uui-badge-bg: var(--uui-warning-50);
944
+ --uui-badge-bg-hover: var(--uui-warning-60);
941
945
  --uui-badge-caption-solid: var(--uui-text-primary);
942
946
  --uui-badge-count-bg: var(--white);
943
947
  --uui-badge-count: var(--uui-text-secondary);
944
- --uui-badge-bg-halftone: var(--uui-warning-lightest);
945
- --uui-badge-bg-halftone-hover: var(--uui-warning-light);
946
- --uui-badge-border-halftone: var(--uui-warning-light);
947
- --uui-badge-border-halftone-hover: var(--uui-warning);
948
- --uui-badge-caption-halftone: var(--uui-warning-darkest);
948
+ --uui-badge-bg-halftone: var(--uui-warning-10);
949
+ --uui-badge-bg-halftone-hover: var(--uui-warning-20);
950
+ --uui-badge-border-halftone: var(--uui-warning-20);
951
+ --uui-badge-border-halftone-hover: var(--uui-warning-50);
952
+ --uui-badge-caption-halftone: var(--uui-warning-70);
949
953
  }
950
954
 
951
955
  .badge-error {
952
- --uui-badge-bg: var(--uui-error);
953
- --uui-badge-bg-hover: var(--uui-error-dark);
956
+ --uui-badge-bg: var(--uui-error-50);
957
+ --uui-badge-bg-hover: var(--uui-error-60);
954
958
  --uui-badge-caption-solid: var(--white);
955
959
  --uui-badge-count-bg: var(--white);
956
960
  --uui-badge-count: var(--uui-text-secondary);
957
- --uui-badge-bg-halftone: var(--uui-error-lightest);
958
- --uui-badge-bg-halftone-hover: var(--uui-error-light);
959
- --uui-badge-border-halftone: var(--uui-error-light);
960
- --uui-badge-border-halftone-hover: var(--uui-error);
961
- --uui-badge-caption-halftone: var(--uui-error-darkest);
961
+ --uui-badge-bg-halftone: var(--uui-error-10);
962
+ --uui-badge-bg-halftone-hover: var(--uui-error-20);
963
+ --uui-badge-border-halftone: var(--uui-error-20);
964
+ --uui-badge-border-halftone-hover: var(--uui-error-50);
965
+ --uui-badge-caption-halftone: var(--uui-error-70);
962
966
  }
963
967
 
964
968
  .informer-default {
965
- --uui-informer-bg: var(--uui-secondary-light);
969
+ --uui-informer-bg: var(--uui-secondary-20);
966
970
  --uui-informer-caption: var(--uui-text-secondary);
967
971
  }
968
972
 
969
973
  .informer-focus {
970
- --uui-informer-bg: var(--uui-negative);
974
+ --uui-informer-bg: var(--uui-negative-50);
971
975
  --uui-informer-caption: var(--uui-caption);
972
976
  }
973
977