@epam/assets 5.1.0 → 5.1.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.
Files changed (10) hide show
  1. package/css/theme/theme_loveship.css +168 -163
  2. package/css/theme/theme_loveship.css.map +1 -1
  3. package/css/theme/theme_promo.css +209 -222
  4. package/css/theme/theme_promo.css.map +1 -1
  5. package/css/theme/theme_vanilla_thunder.css +63 -72
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  7. package/package.json +2 -2
  8. package/theme/theme_loveship.scss +185 -171
  9. package/theme/theme_promo.scss +234 -237
  10. package/theme/theme_vanilla_thunder.scss +83 -77
package/theme/theme_promo.scss CHANGED
@@ -107,6 +107,8 @@
107
107
  --mint-40: #2E9E68;
108
108
  --mint-50: #236E4A;
109
109
 
110
+ /* core variables start */
111
+
110
112
  --uui-accent: var(--green);
111
113
  --uui-accent-light: var(--green-light);
112
114
  --uui-accent-lightest: var(--green-lightest);
@@ -116,7 +118,6 @@
116
118
  --uui-primary: var(--blue);
117
119
  --uui-primary-light: var(--blue-light);
118
120
  --uui-primary-lightest: var(--blue-lightest);
119
- --uui-primary-halftone: var(--blue-lightest); // TODO: why we have that?
120
121
  --uui-primary-dark: var(--blue-dark);
121
122
  --uui-primary-darkest: var(--blue-darkest);
122
123
 
@@ -125,8 +126,6 @@
125
126
  --uui-secondary-lightest: var(--gray20);
126
127
  --uui-secondary-dark: var(--gray70);
127
128
  --uui-secondary-darkest: var(--gray80);
128
- --uui-secondary-hover: var(--gray60);
129
- --uui-secondary-active: var(--gray70);
130
129
 
131
130
  --uui-negative: var(--red);
132
131
  --uui-negative-light: var(--red-light);
@@ -136,111 +135,115 @@
136
135
 
137
136
  --uui-link: var(--blue);
138
137
  --uui-link-hover: var(--blue-dark);
138
+ --uui-link-wite-hover: var(--gray40);
139
+ --uui-link-black-hover: var(--gray80);
139
140
  --uui-link-visited: #5214CC;
140
141
  --uui-link-disabled: var(--gray50);
141
- --uui-visited: #5214CC;
142
142
 
143
143
  --uui-info: var(--blue);
144
+ --uui-info-soft: var(--blue-soft);
144
145
  --uui-info-lightest: var(--blue-lightest);
145
146
  --uui-info-light: var(--blue-light);
146
147
  --uui-info-dark: var(--blue-dark);
147
148
  --uui-info-darkest: var(--blue-darkest);
148
- --uui-info-hover: var(--blue-dark);
149
- --uui-info-active: var(--blue-darkest);
150
149
 
151
150
  --uui-success: var(--green);
151
+ --uui-success-soft: var(--green-soft);
152
152
  --uui-success-lightest: var(--green-lightest);
153
153
  --uui-success-light: var(--green-light);
154
154
  --uui-success-dark: var(--green-dark);
155
155
  --uui-success-darkest: var(--green-darkest);
156
- --uui-success-hover: var(--green-dark);
157
- --uui-success-active: var(--green-darkest);
158
156
 
159
157
  --uui-warning: var(--amber);
158
+ --uui-warning-soft: var(--amber-soft);
160
159
  --uui-warning-lightest: var(--amber-lightest);
161
160
  --uui-warning-light: var(--amber-light);
162
161
  --uui-warning-dark: var(--amber-dark);
163
162
  --uui-warning-darkest: var(--amber-darkest);
164
- --uui-warning-hover: var(--amber-dark);
165
- --uui-warning-active: var(--amber-darkest);
166
163
 
167
164
  --uui-error: var(--red);
165
+ --uui-error-soft: var(--red-soft);
168
166
  --uui-error-lightest: var(--red-lightest);
169
167
  --uui-error-light: var(--red-light);
170
168
  --uui-error-dark: var(--red-dark);
171
169
  --uui-error-darkest: var(--red-darkest);
172
- --uui-error-hover: var(--red-dark);
173
- --uui-error-active: var(--red-darkest);
174
170
 
175
171
  --uui-icon: var(--gray60);
176
172
  --uui-icon-hover: var(--gray70);
177
173
  --uui-icon-active: var(--gray80);
178
174
  --uui-icon-disabled: var(--gray50);
179
175
 
176
+ /* Surfaces Figma - https://www.figma.com/file/UyChXPLmyv5zMrOU37KdUL/Promo-aka-UUI4-(Components)?type=design&node-id=39112-321568&mode=dev */
177
+
178
+ --uui-app-bg: var(--gray10);
179
+ --uui-overlay: rgba(29, 30, 38, 0.8);
180
+
180
181
  --uui-surface: var(--white);
181
- --uui-surface-hover: var(--gray30);
182
- --uui-surface-inverted: var(--gray90);
183
- /* new start */
184
- --uui-surface-light: var(--gray5);
185
- --uui-surface-light-hover: var(--gray10);
186
- --uui-surface-contrast: var(--gray80);
187
- --uui-surface-contrast-hover: var(--gray90);
188
- --uui-surface-contrast-active: var(--gray90);
189
- /* new end */
190
-
191
- --uui-background: var(--gray10);
192
- --uui-divider: var(--gray40);
193
- --uui-divider-light: var(--gray30);
194
- --uui-contrast: var(--white);
195
- --uui-disabled: var(--gray30);
182
+ --uui-surface-low: var(--gray5);
183
+ --uui-surface-lower: var(--gray10);
184
+ --uui-surface-lowest: var(--gray20);
185
+ --uui-surface-contrast: var(--gray70);
186
+ --uui-surface-contrast-low: var(--gray80);
187
+ --uui-surface-contrast-lower: var(--gray90);
196
188
 
