@epam/assets 5.2.0-rc.2 → 5.2.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 (13) hide show
  1. package/css/theme/theme_loveship.css +801 -319
  2. package/css/theme/theme_loveship.css.map +1 -1
  3. package/css/theme/theme_promo.css +235 -365
  4. package/css/theme/theme_promo.css.map +1 -1
  5. package/css/theme/theme_vanilla_thunder.css +183 -183
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  7. package/package.json +2 -2
  8. package/theme/theme_loveship.scss +943 -812
  9. package/theme/theme_promo.scss +257 -441
  10. package/theme/theme_vanilla_thunder.scss +193 -194
  11. package/css/theme/theme_loveship_dark.css +0 -895
  12. package/css/theme/theme_loveship_dark.css.map +0 -1
  13. package/theme/theme_loveship_dark.scss +0 -1143
package/theme/theme_vanilla_thunder.scss CHANGED
@@ -66,59 +66,71 @@
66
66
 
67
67
  /* core variables start */
68
68
 
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);
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);
132
+
133
+ --uui-control-focus: #008ACE80;
122
134
 
123
135
  /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
124
136
 
@@ -149,10 +161,10 @@
149
161
  --uui-text-white: var(--chromatic-0);
150
162
  --uui-text-dark: var(--chromatic-500);
151
163
 
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);
164
+ --uui-text-info: var(--uui-info);
165
+ --uui-text-warning: var(--uui-warning);
166
+ --uui-text-error: var(--uui-error);
167
+ --uui-text-success: var(--uui-success);
156
168
 
157
169
  /* not accepted part */
158
170
 
@@ -160,18 +172,6 @@
160
172
 
161
173
  /* control specific */
162
174
 
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
-
175
175
  --uui-scroll_bars-bg: var(--chromatic-200);
176
176
  --uui-scroll_bars-bg-active: var(--chromatic-300);
177
177
 
@@ -179,19 +179,19 @@
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-50);
183
- --uui-control-bg-checked-hover: var(--uui-primary-60);
184
- --uui-control-bg-checked-disabled: var(--uui-primary-20);
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);
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-60);
189
+ --uui-control-border-hover: var(--uui-primary-dark);
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-50);
193
- --uui-control-border-checked-hover: var(--uui-primary-60);
194
- --uui-control-border-checked-disabled: var(--uui-primary-20);
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);
195
195
 
196
196
  --uui-control_switch-border-hover: var(--chromatic-300);
197
197
  --uui-control_textinput-border-hover: var(--chromatic-300);
@@ -221,7 +221,6 @@
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
224
 
226
225
  /* Search results text highlighting */
227
226
  --uui-search-result-highlight: #FFEDC9;
@@ -237,7 +236,7 @@
237
236
  --uui-text-input-border: var(--uui-control-border);
238
237
  --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
239
238
  --uui-text-input-border-active: var(--uui-control-border-checked);
240
- --uui-text-input-border-error: var(--uui-error-50);
239
+ --uui-text-input-border-error: var(--uui-error);
241
240
  --uui-text-input-border-disabled: var(--uui-control-border-disabled);
242
241
  --uui-text-input-border-readonly: var(--uui-control-border-readonly);
243
242
  --uui-text-input-placeholder: var(--uui-control-placeholder);
@@ -261,9 +260,9 @@
261
260
 
262
261
 
263
262
  /* LinkButton vars */
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);
263
+ --uui-link-button-text: var(--uui-primary);
264
+ --uui-link-button-text-hover: var(--uui-primary-dark);
265
+ --uui-link-button-text-active: var(--uui-primary-darkest);
267
266
  --uui-link-button-text-disabled: var(--uui-text-disabled);
268
267
 
269
268
  --uui-link-button-font: var(--font-inter);
@@ -279,11 +278,11 @@
279
278
 
280
279
  /* RangeDatePicker vars */
281
280
  --uui-rdtp-bg: var(--uui-control-bg);
