@epam/assets 5.1.2 → 5.2.0-rc.2

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 +317 -795
  2. package/css/theme/theme_loveship.css.map +1 -1
  3. package/css/theme/theme_loveship_dark.css +895 -0
  4. package/css/theme/theme_loveship_dark.css.map +1 -0
  5. package/css/theme/theme_promo.css +362 -228
  6. package/css/theme/theme_promo.css.map +1 -1
  7. package/css/theme/theme_vanilla_thunder.css +183 -182
  8. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  9. package/package.json +2 -2
  10. package/theme/theme_loveship.scss +810 -932
  11. package/theme/theme_loveship_dark.scss +1143 -0
  12. package/theme/theme_promo.scss +438 -245
  13. package/theme/theme_vanilla_thunder.scss +194 -191
package/css/theme/theme_vanilla_thunder.css CHANGED
@@ -50,60 +50,50 @@
50
50
  --night700:#474A59;
51
51
  --night800:#303240;
52
52
  --night900:#1D1E26;
53
- --uui-accent:var(--grass-300);
54
- --uui-accent-light:var(--grass-200);
55
- --uui-accent-lightest:var(--grass-100);
56
- --uui-accent-dark:var(--grass-400);
57
- --uui-accent-darkest:var(--grass-500);
58
- --uui-primary:var(--blue-300);
59
- --uui-primary-light:var(--blue-200);
60
- --uui-primary-lightest:var(--blue-100);
61
- --uui-primary-dark:var(--blue-400);
62
- --uui-primary-darkest:var(--blue-500);
63
- --uui-secondary:var(--night500);
64
- --uui-secondary-light:var(--night300);
65
- --uui-secondary-lightest:var(--night200);
66
- --uui-secondary-dark:var(--night600);
67
- --uui-secondary-darkest:var(--night700);
68
- --uui-negative:var(--sun-200);
69
- --uui-negative-light:var(--sun-100);
70
- --uui-negative-lightest:var(--sun-50);
71
- --uui-negative-dark:var(--sun-250);
72
- --uui-negative-darkest:var(--sun-300);
73
- --uui-link:var(--blue-300);
74
- --uui-link-hover:var(--blue-400);
75
- --uui-link-wite-hover:var(--night400);
76
- --uui-link-black-hover:var(--night800);
77
- --uui-link-visited:#8018A0;
78
- --uui-link-disabled:var(--chromatic-200);
79
- --uui-info:var(--blue-300);
80
- --uui-info-soft:var(--blue-0);
81
- --uui-info-lightest:var(--blue-0);
82
- --uui-info-light:var(--blue-100);
83
- --uui-info-dark:var(--blue-400);
84
- --uui-info-darkest:var(--blue-500);
85
- --uui-success:var(--grass-300);
86
- --uui-success-soft:var(--grass-25);
87
- --uui-success-lightest:var(--grass-100);
88
- --uui-success-light:var(--grass-200);
89
- --uui-success-dark:var(--grass-400);
90
- --uui-success-darkest:var(--grass-500);
91
- --uui-warning:var(--sun-200);
92
- --uui-warning-soft:var(--sun-50);
93
- --uui-warning-lightest:var(--sun-50);
94
- --uui-warning-light:var(--sun-100);
95
- --uui-warning-dark:var(--sun-250);
96
- --uui-warning-darkest:var(--sun-300);
97
- --uui-error:var(--fire);
98
- --uui-error-soft:var(--fire-soft);
99
- --uui-error-lightest:var(--fire-lightest);
100
- --uui-error-light:var(--fire-light);
101
- --uui-error-dark:var(--fire-dark);
102
- --uui-error-darkest:var(--fire-darkest);
103
- --uui-icon:var(--chromatic-300);
104
- --uui-icon-hover:var(--chromatic-400);
105
- --uui-icon-active:var(--chromatic-500);
106
- --uui-icon-disabled:var(--chromatic-200);
53
+ --uui-accent-10:var(--grass-100);
54
+ --uui-accent-20:var(--grass-200);
55
+ --uui-accent-50:var(--grass-300);
56
+ --uui-accent-60:var(--grass-400);
57
+ --uui-accent-70:var(--grass-500);
58
+ --uui-primary-10:var(--blue-100);
59
+ --uui-primary-20:var(--blue-200);
60
+ --uui-primary-50:var(--blue-300);
61
+ --uui-primary-60:var(--blue-400);
62
+ --uui-primary-70:var(--blue-500);
63
+ --uui-secondary-10:var(--night200);
64
+ --uui-secondary-20:var(--night300);
65
+ --uui-secondary-50:var(--night500);
66
+ --uui-secondary-60:var(--night600);
67
+ --uui-secondary-70:var(--night700);
68
+ --uui-negative-10:var(--sun-50);
69
+ --uui-negative-20:var(--sun-100);
70
+ --uui-negative-50:var(--sun-200);
71
+ --uui-negative-60:var(--sun-250);
72
+ --uui-negative-70:var(--sun-300);
73
+ --uui-info-5:var(--blue-0);
74
+ --uui-info-10:var(--blue-0);
75
+ --uui-info-20:var(--blue-100);
76
+ --uui-info-50:var(--blue-300);
77
+ --uui-info-60:var(--blue-400);
78
+ --uui-info-70:var(--blue-500);
79
+ --uui-success-5:var(--grass-25);
80
+ --uui-success-10:var(--grass-100);
81
+ --uui-success-20:var(--grass-200);
82
+ --uui-success-50:var(--grass-300);
83
+ --uui-success-60:var(--grass-400);
84
+ --uui-success-70:var(--grass-500);
85
+ --uui-warning-5:var(--sun-50);
86
+ --uui-warning-10:var(--sun-50);
87
+ --uui-warning-20:var(--sun-100);
88
+ --uui-warning-50:var(--sun-200);
89
+ --uui-warning-60:var(--sun-250);
90
+ --uui-warning-70:var(--sun-300);
91
+ --uui-error-5:var(--fire-soft);
92
+ --uui-error-10:var(--fire-lightest);
93
+ --uui-error-20:var(--fire-light);
94
+ --uui-error-50:var(--fire);
95
+ --uui-error-60:var(--fire-dark);
96
+ --uui-error-70:var(--fire-darkest);
107
97
  --uui-app-bg:var(--chromatic-100);