197
- --uui-scroll-bars-bg: var(--gray40);
198
- --uui-scroll-bars-bg-active: var(--gray60);
189
+ --uui-surface-active: var(--blue-lightest);
190
+ --uui-surface-critical: var(--red-lightest);
191
+ --uui-surface-warning: var(--amber-lightest);
199
192
 
200
- --uui-button-bg-halftone: var(--white);
201
- --uui-button-caption-disabled: var(--gray50);
193
+ --uui-divider: var(--gray40);
194
+ --uui-divider-light: var(--gray30);
202
195
 
203
- --uui-text-info: var(--uui-info);
204
- --uui-text-warning: var(--uui-warning);
205
- --uui-text-error: var(--uui-error);
206
- --uui-text-success: var(--uui-success);
207
196
  --uui-text-brand: var(--gray90);
208
197
  --uui-text-primary: var(--gray80);
209
- --uui-text-secondary: var(--gray60);
198
+ --uui-text-secondary: var(--gray70);
199
+ --uui-text-tertiary: var(--gray60);
210
200
  --uui-text-disabled: var(--gray50);
211
201
  --uui-text-contrast: var(--gray5);
212
202
  --uui-text-white: var(--white);
203
+ --uui-text-dark: var(--gray80);
204
+
205
+ --uui-text-info: var(--uui-info);
206
+ --uui-text-warning: var(--uui-warning);
207
+ --uui-text-error: var(--uui-error);
208
+ --uui-text-success: var(--uui-success);
209
+
210
+ /* not accepted part */
211
+
212
+ --uui-disabled: var(--gray30); // TODO: name does not clearly reflect the meaning
213
+
214
+ /* control specific */
215
+
216
+ --uui-scroll_bars-bg: var(--gray40);
217
+ --uui-scroll_bars-bg-active: var(--gray60);
218
+
219
+ --uui-button-bg-halftone: var(--white);
213
220
 
214
221
  --uui-control-bg: var(--white);
215
- --uui-control-bg-checked: var(--uui-primary);
216
- --uui-control-bg-checked-hover: var(--uui-primary-dark);
217
- --uui-control-bg-checked-disabled: var(--uui-primary-light);
218
222
  --uui-control-bg-hover: var(--gray60);
219
223
  --uui-control-bg-disabled: var(--gray5);
220
224
  --uui-control-bg-readonly: var(--gray5);
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);
221
228
  --uui-control_switch-bg: var(--gray40);
222
- --uui-control_switch_toggler-bg: var(--white);
229
+ --uui-control_switch-toggler-bg: var(--white);
223
230
 
224
- --uui-control-border-checked-disabled: var(--uui-primary-light);
225
231
  --uui-control-border: var(--gray40);
232
+ --uui-control-border-hover: var(--uui-primary-dark);
233
+ --uui-control-border-disabled: var(--gray30);
234
+ --uui-control-border-readonly: var(--gray30);
226
235
  --uui-control-border-checked: var(--uui-primary);
227
236
  --uui-control-border-checked-hover: var(--uui-primary-dark);
228
- --uui-control-border-hover: var(--uui-primary-dark);
229
- --uui-control-border-disabled: var(--uui-disabled);
230
- --uui-control-border-readonly: var(--uui-disabled);
237
+ --uui-control-border-checked-disabled: var(--uui-primary-light);
231
238
 
232
239
  --uui-control_switch-border-hover: var(--gray60);
233
240
  --uui-control_textinput-border-hover: var(--gray60);
234
241
 
235
242
  --uui-control-label: var(--uui-text-primary);
236
243
  --uui-control-label-disabled: var(--uui-text-disabled);
237
- --uui-control-label-error: var(--uui-error);
238
- --uui-control-label-fill: var(--uui-icon);
239
- --uui-control-label-optional-text: var(--uui-text-secondary);
240
- --uui-control-label-asterisk: var(--uui-error);
241
244
 
242
- --uui-control-placeholder: var(--uui-text-secondary);
243
- --uui-control-placeholder-disabled: var(--uui-text-disabled);
245
+ --uui-control-placeholder: var(--gray60);
246
+ --uui-control-placeholder-disabled: var(--gray50);
244
247
 
245
248
  --uui-control-text: var(--uui-text-primary);
246
249
  --uui-control-text-disabled: var(--uui-text-disabled);
@@ -256,7 +259,6 @@
256
259
  --uui-skeleton: var(--gray40);
257
260
  --uui-skeleton-gradient: linear-gradient(90deg, var(--gray40) 0%, var(--gray10) 50%, var(--gray40) 100%);
258
261
 
259
- --uui-overlay: rgba(29, 30, 38, 0.8);
260
262
  --uui-border-radius: 0;
261
263
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
262
264
  --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
@@ -273,7 +275,7 @@
273
275
  --uui-text-input-border: var(--uui-control-border);
274
276
  --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
275
277
  --uui-text-input-border-active: var(--uui-control-border-checked);
276
- --uui-text-input-border-error: var(--uui-negative);
278
+ --uui-text-input-border-error: var(--uui-error);
277
279
  --uui-text-input-border-disabled: var(--uui-control-border-disabled);
278
280
  --uui-text-input-border-readonly: var(--uui-control-border-readonly);
279
281
  --uui-text-input-placeholder: var(--uui-control-placeholder);