282
- --uui-rdtp-bg-selected-date: var(--uui-primary-10);
281
+ --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);
283
282
 
284
283
  /* Calendar vars */
285
284
  --uui-calendar-selected-hover: var(--uui-control-bg);
286
- --uui-calendar-start-end-selected-hover: var(--uui-primary-60);
285
+ --uui-calendar-start-end-selected-hover: var(--uui-primary-dark);
287
286
  --uui-calendar-start-end-selected: var(--uui-control-border-checked);
288
287
  --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
289
288
  --uui-calendar-text: var(--uui-control-text);
@@ -298,8 +297,8 @@
298
297
 
299
298
  /* tab-button-vars */
300
299
  --uui-tab_button-text: var(--uui-text-primary);
301
- --uui-tab_button-text-hover: var(--uui-primary-50);
302
- --uui-tab_button-text-active: var(--uui-primary-50);
300
+ --uui-tab_button-text-hover: var(--uui-primary);
301
+ --uui-tab_button-text-active: var(--uui-primary);
303
302
  --uui-tab_button-text-disabled: var(--uui-text-disabled);
304
303
 
305
304
  --uui-tab_button-font: var(--font-inter);
@@ -318,7 +317,7 @@
318
317
  --uui-radio-input-fill-checked: var(--uui-control-border-checked);
319
318
  --uui-radio-input-fill-hover: var(--uui-control-border-hover);
320
319
  --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
321
- --uui-radio-input-error: var(--uui-error-50);
320
+ --uui-radio-input-error: var(--uui-error);
322
321
 
323
322
  --uui-radio-input-font: var(--font-inter);
324
323
  --uui-radio-input-font-weight: 400;
@@ -334,7 +333,7 @@
334
333
  --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);
335
334
  --uui-checkbox-bg-checked-hover: var(--uui-control-bg-checked-hover);
336
335
  --uui-checkbox-bg-checked-disabled: var(--uui-control-bg-checked-disabled);
337
- --uui-checkbox-error: var(--uui-error-50);
336
+ --uui-checkbox-error: var(--uui-error);
338
337
  --uui-checkbox-fill: var(--uui-control-checkbox-icon);
339
338
  --uui-checkbox-label: var(--uui-control-label);
340
339
  --uui-checkbox-label-disabled: var(--uui-control-label-disabled);
@@ -364,7 +363,7 @@
364
363
  --uui-text-area-border-disabled: var(--uui-control-border-disabled);
365
364
  --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
366
365
  --uui-text-area-border-active: var(--uui-control-border-checked);
367
- --uui-text-area-border-error: var(--uui-error-50);
366
+ --uui-text-area-border-error: var(--uui-error);
368
367
  --uui-text-area-placeholder: var(--uui-control-placeholder);
369
368
  --uui-text-area-text: var(--uui-control-text);
370
369
  --uui-text-area-text-disabled: var(--uui-control-text-disabled);
@@ -377,8 +376,8 @@
377
376
  --uui-text-area-counter-font-weight: 400;
378
377
 
379
378
  /* DropMarker vars */
380
- --uui-drop-marker: var(--uui-primary-50);
381
- --uui-drop-marker-blocked: var(--uui-error-50);
379
+ --uui-drop-marker: var(--uui-primary);
380
+ --uui-drop-marker-blocked: var(--uui-error);
382
381
 
383
382
  /* Tooltip vars */
384
383
  --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 */
@@ -398,7 +397,7 @@
398
397
  --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
399
398
  --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
400
399
  --uui-picker-toggler-border-active: var(--uui-control-border-checked);
401
- --uui-picker-toggler-border-error: var(--uui-error-50);
400
+ --uui-picker-toggler-border-error: var(--uui-error);
402
401
  --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
403
402
  --uui-picker-toggler-text: var(--uui-control-text);
404
403
  --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);
@@ -428,11 +427,11 @@
428
427
  /* LabeledInput */
429
428
  --uui-labeled-input: var(--uui-text-primary);