108
98
  --uui-overlay:rgba(29, 30, 38, 0.8);
109
99
  --uui-surface:var(--chromatic-0);
@@ -126,29 +116,39 @@
126
116
  --uui-text-contrast:var(--chromatic-0);
127
117
  --uui-text-white:var(--chromatic-0);
128
118
  --uui-text-dark:var(--chromatic-500);
129
- --uui-text-info:var(--uui-info);
130
- --uui-text-warning:var(--uui-warning);
131
- --uui-text-error:var(--uui-error);
132
- --uui-text-success:var(--uui-success);
119
+ --uui-text-info:var(--uui-info-50);
120
+ --uui-text-warning:var(--uui-warning-50);
121
+ --uui-text-error:var(--uui-error-50);
122
+ --uui-text-success:var(--uui-success-50);
133
123
  --uui-disabled:var(--chromatic-150);
124
+ --uui-icon:var(--chromatic-300);
125
+ --uui-icon-hover:var(--chromatic-400);
126
+ --uui-icon-active:var(--chromatic-500);
127
+ --uui-icon-disabled:var(--chromatic-200);
128
+ --uui-link:var(--blue-300);
129
+ --uui-link-hover:var(--blue-400);
130
+ --uui-link-wite-hover:var(--night400);
131
+ --uui-link-black-hover:var(--night800);
132
+ --uui-link-visited:#8018A0;
133
+ --uui-link-disabled:var(--chromatic-200);
134
134
  --uui-scroll_bars-bg:var(--chromatic-200);
135
135
  --uui-scroll_bars-bg-active:var(--chromatic-300);
136
136
  --uui-control-bg:var(--chromatic-0);
137
137
  --uui-control-bg-hover:var(--chromatic-300);
138
138
  --uui-control-bg-disabled:var(--chromatic-100);
139
139
  --uui-control-bg-readonly:var(--chromatic-100);
140
- --uui-control-bg-checked:var(--uui-primary);
141
- --uui-control-bg-checked-hover:var(--uui-primary-dark);
142
- --uui-control-bg-checked-disabled:var(--uui-primary-light);
140
+ --uui-control-bg-checked:var(--uui-primary-50);
141
+ --uui-control-bg-checked-hover:var(--uui-primary-60);
142
+ --uui-control-bg-checked-disabled:var(--uui-primary-20);
143
143
  --uui-control_switch-bg:var(--chromatic-200);
144
144
  --uui-control_switch-toggler-bg:var(--chromatic-0);
145
145
  --uui-control-border:var(--chromatic-200);
146
- --uui-control-border-hover:var(--uui-primary-dark);
146
+ --uui-control-border-hover:var(--uui-primary-60);
147
147
  --uui-control-border-disabled:var(--chromatic-150);
148
148
  --uui-control-border-readonly:var(--chromatic-150);
149
- --uui-control-border-checked:var(--uui-primary);
150
- --uui-control-border-checked-hover:var(--uui-primary-dark);
151
- --uui-control-border-checked-disabled:var(--uui-primary-light);
149
+ --uui-control-border-checked:var(--uui-primary-50);
150
+ --uui-control-border-checked-hover:var(--uui-primary-60);
151
+ --uui-control-border-checked-disabled:var(--uui-primary-20);
152
152
  --uui-control_switch-border-hover:var(--chromatic-300);
153
153
  --uui-control_textinput-border-hover:var(--chromatic-300);
154
154
  --uui-control-label:var(--uui-text-primary);
@@ -168,6 +168,7 @@
168
168
  --uui-shadow-level-1:0 0 3px rgb(29 30 38 / 15%), 0 3px 6px rgb(29 30 38 / 10%);
169
169
  --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%);
170
170
  --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%);
171
+ --uui-control-focus:#008ACE80;
171
172
  --uui-search-result-highlight:#FFEDC9;
172
173
  --uui-text-input-bg:var(--uui-control-bg);
173
174
  --uui-text-input-bg-disabled:var(--uui-control-bg-disabled);
@@ -175,7 +176,7 @@
175
176
  --uui-text-input-border:var(--uui-control-border);
176
177
  --uui-text-input-border-hover:var(--uui-control_textinput-border-hover);
177
178
  --uui-text-input-border-active:var(--uui-control-border-checked);
178
- --uui-text-input-border-error:var(--uui-error);
179
+ --uui-text-input-border-error:var(--uui-error-50);
179
180
  --uui-text-input-border-disabled:var(--uui-control-border-disabled);
180
181
  --uui-text-input-border-readonly:var(--uui-control-border-readonly);
181
182
  --uui-text-input-placeholder:var(--uui-control-placeholder);