@@ -298,13 +300,9 @@
298
300
 
299
301
  /* DatePicker vars */
300
302
  --uui-dtp-title-bg: var(--uui-control-bg);
301
- --uui-dtp-title-bg-hover: var(--uui-primary-halftone);
302
303
  --uui-dtp-text-selected: var(--uui-control-border-checked);
303
304
  --uui-dtp-text: var(--uui-control-text);
304
- --uui-dtp-next-prev-icon: var(--uui-icon);
305
- --uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);
306
305
 
307
- --uui-dtp_header-font: var(--font-semibold);
308
306
  --uui-dtp_body-content-font: var(--font-regular);
309
307
 
310
308
  /* RangeDatePicker vars */
@@ -318,18 +316,17 @@
318
316
  --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
319
317
  --uui-calendar-text: var(--uui-control-text);
320
318
  --uui-calendar-text-filtered: var(--uui-control-text-disabled);
321
- --uui-calendar-bg-selected: var(--uui-secondary);
322
319
 
323
320
  --uui-calendar-content-font: var(--font-regular);
324
321
  --uui-calendar-weekday-font: var(--font-regular);
325
322
  --uui-calendar-selected_day-font: var(--font-semibold);
326
323
 
327
324
  /* tab-button-vars */
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);
325
+ --uui-tab_button-text: var(--uui-text-primary);
326
+ --uui-tab_button-text-hover: var(--uui-primary);
327
+ --uui-tab_button-text-active: var(--uui-primary);
328
+ --uui-tab_button-text-disabled: var(--uui-text-disabled);
329
+ --uui-tab_button-font: var(--font-semibold);
333
330
 
334
331
  /* radio-input-vars */
335
332
  --uui-radio-input-bg: var(--uui-control-bg);
@@ -373,7 +370,6 @@
373
370
  --uui-tag-fill-hover: var(--uui-icon-hover);
374
371
  --uui-tag-count-bg: var(--uui-surface);
375
372
  --uui-tag-count: var(--uui-text-secondary);
376
- --uui-tag-label: var(--uui-text-secondary);
377
373
  --uui-tag-border-radius: var(--uui-border-radius);
378
374
 
379
375
  --uui-tag-font: var(--font-regular);
@@ -386,7 +382,7 @@
386
382
  --uui-text-area-border-disabled: var(--uui-control-border-disabled);
387
383
  --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
388
384
  --uui-text-area-border-active: var(--uui-control-border-checked);
389
- --uui-text-area-border-error: var(--uui-negative);
385
+ --uui-text-area-border-error: var(--uui-error);
390
386
  --uui-text-area-placeholder: var(--uui-control-placeholder);
391
387
  --uui-text-area-text: var(--uui-control-text);
392
388
  --uui-text-area-text-disabled: var(--uui-control-text-disabled);
@@ -417,7 +413,7 @@
417
413
  --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
418
414
  --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
419
415
  --uui-picker-toggler-border-active: var(--uui-control-border-checked);
420
- --uui-picker-toggler-border-error: var(--uui-negative);
416
+ --uui-picker-toggler-border-error: var(--uui-error);
421
417
  --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
422
418
  --uui-picker-toggler-text: var(--uui-control-text);
423
419
  --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);
@@ -449,7 +445,7 @@
449
445
  --uui-labeled-input-error: var(--uui-error);
450
446
  --uui-labeled-input-fill: var(--uui-icon);
451
447
  --uui-labeled-input-info-fill: var(--uui-icon);
452
- --uui-labeled-input-optional-text: var(--uui-text-secondary);
448
+ --uui-labeled-input-optional-text: var(--uui-text-tertiary);
453
449
  --uui-labeled-input-asterisk: var(--uui-error);
454
450
 
455
451
  --uui-labeled-input-font: var(--font-semibold);
@@ -487,7 +483,7 @@
487
483
  --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);
488
484
  --uui-switch-label: var(--uui-control-label);
489
485
  --uui-switch-label-disabled: var(--uui-control-label-disabled);
490
- --uui-switch-toggler-bg: var(--uui-control_switch_toggler-bg);
486
+ --uui-switch-toggler-bg: var(--uui-control_switch-toggler-bg);
491
487
  --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
492
488
  --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);
493
489
  --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
@@ -507,8 +503,8 @@
507
503
  --uui-dropdown-menu-bg: var(--uui-surface);
508
504
  --uui-dropdown-menu-shadow: var(--uui-shadow-level-2);
509
505
  --uui-dropdown-menu-splitter: var(--uui-divider);
510
- --uui-dropdown-menu-item-hover: var(--uui-surface-hover);
511
- --uui-dropdown-menu-item-active: var(--uui-surface-hover);
506
+ --uui-dropdown-menu-item-hover: var(--uui-surface-lowest);
507
+ --uui-dropdown-menu-item-active: var(--uui-surface-lowest);
512
508
  --uui-dropdown-menu-item-text: var(--uui-text-primary);
513
509
 
514
510
  --uui-dropdown-menu-body-font: var(--font-regular);
@@ -517,12 +513,13 @@
517
513
  /* MainMenu */
518
514
  --uui-main_menu-text: var(--uui-text-contrast);
519
515
  --uui-main_menu-text-active: var(--uui-text-contrast);
520
- --uui-main_menu-bg: var(--uui-surface-contrast);
521
- --uui-main_menu-hover: var(--uui-surface-contrast-hover);
522
- --uui-main_menu-active: var(--uui-surface-contrast-active);
516
+ --uui-main_menu-bg: var(--uui-surface-contrast-low);
517
+ --uui-main_menu-hover: var(--uui-surface-contrast-lower);
518
+ --uui-main_menu-active: var(--uui-surface-contrast-lower);
523
519
  --uui-main_menu-border-active: var(--uui-primary);
