@epam/assets 5.2.0-rc.3 → 5.2.0

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