@@ -192,9 +193,9 @@
192
193
  --uui-btn-border-radius:8px;
193
194
  --uui-btn-font:var(--font-museo-sans);
194
195
  --uui-btn-font-weight:700;
195
- --uui-link-button-text:var(--uui-primary);
196
- --uui-link-button-text-hover:var(--uui-primary-dark);
197
- --uui-link-button-text-active:var(--uui-primary-darkest);
196
+ --uui-link-button-text:var(--uui-primary-50);
197
+ --uui-link-button-text-hover:var(--uui-primary-60);
198
+ --uui-link-button-text-active:var(--uui-primary-70);
198
199
  --uui-link-button-text-disabled:var(--uui-text-disabled);
199
200
  --uui-link-button-font:var(--font-inter);
200
201
  --uui-link-button-font-weight:400;
@@ -204,9 +205,9 @@
204
205
  --uui-dtp_body-content-font:var(--font-inter);
205
206
  --uui-dtp_body-content-font-weight:400;
206
207
  --uui-rdtp-bg:var(--uui-control-bg);
207
- --uui-rdtp-bg-selected-date:var(--uui-primary-lightest);
208
+ --uui-rdtp-bg-selected-date:var(--uui-primary-10);
208
209
  --uui-calendar-selected-hover:var(--uui-control-bg);
209
- --uui-calendar-start-end-selected-hover:var(--uui-primary-dark);
210
+ --uui-calendar-start-end-selected-hover:var(--uui-primary-60);
210
211
  --uui-calendar-start-end-selected:var(--uui-control-border-checked);
211
212
  --uui-calendar-weekends-weekdates:var(--uui-control-placeholder);
212
213
  --uui-calendar-text:var(--uui-control-text);
@@ -218,8 +219,8 @@
218
219
  --uui-calendar-selected_day-font:var(--font-inter);
219
220
  --uui-calendar-selected_day-font-weight:600;
220
221
  --uui-tab_button-text:var(--uui-text-primary);
221
- --uui-tab_button-text-hover:var(--uui-primary);
222
- --uui-tab_button-text-active:var(--uui-primary);
222
+ --uui-tab_button-text-hover:var(--uui-primary-50);
223
+ --uui-tab_button-text-active:var(--uui-primary-50);
223
224
  --uui-tab_button-text-disabled:var(--uui-text-disabled);
224
225
  --uui-tab_button-font:var(--font-inter);
225
226
  --uui-tab_button-font-weight:600;
@@ -235,7 +236,7 @@
235
236
  --uui-radio-input-fill-checked:var(--uui-control-border-checked);
236
237
  --uui-radio-input-fill-hover:var(--uui-control-border-hover);
237
238
  --uui-radio-input-fill-checked-disabled:var(--uui-control-border-checked-disabled);
238
- --uui-radio-input-error:var(--uui-error);
239
+ --uui-radio-input-error:var(--uui-error-50);
239
240
  --uui-radio-input-font:var(--font-inter);
240
241
  --uui-radio-input-font-weight:400;
241
242
  --uui-checkbox-border:var(--uui-control-border);
@@ -248,7 +249,7 @@
248
249
  --uui-checkbox-bg-disabled:var(--uui-control-bg-disabled);
249
250
  --uui-checkbox-bg-checked-hover:var(--uui-control-bg-checked-hover);
250
251
  --uui-checkbox-bg-checked-disabled:var(--uui-control-bg-checked-disabled);
251
- --uui-checkbox-error:var(--uui-error);
252
+ --uui-checkbox-error:var(--uui-error-50);
252
253
  --uui-checkbox-fill:var(--uui-control-checkbox-icon);
253
254
  --uui-checkbox-label:var(--uui-control-label);
254
255
  --uui-checkbox-label-disabled:var(--uui-control-label-disabled);
@@ -272,7 +273,7 @@
272
273
  --uui-text-area-border-disabled:var(--uui-control-border-disabled);
273
274
  --uui-text-area-border-hover:var(--uui-control_textinput-border-hover);
274
275
  --uui-text-area-border-active:var(--uui-control-border-checked);
275
- --uui-text-area-border-error:var(--uui-error);
276
+ --uui-text-area-border-error:var(--uui-error-50);
276
277
  --uui-text-area-placeholder:var(--uui-control-placeholder);
277
278
  --uui-text-area-text:var(--uui-control-text);
278
279
  --uui-text-area-text-disabled:var(--uui-control-text-disabled);
@@ -282,8 +283,8 @@
282
283
  --uui-text-area-font-weight:400;
283
284
  --uui-text-area-counter-font:var(--font-inter);
284
285
  --uui-text-area-counter-font-weight:400;
285
- --uui-drop-marker:var(--uui-primary);
286
- --uui-drop-marker-blocked:var(--uui-error);
286
+ --uui-drop-marker:var(--uui-primary-50);
287
+ --uui-drop-marker-blocked:var(--uui-error-50);
287
288
  --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%));
288
289
  --uui-tooltip-arrow-shadow:0 1px 4px 0 rgb(0 0 0 / 20%);
289
290
  --uui-tooltip-border-radius:8px;
@@ -296,7 +297,7 @@
296
297
  --uui-picker-toggler-border-disabled:var(--uui-control-border-disabled);
297
298
  --uui-picker-toggler-border-hover:var(--uui-control_textinput-border-hover);
298
299
  --uui-picker-toggler-border-active:var(--uui-control-border-checked);