524
520
 
525
- --uui-main_menu-dropdown-bg: var(--uui-surface-inverted);
521
+ --uui-main_menu-dropdown-bg: var(--uui-surface-contrast-lower);
522
+ --uui-main_menu-dropdown-bg-hover: var(--uui-surface-contrast-low);
526
523
  --uui-main_menu-dropdown-hover: var(--uui-primary);
527
524
  --uui-main_menu-dropdown-shadow: none;
528
525
  --uui-main_menu-dropdown-border-radius: none;
@@ -530,7 +527,7 @@
530
527
  --uui-main_menu-search-bg: var(--uui-secondary-darkest);
531
528
  --uui-main_menu-search-border: var(--uui-secondary-darkest);
532
529
  --uui-main_menu-search-placeholder: var(--uui-text-disabled);
533
- --uui-main_menu-search-text: var(--uui-contrast);
530
+ --uui-main_menu-search-text: var(--uui-text-disabled);
534
531
  --uui-main_menu-search-icon: var(--uui-icon-disabled);
535
532
 
536
533
  --uui-main_menu-icon: var(--uui-text-contrast);
@@ -541,8 +538,8 @@
541
538
  --uui-main_menu-search-font: var(--font-regular);
542
539
 
543
540
  /* BurgerMenu */
544
- --uui-burger_menu-bg: var(--uui-surface-inverted);
545
- --uui-burger_menu-bg-hover: var(--uui-primary-dark);
541
+ --uui-burger_menu-bg: var(--uui-surface-contrast-lower);
542
+ --uui-burger_menu-bg-hover: var(--uui-surface-contrast-lower);
546
543
  --uui-burger_menu-caption: var(--uui-text-contrast);
547
544
  --uui-burger_menu-caption-hover: var(--uui-primary);
548
545
  --uui-burger_menu-overlay: var(--uui-overlay);
@@ -579,7 +576,7 @@
579
576
  --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
580
577
  --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
581
578
  --uui-numeric-input-border-active: var(--uui-control-border-checked);
582
- --uui-numeric-input-border-error: var(--uui-negative);
579
+ --uui-numeric-input-border-error: var(--uui-error);
583
580
  --uui-numeric-input-placeholder: var(--uui-control-placeholder);
584
581
  --uui-numeric-input-text: var(--uui-control-text);
585
582
  --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);
@@ -594,7 +591,7 @@
594
591
  --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
595
592
  --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
596
593
  --uui-time-picker-border-active: var(--uui-control-border-checked);
597
- --uui-time-picker-border-error: var(--uui-negative);
594
+ --uui-time-picker-border-error: var(--uui-error);
598
595
  --uui-time-picker-placeholder: var(--uui-control-placeholder);
599
596
  --uui-time-picker-text: var(--uui-control-text);
600
597
  --uui-time-picker-text-disabled: var(--uui-control-text-disabled);
@@ -609,7 +606,7 @@
609
606
  --uui-search-input-border-disabled: var(--uui-control-border-disabled);
610
607
  --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
611
608
  --uui-search-input-border-active: var(--uui-control-border-checked);
612
- --uui-search-input-border-error: var(--uui-negative);
609
+ --uui-search-input-border-error: var(--uui-error);
613
610
  --uui-search-input-placeholder: var(--uui-control-placeholder);
614
611
  --uui-search-input-text: var(--uui-control-text);
615
612
  --uui-search-input-text-disabled: var(--uui-control-text-disabled);
@@ -629,10 +626,11 @@
629
626
  --uui-filters-toggler-border-hover: var(--uui-text-input-border-hover);
630
627
  --uui-filters-toggler-border-radius: var(--uui-border-radius);
631
628
  --uui-filters-toggler-bg: var(--uui-surface);
632
- --uui-filters-toggler-bg-hover: var(--uui-surface-light-hover);
629
+ --uui-filters-toggler-bg-hover: var(--uui-surface-lower);
633
630
  --uui-filters-toggler-text: var(--uui-text-brand);
634
- --uui-filters-toggler-label: var(--uui-text-secondary);
635
- --uui-filters-toggler-icon: var(--uui-icon-active);
631
+ --uui-filters-toggler-label: var(--uui-text-tertiary);
632
+ --uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);
633
+ --uui-filters-toggler-shadow: none;
636
634
 
637
635
  --uui-filters-toggler-font: var(--font-regular);
638
636
  --uui-filters-panel-header-font: var(--font-regular);
@@ -654,8 +652,7 @@
654
652
  --uui-spinner: var(--uui-primary);
655
653
 
656
654
  /* Blocker */
657
- --uui-blocker-bg: var(--uui-background);
658
- --uui-blocker-bg-with-opacity: #F5F6FA80;
655
+ --uui-blocker-bg: var(--uui-app-bg);
659
656
 
660
657
  /* FlexRow */
661
658
  --uui-flex-row-border-bottom: 1px solid var(--uui-divider);
@@ -670,12 +667,12 @@
670
667
  --uui-dt-cell-border-focus: var(--uui-control-border-checked);
671
668
 
672
669
  --uui-dt-row-bg: var(--uui-surface);
673
- --uui-dt-row-bg-hover: var(--uui-surface-light-hover);
670
+ --uui-dt-row-bg-hover: var(--uui-surface-lower);
674
671
  --uui-dt-row-bg-invalid: #FEF7F6;
