@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_promo.scss CHANGED
@@ -109,65 +109,71 @@
109
109
 
110
110
  /* core variables start */
111
111
 
112
- /* brand colors */
113
-
114
- --uui-accent-5: var(--green-soft);
115
- --uui-accent-10: var(--green-lightest);
116
- --uui-accent-20: var(--green-light);
117
- --uui-accent-50: var(--green);
118
- --uui-accent-60: var(--green-dark);
119
- --uui-accent-70: var(--green-darkest);
120
-
121
- --uui-primary-5: var(--blue-soft);
122
- --uui-primary-10: var(--blue-lightest);
123
- --uui-primary-20: var(--blue-light);
124
- --uui-primary-50: var(--blue);
125
- --uui-primary-60: var(--blue-dark);
126
- --uui-primary-70: var(--blue-darkest);
127
-
128
- --uui-secondary-5: var(--gray20);
129
- --uui-secondary-10: var(--gray30);
130
- --uui-secondary-20: var(--gray40);
131
- --uui-secondary-50: var(--gray60);
132
- --uui-secondary-60: var(--gray70);
133
- --uui-secondary-70: var(--gray80);
134
-
135
- --uui-negative-5: var(--red-soft);
136
- --uui-negative-10: var(--red-lightest);
137
- --uui-negative-20: var(--red-light);
138
- --uui-negative-50: var(--red);
139
- --uui-negative-60: var(--red-dark);
140
- --uui-negative-70: var(--red-darkest);
141
-
142
- /* semantic colors */
143
-
144
- --uui-info-5: var(--blue-soft);
145
- --uui-info-10: var(--blue-lightest);
146
- --uui-info-20: var(--blue-light);
147
- --uui-info-50: var(--blue);
148
- --uui-info-60: var(--blue-dark);
149
- --uui-info-70: var(--blue-darkest);
150
-
151
- --uui-success-5: var(--green-soft);
152
- --uui-success-10: var(--green-lightest);
153
- --uui-success-20: var(--green-light);
154
- --uui-success-50: var(--green);
155
- --uui-success-60: var(--green-dark);
156
- --uui-success-70: var(--green-darkest);
157
-
158
- --uui-warning-5: var(--amber-soft);
159
- --uui-warning-10: var(--amber-lightest);
160
- --uui-warning-20: var(--amber-light);
161
- --uui-warning-50: var(--amber);
162
- --uui-warning-60: var(--amber-dark);
163
- --uui-warning-70: var(--amber-darkest);
164
-
165
- --uui-error-5: var(--red-soft);
166
- --uui-error-10: var(--red-lightest);
167
- --uui-error-20: var(--red-light);
168
- --uui-error-50: var(--red);
169
- --uui-error-60: var(--red-dark);
170
- --uui-error-70: var(--red-darkest);
112
+ --uui-accent: var(--green);
113
+ --uui-accent-light: var(--green-light);
114
+ --uui-accent-lightest: var(--green-lightest);
115
+ --uui-accent-dark: var(--green-dark);
116
+ --uui-accent-darkest: var(--green-darkest);
117
+
118
+ --uui-primary: var(--blue);
119
+ --uui-primary-light: var(--blue-light);
120
+ --uui-primary-lightest: var(--blue-lightest);
121
+ --uui-primary-dark: var(--blue-dark);
122
+ --uui-primary-darkest: var(--blue-darkest);
123
+
124
+ --uui-secondary: var(--gray60);
125
+ --uui-secondary-light: var(--gray30);
126
+ --uui-secondary-lightest: var(--gray20);
127
+ --uui-secondary-dark: var(--gray70);
128
+ --uui-secondary-darkest: var(--gray80);
129
+
130
+ --uui-negative: var(--red);
131
+ --uui-negative-light: var(--red-light);
132
+ --uui-negative-lightest: var(--red-lightest);
133
+ --uui-negative-dark: var(--red-dark);
134
+ --uui-negative-darkest: var(--red-darkest);
135
+
136
+ --uui-link: var(--blue);
137
+ --uui-link-hover: var(--blue-dark);
138
+ --uui-link-wite-hover: var(--gray40);
139
+ --uui-link-black-hover: var(--gray80);
140
+ --uui-link-visited: #5214CC;
141
+ --uui-link-disabled: var(--gray50);
142
+
143
+ --uui-info: var(--blue);
144
+ --uui-info-soft: var(--blue-soft);
145
+ --uui-info-lightest: var(--blue-lightest);
146
+ --uui-info-light: var(--blue-light);
147
+ --uui-info-dark: var(--blue-dark);
148
+ --uui-info-darkest: var(--blue-darkest);
149
+
150
+ --uui-success: var(--green);
151
+ --uui-success-soft: var(--green-soft);
152
+ --uui-success-lightest: var(--green-lightest);
153
+ --uui-success-light: var(--green-light);
154
+ --uui-success-dark: var(--green-dark);
155
+ --uui-success-darkest: var(--green-darkest);
156
+
157
+ --uui-warning: var(--amber);
158
+ --uui-warning-soft: var(--amber-soft);
159
+ --uui-warning-lightest: var(--amber-lightest);
160
+ --uui-warning-light: var(--amber-light);
161
+ --uui-warning-dark: var(--amber-dark);
162
+ --uui-warning-darkest: var(--amber-darkest);
163
+
164
+ --uui-error: var(--red);
165
+ --uui-error-soft: var(--red-soft);
166
+ --uui-error-lightest: var(--red-lightest);
167
+ --uui-error-light: var(--red-light);
168
+ --uui-error-dark: var(--red-dark);
169
+ --uui-error-darkest: var(--red-darkest);
170
+
171
+ --uui-icon: var(--gray60);
172
+ --uui-icon-hover: var(--gray70);
173
+ --uui-icon-active: var(--gray80);
174
+ --uui-icon-disabled: var(--gray50);
175
+
176
+ --uui-control-focus: #008ACE80;
171
177
 
172
178
  /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */
173
179
 
@@ -198,10 +204,10 @@
198
204
  --uui-text-white: var(--white);
199
205
  --uui-text-dark: var(--gray80);
200
206
 
201
- --uui-text-info: var(--uui-info-50);
202
- --uui-text-warning: var(--uui-warning-50);
203
- --uui-text-error: var(--uui-error-50);
204
- --uui-text-success: var(--uui-success-50);
207
+ --uui-text-info: var(--uui-info);
208
+ --uui-text-warning: var(--uui-warning);
209
+ --uui-text-error: var(--uui-error);
210
+ --uui-text-success: var(--uui-success);
205
211
 
206
212
  /* not accepted part */
207
213
 
@@ -209,19 +215,6 @@
209
215
 
210
216
  /* control specific */
211
217
 