299
- --uui-picker-toggler-border-error:var(--uui-error);
300
+ --uui-picker-toggler-border-error:var(--uui-error-50);
300
301
  --uui-picker-toggler-placeholder:var(--uui-control-placeholder);
301
302
  --uui-picker-toggler-text:var(--uui-control-text);
302
303
  --uui-picker-toggler-text-disabled:var(--uui-control-text-disabled);
@@ -317,11 +318,11 @@
317
318
  --uui-text-placeholder:var(--uui-skeleton);
318
319
  --uui-labeled-input:var(--uui-text-primary);
319
320
  --uui-labeled-input-disabled:var(--uui-text-disabled);
320
- --uui-labeled-input-error:var(--uui-error);
321
+ --uui-labeled-input-error:var(--uui-error-50);
321
322
  --uui-labeled-input-fill:var(--uui-icon);
322
323
  --uui-labeled-input-info-fill:var(--uui-icon);
323
324
  --uui-labeled-input-optional-text:var(--uui-text-secondary);
324
- --uui-labeled-input-asterisk:var(--uui-error);
325
+ --uui-labeled-input-asterisk:var(--uui-error-50);
325
326
  --uui-labeled-input-font:var(--font-inter);
326
327
  --uui-labeled-input-font-weight:500;
327
328
  --uui-labeled-input-optional-font:var(--font-inter);
@@ -335,7 +336,7 @@
335
336
  --uui-accordion-text-disabled:var(--uui-text-disabled);
336
337
  --uui-accordion-icon:var(--uui-icon);
337
338
  --uui-accordion-icon-disabled:var(--uui-text-input-icon-disabled);
338
- --uui-accordion-focus:var(--uui-primary);
339
+ --uui-accordion-focus:var(--uui-primary-50);
339
340
  --uui-accordion-shadow:var(--uui-shadow-level-1);
340
341
  --uui-accordion-shadow-hovered:var(--uui-shadow-level-2);
341
342
  --uui-accordion-toggler-font:var(--font-inter);
@@ -385,11 +386,11 @@
385
386
  --uui-main_menu-active:#FFF;
386
387
  --uui-main_menu-border-active:#FFF;
387
388
  --uui-main_menu-dropdown-bg:var(--uui-surface);
388
- --uui-main_menu-dropdown-hover:var(--uui-primary);
389
+ --uui-main_menu-dropdown-hover:var(--uui-primary-50);
389
390
  --uui-main_menu-dropdown-shadow:var(--uui-shadow-level-2);
390
391
  --uui-main_menu-dropdown-border-radius:8px;
391
- --uui-main_menu-search-bg:var(--uui-secondary-darkest);
392
- --uui-main_menu-search-border:var(--uui-secondary-darkest);
392
+ --uui-main_menu-search-bg:var(--uui-secondary-70);
393
+ --uui-main_menu-search-border:var(--uui-secondary-70);
393
394
  --uui-main_menu-search-placeholder:var(--uui-text-disabled);
394
395
  --uui-main_menu-search-text:var(--uui-text-contrast);
395
396
  --uui-main_menu-search-icon:var(--uui-icon-disabled);
@@ -403,7 +404,7 @@
403
404
  --uui-burger_menu-bg:var(--uui-surface);
404
405
  --uui-burger_menu-bg-hover:var(--uui-surface-lower);
405
406
  --uui-burger_menu-caption:var(--uui-text-contrast);
406
- --uui-burger_menu-caption-hover:var(--uui-primary);
407
+ --uui-burger_menu-caption-hover:var(--uui-primary-50);
407
408
  --uui-burger_menu-overlay:var(--uui-overlay);
408
409
  --uui-burger_icon:var(--uui-text-primary);
409
410
  --uui-burger_item:var(--uui-text-brand);
@@ -430,7 +431,7 @@
430
431
  --uui-numeric-input-border-disabled:var(--uui-control-border-disabled);
431
432
  --uui-numeric-input-border-hover:var(--uui-control_textinput-border-hover);
432
433
  --uui-numeric-input-border-active:var(--uui-control-border-checked);
433
- --uui-numeric-input-border-error:var(--uui-error);
434
+ --uui-numeric-input-border-error:var(--uui-error-50);
434
435
  --uui-numeric-input-placeholder:var(--uui-control-placeholder);
435
436
  --uui-numeric-input-text:var(--uui-control-text);
436
437
  --uui-numeric-input-text-disabled:var(--uui-control-text-disabled);
@@ -443,7 +444,7 @@
443
444
  --uui-time-picker-border-disabled:var(--uui-control-border-disabled);
444
445
  --uui-time-picker-border-hover:var(--uui-control_textinput-border-hover);
445
446
  --uui-time-picker-border-active:var(--uui-control-border-checked);
446
- --uui-time-picker-border-error:var(--uui-error);
447
+ --uui-time-picker-border-error:var(--uui-error-50);
447
448
  --uui-time-picker-placeholder:var(--uui-control-placeholder);
448
449
  --uui-time-picker-text:var(--uui-control-text);
449
450
  --uui-time-picker-text-disabled:var(--uui-control-text-disabled);
@@ -456,7 +457,7 @@
456
457
  --uui-search-input-border-disabled:var(--uui-control-border-disabled);
457
458
  --uui-search-input-border-hover:var(--uui-control_textinput-border-hover);
458
459
  --uui-search-input-border-active:var(--uui-control-border-checked);