675
672
  --uui-dt-row-bg-selected: #EBF7FF;
676
673
 
677
- --uui-dt-header-row-bg: var(--uui-surface-light);
678
- --uui-dt-header-row-bg-hover: var(--uui-surface-hover);
674
+ --uui-dt-header-row-bg: var(--uui-surface-low);
675
+ --uui-dt-header-row-bg-hover: var(--uui-surface-lowest);
679
676
 
680
677
  --uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
681
678
  --uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
@@ -703,7 +700,7 @@
703
700
  .tooltip-contrast,
704
701
  .tooltip-gray {
705
702
  --uui-tooltip-bg: var(--uui-surface-contrast);
706
- --uui-tooltip-text: var(--uui-contrast);
703
+ --uui-tooltip-text: var(--uui-text-contrast);
707
704
  }
708
705
 
709
706
  .tooltip-default,
@@ -715,124 +712,7 @@
715
712
  .tooltip-critical,
716
713
  .tooltip-red {
717
714
  --uui-tooltip-bg: var(--uui-error-dark);
718
- --uui-tooltip-text: var(--uui-contrast);
719
- }
720
-
721
- .badge-cyan {
722
- --uui-badge-bg: var(--cyan-30);
723
- --uui-badge-bg-hover: var(--cyan-40);
724
- --uui-badge-caption-solid: var(--white);
725
- --uui-badge-caption-halftone: var(--cyan-50);
726
- --uui-badge-count-bg: var(--white);
727
- --uui-badge-count: var(--uui-text-secondary);
728
- --uui-badge-bg-halftone: var(--cyan-10);
729
- --uui-badge-bg-halftone-hover: var(--cyan-20);
730
- --uui-badge-border-halftone: var(--cyan-20);
731
- --uui-badge-border-halftone-hover: var(--cyan-30);
732
- }
733
-
734
- .badge-violet {
735
- --uui-badge-bg: var(--violet-30);
736
- --uui-badge-bg-hover: var(--violet-40);
737
- --uui-badge-caption-solid: var(--white);
738
- --uui-badge-caption-halftone: var(--violet-50);
739
- --uui-badge-count-bg: var(--white);
740
- --uui-badge-count: var(--uui-text-secondary);
741
- --uui-badge-bg-halftone: var(--violet-10);
742
- --uui-badge-bg-halftone-hover: var(--violet-20);
743
- --uui-badge-border-halftone: var(--violet-20);
744
- --uui-badge-border-halftone-hover: var(--violet-30);
745
- }
746
-
747
- .badge-orange {
748
- --uui-badge-bg: var(--orange-30);
749
- --uui-badge-bg-hover: var(--orange-40);
750
- --uui-badge-caption-solid: var(--white);
751
- --uui-badge-caption-halftone: var(--orange-50);
752
- --uui-badge-count-bg: var(--white);
753
- --uui-badge-count: var(--uui-text-secondary);
754
- --uui-badge-bg-halftone: var(--orange-10);
755
- --uui-badge-bg-halftone-hover: var(--orange-20);
756
- --uui-badge-border-halftone: var(--orange-20);
757
- --uui-badge-border-halftone-hover: var(--orange-30);
758
- }
759
-
760
- .badge-purple {
761
- --uui-badge-bg: var(--purple-30);
762
- --uui-badge-bg-hover: var(--purple-40);
763
- --uui-badge-caption-solid: var(--white);
764
- --uui-badge-caption-halftone: var(--purple-50);
765
- --uui-badge-count-bg: var(--white);
766
- --uui-badge-count: var(--uui-text-secondary);
767
- --uui-badge-bg-halftone: var(--purple-10);
768
- --uui-badge-bg-halftone-hover: var(--purple-20);
769
- --uui-badge-border-halftone: var(--purple-20);
770
- --uui-badge-border-halftone-hover: var(--purple-30);
771
- }
772
-
773
- .badge-default, .badge-gray30 {
774
- --uui-badge-bg: var(--gray30);
775
- --uui-badge-bg-hover: var(--gray40);
776
- --uui-badge-caption-solid: var(--uui-text-primary);
777
- --uui-badge-caption-halftone: var(--uui-text-primary);
778
- --uui-badge-count-bg: var(--white);
779
- --uui-badge-count: var(--uui-text-secondary);
780
- --uui-badge-bg-halftone: var(--gray20);
781
- --uui-badge-bg-halftone-hover: var(--gray30);
782
- --uui-badge-border-halftone: var(--gray40);
783
- --uui-badge-border-halftone-hover: var(--gray50);
784
- }
785
-
786
- .badge-info, .badge-blue {
787
- --uui-badge-bg: var(--uui-info);
788
- --uui-badge-bg-hover: var(--uui-info-dark);
789
- --uui-badge-caption-solid: var(--uui-contrast);
790
- --uui-badge-caption-halftone: var(--uui-info-darkest);
791
- --uui-badge-count-bg: var(--white);
792
- --uui-badge-count: var(--uui-text-secondary);
793
- --uui-badge-bg-halftone: var(--uui-info-lightest);
794
- --uui-badge-bg-halftone-hover: var(--uui-info-light);
795
- --uui-badge-border-halftone: var(--uui-info-light);
796
- --uui-badge-border-halftone-hover: var(--uui-info);
797
- }
798
-
799
- .badge-success, .badge-green {
800
- --uui-badge-bg: var(--uui-success);
801
- --uui-badge-bg-hover: var(--uui-success-dark);
802
- --uui-badge-caption-solid: var(--uui-contrast);
803
- --uui-badge-caption-halftone: var(--uui-success-darkest);
804
- --uui-badge-count-bg: var(--white);
805
- --uui-badge-count: var(--uui-text-secondary);
806
- --uui-badge-bg-halftone: var(--uui-success-lightest);
807
- --uui-badge-bg-halftone-hover: var(--uui-success-light);
808
- --uui-badge-border-halftone: var(--uui-success-light);
809
- --uui-badge-border-halftone-hover: var(--uui-success);
810
- }
811
-
812
- .badge-warning, .badge-amber {
813
- --uui-badge-bg: var(--uui-warning);
814
- --uui-badge-bg-hover: var(--uui-warning-dark);
815
- --uui-badge-caption-solid: var(--uui-text-primary);
816
- --uui-badge-caption-halftone: var(--uui-warning-darkest);
817
- --uui-badge-count-bg: var(--white);
818
- --uui-badge-count: var(--uui-text-secondary);
819
- --uui-badge-bg-halftone: var(--uui-warning-lightest);
820
- --uui-badge-bg-halftone-hover: var(--uui-warning-light);
821
- --uui-badge-border-halftone: var(--uui-warning-light);
822
- --uui-badge-border-halftone-hover: var(--uui-warning);
823
- }
824
-
825
- .badge-error, .badge-red {
826
- --uui-badge-bg: var(--uui-error);
827
- --uui-badge-bg-hover: var(--uui-error-dark);
828
- --uui-badge-caption-solid: var(--uui-contrast);
829
- --uui-badge-caption-halftone: var(--uui-error-darkest);
830
- --uui-badge-count-bg: var(--white);
831
- --uui-badge-count: var(--uui-text-secondary);
832
- --uui-badge-bg-halftone: var(--uui-error-lightest);
833
- --uui-badge-bg-halftone-hover: var(--uui-error-light);
834
- --uui-badge-border-halftone: var(--uui-error-light);
835
- --uui-badge-border-halftone-hover: var(--uui-error);
715
+ --uui-tooltip-text: var(--uui-text-white);
836
716
  }