430
429
  --uui-labeled-input-disabled: var(--uui-text-disabled);
431
- --uui-labeled-input-error: var(--uui-error-50);
430
+ --uui-labeled-input-error: var(--uui-error);
432
431
  --uui-labeled-input-fill: var(--uui-icon);
433
432
  --uui-labeled-input-info-fill: var(--uui-icon);
434
433
  --uui-labeled-input-optional-text: var(--uui-text-secondary);
435
- --uui-labeled-input-asterisk: var(--uui-error-50);
434
+ --uui-labeled-input-asterisk: var(--uui-error);
436
435
 
437
436
  --uui-labeled-input-font: var(--font-inter);
438
437
  --uui-labeled-input-font-weight: 500;
@@ -449,7 +448,7 @@
449
448
  --uui-accordion-text-disabled: var(--uui-text-disabled);
450
449
  --uui-accordion-icon: var(--uui-icon);
451
450
  --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);
452
- --uui-accordion-focus: var(--uui-primary-50);
451
+ --uui-accordion-focus: var(--uui-primary);
453
452
  --uui-accordion-shadow: var(--uui-shadow-level-1);
454
453
  --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
455
454
 
@@ -514,12 +513,12 @@
514
513
 
515
514
  --uui-main_menu-dropdown-bg: var(--uui-surface);
516
515
  //--uui-main_menu-dropdown-bg-hover: var(--uui-surface-contrast-low);
517
- --uui-main_menu-dropdown-hover: var(--uui-primary-50);
516
+ --uui-main_menu-dropdown-hover: var(--uui-primary);
518
517
  --uui-main_menu-dropdown-shadow: var(--uui-shadow-level-2);
519
518
  --uui-main_menu-dropdown-border-radius: 8px;
520
519
 
521
- --uui-main_menu-search-bg: var(--uui-secondary-70);
522
- --uui-main_menu-search-border: var(--uui-secondary-70);
520
+ --uui-main_menu-search-bg: var(--uui-secondary-darkest);
521
+ --uui-main_menu-search-border: var(--uui-secondary-darkest);
523
522
  --uui-main_menu-search-placeholder: var(--uui-text-disabled);
524
523
  --uui-main_menu-search-text: var(--uui-text-contrast);
525
524
  --uui-main_menu-search-icon: var(--uui-icon-disabled);
@@ -537,7 +536,7 @@
537
536
  --uui-burger_menu-bg: var(--uui-surface);
538
537
  --uui-burger_menu-bg-hover: var(--uui-surface-lower);
539
538
  --uui-burger_menu-caption: var(--uui-text-contrast);
540
- --uui-burger_menu-caption-hover: var(--uui-primary-50);
539
+ --uui-burger_menu-caption-hover: var(--uui-primary);
541
540
  --uui-burger_menu-overlay: var(--uui-overlay);
542
541
  --uui-burger_icon: var(--uui-text-primary);
543
542
  --uui-burger_item: var(--uui-text-brand);
@@ -575,7 +574,7 @@
575
574
  --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
576
575
  --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
577
576
  --uui-numeric-input-border-active: var(--uui-control-border-checked);
578
- --uui-numeric-input-border-error: var(--uui-error-50);
577
+ --uui-numeric-input-border-error: var(--uui-error);
579
578
  --uui-numeric-input-placeholder: var(--uui-control-placeholder);
580
579
  --uui-numeric-input-text: var(--uui-control-text);
581
580
  --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);
@@ -590,7 +589,7 @@
590
589
  --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
591
590
  --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
592
591
  --uui-time-picker-border-active: var(--uui-control-border-checked);
593
- --uui-time-picker-border-error: var(--uui-error-50);
592
+ --uui-time-picker-border-error: var(--uui-error);
594
593
  --uui-time-picker-placeholder: var(--uui-control-placeholder);
595
594
  --uui-time-picker-text: var(--uui-control-text);
596
595
  --uui-time-picker-text-disabled: var(--uui-control-text-disabled);