212
- --uui-icon: var(--gray60);
213
- --uui-icon-hover: var(--gray70);
214
- --uui-icon-active: var(--gray80);
215
- --uui-icon-disabled: var(--gray50);
216
-
217
- --uui-link: var(--blue);
218
- --uui-link-soft: var(--blue-soft);
219
- --uui-link-hover: var(--blue-dark);
220
- --uui-link-wite-hover: var(--gray40);
221
- --uui-link-black-hover: var(--gray80);
222
- --uui-link-visited: #5214CC;
223
- --uui-link-disabled: var(--gray50);
224
-
225
218
  --uui-scroll_bars-bg: var(--gray40);
226
219
  --uui-scroll_bars-bg-active: var(--gray60);
227
220
 
@@ -229,19 +222,19 @@
229
222
  --uui-control-bg-hover: var(--gray60);
230
223
  --uui-control-bg-disabled: var(--gray5);
231
224
  --uui-control-bg-readonly: var(--gray5);
232
- --uui-control-bg-checked: var(--uui-primary-50);
233
- --uui-control-bg-checked-hover: var(--uui-primary-60);
234
- --uui-control-bg-checked-disabled: var(--uui-primary-20);
225
+ --uui-control-bg-checked: var(--uui-primary);
226
+ --uui-control-bg-checked-hover: var(--uui-primary-dark);
227
+ --uui-control-bg-checked-disabled: var(--uui-primary-light);
235
228
  --uui-control_switch-bg: var(--gray40);
236
229
  --uui-control_switch-toggler-bg: var(--white);
237
230
 
238
231
  --uui-control-border: var(--gray40);
239
- --uui-control-border-hover: var(--uui-primary-60);
232
+ --uui-control-border-hover: var(--uui-primary-dark);
240
233
  --uui-control-border-disabled: var(--gray30);
241
234
  --uui-control-border-readonly: var(--gray30);
242
- --uui-control-border-checked: var(--uui-primary-50);
243
- --uui-control-border-checked-hover: var(--uui-primary-60);
244
- --uui-control-border-checked-disabled: var(--uui-primary-20);
235
+ --uui-control-border-checked: var(--uui-primary);
236
+ --uui-control-border-checked-hover: var(--uui-primary-dark);
237
+ --uui-control-border-checked-disabled: var(--uui-primary-light);
245
238
 
246
239
  --uui-control_switch-border-hover: var(--gray60);
247
240
  --uui-control_textinput-border-hover: var(--gray60);
@@ -260,8 +253,6 @@
260
253
 
261
254
  --uui-control-checkbox-icon: var(--white);
262
255
 
263
- --uui-control-focus: #008ACE80;
264
-
265
256
  --uui-tag-bg: var(--gray30);
266
257
  --uui-tag-bg-hover: var(--gray40);
267
258
 
@@ -287,7 +278,7 @@
287
278
  --uui-text-input-border: var(--uui-control-border);
288
279
  --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
289
280
  --uui-text-input-border-active: var(--uui-control-border-checked);
290
- --uui-text-input-border-error: var(--uui-error-50);
281
+ --uui-text-input-border-error: var(--uui-error);
291
282
  --uui-text-input-border-disabled: var(--uui-control-border-disabled);
292
283
  --uui-text-input-border-readonly: var(--uui-control-border-readonly);
293
284
  --uui-text-input-placeholder: var(--uui-control-placeholder);
@@ -319,11 +310,11 @@
319
310
 
320
311
  /* RangeDatePicker vars */
321
312
  --uui-rdtp-bg: var(--uui-control-bg);
322
- --uui-rdtp-bg-selected-date: var(--uui-primary-10);
313
+ --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);
323
314
 
324
315
  /* Calendar vars */
325
316
  --uui-calendar-selected-hover: var(--uui-control-bg);
326
- --uui-calendar-start-end-selected-hover: var(--uui-primary-60);
317
+ --uui-calendar-start-end-selected-hover: var(--uui-primary-dark);
327
318
  --uui-calendar-start-end-selected: var(--uui-control-border-checked);
328
319
  --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
329
320
  --uui-calendar-text: var(--uui-control-text);
@@ -334,11 +325,11 @@
334
325
  --uui-calendar-selected_day-font: var(--font-semibold);
335
326
 
336
327
  /* tab-button-vars */
337
- //--uui-tab_button-text: var(--uui-text-primary);
338
- //--uui-tab_button-text-hover: var(--uui-primary-50);
339
- //--uui-tab_button-text-active: var(--uui-primary-50);
340
- //--uui-tab_button-text-disabled: var(--uui-text-disabled);
341
- //--uui-tab_button-font: var(--font-semibold);
328
+ --uui-tab_button-text: var(--uui-text-primary);
329
+ --uui-tab_button-text-hover: var(--uui-primary);
330
+ --uui-tab_button-text-active: var(--uui-primary);
331
+ --uui-tab_button-text-disabled: var(--uui-text-disabled);
332
+ --uui-tab_button-font: var(--font-semibold);
342
333
 
343
334
  /* radio-input-vars */
344
335
  --uui-radio-input-bg: var(--uui-control-bg);
@@ -353,7 +344,7 @@
353
344
  --uui-radio-input-fill-checked: var(--uui-control-border-checked);
354
345
  --uui-radio-input-fill-hover: var(--uui-control-border-hover);
355
346
  --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
356
- --uui-radio-input-error: var(--uui-negative-50);
347
+ --uui-radio-input-error: var(--uui-negative);
357
348
 
358
349
  --uui-radio-input-font: var(--font-regular);
359
350
 
@@ -368,7 +359,7 @@
368
359
  --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);
369
360
  --uui-checkbox-bg-checked-hover: var(--uui-control-bg-checked-hover);
370
361
  --uui-checkbox-bg-checked-disabled: var(--uui-control-bg-checked-disabled);
371
- --uui-checkbox-error: var(--uui-negative-50);
362
+ --uui-checkbox-error: var(--uui-negative);
372
363
  --uui-checkbox-fill: var(--uui-control-checkbox-icon);
373
364
  --uui-checkbox-label: var(--uui-control-label);
374
365
  --uui-checkbox-label-disabled: var(--uui-control-label-disabled);
@@ -394,7 +385,7 @@
394
385
  --uui-text-area-border-disabled: var(--uui-control-border-disabled);
395
386
  --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
396
387
  --uui-text-area-border-active: var(--uui-control-border-checked);
397
- --uui-text-area-border-error: var(--uui-error-50);
388
+ --uui-text-area-border-error: var(--uui-error);
398
389
  --uui-text-area-placeholder: var(--uui-control-placeholder);
399
390
  --uui-text-area-text: var(--uui-control-text);
400
391
  --uui-text-area-text-disabled: var(--uui-control-text-disabled);
@@ -405,8 +396,8 @@
405
396
  --uui-text-area-counter-font: var(--font-regular);
406
397
 
407
398
  /* DropMarker vars */
