@epam/assets 5.2.0-rc.2 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/css/theme/theme_loveship.css +801 -319
  2. package/css/theme/theme_loveship.css.map +1 -1
  3. package/css/theme/theme_promo.css +235 -365
  4. package/css/theme/theme_promo.css.map +1 -1
  5. package/css/theme/theme_vanilla_thunder.css +183 -183
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  7. package/package.json +2 -2
  8. package/theme/theme_loveship.scss +943 -812
  9. package/theme/theme_promo.scss +257 -441
  10. package/theme/theme_vanilla_thunder.scss +193 -194
  11. package/css/theme/theme_loveship_dark.css +0 -895
  12. package/css/theme/theme_loveship_dark.css.map +0 -1
  13. package/theme/theme_loveship_dark.scss +0 -1143
package/theme/theme_loveship.scss CHANGED
@@ -67,12 +67,12 @@
67
67
  --orange-40: #F76B0D;
68
68
  --orange-50: #BD4B00;
69
69
 
70
- --fuchsia-5: #FFF7FB;
71
- --fuchsia-10: #F9D8E7;
72
- --fuchsia-20: #EDADC8;
73
- --fuchsia-30: #EA4386;
74
- --fuchsia-40: #D61E68;
75
- --fuchsia-50: #AE1955;
70
+ --fuchia-5: #FFF7FB;
71
+ --fuchia-10: #F9D8E7;
72
+ --fuchia-20: #EDADC8;
73
+ --fuchia-30: #EA4386;
74
+ --fuchia-40: #D61E68;
75
+ --fuchia-50: #AE1955;
76
76
 
77
77
  --purple-5: #FDF6FE;
78
78
  --purple-10: #F2CCFA;
@@ -150,65 +150,71 @@
150
150
 
151
151
  /* core variables start */
152
152
 
153
- /* brand colors */
154
-
155
- --uui-accent-5: var(--grass-soft);
156
- --uui-accent-10: var(--grass-lightest);
157
- --uui-accent-20: var(--grass-light);
158
- --uui-accent-50: var(--grass);
159
- --uui-accent-60: var(--grass-dark);
160
- --uui-accent-70: var(--grass-darkest);
161
-
162
- --uui-primary-5: var(--sky-soft);
163
- --uui-primary-10: var(--sky-lightest);
164
- --uui-primary-20: var(--sky-light);
165
- --uui-primary-50: var(--sky);
166
- --uui-primary-60: var(--sky-dark);
167
- --uui-primary-70: var(--sky-darkest);
168
-
169
- --uui-secondary-5: var(--night200);
170
- --uui-secondary-10: var(--night300);
171
- --uui-secondary-20: var(--night400);
172
- --uui-secondary-50: var(--night600);
173
- --uui-secondary-60: var(--night700);
174
- --uui-secondary-70: var(--night800);
175
-
176
- --uui-negative-5: var(--fire-soft);
177
- --uui-negative-10: var(--fire-lightest);
178
- --uui-negative-20: var(--fire-light);
179
- --uui-negative-50: var(--fire);
180
- --uui-negative-60: var(--fire-dark);
181
- --uui-negative-70: var(--fire-darkest);
182
-
183
- /* semantic colors */
184
-
185
- --uui-info-5: var(--sky-soft);
186
- --uui-info-10: var(--sky-lightest);
187
- --uui-info-20: var(--sky-light);
188
- --uui-info-50: var(--sky);
189
- --uui-info-60: var(--sky-dark);
190
- --uui-info-70: var(--sky-darkest);
191
-
192
- --uui-success-5: var(--grass-soft);
193
- --uui-success-10: var(--grass-lightest);
194
- --uui-success-20: var(--grass-light);
195
- --uui-success-50: var(--grass);
196
- --uui-success-60: var(--grass-dark);
197
- --uui-success-70: var(--grass-darkest);
198
-
199
- --uui-warning-5: var(--sun-soft);
200
- --uui-warning-10: var(--sun-lightest);
201
- --uui-warning-20: var(--sun-light);
202
- --uui-warning-50: var(--sun);
203
- --uui-warning-60: var(--sun-dark);
204
- --uui-warning-70: var(--sun-darkest);
205
-
206
- --uui-error-5: var(--fire-soft);
207
- --uui-error-10: var(--fire-lightest);
208
- --uui-error-20: var(--fire-light);
209
- --uui-error-50: var(--fire);
210
- --uui-error-60: var(--fire-dark);
211
- --uui-error-70: var(--fire-darkest);
153
+ --uui-accent: var(--grass);
154
+ --uui-accent-light: var(--grass-light);
155
+ --uui-accent-lightest: var(--grass-lightest);
156
+ --uui-accent-dark: var(--grass-dark);
157
+ --uui-accent-darkest: var(--grass-darkest);
158
+
159
+ --uui-primary: var(--sky);
160
+ --uui-primary-light: var(--sky-light);
161
+ --uui-primary-lightest: var(--sky-lightest);
162
+ --uui-primary-dark: var(--sky-dark);
163
+ --uui-primary-darkest: var(--sky-darkest);
164
+
165
+ --uui-secondary: var(--night600);
166
+ --uui-secondary-light: var(--night300);
167
+ --uui-secondary-lightest: var(--night200);
168
+ --uui-secondary-dark: var(--night700);
169
+ --uui-secondary-darkest: var(--night800);
170
+
171
+ --uui-negative: var(--fire);
172
+ --uui-negative-light: var(--fire-light);
173
+ --uui-negative-lightest: var(--fire-lightest);
174
+ --uui-negative-dark: var(--fire-dark);
175
+ --uui-negative-darkest: var(--fire-darkest);
176
+
177
+ --uui-link: var(--sky);
178
+ --uui-link-hover: var(--sky-dark);
179
+ --uui-link-wite-hover: var(--night400);
180
+ --uui-link-black-hover: var(--night800);
181
+ --uui-link-visited: #8018A0;
182
+ --uui-link-disabled: var(--night500);
183
+
184
+ --uui-info: var(--sky);
185
+ --uui-info-soft: var(--sky-soft);
186
+ --uui-info-lightest: var(--sky-lightest);
187
+ --uui-info-light: var(--sky-light);
188
+ --uui-info-dark: var(--sky-dark);
189
+ --uui-info-darkest: var(--sky-darkest);
190
+
191
+ --uui-success: var(--grass);
192
+ --uui-success-soft: var(--grass-soft);
193
+ --uui-success-lightest: var(--grass-lightest);
194
+ --uui-success-light: var(--grass-light);
195
+ --uui-success-dark: var(--grass-dark);
196
+ --uui-success-darkest: var(--grass-darkest);
197
+
198
+ --uui-warning: var(--sun);
199
+ --uui-warning-soft: var(--sun-soft);
200
+ --uui-warning-lightest: var(--sun-lightest);
201
+ --uui-warning-light: var(--sun-light);
202
+ --uui-warning-dark: var(--sun-dark);
203
+ --uui-warning-darkest: var(--sun-darkest);
204
+
205
+ --uui-error: var(--fire);
206
+ --uui-error-soft: var(--fire-soft);
207
+ --uui-error-lightest: var(--fire-lightest);
208
+ --uui-error-light: var(--fire-light);
209
+ --uui-error-dark: var(--fire-dark);
210
+ --uui-error-darkest: var(--fire-darkest);
211
+
212
+ --uui-icon: var(--night600);
213
+ --uui-icon-hover: var(--night700);
214
+ --uui-icon-active: var(--night800);
215
+ --uui-icon-disabled: var(--night500);
216
+
217
+ --uui-control-focus: #008ACE80;
212
218
 
213
219
  /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
214
220
 
@@ -239,10 +245,10 @@
239
245
  --uui-text-white: var(--white);
240
246
  --uui-text-dark: var(--night800);
241
247
 
242
- --uui-text-info: var(--uui-info-50);
243
- --uui-text-warning: var(--uui-warning-50);
244
- --uui-text-error: var(--uui-error-50);
245
- --uui-text-success: var(--uui-success-50);
248
+ --uui-text-info: var(--uui-info);
249
+ --uui-text-warning: var(--uui-warning);
250
+ --uui-text-error: var(--uui-error);
251
+ --uui-text-success: var(--uui-success);
246
252
 
247
253
  /* not accepted part */
248
254
 
@@ -250,38 +256,26 @@
250
256
 
251
257
  /* control specific */
252
258
 
253
- --uui-link: var(--sky);
254
- --uui-link-hover: var(--sky-dark);
255
- --uui-link-wite-hover: var(--night400);
256
- --uui-link-black-hover: var(--night800);
257
- --uui-link-visited: #8018A0;
258
- --uui-link-disabled: var(--night500);
259
-
260
- --uui-icon: var(--night600);
261
- --uui-icon-hover: var(--night700);
262
- --uui-icon-active: var(--night800);
263
- --uui-icon-disabled: var(--night500);
264
-
265
259
  --uui-scroll_bars-bg: var(--night400);
266
260
  --uui-scroll_bars-bg-active: var(--night600);
267
261
 
268
- --uui-control-bg: var(--uui-surface);
262
+ --uui-control-bg: var(--white);
269
263
  --uui-control-bg-hover: var(--night600);
270
264
  --uui-control-bg-disabled: var(--night50);
271
265
  --uui-control-bg-readonly: var(--night50);
272
- //--uui-control-bg-checked: var(--uui-primary);
273
- //--uui-control-bg-checked-hover: var(--uui-primary-dark);
274
- //--uui-control-bg-checked-disabled: var(--uui-primary-light);
266
+ --uui-control-bg-checked: var(--uui-primary);
267
+ --uui-control-bg-checked-hover: var(--uui-primary-dark);
268
+ --uui-control-bg-checked-disabled: var(--uui-primary-light);
275
269
  --uui-control_switch-bg: var(--night400);
276
- --uui-control_switch-toggler-bg: var(--uui-surface);
270
+ --uui-control_switch-toggler-bg: var(--white);
277
271
 
278
272
  --uui-control-border: var(--night400);
279
- //--uui-control-border-hover: var(--uui-primary-dark);
273
+ --uui-control-border-hover: var(--uui-primary-dark);
280
274
  --uui-control-border-disabled: var(--night300);
281
275
  --uui-control-border-readonly: var(--night300);
282
- --uui-control-border-checked: var(--uui-primary-50);
283
- //--uui-control-border-checked-hover: var(--uui-primary-dark);
284
- //--uui-control-border-checked-disabled: var(--uui-primary-light);
276
+ --uui-control-border-checked: var(--uui-primary);
277
+ --uui-control-border-checked-hover: var(--uui-primary-dark);
278
+ --uui-control-border-checked-disabled: var(--uui-primary-light);
285
279
 
286
280
  --uui-control_switch-border-hover: var(--night600);
287
281
  --uui-control_textinput-border-hover: var(--night600);
@@ -300,10 +294,6 @@
300
294
 
301
295
  --uui-control-checkbox-icon: var(--white);
302
296
 
303
- --uui-control-focus: #008ACE80;
304
-
305
- --uui-search-result-highlight: #FFEDC9;
306
-
307
297
  --uui-tag-bg: var(--night300); // one place of usage
308
298
  --uui-tag-bg-hover: var(--night400); // one place of usage
309
299
 
@@ -315,26 +305,57 @@
315
305
  --uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
316
306
  --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
317
307
 
318
- /* core variables end */
308
+ /* Search results text highlighting */
309
+ --uui-search-result-highlight: #FFEDC9;
319
310
 
311
+ /* core variables end */
320
312
 
321
313
  /* find below the not core variables that are used and highlight them in the code */
322
314
 
323
-
324
- /* DatePicker */
315
+ /* TextInput vars */
316
+ --uui-text-input-bg: var(--uui-control-bg);
317
+ --uui-text-input-bg-disabled: var(--uui-control-bg-disabled);
318
+ --uui-text-input-bg-readonly: var(--uui-control-bg-readonly);
319
+ --uui-text-input-border: var(--uui-control-border);
320
+ --uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
321
+ --uui-text-input-border-active: var(--uui-control-border-checked);
322
+ --uui-text-input-border-error: var(--uui-error);
323
+ --uui-text-input-border-disabled: var(--uui-control-border-disabled);
324
+ --uui-text-input-border-readonly: var(--uui-control-border-readonly);
325
+ --uui-text-input-placeholder: var(--uui-control-placeholder);
326
+ --uui-text-input-placeholder-disabled: var(--uui-control-placeholder-disabled);
327
+ --uui-text-input-text: var(--uui-control-text);
328
+ --uui-text-input-text-disabled: var(--uui-control-text-disabled);
329
+ --uui-text-input-icon: var(--uui-control-icon);
330
+ --uui-text-input-icon-disabled: var(--uui-control-icon-disabled);
331
+ --uui-text-input-icon-clickable: var(--uui-icon);
332
+ --uui-text-input-icon-clickable-hover: var(--uui-icon-hover);
333
+ --uui-text-input-border-radius: var(--uui-border-radius);
334
+
335
+ --uui-text-input-font: var(--font-regular);
336
+
337
+ /* Button vars */
338
+ --uui-btn-border-radius: var(--uui-border-radius);
339
+
340
+ --uui-btn-font: var(--font-semibold);
341
+
342
+ /* LinkButton vars */
343
+ --uui-link-button-font: var(--font-semibold);
344
+
345
+ /* DatePicker vars */
325
346
  --uui-dtp-title-bg: var(--uui-control-bg);