@@ -605,7 +604,7 @@
605
604
  --uui-search-input-border-disabled: var(--uui-control-border-disabled);
606
605
  --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
607
606
  --uui-search-input-border-active: var(--uui-control-border-checked);
608
- --uui-search-input-border-error: var(--uui-error-50);
607
+ --uui-search-input-border-error: var(--uui-error);
609
608
  --uui-search-input-placeholder: var(--uui-control-placeholder);
610
609
  --uui-search-input-text: var(--uui-control-text);
611
610
  --uui-search-input-text-disabled: var(--uui-control-text-disabled);
@@ -650,7 +649,7 @@
650
649
  --uui-panel-bg: var(--uui-surface);
651
650
 
652
651
  /* Spinner */
653
- --uui-spinner: var(--uui-primary-50);
652
+ --uui-spinner: var(--uui-primary);
654
653
 
655
654
  /* Blocker */
656
655
  --uui-blocker-bg: var(--uui-app-bg);
@@ -663,7 +662,7 @@
663
662
 
664
663
  --uui-dt-cell-bg: transparent;
665
664
  --uui-dt-cell-bg-resize: #EF55331F;
666
- --uui-dt-cell-bg-invalid: var(--uui-negative-10);
665
+ --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);
667
666
  --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);
668
667
  --uui-dt-cell-border-focus: var(--uui-control-border-checked);
669
668
 
@@ -678,7 +677,7 @@
678
677
  --uui-dt-top-shadow: linear-gradient(to bottom, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
679
678
  --uui-dt-left-shadow: linear-gradient(to left, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
680
679
  --uui-dt-right-shadow: linear-gradient(to right, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
681
- --uui-dt_header-drop_marker: var(--uui-primary-50);
680
+ --uui-dt_header-drop_marker: var(--uui-primary);
682
681
 
683
682
  --uui-dt-header-cell-font: var(--font-inter);
684
683
  --uui-dt-header-cell-font-weight: 500;
@@ -713,21 +712,21 @@
713
712
  }
714
713
 
715
714
  .tooltip-critical {
716
- --uui-tooltip-bg: var(--uui-error-60);
715
+ --uui-tooltip-bg: var(--uui-error-dark);
717
716
  --uui-tooltip-text: var(--uui-text-contrast);
718
717
  }
719
718
 
720
719
  .button-primary {
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);
720
+ --uui-btn-bg: var(--uui-primary);
721
+ --uui-btn-bg-hover: var(--uui-primary-dark);
722
+ --uui-btn-bg-active: var(--uui-primary-darkest);
724
723
  --uui-btn-bg-halftone: var(--chromatic-0);
725
724
  --uui-btn-bg-halftone-hover: var(--blue-0);
726
- --uui-btn-bg-halftone-active: var(--uui-primary-10);
725
+ --uui-btn-bg-halftone-active: var(--uui-primary-lightest);
727
726
  --uui-btn-bg-disabled: var(--uui-disabled);
728
727
  --uui-btn-border: var(--uui-primary);
729
- --uui-btn-border-hover: var(--uui-primary-60);
730
- --uui-btn-border-active: var(--uui-primary-70);
728
+ --uui-btn-border-hover: var(--uui-primary-dark);
729
+ --uui-btn-border-active: var(--uui-primary-darkest);
731
730
  --uui-btn-border-disabled: var(--uui-disabled);
732
731
  --uui-btn-caption: var(--uui-text-white);
733
732
  --uui-btn-caption-halftone: var(--uui-text-primary);
@@ -735,15 +734,15 @@
735
734
  }
736
735
 
737
736
  .button-accent {
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);
737
+ --uui-btn-bg: var(--uui-accent);
738
+ --uui-btn-bg-hover: var(--uui-accent-dark);
739
+ --uui-btn-bg-active: var(--uui-accent-darkest);
741
740
  --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);