408
- --uui-drop-marker: var(--uui-primary-50);
409
- --uui-drop-marker-blocked: var(--uui-error-50);
399
+ --uui-drop-marker: var(--uui-primary);
400
+ --uui-drop-marker-blocked: var(--uui-error);
410
401
 
411
402
  /* Tooltip vars */
412
403
  --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 3px 6px 0 rgba(29, 30, 38, 0.1), 0 0 3px 0 rgba(29, 30, 38, 0.15)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
@@ -425,7 +416,7 @@
425
416
  --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
426
417
  --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
427
418
  --uui-picker-toggler-border-active: var(--uui-control-border-checked);
428
- --uui-picker-toggler-border-error: var(--uui-error-50);
419
+ --uui-picker-toggler-border-error: var(--uui-error);
429
420
  --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
430
421
  --uui-picker-toggler-text: var(--uui-control-text);
431
422
  --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);
@@ -454,11 +445,11 @@
454
445
  /* LabeledInput */
455
446
  --uui-labeled-input: var(--uui-text-primary);
456
447
  --uui-labeled-input-disabled: var(--uui-text-disabled);
457
- --uui-labeled-input-error: var(--uui-error-50);
448
+ --uui-labeled-input-error: var(--uui-error);
458
449
  --uui-labeled-input-fill: var(--uui-icon);
459
450
  --uui-labeled-input-info-fill: var(--uui-icon);
460
451
  --uui-labeled-input-optional-text: var(--uui-text-tertiary);
461
- --uui-labeled-input-asterisk: var(--uui-error-50);
452
+ --uui-labeled-input-asterisk: var(--uui-error);
462
453
 
463
454
  --uui-labeled-input-font: var(--font-semibold);
464
455
  --uui-labeled-input-optional-font: var(--font-italic);
@@ -523,63 +514,63 @@
523
514
  --uui-dropdown-menu-item-font: var(--font-regular);
524
515
 
525
516
  /* MainMenu */
526
- //--uui-main_menu-text: var(--uui-text-contrast);
527
- //--uui-main_menu-text-active: var(--uui-text-contrast);
528
- //--uui-main_menu-bg: var(--uui-surface-contrast-low);
529
- //--uui-main_menu-hover: var(--uui-surface-contrast-lower);
530
- //--uui-main_menu-active: var(--uui-surface-contrast-lower);
531
- //--uui-main_menu-border-active: var(--uui-primary);
532
- //
533
- //--uui-main_menu-dropdown-bg: var(--uui-surface-contrast-lower);
534
- //--uui-main_menu-dropdown-bg-hover: var(--uui-surface-contrast-low);
535
- //--uui-main_menu-dropdown-hover: var(--uui-primary);
536
- //--uui-main_menu-dropdown-shadow: none;
537
- //--uui-main_menu-dropdown-border-radius: none;
538
- //
539
- //--uui-main_menu-search-bg: var(--uui-secondary-70);
540
- //--uui-main_menu-search-border: var(--uui-secondary-70);
541
- //--uui-main_menu-search-placeholder: var(--uui-text-disabled);
542
- //--uui-main_menu-search-text: var(--uui-text-disabled);
543
- //--uui-main_menu-search-icon: var(--uui-icon-disabled);
544
- //
545
- //--uui-main_menu-icon: var(--uui-text-contrast);
546
- //--uui-main_menu-icon-hover: var(--uui-text-contrast);
547
- //--uui-main_menu-icon-active: var(--uui-text-contrast);
548
- //
549
- //--uui-main_menu-font: var(--font-semibold);
550
- //--uui-main_menu-search-font: var(--font-regular);
517
+ --uui-main_menu-text: var(--uui-text-contrast);
518
+ --uui-main_menu-text-active: var(--uui-text-contrast);
519
+ --uui-main_menu-bg: var(--uui-surface-contrast-low);
520
+ --uui-main_menu-hover: var(--uui-surface-contrast-lower);
521
+ --uui-main_menu-active: var(--uui-surface-contrast-lower);
522
+ --uui-main_menu-border-active: var(--uui-primary);
523
+
524
+ --uui-main_menu-dropdown-bg: var(--uui-surface-contrast-lower);
525
+ --uui-main_menu-dropdown-bg-hover: var(--uui-surface-contrast-low);
526
+ --uui-main_menu-dropdown-hover: var(--uui-primary);
527
+ --uui-main_menu-dropdown-shadow: none;
528
+ --uui-main_menu-dropdown-border-radius: none;
529
+
530
+ --uui-main_menu-search-bg: var(--uui-secondary-darkest);
531
+ --uui-main_menu-search-border: var(--uui-secondary-darkest);
532
+ --uui-main_menu-search-placeholder: var(--uui-text-disabled);
533
+ --uui-main_menu-search-text: var(--uui-text-disabled);
534
+ --uui-main_menu-search-icon: var(--uui-icon-disabled);
535
+
536
+ --uui-main_menu-icon: var(--uui-text-contrast);
537
+ --uui-main_menu-icon-hover: var(--uui-text-contrast);
538
+ --uui-main_menu-icon-active: var(--uui-text-contrast);
539
+
540
+ --uui-main_menu-font: var(--font-semibold);
541
+ --uui-main_menu-search-font: var(--font-regular);
551
542
 
552
543
  /* BurgerMenu */
553
544
  --uui-burger_menu-bg: var(--uui-surface-contrast-lower);
554
545
  --uui-burger_menu-bg-hover: var(--uui-surface-contrast-lower);
555
546
  --uui-burger_menu-caption: var(--uui-text-contrast);
556
- --uui-burger_menu-caption-hover: var(--uui-primary-50);
547
+ --uui-burger_menu-caption-hover: var(--uui-primary);
557
548
  --uui-burger_menu-overlay: var(--uui-overlay);
558
549
  --uui-burger_icon: var(--uui-text-contrast);
559
550
  --uui-burger_item: var(--uui-text-brand);
560
551
 
561
552
  /* BurgerGroupHeader */
562
- //--uui-burger_group-text: var(--uui-text-disabled);
563
- //--uui-burger_group-bg: var(--uui-surface-contrast);
564
- //--uui-burger_group-line: var(--uui-text-secondary);
565
- //
566
- //--uui-burger_group-font: var(--font-regular);
553
+ --uui-burger_group-text: var(--uui-text-disabled);
554
+ --uui-burger_group-bg: var(--uui-surface-contrast);
555
+ --uui-burger_group-line: var(--uui-text-secondary);
556
+
557
+ --uui-burger_group-font: var(--font-regular);
567
558
 
568
559
  /* BurgerButton */
569
- //--uui-burger_btn_caption: var(--uui-text-contrast);
570
- //--uui-burger_btn_caption-hover: var(--uui-primary);
571
- //--uui-burger_btn_caption-active: var(--uui-primary);
572
- //--uui-burger_btn-border: var(--uui-disabled);
573
- //
574
- //--uui-burger_btn-font: var(--font-regular);
560
+ --uui-burger_btn_caption: var(--uui-text-contrast);
561
+ --uui-burger_btn_caption-hover: var(--uui-primary);
562
+ --uui-burger_btn_caption-active: var(--uui-primary);
563
+ --uui-burger_btn-border: var(--uui-disabled);
564
+
565
+ --uui-burger_btn-font: var(--font-regular);
575
566
 