326
347
  --uui-dtp-text-selected: var(--uui-control-border-checked);
327
348
  --uui-dtp-text: var(--uui-control-text);
328
349
 
329
350
  --uui-dtp_body-content-font: var(--font-regular);
330
351
 
331
- /* RangeDatePicker */
352
+ /* RangeDatePicker vars */
332
353
  --uui-rdtp-bg: var(--uui-control-bg);
333
- --uui-rdtp-bg-selected-date: var(--uui-primary-10);
354
+ --uui-rdtp-bg-selected-date: var(--uui-primary-lightest);
334
355
 
335
- /* Calendar */
356
+ /* Calendar vars */
336
357
  --uui-calendar-selected-hover: var(--uui-control-bg);
337
- --uui-calendar-start-end-selected-hover: var(--uui-primary-60);
358
+ --uui-calendar-start-end-selected-hover: var(--uui-primary-dark);
338
359
  --uui-calendar-start-end-selected: var(--uui-control-border-checked);
339
360
  --uui-calendar-weekends-weekdates: var(--uui-control-placeholder);
340
361
  --uui-calendar-text: var(--uui-control-text);
@@ -344,15 +365,50 @@
344
365
  --uui-calendar-weekday-font: var(--font-regular);
345
366
  --uui-calendar-selected_day-font: var(--font-semibold);
346
367
 
347
- /* TabButton */
348
- //--uui-tab_button-text: var(--uui-text-primary);
349
- //--uui-tab_button-text-hover: var(--uui-primary-50);
350
- //--uui-tab_button-text-active: var(--uui-primary-50);
351
- //--uui-tab_button-text-disabled: var(--uui-text-disabled);
352
- //--uui-tab_button-font: var(--font-semibold);
353
-
354
-
355
- /* Tag */
368
+ /* tab-button-vars */
369
+ --uui-tab_button-text: var(--uui-text-primary);
370
+ --uui-tab_button-text-hover: var(--uui-primary);
371
+ --uui-tab_button-text-active: var(--uui-primary);
372
+ --uui-tab_button-text-disabled: var(--uui-text-disabled);
373
+ --uui-tab_button-font: var(--font-semibold);
374
+
375
+ /* radio-input-vars */
376
+ --uui-radio-input-bg: var(--uui-control-bg);
377
+ --uui-radio-input-bg-disabled: var(--uui-control-bg-disabled);
378
+ --uui-radio-input-border: var(--uui-control-border);
379
+ --uui-radio-input-border-checked: var(--uui-control-border-checked);
380
+ --uui-radio-input-border-hover: var(--uui-control-border-hover);
381
+ --uui-radio-input-border-disabled: var(--uui-control-border-disabled);
382
+ --uui-radio-input-border-checked-disabled: var(--uui-control-border-checked-disabled);
383
+ --uui-radio-input-label: var(--uui-control-label);
384
+ --uui-radio-input-label-disabled: var(--uui-control-label-disabled);
385
+ --uui-radio-input-fill-checked: var(--uui-control-border-checked);
386
+ --uui-radio-input-fill-hover: var(--uui-control-border-hover);
387
+ --uui-radio-input-fill-checked-disabled: var(--uui-control-border-checked-disabled);
388
+ --uui-radio-input-error: var(--uui-negative);
389
+
390
+ --uui-radio-input-font: var(--font-regular);
391
+
392
+ /* Checkbox vars */
393
+ --uui-checkbox-border: var(--uui-control-border);
394
+ --uui-checkbox-border-hover: var(--uui-control-border-hover);
395
+ --uui-checkbox-border-disabled: var(--uui-control-border-disabled);
396
+ --uui-checkbox-border-checked: var(--uui-control-border-checked);
397
+ --uui-checkbox-border-checked-disabled: var(--uui-control-border-checked-disabled);
398
+ --uui-checkbox-bg: var(--uui-control-bg);
399
+ --uui-checkbox-bg-checked: var(--uui-control-bg-checked);
400
+ --uui-checkbox-bg-disabled: var(--uui-control-bg-disabled);
401
+ --uui-checkbox-bg-checked-hover: var(--uui-control-bg-checked-hover);
402
+ --uui-checkbox-bg-checked-disabled: var(--uui-control-bg-checked-disabled);
403
+ --uui-checkbox-error: var(--uui-negative);
404
+ --uui-checkbox-fill: var(--uui-control-checkbox-icon);
405
+ --uui-checkbox-label: var(--uui-control-label);
406
+ --uui-checkbox-label-disabled: var(--uui-control-label-disabled);
407
+ --uui-checkbox-border-radius: var(--uui-border-radius);
408
+
409
+ --uui-checkbox-font: var(--font-regular);
410
+
411
+ /* Tag vars */
356
412
  --uui-tag-caption: var(--uui-text-primary);
357
413
  --uui-tag-fill: var(--uui-icon);
358
414
  --uui-tag-fill-hover: var(--uui-icon-hover);
@@ -363,28 +419,45 @@
363
419
  --uui-tag-font: var(--font-regular);
364
420
  --uui-tag-count-font: var(--font-semibold);
365
421
 
366
- /* DropMarker */
367
- --uui-drop-marker: var(--uui-primary-50);
368
- --uui-drop-marker-blocked: var(--uui-error-50);
369
-
370
- /* Tooltip */
422
+ /* TextArea vars */
423
+ --uui-text-area-bg: var(--uui-control-bg);
424
+ --uui-text-area-bg-disabled: var(--uui-control-bg-disabled);
425
+ --uui-text-area-border: var(--uui-control-border);
426
+ --uui-text-area-border-disabled: var(--uui-control-border-disabled);
427
+ --uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
428
+ --uui-text-area-border-active: var(--uui-control-border-checked);
429
+ --uui-text-area-border-error: var(--uui-error);
430
+ --uui-text-area-placeholder: var(--uui-control-placeholder);
431
+ --uui-text-area-text: var(--uui-control-text);
432
+ --uui-text-area-text-disabled: var(--uui-control-text-disabled);
433
+ --uui-text-area-icon: var(--uui-icon);
434
+ --uui-text-area-border-radius: var(--uui-border-radius);
435
+
436
+ --uui-text-area-font: var(--font-regular);
437
+ --uui-text-area-counter-font: var(--font-regular);
438
+
439
+ /* DropMarker vars */
440
+ --uui-drop-marker: var(--uui-primary);
441
+ --uui-drop-marker-blocked: var(--uui-error);
442
+
443
+ /* Tooltip vars */
371
444
  --uui-tooltip-shadow: var(--uui-shadow-level-2, 0 2px 18px 0 rgba(44, 47, 60, 0.3), 0 1px 4px 0 rgba(44, 47, 60, 0.5)); /* WebStorm Bag Report https://youtrack.jetbrains.com/issue/WEB-54442 */
372
445
  --uui-tooltip-arrow-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
373
446
  --uui-tooltip-border-radius: var(--uui-border-radius);
374
447
 
375
448
  --uui-tooltip-font: var(--font-regular);
376
449
 
377
- /* PickerInput */
450
+ /* PickerInput vars */
378
451
  --uui-picker_input-bg: var(--uui-surface);
379
452
 
380
- /* PickerToggler */
453
+ /* PickerToggler vars */
381
454
  --uui-picker-toggler-bg: var(--uui-control-bg);
382
455
  --uui-picker-toggler-bg-disabled: var(--uui-control-bg-disabled);
383
456
  --uui-picker-toggler-border: var(--uui-control-border);
384
457
  --uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
385
458
  --uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
386
459
  --uui-picker-toggler-border-active: var(--uui-control-border-checked);
387
- --uui-picker-toggler-border-error: var(--uui-error-50);
460
+ --uui-picker-toggler-border-error: var(--uui-error);
388
461
  --uui-picker-toggler-placeholder: var(--uui-control-placeholder);
389
462
  --uui-picker-toggler-text: var(--uui-control-text);
390
463
  --uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);
@@ -396,12 +469,33 @@
396
469
 
397
470
  --uui-picker-toggler-font: var(--font-regular);
398
471
 
472
+ /* Panel */
473
+ --uui-panel-border-radius: var(--uui-border-radius);
474
+ --uui-panel-shadow: var(--uui-shadow-level-1);
475
+
399
476
  /* Modals */
400
477
  --uui-modals-border-radius: var(--uui-border-radius);
401
478
  --uui-modals-overlay: rgba(29, 30, 38, 0.8);
402
479
  --uui-modals-shadow: var(--uui-shadow-level-3);
403
480
  --uui-modals-bg: var(--uui-surface);
404
481
 
482
+ /* TextPlaceholder */
483
+ --uui-text-placeholder-gradient: var(--uui-skeleton-gradient);
484
+ --uui-text-placeholder: var(--uui-skeleton);
485
+
486
+ /* LabeledInput */
487
+ --uui-labeled-input: var(--uui-text-primary);
488
+ --uui-labeled-input-disabled: var(--uui-text-disabled);
489
+ --uui-labeled-input-error: var(--uui-error);
490
+ --uui-labeled-input-fill: var(--uui-icon);
491
+ --uui-labeled-input-info-fill: var(--uui-icon);
492
+ --uui-labeled-input-optional-text: var(--uui-text-tertiary);
493
+ --uui-labeled-input-asterisk: var(--uui-error);
494
+
495
+ --uui-labeled-input-font: var(--font-semibold);
496
+ --uui-labeled-input-optional-font: var(--font-italic);
497
+ --uui-labeled-input-invalid-msg-font: var(--font-regular);
498
+
405
499
  /* Accordion */
406
500
  --uui-accordion-bg: var(--uui-surface);
407
501
  --uui-accordion-border: var(--uui-divider);
@@ -410,13 +504,39 @@
410
504
  --uui-accordion-text-disabled: var(--uui-text-disabled);
411
505
  --uui-accordion-icon: var(--uui-icon);
412
506
  --uui-accordion-icon-disabled: var(--uui-text-input-icon-disabled);
413
- --uui-accordion-focus: var(--uui-primary-50);
507
+ --uui-accordion-focus: var(--uui-primary);
414
508
  --uui-accordion-shadow: var(--uui-shadow-level-1);
415
509
  --uui-accordion-shadow-hovered: var(--uui-shadow-level-2);
416
510
 
417
511
  --uui-accordion-toggler-font: var(--font-semibold);
418
512
  --uui-accordion-body-font: var(--font-regular);
419
513
 
514
+ /* Switch */
515
+ --uui-switch-bg: var(--uui-control_switch-bg);
516
+ --uui-switch-border-hover: var(--uui-control_switch-border-hover);
517
+ --uui-switch-bg-checked: var(--uui-control-bg-checked);
518
+ --uui-switch-bg-hover: var(--uui-control-bg-hover);
519
+ --uui-switch-bg-disabled: var(--uui-control-bg-disabled);
520
+ --uui-switch-bg-checked-hover: var(--uui-control-bg-checked-hover);
521
+ --uui-switch-bg-checked-disabled: var(--uui-control-bg-checked-disabled);
522
+ --uui-switch-border: var(--uui-control-border);
523
+ --uui-switch-border-checked: var(--uui-control-border-checked);
524
+ --uui-switch-border-disabled: var(--uui-control-border-disabled);
525
+ --uui-switch-border-checked-hover: var(--uui-control-border-checked-hover);
526
+ --uui-switch-border-checked-hover-copy: var(--uui-control-border-checked-hover);
527
+ --uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);
528
+ --uui-switch-label: var(--uui-control-label);
529
+ --uui-switch-label-disabled: var(--uui-control-label-disabled);
530
+ --uui-switch-toggler-bg: var(--uui-control_switch-toggler-bg);
531
+ --uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
532
+ --uui-switch-toggler-border-checked: var(--uui-control-bg-checked);
533
+ --uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
534
+ --uui-switch-toggler-border-disabled: var(--uui-control-border-disabled);
535
+ --uui-switch-toggler-border-checked-hover: var(--uui-control-bg-checked-hover);
536
+ --uui-switch-toggler-border-checked-disabled: var(--uui-control-bg-checked-disabled);
537
+
538
+ --uui-switch-font: var(--font-regular);
539
+
420
540
  /* DropdownContainer */