837
717
 
838
718
  .button-blue, .button-primary {
@@ -847,9 +727,9 @@
847
727
  --uui-btn-border-active: var(--uui-primary-darkest);
848
728
  --uui-btn-bg-disabled: var(--uui-disabled);
849
729
  --uui-btn-border-disabled: var(--uui-disabled);
850
- --uui-btn-caption: var(--uui-contrast);
730
+ --uui-btn-caption: var(--uui-text-white);
851
731
  --uui-btn-caption-halftone: var(--uui-primary);
852
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
732
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
853
733
  }
854
734
 
855
735
  .button-green, .button-accent {
@@ -864,9 +744,9 @@
864
744
  --uui-btn-border-active: var(--uui-accent-darkest);
865
745
  --uui-btn-bg-disabled: var(--uui-disabled);
866
746
  --uui-btn-border-disabled: var(--uui-disabled);
867
- --uui-btn-caption: var(--uui-contrast);
747
+ --uui-btn-caption: var(--uui-text-white);
868
748
  --uui-btn-caption-halftone: var(--uui-accent);
869
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
749
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
870
750
  }
871
751
 
872
752
  .button-red, .button-negative {
@@ -881,9 +761,9 @@
881
761
  --uui-btn-border-active: var(--uui-negative-darkest);
882
762
  --uui-btn-bg-disabled: var(--uui-disabled);
883
763
  --uui-btn-border-disabled: var(--uui-disabled);
884
- --uui-btn-caption: var(--uui-contrast);
764
+ --uui-btn-caption: var(--uui-text-white);
885
765
  --uui-btn-caption-halftone: var(--uui-negative);
886
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
766
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
887
767
  }
888
768
 
889
769
  .button-gray50,
@@ -900,9 +780,9 @@
900
780
  --uui-btn-border-active: var(--uui-secondary-darkest);
901
781
  --uui-btn-bg-disabled: var(--uui-disabled);
902
782
  --uui-btn-border-disabled: var(--uui-disabled);
903
- --uui-btn-caption: var(--uui-contrast);
783
+ --uui-btn-caption: var(--uui-text-white);
904
784
  --uui-btn-caption-halftone: var(--uui-secondary-dark);
905
- --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
785
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
906
786
  }
907
787
 
908
788
  .link-button-primary,
@@ -910,7 +790,7 @@
910
790
  --uui-link-button-text: var(--blue);
911
791
  --uui-link-button-text-hover: var(--blue-dark);
912
792
  --uui-link-button-text-active: var(--blue-darkest);
913
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
793
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
914
794
  }
915
795
 
916
796
  .link-button-secondary,
@@ -918,7 +798,7 @@
918
798
  --uui-link-button-text: var(--uui-secondary);
919
799
  --uui-link-button-text-hover: var(--uui-secondary-dark);
920
800
  --uui-link-button-text-active: var(--uui-secondary-darkest);
921
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
801
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
922
802
  }
923
803
 
924
804
  .link-button-contrast,
@@ -926,28 +806,28 @@
926
806
  --uui-link-button-text: var(--gray10);
927
807
  --uui-link-button-text-hover: var(--gray20);
928
808
  --uui-link-button-text-active: var(--gray30);
929
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
809
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
930
810
  }
931
811
 
932
812
  .link-button-green {
933
813
  --uui-link-button-text: var(--green);
934
814
  --uui-link-button-text-hover: var(--green-dark);
935
815
  --uui-link-button-text-active: var(--green-darkest);
936
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
816
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
937
817
  }
938
818
 