576
567
  /* BurgerSearch */
577
- //--uui-burger_search: var(--uui-text-contrast);
578
- //--uui-burger_search-fill: var(--uui-text-disabled);
579
- //--uui-burger_search-bg: var(--uui-surface-contrast);
580
- //--uui-burger_search-placeholder: var(--uui-text-disabled);
581
- //
582
- //--uui-burger_search-font: var(--font-regular);
568
+ --uui-burger_search: var(--uui-text-contrast);
569
+ --uui-burger_search-fill: var(--uui-text-disabled);
570
+ --uui-burger_search-bg: var(--uui-surface-contrast);
571
+ --uui-burger_search-placeholder: var(--uui-text-disabled);
572
+
573
+ --uui-burger_search-font: var(--font-regular);
583
574
 
584
575
  /* NumericInput */
585
576
  --uui-numeric-input-bg: var(--uui-control-bg);
@@ -588,7 +579,7 @@
588
579
  --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
589
580
  --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
590
581
  --uui-numeric-input-border-active: var(--uui-control-border-checked);
591
- --uui-numeric-input-border-error: var(--uui-error-50);
582
+ --uui-numeric-input-border-error: var(--uui-error);
592
583
  --uui-numeric-input-placeholder: var(--uui-control-placeholder);
593
584
  --uui-numeric-input-text: var(--uui-control-text);
594
585
  --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);
@@ -603,7 +594,7 @@
603
594
  --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
604
595
  --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
605
596
  --uui-time-picker-border-active: var(--uui-control-border-checked);
606
- --uui-time-picker-border-error: var(--uui-error-50);
597
+ --uui-time-picker-border-error: var(--uui-error);
607
598
  --uui-time-picker-placeholder: var(--uui-control-placeholder);
608
599
  --uui-time-picker-text: var(--uui-control-text);
609
600
  --uui-time-picker-text-disabled: var(--uui-control-text-disabled);
@@ -618,7 +609,7 @@
618
609
  --uui-search-input-border-disabled: var(--uui-control-border-disabled);
619
610
  --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
620
611
  --uui-search-input-border-active: var(--uui-control-border-checked);
621
- --uui-search-input-border-error: var(--uui-error-50);
612
+ --uui-search-input-border-error: var(--uui-error);
622
613
  --uui-search-input-placeholder: var(--uui-control-placeholder);
623
614
  --uui-search-input-text: var(--uui-control-text);
624
615
  --uui-search-input-text-disabled: var(--uui-control-text-disabled);
@@ -674,7 +665,7 @@
674
665
 
675
666
  --uui-dt-cell-bg: transparent;
676
667
  --uui-dt-cell-bg-resize: #EF55331F;
677
- --uui-dt-cell-bg-invalid: var(--uui-negative-10);
668
+ --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);
678
669
  --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);
679
670
  --uui-dt-cell-border-focus: var(--uui-control-border-checked);
680
671
 
@@ -706,210 +697,35 @@
706
697
 
707
698
  --uui-pagination-font: var(--font-regular);
708
699
 
700
+ /* DropSpot */
701
+
702
+ --uui-dropspot-border: var(--gray40);
703
+ --uui-dropspot-border-dropstart: var(--uui-primary);
704
+ --uui-dropspot-background-dropstart: var(--uui-primary-lightest);
705
+ --uui-dropspot-link-color: var(--uui-primary);
706
+ --uui-dropspot-link-hover: var(--uui-primary-dark);
707
+ --uui-dropspot-icon: var(--uui-primary);
708
+
709
709
  /* FileCard */
710
- --uui-file-card-background: var(--gray40);
711
- --uui-file-card-background-loaading: var(--gray40);
712
- --uui-file-card-error: var(--uui-negative-50);
713
- --uui-file-card-error-block: var(--uui-negative-70);
714
- --uui-file-card-default: var(--uui-secondary-50);
715
- --uui-file-card-dropstart-border: var(--uui-primary);
716
- --uui-file-card-dropstart-background: var(--uui-primary-10);
717
- --uui-file-card-link-hover: var(--uui-primary-60);
710
+
711
+ --uui-filecard-background: var(--gray40);
712
+ --uui-filecard-icon-error: var(--uui-negative);
713
+ --uui-filecard-border-error: var(--uui-negative);
714
+ --uui-filecard-text-error: var(--uui-negative-darkest);
715
+ --uui-filecard-default: var(--uui-secondary);
718
716
 
719
717
  /* IndeterminateBar */
720
718
 
721
- --uui-indeterminate-bar-wrapper: var(--uui-secondary-20);
719
+ --uui-indeterminate-bar-wrapper: var(--uui-secondary-light);
722
720
  --uui-indeterminate-bar-background: var(--uui-primary);
723
721
 
724
722
  /* ProgressBar */
725
723
 
726
- --uui-progress-bar-wrapper: var(--uui-secondary-20);
724
+ --uui-progress-bar-wrapper: var(--uui-secondary-light);
727
725
  --uui-progress-bar-background: var(--uui-primary);
728
726
  --uui-progress-bar-label: var(--uui-surface-contrast-lower);
729
727
 