421
541
  --uui-dropdown-container-border-radius: 6px;
422
542
  --uui-dropdown-container-shadow: var(--uui-shadow-level-2);
@@ -434,21 +554,79 @@
434
554
  --uui-dropdown-menu-body-font: var(--font-regular);
435
555
  --uui-dropdown-menu-item-font: var(--font-regular);
436
556
 
557
+ /* MainMenu */
558
+ --uui-main_menu-text: var(--uui-text-contrast);
559
+ --uui-main_menu-text-active: var(--uui-text-contrast);
560
+ --uui-main_menu-bg: var(--uui-surface-contrast-low);
561
+ --uui-main_menu-hover: var(--uui-surface-contrast-lower);
562
+ --uui-main_menu-active: var(--uui-surface-contrast-lower);
563
+ --uui-main_menu-border-active: var(--uui-primary);
564
+
565
+ --uui-main_menu-dropdown-bg: var(--uui-surface-contrast-lower);
566
+ --uui-main_menu-dropdown-bg-hover: var(--uui-surface-contrast-low);
567
+ --uui-main_menu-dropdown-hover: var(--uui-primary);
568
+ --uui-main_menu-dropdown-shadow: none;
569
+ --uui-main_menu-dropdown-border-radius: none;
570
+
571
+ --uui-main_menu-search-bg: var(--uui-secondary-darkest);
572
+ --uui-main_menu-search-border: var(--uui-secondary-darkest);
573
+ --uui-main_menu-search-placeholder: var(--uui-text-disabled);
574
+ --uui-main_menu-search-text: var(--uui-text-disabled);
575
+ --uui-main_menu-search-icon: var(--uui-icon-disabled);
576
+
577
+ --uui-main_menu-icon: var(--uui-text-contrast);
578
+ --uui-main_menu-icon-hover: var(--uui-text-contrast);
579
+ --uui-main_menu-icon-active: var(--uui-text-contrast);
580
+
581
+ --uui-main_menu-font: var(--font-semibold);
582
+ --uui-main_menu-search-font: var(--font-regular);
583
+
437
584
  /* BurgerMenu */
438
585
  --uui-burger_menu-bg: var(--uui-surface-contrast-lower);
439
586
  --uui-burger_menu-bg-hover: var(--uui-surface-contrast-lower);
440
587
  --uui-burger_menu-caption: var(--uui-text-contrast);
441
- --uui-burger_menu-caption-hover: var(--uui-primary-50);
588
+ --uui-burger_menu-caption-hover: var(--uui-primary);
442
589
  --uui-burger_menu-overlay: var(--uui-overlay);
443
590
  --uui-burger_icon: var(--uui-text-contrast);
444
591
  --uui-burger_item: var(--uui-text-brand);
445
592
 
446
593
  /* BurgerGroupHeader */
447
- //--uui-burger_group-text: var(--uui-text-disabled);
448
- //--uui-burger_group-bg: var(--uui-surface-contrast);
449
- //--uui-burger_group-line: var(--uui-text-secondary);
450
- //
451
- //--uui-burger_group-font: var(--font-regular);
594
+ --uui-burger_group-text: var(--uui-text-disabled);
595
+ --uui-burger_group-bg: var(--uui-surface-contrast);
596
+ --uui-burger_group-line: var(--uui-text-secondary);
597
+
598
+ --uui-burger_group-font: var(--font-regular);
599
+
600
+ /* BurgerButton */
601
+ --uui-burger_btn_caption: var(--uui-text-contrast);
602
+ --uui-burger_btn_caption-hover: var(--uui-primary);
603
+ --uui-burger_btn_caption-active: var(--uui-primary);
604
+ --uui-burger_btn-border: var(--uui-disabled);
605
+
606
+ --uui-burger_btn-font: var(--font-regular);
607
+
608
+ /* BurgerSearch */
609
+ --uui-burger_search: var(--uui-text-contrast);
610
+ --uui-burger_search-fill: var(--uui-text-disabled);
611
+ --uui-burger_search-bg: var(--uui-surface-contrast);
612
+ --uui-burger_search-placeholder: var(--uui-text-disabled);
613
+
614
+ --uui-burger_search-font: var(--font-regular);
615
+
616
+ /* NumericInput */
617
+ --uui-numeric-input-bg: var(--uui-control-bg);
618
+ --uui-numeric-input-bg-disabled: var(--uui-control-bg-disabled);
619
+ --uui-numeric-input-border: var(--uui-control-border);
620
+ --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
621
+ --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
622
+ --uui-numeric-input-border-active: var(--uui-control-border-checked);
623
+ --uui-numeric-input-border-error: var(--uui-error);
624
+ --uui-numeric-input-placeholder: var(--uui-control-placeholder);
625
+ --uui-numeric-input-text: var(--uui-control-text);
626
+ --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);
627
+ --uui-numeric-input-icon-clickable: var(--uui-icon);
628
+ --uui-numeric-input-icon-clickable-hover: var(--uui-icon-hover);
629
+ --uui-numeric-input-border-radius: var(--uui-border-radius);
452
630
 
453
631
  /* TimePicker */
454
632
  --uui-time-picker-bg: var(--uui-control-bg);
@@ -457,7 +635,7 @@
457
635
  --uui-time-picker-border-disabled: var(--uui-control-border-disabled);
458
636
  --uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
459
637
  --uui-time-picker-border-active: var(--uui-control-border-checked);
460
- --uui-time-picker-border-error: var(--uui-error-50);
638
+ --uui-time-picker-border-error: var(--uui-error);
461
639
  --uui-time-picker-placeholder: var(--uui-control-placeholder);
462
640
  --uui-time-picker-text: var(--uui-control-text);
463
641
  --uui-time-picker-text-disabled: var(--uui-control-text-disabled);
@@ -472,7 +650,7 @@
472
650
  --uui-search-input-border-disabled: var(--uui-control-border-disabled);
473
651
  --uui-search-input-border-hover: var(--uui-control_textinput-border-hover);
474
652
  --uui-search-input-border-active: var(--uui-control-border-checked);
475
- --uui-search-input-border-error: var(--uui-negative-50);
653
+ --uui-search-input-border-error: var(--uui-negative);
476
654
  --uui-search-input-placeholder: var(--uui-control-placeholder);
477
655
  --uui-search-input-text: var(--uui-control-text);
478
656
  --uui-search-input-text-disabled: var(--uui-control-text-disabled);
@@ -501,270 +679,95 @@
501
679
  --uui-filters-toggler-font: var(--font-regular);
502
680
  --uui-filters-panel-header-font: var(--font-regular);
503
681
 
682
+ /* NotificationCard */
683
+ --uui-notification-card-border-radius: var(--uui-border-radius);
684
+ --uui-notification-card-border-width: 0;
685
+ --uui-notification-card-border-top-width: 6px;
686
+ --uui-notification-card-shadow: var(--uui-shadow-level-2); //TODO: may change in the future
687
+
688
+ /* Alert */
689
+ --uui-alert-border-radius: 3px;
690
+
691
+ /* Panel */
692
+
693
+ --uui-panel-bg: var(--uui-surface);
694
+
504
695
  /* Spinner */
505
- --uui-spinner: var(--uui-primary-50);
696
+ --uui-spinner: var(--uui-primary);
506
697
 
507
698
  /* Blocker */
508
699
  --uui-blocker-bg: var(--uui-app-bg);
509
700
 
701
+ /* FlexRow */
702
+ --uui-flex-row-border-bottom: 1px solid var(--uui-divider);
703
+
704
+ /* DataTable vars */
705
+ --uui-dt-border: var(--uui-divider-light);
706
+
707
+ --uui-dt-cell-bg: transparent;
708
+ --uui-dt-cell-bg-resize: #EF55331F;
709
+ --uui-dt-cell-bg-invalid: var(--uui-negative-lightest);
710
+ --uui-dt-cell-border-hover: var(--uui-control_textinput-border-hover);
711
+ --uui-dt-cell-border-focus: var(--uui-control-border-checked);
712
+
713
+ --uui-dt-row-bg: var(--uui-surface);
714
+ --uui-dt-row-bg-hover: var(--uui-surface-lower);
715
+ --uui-dt-row-bg-invalid: #FEF7F6;
716
+ --uui-dt-row-bg-selected: #EBF7FF;
717
+
718
+ --uui-dt-header-row-bg: var(--uui-surface-low);
719
+ --uui-dt-header-row-bg-hover: var(--uui-surface-lowest);
720
+
721
+ --uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
722
+ --uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
723
+ --uui-dt-right-shadow: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
724
+ --uui-dt_header-drop_marker: var(--uui-primary);
725
+
726
+ --uui-dt-header-cell-font: var(--font-semibold);
727
+
510
728
  /* AvatarStack */
511
729
 
512
730
  --uui-avatar-stack-font: var(--font-semibold);
513
731
 
732
+ /* Badge */
733
+
734
+ --uui-badge-font: var(--font-regular);
735
+ --uui-badge-count-font: var(--font-semibold);
736
+
514
737
  /* Pagination */
515
738
 
516
739
  --uui-pagination-font: var(--font-regular);
517
740
 
741
+ /* DropSpot */
742
+
743
+ --uui-dropspot-border: var(--night400);
744
+ --uui-dropspot-border-dropstart: var(--uui-primary);
745
+ --uui-dropspot-background-dropstart: var(--uui-primary-lightest);
746
+ --uui-dropspot-link-color: var(--uui-primary);
747
+ --uui-dropspot-link-hover: var(--uui-primary-dark);
748
+ --uui-dropspot-icon: var(--uui-primary);
749
+
518
750
  /* FileCard */
519
- --uui-file-card-background: var(--night400);
520
- --uui-file-card-background-loaading: var(--night400);
521
- --uui-file-card-error: var(--uui-negative-50);
522
- --uui-file-card-error-block: var(--uui-negative-70);
523
- --uui-file-card-default: var(--uui-secondary-50);
524
- --uui-file-card-dropstart-border: var(--uui-primary-50);
525
- --uui-file-card-dropstart-background: var(--uui-primary-10);
526
- --uui-file-card-link-hover: var(--uui-primary-60);
751
+
752
+ --uui-filecard-background: var(--night400);
753
+ --uui-filecard-icon-error: var(--uui-negative);
754
+ --uui-filecard-border-error: var(--uui-negative);
755
+ --uui-filecard-text-error: var(--uui-negative-darkest);
756
+ --uui-filecard-default: var(--uui-secondary);
527
757
 
528
758
  /* IndeterminateBar */
529
759
 
530
- --uui-indeterminate-bar-wrapper: var(--uui-secondary-20);
531
- --uui-indeterminate-bar-background: var(--uui-primary-50);
760
+ --uui-indeterminate-bar-wrapper: var(--uui-secondary-light);
761
+ --uui-indeterminate-bar-background: var(--uui-primary);
532
762
 
533
763
  /* ProgressBar */
534
764
 
535
- --uui-progress-bar-wrapper: var(--uui-secondary-20);
536
- --uui-progress-bar-background: var(--uui-primary-50);
765
+ --uui-progress-bar-wrapper: var(--uui-secondary-light);
766
+ --uui-progress-bar-background: var(--uui-primary);
537
767
  --uui-progress-bar-label: var(--uui-surface-contrast-lower);
538
768
 
539
769
  /* ------------------------------------ */
540
770
 
