@epam/assets 5.1.2 → 5.2.0-rc.1

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