459
- --uui-search-input-border-error:var(--uui-error);
460
+ --uui-search-input-border-error:var(--uui-error-50);
460
461
  --uui-search-input-placeholder:var(--uui-control-placeholder);
461
462
  --uui-search-input-text:var(--uui-control-text);
462
463
  --uui-search-input-text-disabled:var(--uui-control-text-disabled);
@@ -485,13 +486,13 @@
485
486
  --uui-notification-card-shadow:var(--uui-shadow-level-2);
486
487
  --uui-alert-border-radius:6px;
487
488
  --uui-panel-bg:var(--uui-surface);
488
- --uui-spinner:var(--uui-primary);
489
+ --uui-spinner:var(--uui-primary-50);
489
490
  --uui-blocker-bg:var(--uui-app-bg);
490
491
  --uui-flex-row-border-bottom:1px solid var(--uui-divider);
491
492
  --uui-dt-border:var(--uui-divider-light);
492
493
  --uui-dt-cell-bg:transparent;
493
494
  --uui-dt-cell-bg-resize:#EF55331F;
494
- --uui-dt-cell-bg-invalid:var(--uui-negative-lightest);
495
+ --uui-dt-cell-bg-invalid:var(--uui-negative-10);
495
496
  --uui-dt-cell-border-hover:var(--uui-control_textinput-border-hover);
496
497
  --uui-dt-cell-border-focus:var(--uui-control-border-checked);
497
498
  --uui-dt-row-bg:var(--uui-surface);