541
- /* begin color classes */
542
-
543
- .uui-color-accent, .uui-color-grass, .uui-color-success {
544
- --uui-color-5: var(--uui-accent-5);
545
- --uui-color-10: var(--uui-accent-10);
546
- --uui-color-20: var(--uui-accent-20);
547
- --uui-color-50: var(--uui-accent-50);
548
- --uui-color-60: var(--uui-accent-60);
549
- --uui-color-70: var(--uui-accent-70);
550
- --uui-color-text: var(--uui-accent-50);
551
- --uui-color-contrast-text: var(--uui-text-white);
552
- }
553
-
554
- .uui-color-primary, .uui-color-sky, .uui-color-info {
555
- --uui-color-5: var(--uui-primary-5);
556
- --uui-color-10: var(--uui-primary-10);
557
- --uui-color-20: var(--uui-primary-20);
558
- --uui-color-50: var(--uui-primary-50);
559
- --uui-color-60: var(--uui-primary-60);
560
- --uui-color-70: var(--uui-primary-70);
561
- --uui-color-text: var(--uui-primary-50);
562
- --uui-color-contrast-text: var(--uui-text-white);
563
- }
564
-
565
- .uui-color-fire, .uui-color-negative, .uui-color-error {
566
- --uui-color-5: var(--uui-negative-5);
567
- --uui-color-10: var(--uui-negative-10);
568
- --uui-color-20: var(--uui-negative-20);
569
- --uui-color-50: var(--uui-negative-50);
570
- --uui-color-60: var(--uui-negative-60);
571
- --uui-color-70: var(--uui-negative-70);
572
- --uui-color-text: var(--uui-negative-50);
573
- --uui-color-contrast-text: var(--uui-text-white);
574
- }
575
-
576
- .uui-color-white {
577
- --uui-color-5: var(--white);
578
- --uui-color-10: var(--white);
579
- --uui-color-20: var(--night50);
580
- --uui-color-50: var(--white);
581
- --uui-color-60: var(--uui-color-white-800);
582
- --uui-color-70: var(--uui-color-white-900);
583
- --uui-color-text: var(--uui-secondary-60);
584
- --uui-color-contrast-text: var(--uui-text-dark);
585
- }
586
-
587
- .uui-color-night100 {
588
- --uui-color-5: var(--white);
589
- --uui-color-10: var(--white);
590
- --uui-color-20: var(--night50);
591
- --uui-color-50: var(--night100);
592
- --uui-color-60: var(--uui-color-night100-800);
593
- --uui-color-70: var(--uui-color-night100-900);
594
- --uui-color-text: var(--uui-secondary-60);
595
- --uui-color-contrast-text: var(--uui-text-dark);
596
- }
597
-
598
- .uui-color-night200 {
599
- --uui-color-5: var(--white);
600
- --uui-color-10: var(--night50);
601
- --uui-color-20: var(--night100);
602
- --uui-color-50: var(--night200);
603
- --uui-color-60: var(--uui-color-night200-800);
604
- --uui-color-70: var(--uui-color-night200-900);
605
- --uui-color-text: var(--uui-secondary-60);
606
- --uui-color-contrast-text: var(--uui-text-dark);
607
- }
608
-
609
- .uui-badge.uui-color-default {
610
- --uui-color-5: var(--night50);
611
- --uui-color-10: var(--night100);
612
- --uui-color-20: var(--night200);
613
- --uui-color-50: var(--night300);
614
- --uui-color-60: var(--night400);
615
- --uui-color-70: var(--night500);
616
- --uui-color-text: var(--uui-text-primary);
617
- --uui-color-contrast-text: var(--uui-text-primary);
618
- }
619
-
620
- .uui-color-night300 {
621
- --uui-color-5: var(--night50);
622
- --uui-color-10: var(--night100);
623
- --uui-color-20: var(--night200);
624
- --uui-color-50: var(--night300);
625
- --uui-color-60: var(--uui-color-night300-800);
626
- --uui-color-70: var(--uui-color-night300-900);
627
- --uui-color-text: var(--uui-secondary-60);
628
- --uui-color-contrast-text: var(--uui-text-dark);
629
- }
630
-
631
- .uui-color-night400 {
632
- --uui-color-5: var(--night100);
633
- --uui-color-10: var(--night200);
634
- --uui-color-20: var(--night300);
635
- --uui-color-50: var(--night400);
636
- --uui-color-60: var(--uui-color-night400-800);
637
- --uui-color-70: var(--uui-color-night400-900);
638
- --uui-color-text: var(--uui-secondary-60);
639
- --uui-color-contrast-text: var(--uui-text-dark);
640
- }
641
-
642
- .uui-color-night500 {
643
- --uui-color-5: var(--night200);
644
- --uui-color-10: var(--night300);
645
- --uui-color-20: var(--night400);
646
- --uui-color-50: var(--night500);
647
- --uui-color-60: var(--uui-color-night500-800);
648
- --uui-color-70: var(--uui-color-night500-900);
649
- --uui-color-text: var(--uui-secondary-60);
650
- --uui-color-contrast-text: var(--uui-text-white);
651
- }
652
-
653
- .uui-icon_button.uui-color-default,
654
- .uui-color-night600,
655
- .uui-color-gray,
656
- .uui-color-secondary {
657
- --uui-color-5: var(--uui-secondary-5);
658
- --uui-color-10: var(--uui-secondary-10);
659
- --uui-color-20: var(--uui-secondary-20);
660
- --uui-color-50: var(--uui-secondary-50);
661
- --uui-color-60: var(--uui-secondary-60);
662
- --uui-color-70: var(--uui-secondary-70);
663
- --uui-color-text: var(--uui-secondary-60);
664
- --uui-color-contrast-text: var(--uui-text-white);
665
- }
666
-
667
- .uui-color-sun, .uui-color-warning {
668
- --uui-color-5: var(--sun-soft);
669
- --uui-color-10: var(--sun-lightest);
670
- --uui-color-20: var(--sun-light);
671
- --uui-color-50: var(--sun);
672
- --uui-color-60: var(--sun-dark);
673
- --uui-color-70: var(--sun-darkest);
674
- --uui-color-text: var(--sun-darkest);
675
- --uui-color-contrast-text: var(--uui-text-dark);
676
- }
677
-
678
- .uui-color-yellow {
679
- --uui-color-5: var(--yellow-5);
680
- --uui-color-10: var(--yellow-10);
681
- --uui-color-20: var(--yellow-20);
682
- --uui-color-50: var(--yellow-30);
683
- --uui-color-60: var(--yellow-40);
684
- --uui-color-70: var(--yellow-50);
685
- --uui-color-text: var(--yellow-50);
686
- --uui-color-contrast-text: var(--uui-text-dark);
687
- }
688
-
689
- .uui-color-orange {
690
- --uui-color-5: var(--orange-5);
691
- --uui-color-10: var(--orange-10);
692
- --uui-color-20: var(--orange-20);
693
- --uui-color-50: var(--orange-30);
694
- --uui-color-60: var(--orange-40);
695
- --uui-color-70: var(--orange-50);
696
- --uui-color-text: var(--orange-50);
697
- --uui-color-contrast-text: var(--uui-text-dark);
698
- }
699
-
700
- .uui-color-fuchsia {
701
- --uui-color-5: var(--fuchsia-5);
702
- --uui-color-10: var(--fuchsia-10);
703
- --uui-color-20: var(--fuchsia-20);
704
- --uui-color-50: var(--fuchsia-30);
705
- --uui-color-60: var(--fuchsia-40);
706
- --uui-color-70: var(--fuchsia-50);
707
- --uui-color-text: var(--fuchsia-50);
708
- --uui-color-contrast-text: var(--uui-text-white);
709
- }
710
-
711
- .uui-color-purple {
712
- --uui-color-5: var(--purple-5);
713
- --uui-color-10: var(--purple-10);
714
- --uui-color-20: var(--purple-20);
715
- --uui-color-50: var(--purple-30);
716
- --uui-color-60: var(--purple-40);
717
- --uui-color-70: var(--purple-50);
718
- --uui-color-text: var(--purple-50);
719
- --uui-color-contrast-text: var(--uui-text-white);
720
- }
721
-
722
- .uui-color-lavanda {
723
- --uui-color-5: var(--lavanda-5);
724
- --uui-color-10: var(--lavanda-10);
725
- --uui-color-20: var(--lavanda-20);
726
- --uui-color-50: var(--lavanda-30);
727
- --uui-color-60: var(--lavanda-40);
728
- --uui-color-70: var(--lavanda-50);
729
- --uui-color-text: var(--lavanda-50);
730
- --uui-color-contrast-text: var(--uui-text-white);
731
- }
732
-
733
- .uui-color-cobalt {
734
- --uui-color-5: var(--cobalt-5);
735
- --uui-color-10: var(--cobalt-10);
736
- --uui-color-20: var(--cobalt-20);
737
- --uui-color-50: var(--cobalt-30);
738
- --uui-color-60: var(--cobalt-40);
739
- --uui-color-70: var(--cobalt-50);
740
- --uui-color-text: var(--cobalt-50);
741
- --uui-color-contrast-text: var(--uui-text-white);
742
- }
743
-
744
- .uui-color-cyan {
745
- --uui-color-5: var(--cyan-5);
746
- --uui-color-10: var(--cyan-10);
747
- --uui-color-20: var(--cyan-20);
748
- --uui-color-50: var(--cyan-30);
749
- --uui-color-60: var(--cyan-40);
750
- --uui-color-70: var(--cyan-50);
751
- --uui-color-text: var(--cyan-50);
752
- --uui-color-contrast-text: var(--uui-text-dark);
753
- }
754
-
755
- .uui-color-mint {
756
- --uui-color-5: var(--mint-5);
757
- --uui-color-10: var(--mint-10);
758
- --uui-color-20: var(--mint-20);
759
- --uui-color-50: var(--mint-30);
760
- --uui-color-60: var(--mint-40);
761
- --uui-color-70: var(--mint-50);
762
- --uui-color-text: var(--mint-50);
763
- --uui-color-contrast-text: var(--uui-text-dark);
764
- }
765
-
766
- /* end color classes */
767
-
768
771
  .tooltip-contrast,