730
- /* ------------ NEW ----------- */
731
-
732
- .uui-color-accent, .uui-color-green, .uui-color-success {
733
- --uui-main: var(--uui-accent-50);
734
- --uui-main-disabled: var(--uui-disabled);
735
- --uui-light: var(--uui-accent-20);
736
- --uui-lightest: var(--uui-accent-10);
737
- --uui-dark: var(--uui-accent-60);
738
- --uui-darkest: var(--uui-accent-70);
739
- --uui-caption: var(--uui-text-white);
740
- --uui-caption-contrast: var(--uui-text-white);
741
- --uui-caption-halftone: var(--uui-accent-50);
742
- --uui-caption-disabled: var(--uui-text-disabled);
743
- }
744
-
745
- .uui-color-primary, .uui-color-blue, .uui-color-info {
746
- --uui-main: var(--uui-primary);
747
- --uui-main-disabled: var(--uui-disabled);
748
- --uui-light: var(--uui-primary-20);
749
- --uui-lightest: var(--uui-primary-10);
750
- --uui-dark: var(--uui-primary-60);
751
- --uui-darkest: var(--uui-primary-70);
752
- --uui-caption: var(--uui-text-white);
753
- --uui-caption-contrast: var(--uui-text-white);
754
- --uui-caption-halftone: var(--uui-primary);
755
- --uui-caption-disabled: var(--uui-text-disabled);
756
- }
757
-
758
- .uui-color-secondary, .uui-color-gray {
759
- --uui-main: var(--uui-secondary-50);
760
- --uui-main-disabled: var(--uui-disabled);
761
- --uui-light: var(--uui-secondary-20);
762
- --uui-lightest: var(--uui-secondary-10);
763
- --uui-dark: var(--uui-secondary-60);
764
- --uui-darkest: var(--uui-secondary-70);
765
- --uui-caption: var(--uui-text-white);
766
- --uui-caption-contrast: var(--uui-text-white);
767
- --uui-caption-halftone: var(--uui-secondary-50);
768
- --uui-caption-disabled: var(--uui-text-disabled);
769
- }
770
-
771
- .uui-color-negative, .uui-color-error, .uui-color-red {
772
- --uui-main: var(--uui-negative-50);
773
- --uui-main-disabled: var(--uui-disabled);
774
- --uui-light: var(--uui-negative-20);
775
- --uui-lightest: var(--uui-negative-10);
776
- --uui-dark: var(--uui-negative-60);
777
- --uui-darkest: var(--uui-negative-70);
778
- --uui-caption: var(--uui-text-white);
779
- --uui-contrast-text: var(--uui-text-white);
780
- --uui-caption-halftone: var(--uui-negative-50);
781
- --uui-caption-disabled: var(--uui-text-disabled);
782
- }
783
-
784
- .uui-color-warning, .uui-color-amber {
785
- --uui-main: var(--uui-warning-50);
786
- --uui-main-disabled: var(--uui-disabled);
787
- --uui-light: var(--uui-warning-20);
788
- --uui-lightest: var(--uui-warning-10);
789
- --uui-dark: var(--uui-warning-60);
790
- --uui-darkest: var(--uui-warning-70);
791
- --uui-caption: var(--uui-text-white);
792
- --uui-contrast-text: var(--uui-text-white);
793
- --uui-caption-halftone: var(--uui-warning-50);
794
- --uui-caption-disabled: var(--uui-text-disabled);
795
- }
796
-
797
- .uui-color-gray10 {
798
- --uui-main: var(--gray10);
799
- --uui-main-disabled: var(--uui-disabled);
800
- --uui-light: var(--gray5);
801
- --uui-lightest: var(--white);
802
- --uui-dark: var(--gray60);
803
- --uui-darkest: var(--gray70);
804
- --uui-caption: var(--uui-text-dark);
805
- --uui-caption-contrast: var(--uui-text-dark);
806
- --uui-caption-halftone: var(--gray70);
807
- --uui-caption-disabled: var(--uui-text-disabled);
808
- }
809
-
810
- .uui-color-yellow {
811
- --uui-main: var(--yellow-30);
812
- --uui-main-disabled: var(--uui-disabled);
813
- --uui-light: var(--yellow-20);
814
- --uui-lightest: var(--yellow-10);
815
- --uui-dark: var(--yellow-40);
816
- --uui-darkest: var(--yellow-50);
817
- --uui-caption: var(--uui-text-white);
818
- --uui-caption-contrast: var(--uui-text-white);
819
- --uui-caption-halftone: var(--yellow-50);
820
- --uui-caption-disabled: var(--uui-text-disabled);
821
- }
822
-
823
- .uui-color-orange {
824
- --uui-main: var(--orange-30);
825
- --uui-main-disabled: var(--uui-disabled);
826
- --uui-light: var(--orange-20);
827
- --uui-lightest: var(--orange-10);
828
- --uui-dark: var(--orange-40);
829
- --uui-darkest: var(--orange-50);
830
- --uui-caption: var(--uui-text-white);
831
- --uui-caption-contrast: var(--uui-text-white);
832
- --uui-caption-halftone: var(--orange-50);
833
- --uui-caption-disabled: var(--uui-text-disabled);
834
- }
835
-
836
- .uui-color-fuchsia {
837
- --uui-main: var(--fuchsia-30);
838
- --uui-main-disabled: var(--uui-disabled);
839
- --uui-light: var(--fuchsia-20);
840
- --uui-lightest: var(--fuchsia-10);
841
- --uui-dark: var(--fuchsia-40);
842
- --uui-darkest: var(--fuchsia-50);
843
- --uui-caption: var(--uui-text-white);
844
- --uui-caption-contrast: var(--uui-text-white);
845
- --uui-caption-halftone: var(--fuchsia-50);
846
- --uui-caption-disabled: var(--uui-text-disabled);
847
- }
848
-
849
- .uui-color-purple {
850
- --uui-main: var(--purple-30);
851
- --uui-main-disabled: var(--uui-disabled);
852
- --uui-light: var(--purple-20);
853
- --uui-lightest: var(--purple-10);
854
- --uui-dark: var(--purple-40);
855
- --uui-darkest: var(--purple-50);
856
- --uui-caption: var(--uui-text-white);
857
- --uui-caption-contrast: var(--uui-text-white);
858
- --uui-caption-halftone: var(--purple-50);
859
- --uui-caption-disabled: var(--uui-text-disabled);
860
- }
861
-
862
- .uui-color-violet {
863
- --uui-main: var(--violet-30);
864
- --uui-main-disabled: var(--uui-disabled);
865
- --uui-light: var(--violet-20);
866
- --uui-lightest: var(--violet-10);
867
- --uui-dark: var(--violet-40);
868
- --uui-darkest: var(--violet-50);
869
- --uui-caption: var(--uui-text-white);
870
- --uui-caption-contrast: var(--uui-text-white);
871
- --uui-caption-halftone: var(--violet-50);
872
- --uui-caption-disabled: var(--uui-text-disabled);
873
- }
874
-
875
- .uui-color-cobalt {
876
- --uui-main: var(--cobalt-30);
877
- --uui-main-disabled: var(--uui-disabled);
878
- --uui-light: var(--cobalt-20);
879
- --uui-lightest: var(--cobalt-10);
880
- --uui-dark: var(--cobalt-40);
881
- --uui-darkest: var(--cobalt-50);
882
- --uui-caption: var(--uui-text-white);
883
- --uui-caption-contrast: var(--uui-text-white);
884
- --uui-caption-halftone: var(--cobalt-50);
885
- --uui-caption-disabled: var(--uui-text-disabled);
886
- }
887
-
888
- .uui-color-cyan {
889
- --uui-main: var(--cyan-30);
890
- --uui-main-disabled: var(--uui-disabled);
891
- --uui-light: var(--cyan-20);
892
- --uui-lightest: var(--cyan-10);
893
- --uui-dark: var(--cyan-40);
894
- --uui-darkest: var(--cyan-50);
895
- --uui-caption: var(--uui-text-white);
896
- --uui-caption-contrast: var(--uui-text-white);
897
- --uui-caption-halftone: var(--cyan-50);
898
- --uui-caption-disabled: var(--uui-text-disabled);
899
- }
900
-
901
- .uui-color-mint {
902
- --uui-main: var(--mint-30);
903
- --uui-main-disabled: var(--uui-disabled);
904
- --uui-light: var(--mint-20);
905
- --uui-lightest: var(--mint-10);
906
- --uui-dark: var(--mint-40);
907
- --uui-darkest: var(--mint-50);
908
- --uui-caption: var(--uui-text-white);
909
- --uui-caption-contrast: var(--uui-text-white);
910
- --uui-caption-halftone: var(--mint-50);
911
- --uui-caption-disabled: var(--uui-text-disabled);
912
- }
728
+ /* ------------------------------------ */
913
729
 