939
819
  .link-button-amber {
940
820
  --uui-link-button-text: var(--amber);
941
821
  --uui-link-button-text-hover: var(--amber-dark);
942
822
  --uui-link-button-text-active: var(--amber-darkest);
943
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
823
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
944
824
  }
945
825
 
946
826
  .link-button-red {
947
827
  --uui-link-button-text: var(--red);
948
828
  --uui-link-button-text-hover: var(--red-dark);
949
829
  --uui-link-button-text-active: var(--red-darkest);
950
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
830
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
951
831
  }
952
832
 
953
833
  .icon-button-blue,
@@ -983,10 +863,10 @@
983
863
  }
984
864
 
985
865
  .icon-button-gray30 {
986
- --uui-icon-btn: var(--uui-secondary-light);
987
- --uui-icon-btn-hover: var(--uui-button-bg-halftone);
988
- --uui-icon-btn-active: var(--uui-text-contrast);
989
- --uui-icon-btn-disabled: var(--uui-icon-disabled);;
866
+ --uui-icon-btn: var(--gray30);
867
+ --uui-icon-btn-hover: var(--white);
868
+ --uui-icon-btn-active: var(--gray5);
869
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
990
870
  }
991
871
 
992
872
  .icon-button-gray50 {
@@ -1038,8 +918,8 @@
1038
918
  }
1039
919
 
1040
920
  .notification-card-gray60 {
1041
- --uui-notification-card-fill: var(--uui-secondary-dark);
1042
- --uui-notification-card-border: var(--uui-secondary-dark);
921
+ --uui-notification-card-fill: var(--gray60);
922
+ --uui-notification-card-border: var(--gray60);
1043
923
  --uui-notification-card-bg: var(--uui-surface);
1044
924
  --uui-notification-card-text: var(--uui-text-primary);
1045
925
  }
@@ -1048,42 +928,159 @@
1048
928
  .alert-red {
1049
929
  --uui-alert-text: var(--uui-text-primary);
1050
930
  --uui-alert-bg: var(--uui-error-lightest);
1051
- --uui-alert-border: var(--uui-negative);
1052
- --uui-alert-icon: var(--uui-negative);
931
+ --uui-alert-border: var(--uui-error);
932
+ --uui-alert-icon: var(--uui-error);
1053
933
  }
1054
934
 
1055
935
  .alert-warning,
1056
936
  .alert-amber {
1057
937
  --uui-alert-text: var(--uui-text-primary);
1058
938
  --uui-alert-bg: var(--uui-warning-lightest);
1059
- --uui-alert-border: var(--amber);
1060
- --uui-alert-icon: var(--amber);
939
+ --uui-alert-border: var(--uui-warning);
940
+ --uui-alert-icon: var(--uui-warning);
1061
941
  }
1062
942
 
1063
943
  .alert-success,
1064
944
  .alert-green {
1065
945
  --uui-alert-text: var(--uui-text-primary);
1066
946
  --uui-alert-bg: var(--uui-success-lightest);
1067
- --uui-alert-border: var(--uui-accent);
1068
- --uui-alert-icon: var(--uui-accent);
947
+ --uui-alert-border: var(--uui-success);
948
+ --uui-alert-icon: var(--uui-success);
1069
949
  }
1070
950
 
1071
951
  .alert-info,
