@epam/assets 5.1.2 → 5.2.0-rc.1

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