741
+ --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
742
+ --uui-btn-bg-halftone-active: var(--uui-accent-light);
743
+ --uui-btn-border: var(--uui-accent);
744
+ --uui-btn-border-hover: var(--uui-accent-dark);
745
+ --uui-btn-border-active: var(--uui-accent-darkest);
747
746
  --uui-btn-bg-disabled: var(--uui-disabled);
748
747
  --uui-btn-border-disabled: var(--uui-disabled);
749
748
  --uui-btn-caption: var(--uui-text-white);
@@ -752,15 +751,15 @@
752
751
  }
753
752
 
754
753
  .button-negative {
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);
754
+ --uui-btn-bg: var(--uui-negative);
755
+ --uui-btn-bg-hover: var(--uui-negative-dark);
756
+ --uui-btn-bg-active: var(--uui-negative-darkest);
758
757
  --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);
758
+ --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
759
+ --uui-btn-bg-halftone-active: var(--uui-negative-light);
760
+ --uui-btn-border: var(--uui-negative);
761
+ --uui-btn-border-hover: var(--uui-negative-dark);
762
+ --uui-btn-border-active: var(--uui-negative-darkest);
764
763
  --uui-btn-bg-disabled: var(--uui-disabled);
765
764
  --uui-btn-border-disabled: var(--uui-disabled);
766
765
  --uui-btn-caption: var(--uui-text-white);
@@ -769,15 +768,15 @@
769
768
  }
770
769
 
771
770
  .button-secondary {
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);
771
+ --uui-btn-bg: var(--uui-secondary);
772
+ --uui-btn-bg-hover: var(--uui-secondary-dark);
773
+ --uui-btn-bg-active: var(--uui-secondary-darkest);
775
774
  --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);
775
+ --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
776
+ --uui-btn-bg-halftone-active: var(--uui-secondary-light);
777
+ --uui-btn-border: var(--uui-secondary);
778
+ --uui-btn-border-hover: var(--uui-secondary-dark);
779
+ --uui-btn-border-active: var(--uui-secondary-darkest);
781
780
  --uui-btn-bg-disabled: var(--uui-disabled);
782
781
  --uui-btn-border-disabled: var(--uui-disabled);
783
782
  --uui-btn-caption: var(--uui-text-white);
@@ -791,7 +790,7 @@
791
790
  --uui-btn-bg-active: var(--blue-100);
792
791
  --uui-btn-bg-halftone: var(--chromatic-0);
793
792
  --uui-btn-bg-halftone-hover: var(--blue-50);
794
- --uui-btn-bg-halftone-active: var(--uui-primary-10);
793
+ --uui-btn-bg-halftone-active: var(--uui-primary-lightest);
795
794
  --uui-btn-bg-disabled: var(--chromatic-0);
796
795
  --uui-btn-border: var(--white);
797
796
  --uui-btn-border-hover: var(--blue-50);
@@ -803,30 +802,30 @@
803
802
  }
804
803
 
805
804
  .icon-button-info {
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
+ --uui-icon-btn: var(--uui-info);
806
+ --uui-icon-btn-hover: var(--uui-info-dark);
807
+ --uui-icon-btn-active: var(--uui-info-darkest);
809
808
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
810
809
  }
811
810
 
812
811
  .icon-button-success {
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
+ --uui-icon-btn: var(--uui-success);
813
+ --uui-icon-btn-hover: var(--uui-success-dark);
814
+ --uui-icon-btn-active: var(--uui-success-darkest);
816
815
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
817
816
  }
818
817
 
819
818
  .icon-button-warning {
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
+ --uui-icon-btn: var(--uui-warning);
820
+ --uui-icon-btn-hover: var(--uui-warning-dark);
821
+ --uui-icon-btn-active: var(--uui-warning-darkest);
823
822
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
824
823
  }
825
824
 
826
825
  .icon-button-error {
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
+ --uui-icon-btn: var(--uui-error);
827
+ --uui-icon-btn-hover: var(--uui-error-dark);
828
+ --uui-icon-btn-active: var(--uui-error-darkest);
830
829
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
831
830
  }