1072
952
  .alert-blue {
1073
953
  --uui-alert-text: var(--uui-text-primary);
1074
954
  --uui-alert-bg: var(--uui-info-lightest);
1075
- --uui-alert-border: var(--uui-primary);
1076
- --uui-alert-icon: var(--uui-primary);
955
+ --uui-alert-border: var(--uui-info);
956
+ --uui-alert-icon: var(--uui-info);
957
+ }
958
+
959
+ .badge-cyan {
960
+ --uui-badge-bg: var(--cyan-30);
961
+ --uui-badge-bg-hover: var(--cyan-40);
962
+ --uui-badge-bg-halftone: var(--cyan-10);
963
+ --uui-badge-bg-halftone-hover: var(--cyan-20);
964
+ --uui-badge-border-halftone: var(--cyan-20);
965
+ --uui-badge-border-halftone-hover: var(--cyan-30);
966
+ --uui-badge-caption-solid: var(--white);
967
+ --uui-badge-caption-halftone: var(--cyan-50);
968
+ --uui-badge-count: var(--uui-text-secondary);
969
+ --uui-badge-count-bg: var(--white);
970
+ }
971
+
972
+ .badge-violet {
973
+ --uui-badge-bg: var(--violet-30);
974
+ --uui-badge-bg-hover: var(--violet-40);
975
+ --uui-badge-bg-halftone: var(--violet-10);
976
+ --uui-badge-bg-halftone-hover: var(--violet-20);
977
+ --uui-badge-border-halftone: var(--violet-20);
978
+ --uui-badge-border-halftone-hover: var(--violet-30);
979
+ --uui-badge-caption-solid: var(--white);
980
+ --uui-badge-caption-halftone: var(--violet-50);
981
+ --uui-badge-count: var(--uui-text-secondary);
982
+ --uui-badge-count-bg: var(--white);
983
+ }
984
+
985
+ .badge-orange {
986
+ --uui-badge-bg: var(--orange-30);
987
+ --uui-badge-bg-hover: var(--orange-40);
988
+ --uui-badge-bg-halftone: var(--orange-10);
989
+ --uui-badge-bg-halftone-hover: var(--orange-20);
990
+ --uui-badge-border-halftone: var(--orange-20);
991
+ --uui-badge-border-halftone-hover: var(--orange-30);
992
+ --uui-badge-caption-solid: var(--white);
993
+ --uui-badge-caption-halftone: var(--orange-50);
994
+ --uui-badge-count: var(--uui-text-secondary);
995
+ --uui-badge-count-bg: var(--white);
996
+ }
997
+
998
+ .badge-purple {
999
+ --uui-badge-bg: var(--purple-30);
1000
+ --uui-badge-bg-hover: var(--purple-40);
1001
+ --uui-badge-bg-halftone: var(--purple-10);
1002
+ --uui-badge-bg-halftone-hover: var(--purple-20);
1003
+ --uui-badge-border-halftone: var(--purple-20);
1004
+ --uui-badge-border-halftone-hover: var(--purple-30);
1005
+ --uui-badge-caption-solid: var(--white);
1006
+ --uui-badge-caption-halftone: var(--purple-50);
1007
+ --uui-badge-count: var(--uui-text-secondary);
1008
+ --uui-badge-count-bg: var(--white);
1009
+ }
1010
+
1011
+ .badge-default, .badge-gray30 {
1012
+ --uui-badge-bg: var(--gray30);
1013
+ --uui-badge-bg-hover: var(--gray40);
1014
+ --uui-badge-bg-halftone: var(--gray20);
1015
+ --uui-badge-bg-halftone-hover: var(--gray30);
1016
+ --uui-badge-border-halftone: var(--gray40);
1017
+ --uui-badge-border-halftone-hover: var(--gray50);
1018
+ --uui-badge-caption-solid: var(--uui-text-primary);
1019
+ --uui-badge-caption-halftone: var(--uui-text-primary);
1020
+ --uui-badge-count: var(--uui-text-secondary);
1021
+ --uui-badge-count-bg: var(--white);
1022
+ }
1023
+
1024
+ .badge-info, .badge-blue {
1025
+ --uui-badge-bg: var(--uui-info);
1026
+ --uui-badge-bg-hover: var(--uui-info-dark);
1027
+ --uui-badge-bg-halftone: var(--uui-info-lightest);
1028
+ --uui-badge-bg-halftone-hover: var(--uui-info-light);
1029
+ --uui-badge-border-halftone: var(--uui-info-light);
1030
+ --uui-badge-border-halftone-hover: var(--uui-info);
1031
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1032
+ --uui-badge-caption-halftone: var(--uui-info-darkest);
1033
+ --uui-badge-count: var(--uui-text-secondary);
1034
+ --uui-badge-count-bg: var(--white);
1035
+ }
1036
+
1037
+ .badge-success, .badge-green {
1038
+ --uui-badge-bg: var(--uui-success);
1039
+ --uui-badge-bg-hover: var(--uui-success-dark);
1040
+ --uui-badge-bg-halftone: var(--uui-success-lightest);
1041
+ --uui-badge-bg-halftone-hover: var(--uui-success-light);
1042
+ --uui-badge-border-halftone: var(--uui-success-light);
1043
+ --uui-badge-border-halftone-hover: var(--uui-success);
1044
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1045
+ --uui-badge-caption-halftone: var(--uui-success-darkest);
1046
+ --uui-badge-count: var(--uui-text-secondary);
1047
+ --uui-badge-count-bg: var(--white);
1048
+ }
1049
+
1050
+ .badge-warning, .badge-amber {
1051
+ --uui-badge-bg: var(--uui-warning);
1052
+ --uui-badge-bg-hover: var(--uui-warning-dark);
1053
+ --uui-badge-bg-halftone: var(--uui-warning-lightest);
1054
+ --uui-badge-bg-halftone-hover: var(--uui-warning-light);
1055
+ --uui-badge-border-halftone: var(--uui-warning-light);
1056
+ --uui-badge-border-halftone-hover: var(--uui-warning);
1057
+ --uui-badge-caption-solid: var(--uui-text-primary);
1058
+ --uui-badge-caption-halftone: var(--uui-warning-darkest);
1059
+ --uui-badge-count: var(--uui-text-secondary);
1060
+ --uui-badge-count-bg: var(--white);
1061
+ }
1062
+
1063
+ .badge-error, .badge-red {
1064
+ --uui-badge-bg: var(--uui-error);
1065
+ --uui-badge-bg-hover: var(--uui-error-dark);
1066
+ --uui-badge-bg-halftone: var(--uui-error-lightest);
1067
+ --uui-badge-bg-halftone-hover: var(--uui-error-light);
1068
+ --uui-badge-border-halftone: var(--uui-error-light);
1069
+ --uui-badge-border-halftone-hover: var(--uui-error);
1070
+ --uui-badge-caption-solid: var(--white);
1071
+ --uui-badge-caption-halftone: var(--uui-error-darkest);
1072
+ --uui-badge-count: var(--uui-text-secondary);
1073
+ --uui-badge-count-bg: var(--white);
1077
1074
  }
1078
1075
 
1079
1076
  .informer-default {
1080
1077
  --uui-informer-bg: var(--gray30);
1081
- --uui-informer-caption: var(--gray60);
1078
+ --uui-informer-caption: var(--uui-text-secondary);
1082
1079
  }
1083
1080
 
1084
1081
  .informer-focus {
1085
1082
  --uui-informer-bg: var(--red);
1086
- --uui-informer-caption: var(--uui-contrast);
1083
+ --uui-informer-caption: var(--uui-text-white);
1087
1084
  }
1088
1085
 
1089
1086
  .informer-white {
@@ -1190,6 +1187,6 @@
1190
1187
  }
1191
1188
 
1192
1189
  .panel-gray90 {
1193
- --uui-panel-bg: var(--uui-surface-inverted);
1190
+ --uui-panel-bg: var(--uui-surface-contrast-lower);
1194
1191
  }
1195
1192
  }