@@ -503,7 +504,7 @@
503
504
  --uui-dt-top-shadow:linear-gradient(to bottom, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
504
505
  --uui-dt-left-shadow:linear-gradient(to left, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
505
506
  --uui-dt-right-shadow:linear-gradient(to right, rgb(0 0 0 / 5%) 0%, rgb(0 0 0 / 0%) 100%);
506
- --uui-dt_header-drop_marker:var(--uui-primary);
507
+ --uui-dt_header-drop_marker:var(--uui-primary-50);
507
508
  --uui-dt-header-cell-font:var(--font-inter);
508
509
  --uui-dt-header-cell-font-weight:500;
509
510
  --uui-avatar-stack-font:var(--font-inter);
@@ -524,35 +525,35 @@
524
525
  --uui-tooltip-text:var(--uui-text-primary);
525
526
  }
526
527
  .uui-theme-vanilla_thunder .tooltip-critical{
527
- --uui-tooltip-bg:var(--uui-error-dark);
528
+ --uui-tooltip-bg:var(--uui-error-60);
528
529
  --uui-tooltip-text:var(--uui-text-contrast);
529
530
  }
530
531
  .uui-theme-vanilla_thunder .button-primary{
531
- --uui-btn-bg:var(--uui-primary);
532
- --uui-btn-bg-hover:var(--uui-primary-dark);
533
- --uui-btn-bg-active:var(--uui-primary-darkest);
532
+ --uui-btn-bg:var(--uui-primary-50);
533
+ --uui-btn-bg-hover:var(--uui-primary-60);
534
+ --uui-btn-bg-active:var(--uui-primary-70);
534
535
  --uui-btn-bg-halftone:var(--chromatic-0);
535
536
  --uui-btn-bg-halftone-hover:var(--blue-0);
536
- --uui-btn-bg-halftone-active:var(--uui-primary-lightest);
537
+ --uui-btn-bg-halftone-active:var(--uui-primary-10);
537
538
  --uui-btn-bg-disabled:var(--uui-disabled);
538
539
  --uui-btn-border:var(--uui-primary);
539
- --uui-btn-border-hover:var(--uui-primary-dark);
540
- --uui-btn-border-active:var(--uui-primary-darkest);
540
+ --uui-btn-border-hover:var(--uui-primary-60);
541
+ --uui-btn-border-active:var(--uui-primary-70);
541
542
  --uui-btn-border-disabled:var(--uui-disabled);
542
543
  --uui-btn-caption:var(--uui-text-white);
543
544
  --uui-btn-caption-halftone:var(--uui-text-primary);
544
545
  --uui-btn-caption-disabled:var(--uui-text-disabled);
545
546
  }
546
547
  .uui-theme-vanilla_thunder .button-accent{
547
- --uui-btn-bg:var(--uui-accent);
548
- --uui-btn-bg-hover:var(--uui-accent-dark);
549
- --uui-btn-bg-active:var(--uui-accent-darkest);
548
+ --uui-btn-bg:var(--uui-accent-50);
549
+ --uui-btn-bg-hover:var(--uui-accent-60);
550
+ --uui-btn-bg-active:var(--uui-accent-70);
550
551
  --uui-btn-bg-halftone:var(--chromatic-0);
551
- --uui-btn-bg-halftone-hover:var(--uui-accent-lightest);
552
- --uui-btn-bg-halftone-active:var(--uui-accent-light);
553
- --uui-btn-border:var(--uui-accent);
554
- --uui-btn-border-hover:var(--uui-accent-dark);
555
- --uui-btn-border-active:var(--uui-accent-darkest);
552
+ --uui-btn-bg-halftone-hover:var(--uui-accent-10);
553
+ --uui-btn-bg-halftone-active:var(--uui-accent-20);
554
+ --uui-btn-border:var(--uui-accent-50);
555
+ --uui-btn-border-hover:var(--uui-accent-60);
556
+ --uui-btn-border-active:var(--uui-accent-70);
556
557
  --uui-btn-bg-disabled:var(--uui-disabled);
557
558
  --uui-btn-border-disabled:var(--uui-disabled);
558
559
  --uui-btn-caption:var(--uui-text-white);
@@ -560,15 +561,15 @@
560
561
  --uui-btn-caption-disabled:var(--uui-text-disabled);
561
562
  }
562
563
  .uui-theme-vanilla_thunder .button-negative{
563
- --uui-btn-bg:var(--uui-negative);
564
- --uui-btn-bg-hover:var(--uui-negative-dark);
565
- --uui-btn-bg-active:var(--uui-negative-darkest);
564
+ --uui-btn-bg:var(--uui-negative-50);
565
+ --uui-btn-bg-hover:var(--uui-negative-60);
566
+ --uui-btn-bg-active:var(--uui-negative-70);
566
567
  --uui-btn-bg-halftone:var(--chromatic-0);
567
- --uui-btn-bg-halftone-hover:var(--uui-negative-lightest);
568
- --uui-btn-bg-halftone-active:var(--uui-negative-light);
569
- --uui-btn-border:var(--uui-negative);
570
- --uui-btn-border-hover:var(--uui-negative-dark);
571
- --uui-btn-border-active:var(--uui-negative-darkest);
568
+ --uui-btn-bg-halftone-hover:var(--uui-negative-10);
569
+ --uui-btn-bg-halftone-active:var(--uui-negative-20);
570
+ --uui-btn-border:var(--uui-negative-50);
571
+ --uui-btn-border-hover:var(--uui-negative-60);
572
+ --uui-btn-border-active:var(--uui-negative-70);
572
573
  --uui-btn-bg-disabled:var(--uui-disabled);
573
574
  --uui-btn-border-disabled:var(--uui-disabled);
574
575
  --uui-btn-caption:var(--uui-text-white);
@@ -576,15 +577,15 @@
576
577
  --uui-btn-caption-disabled:var(--uui-text-disabled);
577
578
  }
578
579
  .uui-theme-vanilla_thunder .button-secondary{
579
- --uui-btn-bg:var(--uui-secondary);
580
- --uui-btn-bg-hover:var(--uui-secondary-dark);
581
- --uui-btn-bg-active:var(--uui-secondary-darkest);
580
+ --uui-btn-bg:var(--uui-secondary-50);
581
+ --uui-btn-bg-hover:var(--uui-secondary-60);
582
+ --uui-btn-bg-active:var(--uui-secondary-70);
582
583
  --uui-btn-bg-halftone:var(--chromatic-0);
583
- --uui-btn-bg-halftone-hover:var(--uui-secondary-lightest);
584
- --uui-btn-bg-halftone-active:var(--uui-secondary-light);
585
- --uui-btn-border:var(--uui-secondary);
586
- --uui-btn-border-hover:var(--uui-secondary-dark);
587
- --uui-btn-border-active:var(--uui-secondary-darkest);
584
+ --uui-btn-bg-halftone-hover:var(--uui-secondary-10);
585
+ --uui-btn-bg-halftone-active:var(--uui-secondary-20);
586
+ --uui-btn-border:var(--uui-secondary-50);
587
+ --uui-btn-border-hover:var(--uui-secondary-60);
588
+ --uui-btn-border-active:var(--uui-secondary-70);
588
589
  --uui-btn-bg-disabled:var(--uui-disabled);
589
590
  --uui-btn-border-disabled:var(--uui-disabled);
590
591
  --uui-btn-caption:var(--uui-text-white);
@@ -597,7 +598,7 @@
597
598
  --uui-btn-bg-active:var(--blue-100);
598
599
  --uui-btn-bg-halftone:var(--chromatic-0);
599
600
  --uui-btn-bg-halftone-hover:var(--blue-50);
600
- --uui-btn-bg-halftone-active:var(--uui-primary-lightest);
601
+ --uui-btn-bg-halftone-active:var(--uui-primary-10);
601
602
  --uui-btn-bg-disabled:var(--chromatic-0);
602
603
  --uui-btn-border:var(--white);
603
604
  --uui-btn-border-hover:var(--blue-50);
@@ -608,27 +609,27 @@
608
609
  --uui-btn-caption-disabled:var(--chromatic-200);
609
610
  }
610
611
  .uui-theme-vanilla_thunder .icon-button-info{
611
- --uui-icon-btn:var(--uui-info);
612
- --uui-icon-btn-hover:var(--uui-info-dark);
613
- --uui-icon-btn-active:var(--uui-info-darkest);
612
+ --uui-icon-btn:var(--uui-info-50);
613
+ --uui-icon-btn-hover:var(--uui-info-60);
614
+ --uui-icon-btn-active:var(--uui-info-70);
614
615
  --uui-icon-btn-disabled:var(--uui-icon-disabled);
615
616
  }
616
617
  .uui-theme-vanilla_thunder .icon-button-success{
617
- --uui-icon-btn:var(--uui-success);
618
- --uui-icon-btn-hover:var(--uui-success-dark);
619
- --uui-icon-btn-active:var(--uui-success-darkest);
618
+ --uui-icon-btn:var(--uui-success-50);
619
+ --uui-icon-btn-hover:var(--uui-success-60);
620
+ --uui-icon-btn-active:var(--uui-success-70);
620
621
  --uui-icon-btn-disabled:var(--uui-icon-disabled);
621
622
  }
622
623
  .uui-theme-vanilla_thunder .icon-button-warning{
623
- --uui-icon-btn:var(--uui-warning);
624
- --uui-icon-btn-hover:var(--uui-warning-dark);
625
- --uui-icon-btn-active:var(--uui-warning-darkest);
624
+ --uui-icon-btn:var(--uui-warning-50);
625
+ --uui-icon-btn-hover:var(--uui-warning-60);
626
+ --uui-icon-btn-active:var(--uui-warning-70);
626
627
  --uui-icon-btn-disabled:var(--uui-icon-disabled);
627
628
  }
628
629
  .uui-theme-vanilla_thunder .icon-button-error{
629
- --uui-icon-btn:var(--uui-error);
630
- --uui-icon-btn-hover:var(--uui-error-dark);
631
- --uui-icon-btn-active:var(--uui-error-darkest);
630
+ --uui-icon-btn:var(--uui-error-50);
631
+ --uui-icon-btn-hover:var(--uui-error-60);
632
+ --uui-icon-btn-active:var(--uui-error-70);
632
633
  --uui-icon-btn-disabled:var(--uui-icon-disabled);
633
634
  }
634
635
  .uui-theme-vanilla_thunder .icon-button-secondary{
@@ -644,52 +645,52 @@
644
645
  --uui-icon-btn-disabled:var(--uui-icon-disabled);
645
646
  }
646
647
  .uui-theme-vanilla_thunder .notification-card-warning{
647
- --uui-notification-card-fill:var(--uui-warning);
648
- --uui-notification-card-border:var(--uui-warning);
648
+ --uui-notification-card-fill:var(--uui-warning-50);
649
+ --uui-notification-card-border:var(--uui-warning-50);
649
650
  --uui-notification-card-bg:var(--uui-surface);
650
651
  --uui-notification-card-text:var(--uui-text-primary);
651
652
  }
652
653
  .uui-theme-vanilla_thunder .notification-card-success{
653
- --uui-notification-card-fill:var(--uui-success);
654
- --uui-notification-card-border:var(--uui-success);
654
+ --uui-notification-card-fill:var(--uui-success-50);
655
+ --uui-notification-card-border:var(--uui-success-50);
655
656
  --uui-notification-card-bg:var(--uui-surface);
656
657
  --uui-notification-card-text:var(--uui-text-primary);
657
658
  }
658
659
  .uui-theme-vanilla_thunder .notification-card-info{
659
- --uui-notification-card-fill:var(--uui-info);
660
- --uui-notification-card-border:var(--uui-info);
660
+ --uui-notification-card-fill:var(--uui-info-50);
661
+ --uui-notification-card-border:var(--uui-info-50);
661
662
  --uui-notification-card-bg:var(--uui-surface);
662
663
  --uui-notification-card-text:var(--uui-text-primary);
663
664
  }
664
665
  .uui-theme-vanilla_thunder .notification-card-error{
665
- --uui-notification-card-fill:var(--uui-error);
666
- --uui-notification-card-border:var(--uui-error);
666
+ --uui-notification-card-fill:var(--uui-error-50);
667
+ --uui-notification-card-border:var(--uui-error-50);
667
668
  --uui-notification-card-bg:var(--uui-surface);
668
669
  --uui-notification-card-text:var(--uui-text-primary);
669
670
  }
670
671
  .uui-theme-vanilla_thunder .alert-error{
671
672
  --uui-alert-text:var(--uui-text-primary);
672
673
  --uui-alert-bg:#F5E5E9;
673
- --uui-alert-border:var(--uui-error);
674
- --uui-alert-icon:var(--uui-error);
674
+ --uui-alert-border:var(--uui-error-50);
675
+ --uui-alert-icon:var(--uui-error-50);
675
676
  }
676
677
  .uui-theme-vanilla_thunder .alert-warning{
677
678
  --uui-alert-text:var(--uui-text-primary);
678
679
  --uui-alert-bg:#F6EEE1;
679
- --uui-alert-border:var(--uui-warning);
680
- --uui-alert-icon:var(--uui-warning);
680
+ --uui-alert-border:var(--uui-warning-50);
681
+ --uui-alert-icon:var(--uui-warning-50);
681
682
  }
682
683
  .uui-theme-vanilla_thunder .alert-success{
683
684
  --uui-alert-text:var(--uui-text-primary);
684
685
  --uui-alert-bg:#E7EEE1;
685
- --uui-alert-border:var(--uui-success);
686
- --uui-alert-icon:var(--uui-success);
686
+ --uui-alert-border:var(--uui-success-50);
687
+ --uui-alert-icon:var(--uui-success-50);
687
688
  }
688
689
  .uui-theme-vanilla_thunder .alert-info{
689
690
  --uui-alert-text:var(--uui-text-primary);
690
691
  --uui-alert-bg:#DCEDF6;
691
- --uui-alert-border:var(--uui-info);
692
- --uui-alert-icon:var(--uui-info);
692
+ --uui-alert-border:var(--uui-info-50);
693
+ --uui-alert-icon:var(--uui-info-50);
693
694
  }
694
695
  .uui-theme-vanilla_thunder .badge-default{
695
696
  --uui-badge-bg:var(--night300);
@@ -704,59 +705,59 @@
704
705
  --uui-badge-caption-halftone:var(--uui-text-primary);
705
706
  }
706
707
  .uui-theme-vanilla_thunder .badge-info{
707
- --uui-badge-bg:var(--uui-info);
708
- --uui-badge-bg-hover:var(--uui-info-dark);
708
+ --uui-badge-bg:var(--uui-info-50);
709
+ --uui-badge-bg-hover:var(--uui-info-60);
709
710
  --uui-badge-caption-solid:var(--white);
710
711
  --uui-badge-count-bg:var(--white);
711
712
  --uui-badge-count:var(--uui-text-secondary);
712
- --uui-badge-bg-halftone:var(--uui-info-lightest);
713
- --uui-badge-bg-halftone-hover:var(--uui-info-light);
714
- --uui-badge-border-halftone:var(--uui-info-light);
715
- --uui-badge-border-halftone-hover:var(--uui-info);
716
- --uui-badge-caption-halftone:var(--uui-info-darkest);
713
+ --uui-badge-bg-halftone:var(--uui-info-10);
714
+ --uui-badge-bg-halftone-hover:var(--uui-info-20);
715
+ --uui-badge-border-halftone:var(--uui-info-20);
716
+ --uui-badge-border-halftone-hover:var(--uui-info-50);
717
+ --uui-badge-caption-halftone:var(--uui-info-70);
717
718
  }
718
719
  .uui-theme-vanilla_thunder .badge-success{
719
- --uui-badge-bg:var(--uui-success);
720
- --uui-badge-bg-hover:var(--uui-success-dark);
720
+ --uui-badge-bg:var(--uui-success-50);
721
+ --uui-badge-bg-hover:var(--uui-success-60);
721
722
  --uui-badge-caption-solid:var(--white);
722
723
  --uui-badge-count-bg:var(--white);
723
724
  --uui-badge-count:var(--uui-text-secondary);
724
- --uui-badge-bg-halftone:var(--uui-success-lightest);
725
- --uui-badge-bg-halftone-hover:var(--uui-success-light);
726
- --uui-badge-border-halftone:var(--uui-success-light);
727
- --uui-badge-border-halftone-hover:var(--uui-success);
728
- --uui-badge-caption-halftone:var(--uui-success-darkest);
725
+ --uui-badge-bg-halftone:var(--uui-success-10);
726
+ --uui-badge-bg-halftone-hover:var(--uui-success-20);
727
+ --uui-badge-border-halftone:var(--uui-success-20);
728
+ --uui-badge-border-halftone-hover:var(--uui-success-50);
729
+ --uui-badge-caption-halftone:var(--uui-success-70);
729
730
  }
730
731
  .uui-theme-vanilla_thunder .badge-warning{
731
- --uui-badge-bg:var(--uui-warning);
732
- --uui-badge-bg-hover:var(--uui-warning-dark);
732
+ --uui-badge-bg:var(--uui-warning-50);
733
+ --uui-badge-bg-hover:var(--uui-warning-60);
733
734
  --uui-badge-caption-solid:var(--uui-text-primary);
734
735
  --uui-badge-count-bg:var(--white);
735
736
  --uui-badge-count:var(--uui-text-secondary);
736
- --uui-badge-bg-halftone:var(--uui-warning-lightest);
737
- --uui-badge-bg-halftone-hover:var(--uui-warning-light);
738
- --uui-badge-border-halftone:var(--uui-warning-light);
739
- --uui-badge-border-halftone-hover:var(--uui-warning);
740
- --uui-badge-caption-halftone:var(--uui-warning-darkest);
737
+ --uui-badge-bg-halftone:var(--uui-warning-10);
738
+ --uui-badge-bg-halftone-hover:var(--uui-warning-20);
739
+ --uui-badge-border-halftone:var(--uui-warning-20);
740
+ --uui-badge-border-halftone-hover:var(--uui-warning-50);
741
+ --uui-badge-caption-halftone:var(--uui-warning-70);
741
742
  }
742
743
  .uui-theme-vanilla_thunder .badge-error{
743
- --uui-badge-bg:var(--uui-error);
744
- --uui-badge-bg-hover:var(--uui-error-dark);
744
+ --uui-badge-bg:var(--uui-error-50);
745
+ --uui-badge-bg-hover:var(--uui-error-60);
745
746
  --uui-badge-caption-solid:var(--white);
746
747
  --uui-badge-count-bg:var(--white);
747
748
  --uui-badge-count:var(--uui-text-secondary);
748
- --uui-badge-bg-halftone:var(--uui-error-lightest);
749
- --uui-badge-bg-halftone-hover:var(--uui-error-light);
750
- --uui-badge-border-halftone:var(--uui-error-light);
751
- --uui-badge-border-halftone-hover:var(--uui-error);
752
- --uui-badge-caption-halftone:var(--uui-error-darkest);
749
+ --uui-badge-bg-halftone:var(--uui-error-10);
750
+ --uui-badge-bg-halftone-hover:var(--uui-error-20);
751
+ --uui-badge-border-halftone:var(--uui-error-20);
752
+ --uui-badge-border-halftone-hover:var(--uui-error-50);
753
+ --uui-badge-caption-halftone:var(--uui-error-70);
753
754
  }
754
755
  .uui-theme-vanilla_thunder .informer-default{
755
- --uui-informer-bg:var(--uui-secondary-light);
756
+ --uui-informer-bg:var(--uui-secondary-20);
756
757
  --uui-informer-caption:var(--uui-text-secondary);
757
758
  }
758
759
  .uui-theme-vanilla_thunder .informer-focus{
759
- --uui-informer-bg:var(--uui-negative);
760
+ --uui-informer-bg:var(--uui-negative-50);
760
761
  --uui-informer-caption:var(--uui-caption);
761
762
  }
762
763
  .uui-theme-vanilla_thunder .informer-white{