832
831
 
@@ -845,29 +844,29 @@
845
844
  }
846
845
 
847
846
  .notification-card-warning {
848
- --uui-notification-card-fill: var(--uui-warning-50);
849
- --uui-notification-card-border: var(--uui-warning-50);
847
+ --uui-notification-card-fill: var(--uui-warning);
848
+ --uui-notification-card-border: var(--uui-warning);
850
849
  --uui-notification-card-bg: var(--uui-surface);
851
850
  --uui-notification-card-text: var(--uui-text-primary);
852
851
  }
853
852
 
854
853
  .notification-card-success {
855
- --uui-notification-card-fill: var(--uui-success-50);
856
- --uui-notification-card-border: var(--uui-success-50);
854
+ --uui-notification-card-fill: var(--uui-success);
855
+ --uui-notification-card-border: var(--uui-success);
857
856
  --uui-notification-card-bg: var(--uui-surface);
858
857
  --uui-notification-card-text: var(--uui-text-primary);
859
858
  }
860
859
 
861
860
  .notification-card-info {
862
- --uui-notification-card-fill: var(--uui-info-50);
863
- --uui-notification-card-border: var(--uui-info-50);
861
+ --uui-notification-card-fill: var(--uui-info);
862
+ --uui-notification-card-border: var(--uui-info);
864
863
  --uui-notification-card-bg: var(--uui-surface);
865
864
  --uui-notification-card-text: var(--uui-text-primary);
866
865
  }
867
866
 
868
867
  .notification-card-error {
869
- --uui-notification-card-fill: var(--uui-error-50);
870
- --uui-notification-card-border: var(--uui-error-50);
868
+ --uui-notification-card-fill: var(--uui-error);
869
+ --uui-notification-card-border: var(--uui-error);
871
870
  --uui-notification-card-bg: var(--uui-surface);
872
871
  --uui-notification-card-text: var(--uui-text-primary);
873
872
  }
@@ -875,29 +874,29 @@
875
874
  .alert-error {
876
875
  --uui-alert-text: var(--uui-text-primary);
877
876
  --uui-alert-bg: #F5E5E9;
878
- --uui-alert-border: var(--uui-error-50);
879
- --uui-alert-icon: var(--uui-error-50);
877
+ --uui-alert-border: var(--uui-error);
878
+ --uui-alert-icon: var(--uui-error);
880
879
  }
881
880
 
882
881
  .alert-warning {
883
882
  --uui-alert-text: var(--uui-text-primary);
884
883
  --uui-alert-bg: #F6EEE1;
885
- --uui-alert-border: var(--uui-warning-50);
886
- --uui-alert-icon: var(--uui-warning-50);
884
+ --uui-alert-border: var(--uui-warning);
885
+ --uui-alert-icon: var(--uui-warning);
887
886
  }
888
887
 
889
888
  .alert-success {
890
889
  --uui-alert-text: var(--uui-text-primary);
891
890
  --uui-alert-bg: #E7EEE1;
892
- --uui-alert-border: var(--uui-success-50);
893
- --uui-alert-icon: var(--uui-success-50);
891
+ --uui-alert-border: var(--uui-success);
892
+ --uui-alert-icon: var(--uui-success);
894
893
  }
895
894
 
896
895
  .alert-info {
897
896
  --uui-alert-text: var(--uui-text-primary);
898
897
  --uui-alert-bg: #DCEDF6;
899
- --uui-alert-border: var(--uui-info-50);
900
- --uui-alert-icon: var(--uui-info-50);
898
+ --uui-alert-border: var(--uui-info);
899
+ --uui-alert-icon: var(--uui-info);
901
900
  }
902
901
 
903
902
  .badge-default {
@@ -914,64 +913,64 @@
914
913
  }
915
914
 