914
730
  .tooltip-contrast,
915
731
  .tooltip-gray {
@@ -925,20 +741,20 @@
925
741
 
926
742
  .tooltip-critical,
927
743
  .tooltip-red {
928
- --uui-tooltip-bg: var(--uui-error-60);
744
+ --uui-tooltip-bg: var(--uui-error-dark);
929
745
  --uui-tooltip-text: var(--uui-text-white);
930
746
  }
931
747
 
932
748
  .button-blue, .button-primary {
933
749
  --uui-btn-bg: var(--uui-primary);
934
- --uui-btn-bg-hover: var(--uui-primary-60);
935
- --uui-btn-bg-active: var(--uui-primary-70);
750
+ --uui-btn-bg-hover: var(--uui-primary-dark);
751
+ --uui-btn-bg-active: var(--uui-primary-darkest);
936
752
  --uui-btn-bg-halftone: var(--white);
937
- --uui-btn-bg-halftone-hover: var(--uui-primary-10);
938
- --uui-btn-bg-halftone-active: var(--uui-primary-20);
753
+ --uui-btn-bg-halftone-hover: var(--uui-primary-lightest);
754
+ --uui-btn-bg-halftone-active: var(--uui-primary-light);
939
755
  --uui-btn-border: var(--uui-primary);
940
- --uui-btn-border-hover: var(--uui-primary-60);
941
- --uui-btn-border-active: var(--uui-primary-70);
756
+ --uui-btn-border-hover: var(--uui-primary-dark);
757
+ --uui-btn-border-active: var(--uui-primary-darkest);
942
758
  --uui-btn-bg-disabled: var(--uui-disabled);
943
759
  --uui-btn-border-disabled: var(--uui-disabled);
944
760
  --uui-btn-caption: var(--uui-text-white);
@@ -947,55 +763,55 @@
947
763
  }
948
764
 
949
765
  .button-green, .button-accent {
950
- --uui-btn-bg: var(--uui-accent-50);
951
- --uui-btn-bg-hover: var(--uui-accent-60);
952
- --uui-btn-bg-active: var(--uui-accent-70);
766
+ --uui-btn-bg: var(--uui-accent);
767
+ --uui-btn-bg-hover: var(--uui-accent-dark);
768
+ --uui-btn-bg-active: var(--uui-accent-darkest);
953
769
  --uui-btn-bg-halftone: var(--white);
954
- --uui-btn-bg-halftone-hover: var(--uui-accent-10);
955
- --uui-btn-bg-halftone-active: var(--uui-accent-20);
956
- --uui-btn-border: var(--uui-accent-50);
957
- --uui-btn-border-hover: var(--uui-accent-60);
958
- --uui-btn-border-active: var(--uui-accent-70);
770
+ --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
771
+ --uui-btn-bg-halftone-active: var(--uui-accent-light);
772
+ --uui-btn-border: var(--uui-accent);
773
+ --uui-btn-border-hover: var(--uui-accent-dark);
774
+ --uui-btn-border-active: var(--uui-accent-darkest);
959
775
  --uui-btn-bg-disabled: var(--uui-disabled);
960
776
  --uui-btn-border-disabled: var(--uui-disabled);
961
777
  --uui-btn-caption: var(--uui-text-white);
962
- --uui-btn-caption-halftone: var(--uui-accent-50);
778
+ --uui-btn-caption-halftone: var(--uui-accent);
963
779
  --uui-btn-caption-disabled: var(--uui-text-disabled);
964
780
  }
965
781
 
966
782
  .button-red, .button-negative {
967
- --uui-btn-bg: var(--uui-negative-50);
968
- --uui-btn-bg-hover: var(--uui-negative-60);
969
- --uui-btn-bg-active: var(--uui-negative-70);
783
+ --uui-btn-bg: var(--uui-negative);
784
+ --uui-btn-bg-hover: var(--uui-negative-dark);
785
+ --uui-btn-bg-active: var(--uui-negative-darkest);
970
786
  --uui-btn-bg-halftone: var(--white);
971
- --uui-btn-bg-halftone-hover: var(--uui-negative-10);
972
- --uui-btn-bg-halftone-active: var(--uui-negative-20);
973
- --uui-btn-border: var(--uui-negative-50);
974
- --uui-btn-border-hover: var(--uui-negative-60);
975
- --uui-btn-border-active: var(--uui-negative-70);
787
+ --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
788
+ --uui-btn-bg-halftone-active: var(--uui-negative-light);
789
+ --uui-btn-border: var(--uui-negative);
790
+ --uui-btn-border-hover: var(--uui-negative-dark);
791
+ --uui-btn-border-active: var(--uui-negative-darkest);
976
792
  --uui-btn-bg-disabled: var(--uui-disabled);
977
793
  --uui-btn-border-disabled: var(--uui-disabled);
978
794
  --uui-btn-caption: var(--uui-text-white);
979
- --uui-btn-caption-halftone: var(--uui-negative-50);
795
+ --uui-btn-caption-halftone: var(--uui-negative);
980
796
  --uui-btn-caption-disabled: var(--uui-text-disabled);
981
797
  }
982
798
 
983
799
  .button-gray50,
984
800
  .button-gray,
985
801
  .button-secondary {
986
- --uui-btn-bg: var(--uui-secondary-50);
987
- --uui-btn-bg-hover: var(--uui-secondary-60);
988
- --uui-btn-bg-active: var(--uui-secondary-70);
802
+ --uui-btn-bg: var(--uui-secondary);
803
+ --uui-btn-bg-hover: var(--uui-secondary-dark);
804
+ --uui-btn-bg-active: var(--uui-secondary-darkest);
989
805
  --uui-btn-bg-halftone: var(--white);
990
- --uui-btn-bg-halftone-hover: var(--uui-secondary-10);
991
- --uui-btn-bg-halftone-active: var(--uui-secondary-20);
992
- --uui-btn-border: var(--uui-secondary-50);
993
- --uui-btn-border-hover: var(--uui-secondary-60);
994
- --uui-btn-border-active: var(--uui-secondary-70);
806
+ --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
807
+ --uui-btn-bg-halftone-active: var(--uui-secondary-light);
808
+ --uui-btn-border: var(--uui-secondary);
809
+ --uui-btn-border-hover: var(--uui-secondary-dark);
810
+ --uui-btn-border-active: var(--uui-secondary-darkest);
995
811
  --uui-btn-bg-disabled: var(--uui-disabled);
996
812
  --uui-btn-border-disabled: var(--uui-disabled);
997
813
  --uui-btn-caption: var(--uui-text-white);
998
- --uui-btn-caption-halftone: var(--uui-secondary-60);
814
+ --uui-btn-caption-halftone: var(--uui-secondary-dark);
999
815
  --uui-btn-caption-disabled: var(--uui-text-disabled);
1000
816
  }
1001
817
 
@@ -1009,9 +825,9 @@
1009
825
 
1010
826
  .link-button-secondary,
1011
827
  .link-button-gray60 {
1012
- --uui-link-button-text: var(--uui-secondary-50);
1013
- --uui-link-button-text-hover: var(--uui-secondary-60);
1014
- --uui-link-button-text-active: var(--uui-secondary-70);
828
+ --uui-link-button-text: var(--uui-secondary);
829
+ --uui-link-button-text-hover: var(--uui-secondary-dark);
830
+ --uui-link-button-text-active: var(--uui-secondary-darkest);
1015
831
  --uui-link-button-text-disabled: var(--uui-text-disabled);
1016
832
  }
1017
833
 
@@ -1046,33 +862,33 @@
1046
862
 
1047
863
  .icon-button-blue,
1048
864
  .icon-button-info {
1049
- --uui-icon-btn: var(--uui-info-50);
1050
- --uui-icon-btn-hover: var(--uui-info-60);
1051
- --uui-icon-btn-active: var(--uui-info-70);
865
+ --uui-icon-btn: var(--uui-info);
866
+ --uui-icon-btn-hover: var(--uui-info-dark);
867
+ --uui-icon-btn-active: var(--uui-info-darkest);
1052
868
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
1053
869
  }
1054
870
 
1055
871
  .icon-button-green,
1056
872
  .icon-button-success {
1057
- --uui-icon-btn: var(--uui-success-50);
1058
- --uui-icon-btn-hover: var(--uui-success-60);
1059
- --uui-icon-btn-active: var(--uui-success-70);
873
+ --uui-icon-btn: var(--uui-success);
874
+ --uui-icon-btn-hover: var(--uui-success-dark);
875
+ --uui-icon-btn-active: var(--uui-success-darkest);
1060
876
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
1061
877
  }
1062
878
 
1063
879
  .icon-button-amber,
1064
880
  .icon-button-warning {
1065
- --uui-icon-btn: var(--uui-warning-50);
1066
- --uui-icon-btn-hover: var(--uui-warning-60);
1067
- --uui-icon-btn-active: var(--uui-warning-70);
881
+ --uui-icon-btn: var(--uui-warning);
882
+ --uui-icon-btn-hover: var(--uui-warning-dark);
883
+ --uui-icon-btn-active: var(--uui-warning-darkest);
1068
884
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
1069
885
  }
1070
886
 
1071
887
  .icon-button-red,
1072
888
  .icon-button-error {
1073
- --uui-icon-btn: var(--uui-error-50);
1074
- --uui-icon-btn-hover: var(--uui-error-60);
1075
- --uui-icon-btn-active: var(--uui-error-70);
889
+ --uui-icon-btn: var(--uui-error);
890
+ --uui-icon-btn-hover: var(--uui-error-dark);
891
+ --uui-icon-btn-active: var(--uui-error-darkest);
1076
892
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
1077
893
  }
1078
894
 
@@ -1093,40 +909,40 @@
1093
909
  .icon-button-gray60,
1094
910
  .icon-button-default,
1095
911
  .icon-button-secondary {
1096
- --uui-icon-btn: var(--uui-secondary-50);
1097
- --uui-icon-btn-hover: var(--uui-secondary-60);
1098
- --uui-icon-btn-active: var(--uui-secondary-70);
912
+ --uui-icon-btn: var(--uui-secondary);
913
+ --uui-icon-btn-hover: var(--uui-secondary-dark);
914
+ --uui-icon-btn-active: var(--uui-secondary-darkest);
1099
915
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
1100
916
  }
1101
917
 
1102
918
  .notification-card-amber,
1103
919
  .notification-card-warning {
1104
- --uui-notification-card-fill: var(--uui-warning-50);
1105
- --uui-notification-card-border: var(--uui-warning-50);
920
+ --uui-notification-card-fill: var(--uui-warning);
921
+ --uui-notification-card-border: var(--uui-warning);
1106
922
  --uui-notification-card-bg: var(--uui-surface);
1107
923
  --uui-notification-card-text: var(--uui-text-primary);
1108
924
  }
1109
925
 
1110
926
  .notification-card-success ,
1111
927
  .notification-card-green {
1112
- --uui-notification-card-fill: var(--uui-success-50);
1113
- --uui-notification-card-border: var(--uui-success-50);
928
+ --uui-notification-card-fill: var(--uui-success);
929
+ --uui-notification-card-border: var(--uui-success);
1114
930
  --uui-notification-card-bg: var(--uui-surface);
1115
931
  --uui-notification-card-text: var(--uui-text-primary);
1116
932
  }
1117
933
 
1118
934
  .notification-card-info,
1119
935
  .notification-card-blue {
1120
- --uui-notification-card-fill: var(--uui-info-50);
1121
- --uui-notification-card-border: var(--uui-info-50);
936
+ --uui-notification-card-fill: var(--uui-info);
937
+ --uui-notification-card-border: var(--uui-info);
1122
938
  --uui-notification-card-bg: var(--uui-surface);
1123
939
  --uui-notification-card-text: var(--uui-text-primary);
1124
940
  }
1125
941
 
1126
942
  .notification-card-error,
1127
943
  .notification-card-red {
1128
- --uui-notification-card-fill: var(--uui-error-50);
1129
- --uui-notification-card-border: var(--uui-error-50);
944
+ --uui-notification-card-fill: var(--uui-error);
945
+ --uui-notification-card-border: var(--uui-error);
1130
946
  --uui-notification-card-bg: var(--uui-surface);
1131
947
  --uui-notification-card-text: var(--uui-text-primary);
1132
948
  }
@@ -1141,33 +957,33 @@
1141
957
  .alert-error,
1142
958
  .alert-red {
1143
959
  --uui-alert-text: var(--uui-text-primary);
1144
- --uui-alert-bg: var(--uui-error-10);
1145
- --uui-alert-border: var(--uui-error-50);
1146
- --uui-alert-icon: var(--uui-error-50);
960
+ --uui-alert-bg: var(--uui-error-lightest);
961
+ --uui-alert-border: var(--uui-error);
962
+ --uui-alert-icon: var(--uui-error);
1147
963
  }
1148
964
 
1149
965
  .alert-warning,
1150
966
  .alert-amber {
1151
967
  --uui-alert-text: var(--uui-text-primary);
1152
- --uui-alert-bg: var(--uui-warning-10);
1153
- --uui-alert-border: var(--uui-warning-50);
1154
- --uui-alert-icon: var(--uui-warning-50);
968
+ --uui-alert-bg: var(--uui-warning-lightest);
969
+ --uui-alert-border: var(--uui-warning);
970
+ --uui-alert-icon: var(--uui-warning);
1155
971
  }
1156
972
 
1157
973
  .alert-success,
1158
974
  .alert-green {
1159
975
  --uui-alert-text: var(--uui-text-primary);
1160
- --uui-alert-bg: var(--uui-success-10);
1161
- --uui-alert-border: var(--uui-success-50);
1162
- --uui-alert-icon: var(--uui-success-50);
976
+ --uui-alert-bg: var(--uui-success-lightest);
977
+ --uui-alert-border: var(--uui-success);
978
+ --uui-alert-icon: var(--uui-success);
1163
979
  }
1164
980
 
1165
981
  .alert-info,
1166
982
  .alert-blue {
1167
983
  --uui-alert-text: var(--uui-text-primary);
1168
- --uui-alert-bg: var(--uui-info-10);
1169
- --uui-alert-border: var(--uui-info-50);
1170
- --uui-alert-icon: var(--uui-info-50);
984
+ --uui-alert-bg: var(--uui-info-lightest);
985
+ --uui-alert-border: var(--uui-info);
986
+ --uui-alert-icon: var(--uui-info);
1171
987
  }
1172
988
 
1173
989
  .badge-cyan {
@@ -1236,53 +1052,53 @@
1236
1052
  }
1237
1053
 
1238
1054
  .badge-info, .badge-blue {
1239
- --uui-badge-bg: var(--uui-info-50);
1240
- --uui-badge-bg-hover: var(--uui-info-60);
1241
- --uui-badge-bg-halftone: var(--uui-info-10);
1242
- --uui-badge-bg-halftone-hover: var(--uui-info-20);
1243
- --uui-badge-border-halftone: var(--uui-info-20);
1244
- --uui-badge-border-halftone-hover: var(--uui-info-50);
1055
+ --uui-badge-bg: var(--uui-info);
1056
+ --uui-badge-bg-hover: var(--uui-info-dark);
1057
+ --uui-badge-bg-halftone: var(--uui-info-lightest);
1058
+ --uui-badge-bg-halftone-hover: var(--uui-info-light);
1059
+ --uui-badge-border-halftone: var(--uui-info-light);
1060
+ --uui-badge-border-halftone-hover: var(--uui-info);
1245
1061
  --uui-badge-caption-solid: var(--uui-text-contrast);
1246
- --uui-badge-caption-halftone: var(--uui-info-70);
1062
+ --uui-badge-caption-halftone: var(--uui-info-darkest);
1247
1063
  --uui-badge-count: var(--uui-text-secondary);
1248
1064
  --uui-badge-count-bg: var(--white);
1249
1065
  }
1250
1066
 
1251
1067
  .badge-success, .badge-green {
1252
- --uui-badge-bg: var(--uui-success-50);
1253
- --uui-badge-bg-hover: var(--uui-success-60);
1254
- --uui-badge-bg-halftone: var(--uui-success-10);
1255
- --uui-badge-bg-halftone-hover: var(--uui-success-20);
1256
- --uui-badge-border-halftone: var(--uui-success-20);
1257
- --uui-badge-border-halftone-hover: var(--uui-success-50);
1068
+ --uui-badge-bg: var(--uui-success);
1069
+ --uui-badge-bg-hover: var(--uui-success-dark);
1070
+ --uui-badge-bg-halftone: var(--uui-success-lightest);
1071
+ --uui-badge-bg-halftone-hover: var(--uui-success-light);
1072
+ --uui-badge-border-halftone: var(--uui-success-light);
1073
+ --uui-badge-border-halftone-hover: var(--uui-success);
1258
1074
  --uui-badge-caption-solid: var(--uui-text-contrast);
1259
- --uui-badge-caption-halftone: var(--uui-success-70);
1075
+ --uui-badge-caption-halftone: var(--uui-success-darkest);
1260
1076
  --uui-badge-count: var(--uui-text-secondary);
1261
1077
  --uui-badge-count-bg: var(--white);
1262
1078
  }
1263
1079
 
1264
1080
  .badge-warning, .badge-amber {
1265
- --uui-badge-bg: var(--uui-warning-50);
1266
- --uui-badge-bg-hover: var(--uui-warning-60);
1267
- --uui-badge-bg-halftone: var(--uui-warning-10);
1268
- --uui-badge-bg-halftone-hover: var(--uui-warning-20);
1269
- --uui-badge-border-halftone: var(--uui-warning-20);
1270
- --uui-badge-border-halftone-hover: var(--uui-warning-50);
1081
+ --uui-badge-bg: var(--uui-warning);
1082
+ --uui-badge-bg-hover: var(--uui-warning-dark);
1083
+ --uui-badge-bg-halftone: var(--uui-warning-lightest);
1084
+ --uui-badge-bg-halftone-hover: var(--uui-warning-light);
1085
+ --uui-badge-border-halftone: var(--uui-warning-light);
1086
+ --uui-badge-border-halftone-hover: var(--uui-warning);
1271
1087
  --uui-badge-caption-solid: var(--uui-text-primary);
1272
- --uui-badge-caption-halftone: var(--uui-warning-70);
1088
+ --uui-badge-caption-halftone: var(--uui-warning-darkest);
1273
1089
  --uui-badge-count: var(--uui-text-secondary);
1274
1090
  --uui-badge-count-bg: var(--white);
1275
1091
  }
1276
1092
 
1277
1093
  .badge-error, .badge-red {
1278
- --uui-badge-bg: var(--uui-error-50);
1279
- --uui-badge-bg-hover: var(--uui-error-60);
1280
- --uui-badge-bg-halftone: var(--uui-error-10);
1281
- --uui-badge-bg-halftone-hover: var(--uui-error-20);
1282
- --uui-badge-border-halftone: var(--uui-error-20);
1283
- --uui-badge-border-halftone-hover: var(--uui-error-50);
1094
+ --uui-badge-bg: var(--uui-error);
1095
+ --uui-badge-bg-hover: var(--uui-error-dark);
1096
+ --uui-badge-bg-halftone: var(--uui-error-lightest);
1097
+ --uui-badge-bg-halftone-hover: var(--uui-error-light);
1098
+ --uui-badge-border-halftone: var(--uui-error-light);
1099
+ --uui-badge-border-halftone-hover: var(--uui-error);
1284
1100
  --uui-badge-caption-solid: var(--white);
1285
- --uui-badge-caption-halftone: var(--uui-error-70);
1101
+ --uui-badge-caption-halftone: var(--uui-error-darkest);
1286
1102
  --uui-badge-count: var(--uui-text-secondary);
1287
1103
  --uui-badge-count-bg: var(--white);
1288
1104
  }