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