916
915
  .badge-info {
917
- --uui-badge-bg: var(--uui-info-50);
918
- --uui-badge-bg-hover: var(--uui-info-60);
916
+ --uui-badge-bg: var(--uui-info);
917
+ --uui-badge-bg-hover: var(--uui-info-dark);
919
918
  --uui-badge-caption-solid: var(--white);
920
919
  --uui-badge-count-bg: var(--white);
921
920
  --uui-badge-count: var(--uui-text-secondary);
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);
921
+ --uui-badge-bg-halftone: var(--uui-info-lightest);
922
+ --uui-badge-bg-halftone-hover: var(--uui-info-light);
923
+ --uui-badge-border-halftone: var(--uui-info-light);
924
+ --uui-badge-border-halftone-hover: var(--uui-info);
925
+ --uui-badge-caption-halftone: var(--uui-info-darkest);
927
926
  }
928
927
 
929
928
  .badge-success {
930
- --uui-badge-bg: var(--uui-success-50);
931
- --uui-badge-bg-hover: var(--uui-success-60);
929
+ --uui-badge-bg: var(--uui-success);
930
+ --uui-badge-bg-hover: var(--uui-success-dark);
932
931
  --uui-badge-caption-solid: var(--white);
933
932
  --uui-badge-count-bg: var(--white);
934
933
  --uui-badge-count: var(--uui-text-secondary);
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);
934
+ --uui-badge-bg-halftone: var(--uui-success-lightest);
935
+ --uui-badge-bg-halftone-hover: var(--uui-success-light);
936
+ --uui-badge-border-halftone: var(--uui-success-light);
937
+ --uui-badge-border-halftone-hover: var(--uui-success);
938
+ --uui-badge-caption-halftone: var(--uui-success-darkest);
940
939
  }
941
940
 
942
941
  .badge-warning {
943
- --uui-badge-bg: var(--uui-warning-50);
944
- --uui-badge-bg-hover: var(--uui-warning-60);
942
+ --uui-badge-bg: var(--uui-warning);
943
+ --uui-badge-bg-hover: var(--uui-warning-dark);
945
944
  --uui-badge-caption-solid: var(--uui-text-primary);
946
945
  --uui-badge-count-bg: var(--white);
947
946
  --uui-badge-count: var(--uui-text-secondary);
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);
947
+ --uui-badge-bg-halftone: var(--uui-warning-lightest);
948
+ --uui-badge-bg-halftone-hover: var(--uui-warning-light);
949
+ --uui-badge-border-halftone: var(--uui-warning-light);
950
+ --uui-badge-border-halftone-hover: var(--uui-warning);
951
+ --uui-badge-caption-halftone: var(--uui-warning-darkest);
953
952
  }
954
953
 
955
954
  .badge-error {
956
- --uui-badge-bg: var(--uui-error-50);
957
- --uui-badge-bg-hover: var(--uui-error-60);
955
+ --uui-badge-bg: var(--uui-error);
956
+ --uui-badge-bg-hover: var(--uui-error-dark);
958
957
  --uui-badge-caption-solid: var(--white);
959
958
  --uui-badge-count-bg: var(--white);
960
959
  --uui-badge-count: var(--uui-text-secondary);
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);
960
+ --uui-badge-bg-halftone: var(--uui-error-lightest);
961
+ --uui-badge-bg-halftone-hover: var(--uui-error-light);
962
+ --uui-badge-border-halftone: var(--uui-error-light);
963
+ --uui-badge-border-halftone-hover: var(--uui-error);
964
+ --uui-badge-caption-halftone: var(--uui-error-darkest);
966
965
  }
967
966
 
968
967
  .informer-default {
969
- --uui-informer-bg: var(--uui-secondary-20);
968
+ --uui-informer-bg: var(--uui-secondary-light);
970
969
  --uui-informer-caption: var(--uui-text-secondary);
971
970
  }
972
971
 
973
972
  .informer-focus {
974
- --uui-informer-bg: var(--uui-negative-50);
973
+ --uui-informer-bg: var(--uui-negative);
975
974
  --uui-informer-caption: var(--uui-caption);
976
975
  }
977
976