769
772
  .tooltip-gray {
770
773
  --uui-tooltip-bg: var(--uui-surface-contrast);
@@ -779,241 +782,369 @@
779
782
 
780
783
  .tooltip-critical,
781
784
  .tooltip-fire {
782
- --uui-tooltip-bg: var(--uui-error-60);
785
+ --uui-tooltip-bg: var(--uui-error-dark);
783
786
  --uui-tooltip-text: var(--uui-text-white);
784
787
  }
785
788
 
786
- //.button-sky, .button-primary {
787
- // --uui-btn-bg: var(--uui-primary);
788
- // --uui-btn-bg-hover: var(--uui-primary-dark);
789
- // --uui-btn-bg-active: var(--uui-primary-darkest);
790
- // --uui-btn-bg-halftone: var(--white);
791
- // --uui-btn-bg-halftone-hover: var(--uui-primary-lightest);
792
- // --uui-btn-bg-halftone-active: var(--uui-primary-light);
793
- // --uui-btn-border: var(--uui-primary);
794
- // --uui-btn-border-hover: var(--uui-primary-dark);
795
- // --uui-btn-border-active: var(--uui-primary-darkest);
796
- // --uui-btn-bg-disabled: var(--uui-disabled);
797
- // --uui-btn-border-disabled: var(--uui-disabled);
798
- // --uui-btn-caption: var(--uui-text-white);
799
- // --uui-btn-caption-halftone: var(--uui-primary);
800
- // --uui-btn-caption-disabled: var(--uui-text-disabled);
801
- //}
802
- //
803
- //.button-accent, .button-grass {
804
- // --uui-btn-bg: var(--uui-accent);
805
- // --uui-btn-bg-hover: var(--uui-accent-dark);
806
- // --uui-btn-bg-active: var(--uui-accent-darkest);
807
- // --uui-btn-bg-halftone: var(--white);
808
- // --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
809
- // --uui-btn-bg-halftone-active: var(--uui-accent-light);
810
- // --uui-btn-border: var(--uui-accent);
811
- // --uui-btn-border-hover: var(--uui-accent-dark);
812
- // --uui-btn-border-active: var(--uui-accent-darkest);
813
- // --uui-btn-bg-disabled: var(--uui-disabled);
814
- // --uui-btn-border-disabled: var(--uui-disabled);
815
- // --uui-btn-caption: var(--uui-text-white);
816
- // --uui-btn-caption-halftone: var(--uui-accent);
817
- // --uui-btn-caption-disabled: var(--uui-text-disabled);
818
- //}
819
- //
820
- //.button-sun {
821
- // --uui-btn-bg: var(--sun);
822
- // --uui-btn-bg-hover: var(--sun-dark);
823
- // --uui-btn-bg-active: var(--sun-darkest);
824
- // --uui-btn-bg-halftone: var(--white);
825
- // --uui-btn-bg-halftone-hover: var(--sun-lightest);
826
- // --uui-btn-bg-halftone-active: var(--sun-light);
827
- // --uui-btn-border: var(--sun);
828
- // --uui-btn-border-hover: var(--sun-dark);
829
- // --uui-btn-border-active: var(--sun-darkest);
830
- // --uui-btn-bg-disabled: var(--uui-disabled);
831
- // --uui-btn-border-disabled: var(--uui-disabled);
832
- // --uui-btn-caption: var(--uui-control-text);
833
- // --uui-btn-caption-halftone: var(--sun-darkest);
834
- // --uui-btn-caption-disabled: var(--uui-text-disabled);
835
- //}
836
- //
837
- //.button-fire, .button-negative {
838
- // --uui-btn-bg: var(--uui-negative);
839
- // --uui-btn-bg-hover: var(--uui-negative-dark);
840
- // --uui-btn-bg-active: var(--uui-negative-darkest);
841
- // --uui-btn-bg-halftone: var(--white);
842
- // --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
843
- // --uui-btn-bg-halftone-active: var(--uui-negative-light);
844
- // --uui-btn-border: var(--uui-negative);
845
- // --uui-btn-border-hover: var(--uui-negative-dark);
846
- // --uui-btn-border-active: var(--uui-negative-darkest);
847
- // --uui-btn-bg-disabled: var(--uui-disabled);
848
- // --uui-btn-border-disabled: var(--uui-disabled);
849
- // --uui-btn-caption: var(--uui-text-white);
850
- // --uui-btn-caption-halftone: var(--uui-negative);
851
- // --uui-btn-caption-disabled: var(--uui-text-disabled);
852
- //}
853
- //
854
- //.button-night500,
855
- //.button-night600,
856
- //.button-gray,
857
- //.button-secondary {
858
- // --uui-btn-bg: var(--uui-secondary);
859
- // --uui-btn-bg-hover: var(--uui-secondary-dark);
860
- // --uui-btn-bg-active: var(--uui-secondary-darkest);
861
- // --uui-btn-bg-halftone: var(--white);
862
- // --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
863
- // --uui-btn-bg-halftone-active: var(--uui-secondary-light);
864
- // --uui-btn-border: var(--uui-secondary);
865
- // --uui-btn-border-hover: var(--uui-secondary-dark);
866
- // --uui-btn-border-active: var(--uui-secondary-darkest);
867
- // --uui-btn-bg-disabled: var(--uui-disabled);
868
- // --uui-btn-border-disabled: var(--uui-disabled);
869
- // --uui-btn-caption: var(--uui-text-white);
870
- // --uui-btn-caption-halftone: var(--uui-secondary-dark);
871
- // --uui-btn-caption-disabled: var(--uui-text-disabled);
872
- //}
873
- //
874
- //.button-white {
875
- // --uui-btn-bg: var(--white);
876
- // --uui-btn-bg-hover: var(--uui-color-white-800);
877
- // --uui-btn-bg-active: var(--uui-color-white-900);
878
- // --uui-btn-bg-halftone: var(--white);
879
- // --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
880
- // --uui-btn-bg-halftone-active: var(--uui-secondary-light);
881
- // --uui-btn-border: var(--white);
882
- // --uui-btn-border-hover: var(--uui-color-white-800);
883
- // --uui-btn-border-active: var(--uui-color-white-900);
884
- // --uui-btn-bg-disabled: var(--uui-disabled);
885
- // --uui-btn-border-disabled: var(--uui-disabled);
886
- // --uui-btn-caption: var(--night800);
887
- // --uui-btn-caption-halftone: var(--uui-secondary-dark);
888
- // --uui-btn-caption-disabled: var(--uui-text-disabled);
889
- //}
890
-
891
-
892
- //.icon-button-sky,
893
- //.icon-button-info {
894
- // --uui-icon-btn: var(--uui-info);
895
- // --uui-icon-btn-hover: var(--uui-info-dark);
896
- // --uui-icon-btn-active: var(--uui-info-darkest);
897
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
898
- //}
899
- //
900
- //.icon-button-grass,
901
- //.icon-button-success {
902
- // --uui-icon-btn: var(--uui-success);
903
- // --uui-icon-btn-hover: var(--uui-success-dark);
904
- // --uui-icon-btn-active: var(--uui-success-darkest);
905
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
906
- //}
907
- //
908
- //.icon-button-sun,
909
- //.icon-button-warning {
910
- // --uui-icon-btn: var(--uui-warning);
911
- // --uui-icon-btn-hover: var(--uui-warning-dark);
912
- // --uui-icon-btn-active: var(--uui-warning-darkest);
913
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
914
- //}
915
- //
916
- //.icon-button-fire,
917
- //.icon-button-error {
918
- // --uui-icon-btn: var(--uui-error);
919
- // --uui-icon-btn-hover: var(--uui-error-dark);
920
- // --uui-icon-btn-active: var(--uui-error-darkest);
921
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
922
- //}
923
- //
924
- //.icon-button-cobalt {
925
- // --uui-icon-btn: var(--cobalt-30);
926
- // --uui-icon-btn-hover: var(--cobalt-40);
927
- // --uui-icon-btn-active: var(--cobalt-50);
928
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
929
- //}
930
- //
931
- //.icon-button-lavanda {
932
- // --uui-icon-btn: var(--lavanda-30);
933
- // --uui-icon-btn-hover: var(--lavanda-40);
934
- // --uui-icon-btn-active: var(--lavanda-50);
935
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
936
- //}
937
- //
938
- //.icon-button-fuchsia {
939
- // --uui-icon-btn: var(--fuchia-30);
940
- // --uui-icon-btn-hover: var(--fuchia-40);
941
- // --uui-icon-btn-active: var(--fuchia-50);
942
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
943
- //}
944
- //
945
- //.icon-button-white {
946
- // --uui-icon-btn: var(--white);
947
- // --uui-icon-btn-hover: var(--uui-color-white-800);
948
- // --uui-icon-btn-active: var(--uui-color-white-900);
949
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
950
- //}
951
- //
952
- //.icon-button-night200 {
953
- // --uui-icon-btn: var(--night200);
954
- // --uui-icon-btn-hover: var(--uui-color-night200-800);
955
- // --uui-icon-btn-active: var(--uui-color-night200-900);
956
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
957
- //}
958
- //
959
- //.icon-button-night300 {
960
- // --uui-icon-btn: var(--night300);
961
- // --uui-icon-btn-hover: var(--uui-color-night300-800);
962
- // --uui-icon-btn-active: var(--uui-color-night300-900);
963
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
964
- //}
965
- //
966
- //.icon-button-night400 {
967
- // --uui-icon-btn: var(--night400);
968
- // --uui-icon-btn-hover: var(--uui-color-night400-800);
969
- // --uui-icon-btn-active: var(--uui-color-night400-900);
970
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
971
- //}
972
- //
973
- //.icon-button-night500 {
974
- // --uui-icon-btn: var(--night500);
975
- // --uui-icon-btn-hover: var(--uui-color-night500-800);
976
- // --uui-icon-btn-active: var(--uui-color-night500-900);
977
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
978
- //}
979
- //
980
- //.icon-button-night600,
981
- //.icon-button-secondary,
982
- //.icon-button-default {
983
- // --uui-icon-btn: var(--night600);
984
- // --uui-icon-btn-hover: var(--uui-icon-hover);
985
- // --uui-icon-btn-active: var(--uui-icon-active);
986
- // --uui-icon-btn-disabled: var(--uui-icon-disabled);
987
- //}
789
+ .button-sky, .button-primary {
790
+ --uui-btn-bg: var(--uui-primary);
791
+ --uui-btn-bg-hover: var(--uui-primary-dark);
792
+ --uui-btn-bg-active: var(--uui-primary-darkest);
793
+ --uui-btn-bg-halftone: var(--white);
794
+ --uui-btn-bg-halftone-hover: var(--uui-primary-lightest);
795
+ --uui-btn-bg-halftone-active: var(--uui-primary-light);
796
+ --uui-btn-border: var(--uui-primary);
797
+ --uui-btn-border-hover: var(--uui-primary-dark);
798
+ --uui-btn-border-active: var(--uui-primary-darkest);
799
+ --uui-btn-bg-disabled: var(--uui-disabled);
800
+ --uui-btn-border-disabled: var(--uui-disabled);
801
+ --uui-btn-caption: var(--uui-text-white);
802
+ --uui-btn-caption-halftone: var(--uui-primary);
803
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
804
+ }
805
+
806
+ .button-accent, .button-grass {
807
+ --uui-btn-bg: var(--uui-accent);
808
+ --uui-btn-bg-hover: var(--uui-accent-dark);
809
+ --uui-btn-bg-active: var(--uui-accent-darkest);
810
+ --uui-btn-bg-halftone: var(--white);
811
+ --uui-btn-bg-halftone-hover: var(--uui-accent-lightest);
812
+ --uui-btn-bg-halftone-active: var(--uui-accent-light);
813
+ --uui-btn-border: var(--uui-accent);
814
+ --uui-btn-border-hover: var(--uui-accent-dark);
815
+ --uui-btn-border-active: var(--uui-accent-darkest);
816
+ --uui-btn-bg-disabled: var(--uui-disabled);
817
+ --uui-btn-border-disabled: var(--uui-disabled);
818
+ --uui-btn-caption: var(--uui-text-white);
819
+ --uui-btn-caption-halftone: var(--uui-accent);
820
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
821
+ }
822
+
823
+ .button-sun {
824
+ --uui-btn-bg: var(--sun);
825
+ --uui-btn-bg-hover: var(--sun-dark);
826
+ --uui-btn-bg-active: var(--sun-darkest);
827
+ --uui-btn-bg-halftone: var(--white);
828
+ --uui-btn-bg-halftone-hover: var(--sun-lightest);
829
+ --uui-btn-bg-halftone-active: var(--sun-light);
830
+ --uui-btn-border: var(--sun);
831
+ --uui-btn-border-hover: var(--sun-dark);
832
+ --uui-btn-border-active: var(--sun-darkest);
833
+ --uui-btn-bg-disabled: var(--uui-disabled);
834
+ --uui-btn-border-disabled: var(--uui-disabled);
835
+ --uui-btn-caption: var(--uui-control-text);
836
+ --uui-btn-caption-halftone: var(--sun-darkest);
837
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
838
+ }
839
+
840
+ .button-fire, .button-negative {
841
+ --uui-btn-bg: var(--uui-negative);
842
+ --uui-btn-bg-hover: var(--uui-negative-dark);
843
+ --uui-btn-bg-active: var(--uui-negative-darkest);
844
+ --uui-btn-bg-halftone: var(--white);
845
+ --uui-btn-bg-halftone-hover: var(--uui-negative-lightest);
846
+ --uui-btn-bg-halftone-active: var(--uui-negative-light);
847
+ --uui-btn-border: var(--uui-negative);
848
+ --uui-btn-border-hover: var(--uui-negative-dark);
849
+ --uui-btn-border-active: var(--uui-negative-darkest);
850
+ --uui-btn-bg-disabled: var(--uui-disabled);
851
+ --uui-btn-border-disabled: var(--uui-disabled);
852
+ --uui-btn-caption: var(--uui-text-white);
853
+ --uui-btn-caption-halftone: var(--uui-negative);
854
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
855
+ }
856
+
857
+ .button-night500,
858
+ .button-night600,
859
+ .button-gray,
860
+ .button-secondary {
861
+ --uui-btn-bg: var(--uui-secondary);
862
+ --uui-btn-bg-hover: var(--uui-secondary-dark);
863
+ --uui-btn-bg-active: var(--uui-secondary-darkest);
864
+ --uui-btn-bg-halftone: var(--white);
865
+ --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
866
+ --uui-btn-bg-halftone-active: var(--uui-secondary-light);
867
+ --uui-btn-border: var(--uui-secondary);
868
+ --uui-btn-border-hover: var(--uui-secondary-dark);
869
+ --uui-btn-border-active: var(--uui-secondary-darkest);
870
+ --uui-btn-bg-disabled: var(--uui-disabled);
871
+ --uui-btn-border-disabled: var(--uui-disabled);
872
+ --uui-btn-caption: var(--uui-text-white);
873
+ --uui-btn-caption-halftone: var(--uui-secondary-dark);
874
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
875
+ }
876
+
877
+ .button-white {
878
+ --uui-btn-bg: var(--white);
879
+ --uui-btn-bg-hover: var(--uui-color-white-800);
880
+ --uui-btn-bg-active: var(--uui-color-white-900);
881
+ --uui-btn-bg-halftone: var(--white);
882
+ --uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
883
+ --uui-btn-bg-halftone-active: var(--uui-secondary-light);
884
+ --uui-btn-border: var(--white);
885
+ --uui-btn-border-hover: var(--uui-color-white-800);
886
+ --uui-btn-border-active: var(--uui-color-white-900);
887
+ --uui-btn-bg-disabled: var(--uui-disabled);
888
+ --uui-btn-border-disabled: var(--uui-disabled);
889
+ --uui-btn-caption: var(--night800);
890
+ --uui-btn-caption-halftone: var(--uui-secondary-dark);
891
+ --uui-btn-caption-disabled: var(--uui-text-disabled);
892
+ }
893
+
894
+ .link-button-primary,
895
+ .link-button-sky {
896
+ --uui-link-button-text: var(--uui-primary);
897
+ --uui-link-button-text-hover: var(--uui-primary-dark);
898
+ --uui-link-button-text-active: var(--uui-primary-darkest);
899
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
900
+ }
901
+
902
+ .link-button-secondary,
903
+ .link-button-night600 {
904
+ --uui-link-button-text: var(--uui-secondary);
905
+ --uui-link-button-text-hover: var(--uui-secondary-dark);
906
+ --uui-link-button-text-active: var(--uui-secondary-darkest);
907
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
908
+ }
909
+
910
+ .link-button-contrast,
911
+ .link-button-night100 {
912
+ --uui-link-button-text: var(--night100);
913
+ --uui-link-button-text-hover: var(--uui-color-night100-800);
914
+ --uui-link-button-text-active: var(--uui-color-night100-900);
915
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
916
+ }
917
+
918
+ .link-button-grass {
919
+ --uui-link-button-text: var(--grass);
920
+ --uui-link-button-text-hover: var(--grass-dark);
921
+ --uui-link-button-text-active: var(--grass-darkest);
922
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
923
+ }
924
+
925
+ .link-button-sun {
926
+ --uui-link-button-text: var(--sun);
927
+ --uui-link-button-text-hover: var(--sun-dark);
928
+ --uui-link-button-text-active: var(--sun-darkest);
929
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
930
+ }
931
+
932
+ .link-button-fire {
933
+ --uui-link-button-text: var(--fire);
934
+ --uui-link-button-text-hover: var(--fire-dark);
935
+ --uui-link-button-text-active: var(--fire-darkest);
936
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
937
+ }
938
+
939
+ .link-button-cobalt {
940
+ --uui-link-button-text: var(--cobalt-30);
941
+ --uui-link-button-text-hover: var(--cobalt-40);
942
+ --uui-link-button-text-active: var(--cobalt-50);
943
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
944
+ }
945
+
946
+ .link-button-lavanda {
947
+ --uui-link-button-text: var(--lavanda-30);
948
+ --uui-link-button-text-hover: var(--lavanda-40);
949
+ --uui-link-button-text-active: var(--lavanda-50);
950
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
951
+ }
952
+
953
+ .link-button-fuchsia {
954
+ --uui-link-button-text: var(--fuchia-30);
955
+ --uui-link-button-text-hover: var(--fuchia-40);
956
+ --uui-link-button-text-active: var(--fuchia-50);
957
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
958
+ }
959
+
960
+ .link-button-white {
961
+ --uui-link-button-text: var(--white);
962
+ --uui-link-button-text-hover: var(--uui-color-white-800);
963
+ --uui-link-button-text-active: var(--uui-color-white-900);
964
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
965
+ }
966
+
967
+ .link-button-night50 {
968
+ --uui-link-button-text: var(--night50);
969
+ --uui-link-button-text-hover: var(--uui-color-night50-800);
970
+ --uui-link-button-text-active: var(--uui-color-night50-900);
971
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
972
+ }
973
+
974
+ .link-button-night200 {
975
+ --uui-link-button-text: var(--night200);
976
+ --uui-link-button-text-hover: var(--uui-color-night200-800);
977
+ --uui-link-button-text-active: var(--uui-color-night200-900);
978
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
979
+ }
980
+
981
+ .link-button-night300 {
982
+ --uui-link-button-text: var(--night300);
983
+ --uui-link-button-text-hover: var(--uui-color-night300-800);
984
+ --uui-link-button-text-active: var(--uui-color-night300-900);
985
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
986
+ }
987
+
988
+ .link-button-night400 {
989
+ --uui-link-button-text: var(--night400);
990
+ --uui-link-button-text-hover: var(--uui-color-night400-800);
991
+ --uui-link-button-text-active: var(--uui-color-night400-900);
992
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
993
+ }
994
+
995
+ .link-button-night500 {
996
+ --uui-link-button-text: var(--night500);
997
+ --uui-link-button-text-hover: var(--uui-color-night500-800);
998
+ --uui-link-button-text-active: var(--uui-color-night500-900);
999
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
1000
+ }
1001
+
1002
+ .link-button-night700 {
1003
+ --uui-link-button-text: var(--night700);
1004
+ --uui-link-button-text-hover: var(--uui-color-night700-800);
1005
+ --uui-link-button-text-active: var(--uui-color-night700-900);
1006
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
1007
+ }
1008
+
1009
+ .link-button-night800 {
1010
+ --uui-link-button-text: var(--night800);
1011
+ --uui-link-button-text-hover: var(--uui-color-night800-800);
1012
+ --uui-link-button-text-active: var(--uui-color-night800-900);
1013
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
1014
+ }
1015
+
1016
+ .link-button-night900 {
1017
+ --uui-link-button-text: var(--night900);
1018
+ --uui-link-button-text-hover: var(--uui-color-night900-800);
1019
+ --uui-link-button-text-active: var(--uui-color-night900-900);
1020
+ --uui-link-button-text-disabled: var(--uui-text-disabled);
1021
+ }
1022
+
1023
+ .icon-button-sky,
1024
+ .icon-button-info {
1025
+ --uui-icon-btn: var(--uui-info);
1026
+ --uui-icon-btn-hover: var(--uui-info-dark);
1027
+ --uui-icon-btn-active: var(--uui-info-darkest);
1028
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1029
+ }
1030
+
1031
+ .icon-button-grass,
1032
+ .icon-button-success {
1033
+ --uui-icon-btn: var(--uui-success);
1034
+ --uui-icon-btn-hover: var(--uui-success-dark);
1035
+ --uui-icon-btn-active: var(--uui-success-darkest);
1036
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1037
+ }
1038
+
1039
+ .icon-button-sun,
1040
+ .icon-button-warning {
1041
+ --uui-icon-btn: var(--uui-warning);
1042
+ --uui-icon-btn-hover: var(--uui-warning-dark);
1043
+ --uui-icon-btn-active: var(--uui-warning-darkest);
1044
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1045
+ }
1046
+
1047
+ .icon-button-fire,
1048
+ .icon-button-error {
1049
+ --uui-icon-btn: var(--uui-error);
1050
+ --uui-icon-btn-hover: var(--uui-error-dark);
1051
+ --uui-icon-btn-active: var(--uui-error-darkest);
1052
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1053
+ }
1054
+
1055
+ .icon-button-cobalt {
1056
+ --uui-icon-btn: var(--cobalt-30);
1057
+ --uui-icon-btn-hover: var(--cobalt-40);
1058
+ --uui-icon-btn-active: var(--cobalt-50);
1059
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1060
+ }
1061
+
1062
+ .icon-button-lavanda {
1063
+ --uui-icon-btn: var(--lavanda-30);
1064
+ --uui-icon-btn-hover: var(--lavanda-40);
1065
+ --uui-icon-btn-active: var(--lavanda-50);
1066
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1067
+ }
1068
+
1069
+ .icon-button-fuchsia {
1070
+ --uui-icon-btn: var(--fuchia-30);
1071
+ --uui-icon-btn-hover: var(--fuchia-40);
1072
+ --uui-icon-btn-active: var(--fuchia-50);
1073
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1074
+ }
1075
+
1076
+ .icon-button-white {
1077
+ --uui-icon-btn: var(--white);
1078
+ --uui-icon-btn-hover: var(--uui-color-white-800);
1079
+ --uui-icon-btn-active: var(--uui-color-white-900);
1080
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1081
+ }
1082
+
1083
+ .icon-button-night200 {
1084
+ --uui-icon-btn: var(--night200);
1085
+ --uui-icon-btn-hover: var(--uui-color-night200-800);
1086
+ --uui-icon-btn-active: var(--uui-color-night200-900);
1087
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1088
+ }
1089
+
1090
+ .icon-button-night300 {
1091
+ --uui-icon-btn: var(--night300);
1092
+ --uui-icon-btn-hover: var(--uui-color-night300-800);
1093
+ --uui-icon-btn-active: var(--uui-color-night300-900);
1094
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1095
+ }
1096
+
1097
+ .icon-button-night400 {
1098
+ --uui-icon-btn: var(--night400);
1099
+ --uui-icon-btn-hover: var(--uui-color-night400-800);
1100
+ --uui-icon-btn-active: var(--uui-color-night400-900);
1101
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1102
+ }
1103
+
1104
+ .icon-button-night500 {
1105
+ --uui-icon-btn: var(--night500);
1106
+ --uui-icon-btn-hover: var(--uui-color-night500-800);
1107
+ --uui-icon-btn-active: var(--uui-color-night500-900);
1108
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1109
+ }
1110
+
1111
+ .icon-button-night600,
1112
+ .icon-button-secondary,
1113
+ .icon-button-default {
1114
+ --uui-icon-btn: var(--night600);
1115
+ --uui-icon-btn-hover: var(--uui-icon-hover);
1116
+ --uui-icon-btn-active: var(--uui-icon-active);
1117
+ --uui-icon-btn-disabled: var(--uui-icon-disabled);
1118
+ }
988
1119
 
989
1120
  .notification-card-sun,
990
1121
  .notification-card-warning {
991
- --uui-notification-card-fill: var(--uui-warning-50);
992
- --uui-notification-card-border: var(--uui-warning-50);
1122
+ --uui-notification-card-fill: var(--uui-warning);
1123
+ --uui-notification-card-border: var(--uui-warning);
993
1124
  --uui-notification-card-bg: var(--uui-surface);
994
1125
  --uui-notification-card-text: var(--uui-text-primary);
995
1126
  }
996
1127
 
997
1128
  .notification-card-success,
998
1129
  .notification-card-grass {
999
- --uui-notification-card-fill: var(--uui-success-50);
1000
- --uui-notification-card-border: var(--uui-success-50);
1130
+ --uui-notification-card-fill: var(--uui-success);
1131
+ --uui-notification-card-border: var(--uui-success);
1001
1132
  --uui-notification-card-bg: var(--uui-surface);
1002
1133
  --uui-notification-card-text: var(--uui-text-primary);
1003
1134
  }
1004
1135
 
1005
1136
  .notification-card-info,
1006
1137
  .notification-card-sky {
1007
- --uui-notification-card-fill: var(--uui-info-50);
1008
- --uui-notification-card-border: var(--uui-info-50);
1138
+ --uui-notification-card-fill: var(--uui-info);
1139
+ --uui-notification-card-border: var(--uui-info);
1009
1140
  --uui-notification-card-bg: var(--uui-surface);
1010
1141
  --uui-notification-card-text: var(--uui-text-primary);
1011
1142
  }
1012
1143
 
1013
1144
  .notification-card-error,
1014
1145
  .notification-card-fire {
1015
- --uui-notification-card-fill: var(--uui-error-50);
1016
- --uui-notification-card-border: var(--uui-error-50);
1146
+ --uui-notification-card-fill: var(--uui-error);
1147
+ --uui-notification-card-border: var(--uui-error);
1017
1148
  --uui-notification-card-bg: var(--uui-surface);
1018
1149
  --uui-notification-card-text: var(--uui-text-primary);
1019
1150
  }
@@ -1028,256 +1159,256 @@
1028
1159
  .alert-error,
1029
1160
  .alert-fire {
1030
1161
  --uui-alert-text: var(--uui-text-primary);
1031
- --uui-alert-bg: var(--uui-error-10);
1032
- --uui-alert-border: var(--uui-error-50);
1033
- --uui-alert-icon: var(--uui-error-50);
1162
+ --uui-alert-bg: var(--uui-error-lightest);
1163
+ --uui-alert-border: var(--uui-error);
1164
+ --uui-alert-icon: var(--uui-error);
1034
1165
  }
1035
1166
 
1036
1167
  .alert-warning,
1037
1168
  .alert-sun {
1038
1169
  --uui-alert-text: var(--uui-text-primary);
1039
- --uui-alert-bg: var(--uui-warning-10);
1040
- --uui-alert-border: var(--uui-warning-50);
1041
- --uui-alert-icon: var(--uui-warning-50);
1170
+ --uui-alert-bg: var(--uui-warning-lightest);
1171
+ --uui-alert-border: var(--uui-warning);
1172
+ --uui-alert-icon: var(--uui-warning);
1042
1173
  }
1043
1174
 
1044
1175
 
1045
1176
  .alert-success,
1046
1177
  .alert-grass {
1047
1178
  --uui-alert-text: var(--uui-text-primary);
1048
- --uui-alert-bg: var(--uui-success-10);
1049
- --uui-alert-border: var(--uui-success-50);
1050
- --uui-alert-icon: var(--uui-success-50);
1179
+ --uui-alert-bg: var(--uui-success-lightest);
1180
+ --uui-alert-border: var(--uui-success);
1181
+ --uui-alert-icon: var(--uui-success);
1051
1182
  }
1052
1183
 
1053
1184
  .alert-info,
1054
1185
  .alert-sky {
1055
1186
  --uui-alert-text: var(--uui-text-primary);
1056
- --uui-alert-bg: var(--uui-info-10);
1057
- --uui-alert-border: var(--uui-info-50);
1058
- --uui-alert-icon: var(--uui-info-50);
1059
- }
1060
-
1061
- //.badge-default, .badge-night300 {
1062
- // --uui-badge-bg: var(--night300);
1063
- // --uui-badge-bg-hover: var(--night400);
1064
- // --uui-badge-bg-halftone: var(--night200);
1065
- // --uui-badge-bg-halftone-hover: var(--night300);
1066
- // --uui-badge-border-halftone: var(--night400);
1067
- // --uui-badge-border-halftone-hover: var(--night500);
1068
- // --uui-badge-caption-solid: var(--uui-text-primary);
1069
- // --uui-badge-caption-halftone: var(--uui-text-primary);
1070
- // --uui-badge-count: var(--uui-text-secondary);
1071
- // --uui-badge-count-bg: var(--white);
1072
- //}
1073
- //
1074
- //.badge-info, .badge-sky {
1075
- // --uui-badge-bg: var(--uui-info);
1076
- // --uui-badge-bg-hover: var(--uui-info-dark);
1077
- // --uui-badge-bg-halftone: var(--uui-info-lightest);
1078
- // --uui-badge-bg-halftone-hover: var(--uui-info-light);
1079
- // --uui-badge-border-halftone: var(--uui-info-light);
1080
- // --uui-badge-border-halftone-hover: var(--uui-info);
1081
- // --uui-badge-caption-solid: var(--uui-text-contrast);
1082
- // --uui-badge-caption-halftone: var(--uui-info-darkest);
1083
- // --uui-badge-count: var(--uui-text-secondary);
1084
- // --uui-badge-count-bg: var(--white);
1085
- //}
1086
- //
1087
- //.badge-success, .badge-grass {
1088
- // --uui-badge-bg: var(--uui-success);
1089
- // --uui-badge-bg-hover: var(--uui-success-dark);
1090
- // --uui-badge-bg-halftone: var(--uui-success-lightest);
1091
- // --uui-badge-bg-halftone-hover: var(--uui-success-light);
1092
- // --uui-badge-border-halftone: var(--uui-success-light);
1093
- // --uui-badge-border-halftone-hover: var(--uui-success);
1094
- // --uui-badge-caption-solid: var(--uui-text-contrast);
1095
- // --uui-badge-caption-halftone: var(--uui-success-darkest);
1096
- // --uui-badge-count: var(--uui-text-secondary);
1097
- // --uui-badge-count-bg: var(--white);
1098
- //}
1099
- //
1100
- //.badge-warning, .badge-sun {
1101
- // --uui-badge-bg: var(--uui-warning);
1102
- // --uui-badge-bg-hover: var(--uui-warning-dark);
1103
- // --uui-badge-bg-halftone: var(--uui-warning-lightest);
1104
- // --uui-badge-bg-halftone-hover: var(--uui-warning-light);
1105
- // --uui-badge-border-halftone: var(--uui-warning-light);
1106
- // --uui-badge-border-halftone-hover: var(--uui-warning);
1107
- // --uui-badge-caption-solid: var(--uui-text-primary);
1108
- // --uui-badge-caption-halftone: var(--uui-warning-darkest);
1109
- // --uui-badge-count: var(--uui-text-secondary);
1110
- // --uui-badge-count-bg: var(--white);
1111
- //}
1112
- //
1113
- //.badge-error, .badge-fire {
1114
- // --uui-badge-bg: var(--uui-error);
1115
- // --uui-badge-bg-hover: var(--uui-error-dark);
1116
- // --uui-badge-bg-halftone: var(--uui-error-lightest);
1117
- // --uui-badge-bg-halftone-hover: var(--uui-error-light);
1118
- // --uui-badge-border-halftone: var(--uui-error-light);
1119
- // --uui-badge-border-halftone-hover: var(--uui-error);
1120
- // --uui-badge-caption-solid: var(--white);
1121
- // --uui-badge-caption-halftone: var(--uui-error-darkest);
1122
- // --uui-badge-count: var(--uui-text-secondary);
1123
- // --uui-badge-count-bg: var(--white);
1124
- //}
1125
- //
1126
- //.badge-cobalt {
1127
- // --uui-badge-bg: var(--cobalt-30);
1128
- // --uui-badge-bg-hover: var(--cobalt-40);
1129
- // --uui-badge-bg-halftone: var(--cobalt-10);
1130
- // --uui-badge-bg-halftone-hover: var(--cobalt-20);
1131
- // --uui-badge-border-halftone: var(--cobalt-30);
1132
- // --uui-badge-border-halftone-hover: var(--cobalt-40);
1133
- // --uui-badge-caption-solid: var(--uui-text-contrast);
1134
- // --uui-badge-caption-halftone: var(--cobalt-50);
1135
- // --uui-badge-count: var(--uui-text-secondary);
1136
- // --uui-badge-count-bg: var(--white);
1137
- //}
1138
- //
1139
- //.badge-lavanda {
1140
- // --uui-badge-bg: var(--lavanda-30);
1141
- // --uui-badge-bg-hover: var(--lavanda-40);
1142
- // --uui-badge-bg-halftone: var(--lavanda-10);
1143
- // --uui-badge-bg-halftone-hover: var(--lavanda-20);
1144
- // --uui-badge-border-halftone: var(--lavanda-30);
1145
- // --uui-badge-border-halftone-hover: var(--lavanda-40);
1146
- // --uui-badge-caption-solid: var(--white);
1147
- // --uui-badge-caption-halftone: var(--lavanda-50);
1148
- // --uui-badge-count: var(--uui-text-secondary);
1149
- // --uui-badge-count-bg: var(--white);
1150
- //}
1151
- //
1152
- //.badge-fuchsia {
1153
- // --uui-badge-bg: var(--fuchia-30);
1154
- // --uui-badge-bg-hover: var(--fuchia-40);
1155
- // --uui-badge-bg-halftone: var(--fuchia-10);
1156
- // --uui-badge-bg-halftone-hover: var(--fuchia-20);
1157
- // --uui-badge-border-halftone: var(--fuchia-30);
1158
- // --uui-badge-border-halftone-hover: var(--fuchia-40);
1159
- // --uui-badge-caption-solid: var(--uui-text-contrast);
1160
- // --uui-badge-caption-halftone: var(--fuchia-50);
1161
- // --uui-badge-count: var(--uui-text-secondary);
1162
- // --uui-badge-count-bg: var(--white);
1163
- //}
1164
- //
1165
- //.badge-white {
1166
- // --uui-badge-bg: var(--white);
1167
- // --uui-badge-bg-hover: var(--gray5);
1168
- // --uui-badge-bg-halftone: var(--white);
1169
- // --uui-badge-bg-halftone-hover: var(--gray5);
1170
- // --uui-badge-border-halftone: var(--white);
1171
- // --uui-badge-border-halftone-hover: var(--gray5);
1172
- // --uui-badge-caption-solid: var(--night800);
1173
- // --uui-badge-caption-halftone: var(--uui-text-secondary);
1174
- // --uui-badge-count: var(--uui-text-secondary);
1175
- // --uui-badge-count-bg: var(--white);
1176
- //}
1177
- //
1178
- //.badge-night200 {
1179
- // --uui-badge-bg: var(--uui-color-night200-700);
1180
- // --uui-badge-bg-hover: var(--uui-color-night200-800);
1181
- // --uui-badge-bg-halftone: var(--white);
1182
- // --uui-badge-bg-halftone-hover: var(--gray5);
1183
- // --uui-badge-border-halftone: var(--white);
1184
- // --uui-badge-border-halftone-hover: var(--gray5);
1185
- // --uui-badge-caption-solid: var(--night800);
1186
- // --uui-badge-caption-halftone: var(--uui-text-secondary);
1187
- // --uui-badge-count: var(--uui-text-secondary);
1188
- // --uui-badge-count-bg: var(--white);
1189
- //}
1190
- //
1191
- //.badge-night300 {
1192
- // --uui-badge-bg: var(--uui-color-night300-700);
1193
- // --uui-badge-bg-hover: var(--uui-color-night300-800);
1194
- // --uui-badge-bg-halftone: var(--white);
1195
- // --uui-badge-bg-halftone-hover: var(--gray5);
1196
- // --uui-badge-border-halftone: var(--white);
1197
- // --uui-badge-border-halftone-hover: var(--gray5);
1198
- // --uui-badge-caption-solid: var(--night800);
1199
- // --uui-badge-caption-halftone: var(--uui-text-secondary);
1200
- // --uui-badge-count: var(--uui-text-secondary);
1201
- // --uui-badge-count-bg: var(--white);
1202
- //}
1203
- //
1204
- //.badge-night400 {
1205
- // --uui-badge-bg: var(--uui-color-night400-700);
1206
- // --uui-badge-bg-hover: var(--uui-color-night400-800);
1207
- // --uui-badge-bg-halftone: var(--white);
1208
- // --uui-badge-bg-halftone-hover: var(--gray5);
1209
- // --uui-badge-border-halftone: var(--white);
1210
- // --uui-badge-border-halftone-hover: var(--gray5);
1211
- // --uui-badge-caption-solid: var(--night800);
1212
- // --uui-badge-caption-halftone: var(--uui-text-secondary);
1213
- // --uui-badge-count: var(--uui-text-secondary);
1214
- // --uui-badge-count-bg: var(--white);
1215
- //}
1216
- //
1217
- //.badge-night500 {
1218
- // --uui-badge-bg: var(--uui-color-night500-700);
1219
- // --uui-badge-bg-hover: var(--uui-color-night500-800);
1220
- // --uui-badge-bg-halftone: var(--white);
1221
- // --uui-badge-bg-halftone-hover: var(--gray5);
1222
- // --uui-badge-border-halftone: var(--white);
1223
- // --uui-badge-border-halftone-hover: var(--gray5);
1224
- // --uui-badge-caption-solid: var(--uui-text-contrast);
1225
- // --uui-badge-caption-halftone: var(--uui-text-secondary);
1226
- // --uui-badge-count: var(--uui-text-secondary);
1227
- // --uui-badge-count-bg: var(--white);
1228
- //}
1229
- //
1230
- //.badge-night600 {
1231
- // --uui-badge-bg: var(--uui-color-night600-700);
1232
- // --uui-badge-bg-hover: var(--uui-color-night600-800);
1233
- // --uui-badge-bg-halftone: var(--white);
1234
- // --uui-badge-bg-halftone-hover: var(--gray5);
1235
- // --uui-badge-border-halftone: var(--white);
1236
- // --uui-badge-border-halftone-hover: var(--gray5);
1237
- // --uui-badge-caption-solid: var(--uui-text-contrast);
1238
- // --uui-badge-caption-halftone: var(--uui-text-secondary);
1239
- // --uui-badge-count: var(--uui-text-secondary);
1240
- // --uui-badge-count-bg: var(--white);
1241
- //}
1242
- //
1243
- //.badge-violet {
1244
- // --uui-badge-bg: var(--lavanda-30);
1245
- // --uui-badge-bg-hover: var(--lavanda-40);
1246
- // --uui-badge-bg-halftone: var(--lavanda-10);
1247
- // --uui-badge-bg-halftone-hover: var(--lavanda-20);
1248
- // --uui-badge-border-halftone: var(--lavanda-20);
1249
- // --uui-badge-border-halftone-hover: var(--lavanda-30);
1250
- // --uui-badge-caption-solid: var(--uui-text-contrast);
1251
- // --uui-badge-caption-halftone: var(--lavanda-50);
1252
- // --uui-badge-count: var(--uui-text-secondary);
1253
- // --uui-badge-count-bg: var(--white);
1254
- //}
1255
- //
1256
- //.badge-orange {
1257
- // --uui-badge-bg: var(--orange-30);
1258
- // --uui-badge-bg-hover: var(--orange-40);
1259
- // --uui-badge-bg-halftone: var(--orange-10);
1260
- // --uui-badge-bg-halftone-hover: var(--orange-20);
1261
- // --uui-badge-border-halftone: var(--orange-20);
1262
- // --uui-badge-border-halftone-hover: var(--orange-30);
1263
- // --uui-badge-caption-solid: var(--uui-text-contrast);
1264
- // --uui-badge-caption-halftone: var(--orange-50);
1265
- // --uui-badge-count: var(--uui-text-secondary);
1266
- // --uui-badge-count-bg: var(--white);
1267
- //}
1268
- //
1269
- //.badge-purple {
1270
- // --uui-badge-bg: var(--purple-30);
1271
- // --uui-badge-bg-hover: var(--purple-40);
1272
- // --uui-badge-bg-halftone: var(--purple-10);
1273
- // --uui-badge-bg-halftone-hover: var(--purple-20);
1274
- // --uui-badge-border-halftone: var(--purple-20);
1275
- // --uui-badge-border-halftone-hover: var(--purple-30);
1276
- // --uui-badge-caption-solid: var(--uui-text-contrast);
1277
- // --uui-badge-caption-halftone: var(--purple-50);
1278
- // --uui-badge-count: var(--uui-text-secondary);
1279
- // --uui-badge-count-bg: var(--white);
1280
- //}
1187
+ --uui-alert-bg: var(--uui-info-lightest);
1188
+ --uui-alert-border: var(--uui-info);
1189
+ --uui-alert-icon: var(--uui-info);
1190
+ }
1191
+
1192
+ .badge-default, .badge-night300 {
1193
+ --uui-badge-bg: var(--night300);
1194
+ --uui-badge-bg-hover: var(--night400);
1195
+ --uui-badge-bg-halftone: var(--night200);
1196
+ --uui-badge-bg-halftone-hover: var(--night300);
1197
+ --uui-badge-border-halftone: var(--night400);
1198
+ --uui-badge-border-halftone-hover: var(--night500);
1199
+ --uui-badge-caption-solid: var(--uui-text-primary);
1200
+ --uui-badge-caption-halftone: var(--uui-text-primary);
1201
+ --uui-badge-count: var(--uui-text-secondary);
1202
+ --uui-badge-count-bg: var(--white);
1203
+ }
1204
+
1205
+ .badge-info, .badge-sky {
1206
+ --uui-badge-bg: var(--uui-info);
1207
+ --uui-badge-bg-hover: var(--uui-info-dark);
1208
+ --uui-badge-bg-halftone: var(--uui-info-lightest);
1209
+ --uui-badge-bg-halftone-hover: var(--uui-info-light);
1210
+ --uui-badge-border-halftone: var(--uui-info-light);
1211
+ --uui-badge-border-halftone-hover: var(--uui-info);
1212
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1213
+ --uui-badge-caption-halftone: var(--uui-info-darkest);
1214
+ --uui-badge-count: var(--uui-text-secondary);
1215
+ --uui-badge-count-bg: var(--white);
1216
+ }
1217
+
1218
+ .badge-success, .badge-grass {
1219
+ --uui-badge-bg: var(--uui-success);
1220
+ --uui-badge-bg-hover: var(--uui-success-dark);
1221
+ --uui-badge-bg-halftone: var(--uui-success-lightest);
1222
+ --uui-badge-bg-halftone-hover: var(--uui-success-light);
1223
+ --uui-badge-border-halftone: var(--uui-success-light);
1224
+ --uui-badge-border-halftone-hover: var(--uui-success);
1225
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1226
+ --uui-badge-caption-halftone: var(--uui-success-darkest);
1227
+ --uui-badge-count: var(--uui-text-secondary);
1228
+ --uui-badge-count-bg: var(--white);
1229
+ }
1230
+
1231
+ .badge-warning, .badge-sun {
1232
+ --uui-badge-bg: var(--uui-warning);
1233
+ --uui-badge-bg-hover: var(--uui-warning-dark);
1234
+ --uui-badge-bg-halftone: var(--uui-warning-lightest);
1235
+ --uui-badge-bg-halftone-hover: var(--uui-warning-light);
1236
+ --uui-badge-border-halftone: var(--uui-warning-light);
1237
+ --uui-badge-border-halftone-hover: var(--uui-warning);
1238
+ --uui-badge-caption-solid: var(--uui-text-primary);
1239
+ --uui-badge-caption-halftone: var(--uui-warning-darkest);
1240
+ --uui-badge-count: var(--uui-text-secondary);
1241
+ --uui-badge-count-bg: var(--white);
1242
+ }
1243
+
1244
+ .badge-error, .badge-fire {
1245
+ --uui-badge-bg: var(--uui-error);
1246
+ --uui-badge-bg-hover: var(--uui-error-dark);
1247
+ --uui-badge-bg-halftone: var(--uui-error-lightest);
1248
+ --uui-badge-bg-halftone-hover: var(--uui-error-light);
1249
+ --uui-badge-border-halftone: var(--uui-error-light);
1250
+ --uui-badge-border-halftone-hover: var(--uui-error);
1251
+ --uui-badge-caption-solid: var(--white);
1252
+ --uui-badge-caption-halftone: var(--uui-error-darkest);
1253
+ --uui-badge-count: var(--uui-text-secondary);
1254
+ --uui-badge-count-bg: var(--white);
1255
+ }
1256
+
1257
+ .badge-cobalt {
1258
+ --uui-badge-bg: var(--cobalt-30);
1259
+ --uui-badge-bg-hover: var(--cobalt-40);
1260
+ --uui-badge-bg-halftone: var(--cobalt-10);
1261
+ --uui-badge-bg-halftone-hover: var(--cobalt-20);
1262
+ --uui-badge-border-halftone: var(--cobalt-30);
1263
+ --uui-badge-border-halftone-hover: var(--cobalt-40);
1264
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1265
+ --uui-badge-caption-halftone: var(--cobalt-50);
1266
+ --uui-badge-count: var(--uui-text-secondary);
1267
+ --uui-badge-count-bg: var(--white);
1268
+ }
1269
+
1270
+ .badge-lavanda {
1271
+ --uui-badge-bg: var(--lavanda-30);
1272
+ --uui-badge-bg-hover: var(--lavanda-40);
1273
+ --uui-badge-bg-halftone: var(--lavanda-10);
1274
+ --uui-badge-bg-halftone-hover: var(--lavanda-20);
1275
+ --uui-badge-border-halftone: var(--lavanda-30);
1276
+ --uui-badge-border-halftone-hover: var(--lavanda-40);
1277
+ --uui-badge-caption-solid: var(--white);
1278
+ --uui-badge-caption-halftone: var(--lavanda-50);
1279
+ --uui-badge-count: var(--uui-text-secondary);
1280
+ --uui-badge-count-bg: var(--white);
1281
+ }
1282
+
1283
+ .badge-fuchsia {
1284
+ --uui-badge-bg: var(--fuchia-30);
1285
+ --uui-badge-bg-hover: var(--fuchia-40);
1286
+ --uui-badge-bg-halftone: var(--fuchia-10);
1287
+ --uui-badge-bg-halftone-hover: var(--fuchia-20);
1288
+ --uui-badge-border-halftone: var(--fuchia-30);
1289
+ --uui-badge-border-halftone-hover: var(--fuchia-40);
1290
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1291
+ --uui-badge-caption-halftone: var(--fuchia-50);
1292
+ --uui-badge-count: var(--uui-text-secondary);
1293
+ --uui-badge-count-bg: var(--white);
1294
+ }
1295
+
1296
+ .badge-white {
1297
+ --uui-badge-bg: var(--white);
1298
+ --uui-badge-bg-hover: var(--gray5);
1299
+ --uui-badge-bg-halftone: var(--white);
1300
+ --uui-badge-bg-halftone-hover: var(--gray5);
1301
+ --uui-badge-border-halftone: var(--white);
1302
+ --uui-badge-border-halftone-hover: var(--gray5);
1303
+ --uui-badge-caption-solid: var(--night800);
1304
+ --uui-badge-caption-halftone: var(--uui-text-secondary);
1305
+ --uui-badge-count: var(--uui-text-secondary);
1306
+ --uui-badge-count-bg: var(--white);
1307
+ }
1308
+
1309
+ .badge-night200 {
1310
+ --uui-badge-bg: var(--uui-color-night200-700);
1311
+ --uui-badge-bg-hover: var(--uui-color-night200-800);
1312
+ --uui-badge-bg-halftone: var(--white);
1313
+ --uui-badge-bg-halftone-hover: var(--gray5);
1314
+ --uui-badge-border-halftone: var(--white);
1315
+ --uui-badge-border-halftone-hover: var(--gray5);
1316
+ --uui-badge-caption-solid: var(--night800);
1317
+ --uui-badge-caption-halftone: var(--uui-text-secondary);
1318
+ --uui-badge-count: var(--uui-text-secondary);
1319
+ --uui-badge-count-bg: var(--white);
1320
+ }
1321
+
1322
+ .badge-night300 {
1323
+ --uui-badge-bg: var(--uui-color-night300-700);
1324
+ --uui-badge-bg-hover: var(--uui-color-night300-800);
1325
+ --uui-badge-bg-halftone: var(--white);
1326
+ --uui-badge-bg-halftone-hover: var(--gray5);
1327
+ --uui-badge-border-halftone: var(--white);
1328
+ --uui-badge-border-halftone-hover: var(--gray5);
1329
+ --uui-badge-caption-solid: var(--night800);
1330
+ --uui-badge-caption-halftone: var(--uui-text-secondary);
1331
+ --uui-badge-count: var(--uui-text-secondary);
1332
+ --uui-badge-count-bg: var(--white);
1333
+ }
1334
+
1335
+ .badge-night400 {
1336
+ --uui-badge-bg: var(--uui-color-night400-700);
1337
+ --uui-badge-bg-hover: var(--uui-color-night400-800);
1338
+ --uui-badge-bg-halftone: var(--white);
1339
+ --uui-badge-bg-halftone-hover: var(--gray5);
1340
+ --uui-badge-border-halftone: var(--white);
1341
+ --uui-badge-border-halftone-hover: var(--gray5);
1342
+ --uui-badge-caption-solid: var(--night800);
1343
+ --uui-badge-caption-halftone: var(--uui-text-secondary);
1344
+ --uui-badge-count: var(--uui-text-secondary);
1345
+ --uui-badge-count-bg: var(--white);
1346
+ }
1347
+
1348
+ .badge-night500 {
1349
+ --uui-badge-bg: var(--uui-color-night500-700);
1350
+ --uui-badge-bg-hover: var(--uui-color-night500-800);
1351
+ --uui-badge-bg-halftone: var(--white);
1352
+ --uui-badge-bg-halftone-hover: var(--gray5);
1353
+ --uui-badge-border-halftone: var(--white);
1354
+ --uui-badge-border-halftone-hover: var(--gray5);
1355
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1356
+ --uui-badge-caption-halftone: var(--uui-text-secondary);
1357
+ --uui-badge-count: var(--uui-text-secondary);
1358
+ --uui-badge-count-bg: var(--white);
1359
+ }
1360
+
1361
+ .badge-night600 {
1362
+ --uui-badge-bg: var(--uui-color-night600-700);
1363
+ --uui-badge-bg-hover: var(--uui-color-night600-800);
1364
+ --uui-badge-bg-halftone: var(--white);
1365
+ --uui-badge-bg-halftone-hover: var(--gray5);
1366
+ --uui-badge-border-halftone: var(--white);
1367
+ --uui-badge-border-halftone-hover: var(--gray5);
1368
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1369
+ --uui-badge-caption-halftone: var(--uui-text-secondary);
1370
+ --uui-badge-count: var(--uui-text-secondary);
1371
+ --uui-badge-count-bg: var(--white);
1372
+ }
1373
+
1374
+ .badge-violet {
1375
+ --uui-badge-bg: var(--lavanda-30);
1376
+ --uui-badge-bg-hover: var(--lavanda-40);
1377
+ --uui-badge-bg-halftone: var(--lavanda-10);
1378
+ --uui-badge-bg-halftone-hover: var(--lavanda-20);
1379
+ --uui-badge-border-halftone: var(--lavanda-20);
1380
+ --uui-badge-border-halftone-hover: var(--lavanda-30);
1381
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1382
+ --uui-badge-caption-halftone: var(--lavanda-50);
1383
+ --uui-badge-count: var(--uui-text-secondary);
1384
+ --uui-badge-count-bg: var(--white);
1385
+ }
1386
+
1387
+ .badge-orange {
1388
+ --uui-badge-bg: var(--orange-30);
1389
+ --uui-badge-bg-hover: var(--orange-40);
1390
+ --uui-badge-bg-halftone: var(--orange-10);
1391
+ --uui-badge-bg-halftone-hover: var(--orange-20);
1392
+ --uui-badge-border-halftone: var(--orange-20);
1393
+ --uui-badge-border-halftone-hover: var(--orange-30);
1394
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1395
+ --uui-badge-caption-halftone: var(--orange-50);
1396
+ --uui-badge-count: var(--uui-text-secondary);
1397
+ --uui-badge-count-bg: var(--white);
1398
+ }
1399
+
1400
+ .badge-purple {
1401
+ --uui-badge-bg: var(--purple-30);
1402
+ --uui-badge-bg-hover: var(--purple-40);
1403
+ --uui-badge-bg-halftone: var(--purple-10);
1404
+ --uui-badge-bg-halftone-hover: var(--purple-20);
1405
+ --uui-badge-border-halftone: var(--purple-20);
1406
+ --uui-badge-border-halftone-hover: var(--purple-30);
1407
+ --uui-badge-caption-solid: var(--uui-text-contrast);
1408
+ --uui-badge-caption-halftone: var(--purple-50);
1409
+ --uui-badge-count: var(--uui-text-secondary);
1410
+ --uui-badge-count-bg: var(--white);
1411
+ }
1281
1412
 
1282
1413
  .informer-default {
1283
1414
  --uui-informer-bg: var(--night300);