@epam/assets 5.1.0 → 5.1.2-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/theme/theme_loveship.css +168 -163
- package/css/theme/theme_loveship.css.map +1 -1
- package/css/theme/theme_promo.css +209 -222
- package/css/theme/theme_promo.css.map +1 -1
- package/css/theme/theme_vanilla_thunder.css +63 -72
- package/css/theme/theme_vanilla_thunder.css.map +1 -1
- package/package.json +2 -2
- package/theme/theme_loveship.scss +185 -171
- package/theme/theme_promo.scss +234 -237
- package/theme/theme_vanilla_thunder.scss +83 -77
|
@@ -159,7 +159,6 @@
|
|
|
159
159
|
--uui-primary: var(--sky);
|
|
160
160
|
--uui-primary-light: var(--sky-light);
|
|
161
161
|
--uui-primary-lightest: var(--sky-lightest);
|
|
162
|
-
--uui-primary-halftone: var(--night200);
|
|
163
162
|
--uui-primary-dark: var(--sky-dark);
|
|
164
163
|
--uui-primary-darkest: var(--sky-darkest);
|
|
165
164
|
|
|
@@ -177,111 +176,115 @@
|
|
|
177
176
|
|
|
178
177
|
--uui-link: var(--sky);
|
|
179
178
|
--uui-link-hover: var(--sky-dark);
|
|
179
|
+
--uui-link-wite-hover: var(--night400);
|
|
180
|
+
--uui-link-black-hover: var(--night800);
|
|
180
181
|
--uui-link-visited: #8018A0;
|
|
181
182
|
--uui-link-disabled: var(--night500);
|
|
182
|
-
--uui-visited: #5214CC;
|
|
183
183
|
|
|
184
184
|
--uui-info: var(--sky);
|
|
185
|
+
--uui-info-soft: var(--sky-soft);
|
|
185
186
|
--uui-info-lightest: var(--sky-lightest);
|
|
186
187
|
--uui-info-light: var(--sky-light);
|
|
187
188
|
--uui-info-dark: var(--sky-dark);
|
|
188
189
|
--uui-info-darkest: var(--sky-darkest);
|
|
189
|
-
--uui-info-hover: var(--sky-dark);
|
|
190
|
-
--uui-info-active: var(--sky-darkest);
|
|
191
190
|
|
|
192
191
|
--uui-success: var(--grass);
|
|
192
|
+
--uui-success-soft: var(--grass-soft);
|
|
193
193
|
--uui-success-lightest: var(--grass-lightest);
|
|
194
194
|
--uui-success-light: var(--grass-light);
|
|
195
195
|
--uui-success-dark: var(--grass-dark);
|
|
196
196
|
--uui-success-darkest: var(--grass-darkest);
|
|
197
|
-
--uui-success-hover: var(--grass-dark);
|
|
198
|
-
--uui-success-active: var(--grass-darkest);
|
|
199
197
|
|
|
200
198
|
--uui-warning: var(--sun);
|
|
199
|
+
--uui-warning-soft: var(--sun-soft);
|
|
201
200
|
--uui-warning-lightest: var(--sun-lightest);
|
|
202
201
|
--uui-warning-light: var(--sun-light);
|
|
203
202
|
--uui-warning-dark: var(--sun-dark);
|
|
204
203
|
--uui-warning-darkest: var(--sun-darkest);
|
|
205
|
-
--uui-warning-hover: var(--sun-dark);
|
|
206
|
-
--uui-warning-active: var(--sun-darkest);
|
|
207
204
|
|
|
208
205
|
--uui-error: var(--fire);
|
|
206
|
+
--uui-error-soft: var(--fire-soft);
|
|
209
207
|
--uui-error-lightest: var(--fire-lightest);
|
|
210
208
|
--uui-error-light: var(--fire-light);
|
|
211
209
|
--uui-error-dark: var(--fire-dark);
|
|
212
210
|
--uui-error-darkest: var(--fire-darkest);
|
|
213
|
-
--uui-error-hover: var(--fire-dark);
|
|
214
|
-
--uui-error-active: var(--fire-darkest);
|
|
215
211
|
|
|
216
212
|
--uui-icon: var(--night600);
|
|
217
213
|
--uui-icon-hover: var(--night700);
|
|
218
214
|
--uui-icon-active: var(--night800);
|
|
219
215
|
--uui-icon-disabled: var(--night500);
|
|
220
216
|
|
|
217
|
+
/* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
|
|
218
|
+
|
|
219
|
+
--uui-app-bg: var(--night100);
|
|
220
|
+
--uui-overlay: rgba(29, 30, 38, 0.8);
|
|
221
|
+
|
|
221
222
|
--uui-surface: var(--white);
|
|
222
|
-
--uui-surface-
|
|
223
|
-
--uui-surface-
|
|
224
|
-
|
|
225
|
-
--uui-surface-
|
|
226
|
-
--uui-surface-
|
|
227
|
-
--uui-surface-contrast: var(--
|
|
228
|
-
--uui-surface-contrast-hover: var(--night900);
|
|
229
|
-
--uui-surface-contrast-active: var(--night900);
|
|
230
|
-
/* new end */
|
|
231
|
-
|
|
232
|
-
--uui-background: var(--night100);
|
|
233
|
-
--uui-divider: var(--night400);
|
|
234
|
-
--uui-divider-light: var(--night300);
|
|
235
|
-
--uui-contrast: var(--white);
|
|
236
|
-
--uui-disabled: var(--night300);
|
|
223
|
+
--uui-surface-low: var(--night50);
|
|
224
|
+
--uui-surface-lower: var(--night100);
|
|
225
|
+
--uui-surface-lowest: var(--night200);
|
|
226
|
+
--uui-surface-contrast: var(--night700);
|
|
227
|
+
--uui-surface-contrast-low: var(--night800);
|
|
228
|
+
--uui-surface-contrast-lower: var(--night900);
|
|
237
229
|
|
|
238
|
-
--uui-
|
|
239
|
-
--uui-
|
|
230
|
+
--uui-surface-active: var(--sky-lightest);
|
|
231
|
+
--uui-surface-critical: var(--fire-lightest);
|
|
232
|
+
--uui-surface-warning: var(--sun-lightest);
|
|
240
233
|
|
|
241
|
-
--uui-
|
|
242
|
-
--uui-
|
|
234
|
+
--uui-divider: var(--night400);
|
|
235
|
+
--uui-divider-light: var(--night300);
|
|
243
236
|
|
|
244
|
-
--uui-text-info: var(--uui-info);
|
|
245
|
-
--uui-text-warning: var(--uui-warning);
|
|
246
|
-
--uui-text-error: var(--uui-error);
|
|
247
|
-
--uui-text-success: var(--uui-success);
|
|
248
237
|
--uui-text-brand: var(--night900);
|
|
249
238
|
--uui-text-primary: var(--night800);
|
|
250
|
-
--uui-text-secondary: var(--
|
|
239
|
+
--uui-text-secondary: var(--night700);
|
|
240
|
+
--uui-text-tertiary: var(--night600);
|
|
251
241
|
--uui-text-disabled: var(--night500);
|
|
252
242
|
--uui-text-contrast: var(--night50);
|
|
253
243
|
--uui-text-white: var(--white);
|
|
244
|
+
--uui-text-dark: var(--night800);
|
|
245
|
+
|
|
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);
|
|
250
|
+
|
|
251
|
+
/* not accepted part */
|
|
252
|
+
|
|
253
|
+
--uui-disabled: var(--night300); // TODO: name does not clearly reflect the meaning
|
|
254
|
+
|
|
255
|
+
/* control specific */
|
|
256
|
+
|
|
257
|
+
--uui-scroll_bars-bg: var(--night400);
|
|
258
|
+
--uui-scroll_bars-bg-active: var(--night600);
|
|
259
|
+
|
|
260
|
+
--uui-button-bg-halftone: var(--white);
|
|
254
261
|
|
|
255
262
|
--uui-control-bg: var(--white);
|
|
256
|
-
--uui-control-bg-checked: var(--uui-primary);
|
|
257
|
-
--uui-control-bg-checked-hover: var(--uui-primary-dark);
|
|
258
|
-
--uui-control-bg-checked-disabled: var(--uui-primary-light);
|
|
259
263
|
--uui-control-bg-hover: var(--night600);
|
|
260
264
|
--uui-control-bg-disabled: var(--night50);
|
|
261
265
|
--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);
|
|
262
269
|
--uui-control_switch-bg: var(--night400);
|
|
263
|
-
--uui-
|
|
270
|
+
--uui-control_switch-toggler-bg: var(--white);
|
|
264
271
|
|
|
265
|
-
--uui-control-border-checked-disabled: var(--uui-primary-light);
|
|
266
272
|
--uui-control-border: var(--night400);
|
|
273
|
+
--uui-control-border-hover: var(--uui-primary-dark);
|
|
274
|
+
--uui-control-border-disabled: var(--night300);
|
|
275
|
+
--uui-control-border-readonly: var(--night300);
|
|
267
276
|
--uui-control-border-checked: var(--uui-primary);
|
|
268
277
|
--uui-control-border-checked-hover: var(--uui-primary-dark);
|
|
269
|
-
--uui-control-border-
|
|
270
|
-
--uui-control-border-disabled: var(--uui-disabled);
|
|
271
|
-
--uui-control-border-readonly: var(--uui-disabled);
|
|
278
|
+
--uui-control-border-checked-disabled: var(--uui-primary-light);
|
|
272
279
|
|
|
273
280
|
--uui-control_switch-border-hover: var(--night600);
|
|
274
281
|
--uui-control_textinput-border-hover: var(--night600);
|
|
275
282
|
|
|
276
283
|
--uui-control-label: var(--uui-text-primary);
|
|
277
284
|
--uui-control-label-disabled: var(--uui-text-disabled);
|
|
278
|
-
--uui-control-label-error: var(--uui-error);
|
|
279
|
-
--uui-control-label-fill: var(--uui-icon);
|
|
280
|
-
--uui-control-label-optional-text: var(--uui-text-secondary);
|
|
281
|
-
--uui-control-label-asterisk: var(--uui-error);
|
|
282
285
|
|
|
283
286
|
--uui-control-placeholder: var(--night600);
|
|
284
|
-
--uui-control-placeholder-disabled: var(--night500);
|
|
287
|
+
--uui-control-placeholder-disabled: var(--night500); // one place of usage
|
|
285
288
|
|
|
286
289
|
--uui-control-text: var(--night800);
|
|
287
290
|
--uui-control-text-disabled: var(--night500);
|
|
@@ -291,13 +294,12 @@
|
|
|
291
294
|
|
|
292
295
|
--uui-control-checkbox-icon: var(--white);
|
|
293
296
|
|
|
294
|
-
--uui-tag-bg: var(--night300);
|
|
295
|
-
--uui-tag-bg-hover: var(--night400);
|
|
297
|
+
--uui-tag-bg: var(--night300); // one place of usage
|
|
298
|
+
--uui-tag-bg-hover: var(--night400); // one place of usage
|
|
296
299
|
|
|
297
300
|
--uui-skeleton: var(--night400);
|
|
298
301
|
--uui-skeleton-gradient: linear-gradient(90deg, var(--night400) 0%, var(--night100) 50%, var(--night400) 100%);
|
|
299
302
|
|
|
300
|
-
--uui-overlay: rgba(29, 30, 38, 0.8);
|
|
301
303
|
--uui-border-radius: 3px;
|
|
302
304
|
--uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
|
|
303
305
|
--uui-shadow-level-2: 0 6px 12px rgba(29, 30, 38, 0.1), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
|
|
@@ -314,7 +316,7 @@
|
|
|
314
316
|
--uui-text-input-border: var(--uui-control-border);
|
|
315
317
|
--uui-text-input-border-hover: var(--uui-control_textinput-border-hover);
|
|
316
318
|
--uui-text-input-border-active: var(--uui-control-border-checked);
|
|
317
|
-
--uui-text-input-border-error: var(--uui-
|
|
319
|
+
--uui-text-input-border-error: var(--uui-error);
|
|
318
320
|
--uui-text-input-border-disabled: var(--uui-control-border-disabled);
|
|
319
321
|
--uui-text-input-border-readonly: var(--uui-control-border-readonly);
|
|
320
322
|
--uui-text-input-placeholder: var(--uui-control-placeholder);
|
|
@@ -339,13 +341,9 @@
|
|
|
339
341
|
|
|
340
342
|
/* DatePicker vars */
|
|
341
343
|
--uui-dtp-title-bg: var(--uui-control-bg);
|
|
342
|
-
--uui-dtp-title-bg-hover: var(--uui-primary-halftone);
|
|
343
344
|
--uui-dtp-text-selected: var(--uui-control-border-checked);
|
|
344
345
|
--uui-dtp-text: var(--uui-control-text);
|
|
345
|
-
--uui-dtp-next-prev-icon: var(--uui-icon);
|
|
346
|
-
--uui-dtp-next-prev-icon-bg-hover: var(--uui-secondary-lightest);
|
|
347
346
|
|
|
348
|
-
--uui-dtp_header-font: var(--font-semibold);
|
|
349
347
|
--uui-dtp_body-content-font: var(--font-regular);
|
|
350
348
|
|
|
351
349
|
/* RangeDatePicker vars */
|
|
@@ -365,11 +363,11 @@
|
|
|
365
363
|
--uui-calendar-selected_day-font: var(--font-semibold);
|
|
366
364
|
|
|
367
365
|
/* tab-button-vars */
|
|
368
|
-
--uui-
|
|
369
|
-
--uui-
|
|
370
|
-
--uui-
|
|
371
|
-
--uui-
|
|
372
|
-
--uui-
|
|
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);
|
|
373
371
|
|
|
374
372
|
/* radio-input-vars */
|
|
375
373
|
--uui-radio-input-bg: var(--uui-control-bg);
|
|
@@ -413,7 +411,6 @@
|
|
|
413
411
|
--uui-tag-fill-hover: var(--uui-icon-hover);
|
|
414
412
|
--uui-tag-count-bg: var(--uui-surface);
|
|
415
413
|
--uui-tag-count: var(--uui-text-secondary);
|
|
416
|
-
--uui-tag-label: var(--uui-text-secondary);
|
|
417
414
|
--uui-tag-border-radius: 30px;
|
|
418
415
|
|
|
419
416
|
--uui-tag-font: var(--font-regular);
|
|
@@ -426,7 +423,7 @@
|
|
|
426
423
|
--uui-text-area-border-disabled: var(--uui-control-border-disabled);
|
|
427
424
|
--uui-text-area-border-hover: var(--uui-control_textinput-border-hover);
|
|
428
425
|
--uui-text-area-border-active: var(--uui-control-border-checked);
|
|
429
|
-
--uui-text-area-border-error: var(--uui-
|
|
426
|
+
--uui-text-area-border-error: var(--uui-error);
|
|
430
427
|
--uui-text-area-placeholder: var(--uui-control-placeholder);
|
|
431
428
|
--uui-text-area-text: var(--uui-control-text);
|
|
432
429
|
--uui-text-area-text-disabled: var(--uui-control-text-disabled);
|
|
@@ -457,7 +454,7 @@
|
|
|
457
454
|
--uui-picker-toggler-border-disabled: var(--uui-control-border-disabled);
|
|
458
455
|
--uui-picker-toggler-border-hover: var(--uui-control_textinput-border-hover);
|
|
459
456
|
--uui-picker-toggler-border-active: var(--uui-control-border-checked);
|
|
460
|
-
--uui-picker-toggler-border-error: var(--uui-
|
|
457
|
+
--uui-picker-toggler-border-error: var(--uui-error);
|
|
461
458
|
--uui-picker-toggler-placeholder: var(--uui-control-placeholder);
|
|
462
459
|
--uui-picker-toggler-text: var(--uui-control-text);
|
|
463
460
|
--uui-picker-toggler-text-disabled: var(--uui-control-text-disabled);
|
|
@@ -489,7 +486,7 @@
|
|
|
489
486
|
--uui-labeled-input-error: var(--uui-error);
|
|
490
487
|
--uui-labeled-input-fill: var(--uui-icon);
|
|
491
488
|
--uui-labeled-input-info-fill: var(--uui-icon);
|
|
492
|
-
--uui-labeled-input-optional-text: var(--uui-text-
|
|
489
|
+
--uui-labeled-input-optional-text: var(--uui-text-tertiary);
|
|
493
490
|
--uui-labeled-input-asterisk: var(--uui-error);
|
|
494
491
|
|
|
495
492
|
--uui-labeled-input-font: var(--font-semibold);
|
|
@@ -527,7 +524,7 @@
|
|
|
527
524
|
--uui-switch-border-checked-disabled: var(--uui-control-border-checked-disabled);
|
|
528
525
|
--uui-switch-label: var(--uui-control-label);
|
|
529
526
|
--uui-switch-label-disabled: var(--uui-control-label-disabled);
|
|
530
|
-
--uui-switch-toggler-bg: var(--uui-
|
|
527
|
+
--uui-switch-toggler-bg: var(--uui-control_switch-toggler-bg);
|
|
531
528
|
--uui-switch-toggler-bg-disabled: var(--uui-control-bg-disabled);
|
|
532
529
|
--uui-switch-toggler-border-checked: var(--uui-control-bg-checked);
|
|
533
530
|
--uui-switch-toggler-border-hover: var(--uui-control-bg-hover);
|
|
@@ -547,8 +544,8 @@
|
|
|
547
544
|
--uui-dropdown-menu-bg: var(--uui-surface);
|
|
548
545
|
--uui-dropdown-menu-shadow: var(--uui-shadow-level-2);
|
|
549
546
|
--uui-dropdown-menu-splitter: var(--uui-divider);
|
|
550
|
-
--uui-dropdown-menu-item-hover: var(--uui-surface-
|
|
551
|
-
--uui-dropdown-menu-item-active: var(--uui-surface-
|
|
547
|
+
--uui-dropdown-menu-item-hover: var(--uui-surface-lowest);
|
|
548
|
+
--uui-dropdown-menu-item-active: var(--uui-surface-lowest);
|
|
552
549
|
--uui-dropdown-menu-item-text: var(--uui-text-primary);
|
|
553
550
|
|
|
554
551
|
--uui-dropdown-menu-body-font: var(--font-regular);
|
|
@@ -557,12 +554,13 @@
|
|
|
557
554
|
/* MainMenu */
|
|
558
555
|
--uui-main_menu-text: var(--uui-text-contrast);
|
|
559
556
|
--uui-main_menu-text-active: var(--uui-text-contrast);
|
|
560
|
-
--uui-main_menu-bg: var(--uui-surface-contrast);
|
|
561
|
-
--uui-main_menu-hover: var(--uui-surface-contrast-
|
|
562
|
-
--uui-main_menu-active: var(--uui-surface-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);
|
|
563
560
|
--uui-main_menu-border-active: var(--uui-primary);
|
|
564
561
|
|
|
565
|
-
--uui-main_menu-dropdown-bg: var(--uui-surface-
|
|
562
|
+
--uui-main_menu-dropdown-bg: var(--uui-surface-contrast-lower);
|
|
563
|
+
--uui-main_menu-dropdown-bg-hover: var(--uui-surface-contrast-low);
|
|
566
564
|
--uui-main_menu-dropdown-hover: var(--uui-primary);
|
|
567
565
|
--uui-main_menu-dropdown-shadow: none;
|
|
568
566
|
--uui-main_menu-dropdown-border-radius: none;
|
|
@@ -570,7 +568,7 @@
|
|
|
570
568
|
--uui-main_menu-search-bg: var(--uui-secondary-darkest);
|
|
571
569
|
--uui-main_menu-search-border: var(--uui-secondary-darkest);
|
|
572
570
|
--uui-main_menu-search-placeholder: var(--uui-text-disabled);
|
|
573
|
-
--uui-main_menu-search-text: var(--uui-
|
|
571
|
+
--uui-main_menu-search-text: var(--uui-text-disabled);
|
|
574
572
|
--uui-main_menu-search-icon: var(--uui-icon-disabled);
|
|
575
573
|
|
|
576
574
|
--uui-main_menu-icon: var(--uui-text-contrast);
|
|
@@ -581,8 +579,8 @@
|
|
|
581
579
|
--uui-main_menu-search-font: var(--font-regular);
|
|
582
580
|
|
|
583
581
|
/* BurgerMenu */
|
|
584
|
-
--uui-burger_menu-bg: var(--uui-surface-
|
|
585
|
-
--uui-burger_menu-bg-hover: var(--uui-
|
|
582
|
+
--uui-burger_menu-bg: var(--uui-surface-contrast-lower);
|
|
583
|
+
--uui-burger_menu-bg-hover: var(--uui-surface-contrast-lower);
|
|
586
584
|
--uui-burger_menu-caption: var(--uui-text-contrast);
|
|
587
585
|
--uui-burger_menu-caption-hover: var(--uui-primary);
|
|
588
586
|
--uui-burger_menu-overlay: var(--uui-overlay);
|
|
@@ -619,7 +617,7 @@
|
|
|
619
617
|
--uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
|
|
620
618
|
--uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
|
|
621
619
|
--uui-numeric-input-border-active: var(--uui-control-border-checked);
|
|
622
|
-
--uui-numeric-input-border-error: var(--uui-
|
|
620
|
+
--uui-numeric-input-border-error: var(--uui-error);
|
|
623
621
|
--uui-numeric-input-placeholder: var(--uui-control-placeholder);
|
|
624
622
|
--uui-numeric-input-text: var(--uui-control-text);
|
|
625
623
|
--uui-numeric-input-text-disabled: var(--uui-control-text-disabled);
|
|
@@ -634,7 +632,7 @@
|
|
|
634
632
|
--uui-time-picker-border-disabled: var(--uui-control-border-disabled);
|
|
635
633
|
--uui-time-picker-border-hover: var(--uui-control_textinput-border-hover);
|
|
636
634
|
--uui-time-picker-border-active: var(--uui-control-border-checked);
|
|
637
|
-
--uui-time-picker-border-error: var(--uui-
|
|
635
|
+
--uui-time-picker-border-error: var(--uui-error);
|
|
638
636
|
--uui-time-picker-placeholder: var(--uui-control-placeholder);
|
|
639
637
|
--uui-time-picker-text: var(--uui-control-text);
|
|
640
638
|
--uui-time-picker-text-disabled: var(--uui-control-text-disabled);
|
|
@@ -669,9 +667,9 @@
|
|
|
669
667
|
--uui-filters-toggler-border-hover: var(--uui-text-input-border-hover);
|
|
670
668
|
--uui-filters-toggler-border-radius: var(--uui-border-radius);
|
|
671
669
|
--uui-filters-toggler-bg: var(--uui-surface);
|
|
672
|
-
--uui-filters-toggler-bg-hover: var(--uui-surface-
|
|
670
|
+
--uui-filters-toggler-bg-hover: var(--uui-surface-lower);
|
|
673
671
|
--uui-filters-toggler-text: var(--uui-text-brand);
|
|
674
|
-
--uui-filters-toggler-label: var(--uui-text-
|
|
672
|
+
--uui-filters-toggler-label: var(--uui-text-tertiary);
|
|
675
673
|
--uui-filters-toggler-icon: var(--uui-text-input-icon-clickable);
|
|
676
674
|
--uui-filters-toggler-shadow: none;
|
|
677
675
|
|
|
@@ -695,8 +693,7 @@
|
|
|
695
693
|
--uui-spinner: var(--uui-primary);
|
|
696
694
|
|
|
697
695
|
/* Blocker */
|
|
698
|
-
--uui-blocker-bg: var(--uui-
|
|
699
|
-
--uui-blocker-bg-with-opacity: #F5F6FA80;
|
|
696
|
+
--uui-blocker-bg: var(--uui-app-bg);
|
|
700
697
|
|
|
701
698
|
/* FlexRow */
|
|
702
699
|
--uui-flex-row-border-bottom: 1px solid var(--uui-divider);
|
|
@@ -711,12 +708,12 @@
|
|
|
711
708
|
--uui-dt-cell-border-focus: var(--uui-control-border-checked);
|
|
712
709
|
|
|
713
710
|
--uui-dt-row-bg: var(--uui-surface);
|
|
714
|
-
--uui-dt-row-bg-hover: var(--uui-surface-
|
|
711
|
+
--uui-dt-row-bg-hover: var(--uui-surface-lower);
|
|
715
712
|
--uui-dt-row-bg-invalid: #FEF7F6;
|
|
716
713
|
--uui-dt-row-bg-selected: #EBF7FF;
|
|
717
714
|
|
|
718
|
-
--uui-dt-header-row-bg: var(--uui-surface-
|
|
719
|
-
--uui-dt-header-row-bg-hover: var(--uui-surface-
|
|
715
|
+
--uui-dt-header-row-bg: var(--uui-surface-low);
|
|
716
|
+
--uui-dt-header-row-bg-hover: var(--uui-surface-lowest);
|
|
720
717
|
|
|
721
718
|
--uui-dt-top-shadow: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
|
|
722
719
|
--uui-dt-left-shadow: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
|
|
@@ -744,7 +741,7 @@
|
|
|
744
741
|
.tooltip-contrast,
|
|
745
742
|
.tooltip-gray {
|
|
746
743
|
--uui-tooltip-bg: var(--uui-surface-contrast);
|
|
747
|
-
--uui-tooltip-text: var(--uui-contrast);
|
|
744
|
+
--uui-tooltip-text: var(--uui-text-contrast);
|
|
748
745
|
}
|
|
749
746
|
|
|
750
747
|
.tooltip-default,
|
|
@@ -756,7 +753,7 @@
|
|
|
756
753
|
.tooltip-critical,
|
|
757
754
|
.tooltip-fire {
|
|
758
755
|
--uui-tooltip-bg: var(--uui-error-dark);
|
|
759
|
-
--uui-tooltip-text: var(--uui-
|
|
756
|
+
--uui-tooltip-text: var(--uui-text-white);
|
|
760
757
|
}
|
|
761
758
|
|
|
762
759
|
.button-sky, .button-primary {
|
|
@@ -771,9 +768,9 @@
|
|
|
771
768
|
--uui-btn-border-active: var(--uui-primary-darkest);
|
|
772
769
|
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
773
770
|
--uui-btn-border-disabled: var(--uui-disabled);
|
|
774
|
-
--uui-btn-caption: var(--uui-
|
|
771
|
+
--uui-btn-caption: var(--uui-text-white);
|
|
775
772
|
--uui-btn-caption-halftone: var(--uui-primary);
|
|
776
|
-
--uui-btn-caption-disabled: var(--uui-
|
|
773
|
+
--uui-btn-caption-disabled: var(--uui-text-disabled);
|
|
777
774
|
}
|
|
778
775
|
|
|
779
776
|
.button-accent, .button-grass {
|
|
@@ -788,9 +785,26 @@
|
|
|
788
785
|
--uui-btn-border-active: var(--uui-accent-darkest);
|
|
789
786
|
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
790
787
|
--uui-btn-border-disabled: var(--uui-disabled);
|
|
791
|
-
--uui-btn-caption: var(--uui-
|
|
788
|
+
--uui-btn-caption: var(--uui-text-white);
|
|
792
789
|
--uui-btn-caption-halftone: var(--uui-accent);
|
|
793
|
-
--uui-btn-caption-disabled: var(--uui-
|
|
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);
|
|
794
808
|
}
|
|
795
809
|
|
|
796
810
|
.button-fire, .button-negative {
|
|
@@ -805,9 +819,9 @@
|
|
|
805
819
|
--uui-btn-border-active: var(--uui-negative-darkest);
|
|
806
820
|
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
807
821
|
--uui-btn-border-disabled: var(--uui-disabled);
|
|
808
|
-
--uui-btn-caption: var(--uui-
|
|
822
|
+
--uui-btn-caption: var(--uui-text-white);
|
|
809
823
|
--uui-btn-caption-halftone: var(--uui-negative);
|
|
810
|
-
--uui-btn-caption-disabled: var(--uui-
|
|
824
|
+
--uui-btn-caption-disabled: var(--uui-text-disabled);
|
|
811
825
|
}
|
|
812
826
|
|
|
813
827
|
.button-night500,
|
|
@@ -825,26 +839,26 @@
|
|
|
825
839
|
--uui-btn-border-active: var(--uui-secondary-darkest);
|
|
826
840
|
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
827
841
|
--uui-btn-border-disabled: var(--uui-disabled);
|
|
828
|
-
--uui-btn-caption: var(--uui-
|
|
842
|
+
--uui-btn-caption: var(--uui-text-white);
|
|
829
843
|
--uui-btn-caption-halftone: var(--uui-secondary-dark);
|
|
830
|
-
--uui-btn-caption-disabled: var(--uui-
|
|
844
|
+
--uui-btn-caption-disabled: var(--uui-text-disabled);
|
|
831
845
|
}
|
|
832
846
|
|
|
833
847
|
.button-white {
|
|
834
|
-
--uui-btn-bg: var(--
|
|
848
|
+
--uui-btn-bg: var(--white);
|
|
835
849
|
--uui-btn-bg-hover: var(--uui-color-white-800);
|
|
836
850
|
--uui-btn-bg-active: var(--uui-color-white-900);
|
|
837
851
|
--uui-btn-bg-halftone: var(--uui-button-bg-halftone);
|
|
838
852
|
--uui-btn-bg-halftone-hover: var(--uui-secondary-lightest);
|
|
839
853
|
--uui-btn-bg-halftone-active: var(--uui-secondary-light);
|
|
840
|
-
--uui-btn-border: var(--
|
|
854
|
+
--uui-btn-border: var(--white);
|
|
841
855
|
--uui-btn-border-hover: var(--uui-color-white-800);
|
|
842
856
|
--uui-btn-border-active: var(--uui-color-white-900);
|
|
843
857
|
--uui-btn-bg-disabled: var(--uui-disabled);
|
|
844
858
|
--uui-btn-border-disabled: var(--uui-disabled);
|
|
845
859
|
--uui-btn-caption: var(--night800);
|
|
846
860
|
--uui-btn-caption-halftone: var(--uui-secondary-dark);
|
|
847
|
-
--uui-btn-caption-disabled: var(--uui-
|
|
861
|
+
--uui-btn-caption-disabled: var(--uui-text-disabled);
|
|
848
862
|
}
|
|
849
863
|
|
|
850
864
|
.link-button-primary,
|
|
@@ -852,7 +866,7 @@
|
|
|
852
866
|
--uui-link-button-text: var(--uui-primary);
|
|
853
867
|
--uui-link-button-text-hover: var(--uui-primary-dark);
|
|
854
868
|
--uui-link-button-text-active: var(--uui-primary-darkest);
|
|
855
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
869
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
856
870
|
}
|
|
857
871
|
|
|
858
872
|
.link-button-secondary,
|
|
@@ -860,7 +874,7 @@
|
|
|
860
874
|
--uui-link-button-text: var(--uui-secondary);
|
|
861
875
|
--uui-link-button-text-hover: var(--uui-secondary-dark);
|
|
862
876
|
--uui-link-button-text-active: var(--uui-secondary-darkest);
|
|
863
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
877
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
864
878
|
}
|
|
865
879
|
|
|
866
880
|
.link-button-contrast,
|
|
@@ -868,112 +882,112 @@
|
|
|
868
882
|
--uui-link-button-text: var(--night100);
|
|
869
883
|
--uui-link-button-text-hover: var(--uui-color-night100-800);
|
|
870
884
|
--uui-link-button-text-active: var(--uui-color-night100-900);
|
|
871
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
885
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
872
886
|
}
|
|
873
887
|
|
|
874
888
|
.link-button-grass {
|
|
875
889
|
--uui-link-button-text: var(--grass);
|
|
876
890
|
--uui-link-button-text-hover: var(--grass-dark);
|
|
877
891
|
--uui-link-button-text-active: var(--grass-darkest);
|
|
878
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
892
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
879
893
|
}
|
|
880
894
|
|
|
881
895
|
.link-button-sun {
|
|
882
896
|
--uui-link-button-text: var(--sun);
|
|
883
897
|
--uui-link-button-text-hover: var(--sun-dark);
|
|
884
898
|
--uui-link-button-text-active: var(--sun-darkest);
|
|
885
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
899
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
886
900
|
}
|
|
887
901
|
|
|
888
902
|
.link-button-fire {
|
|
889
903
|
--uui-link-button-text: var(--fire);
|
|
890
904
|
--uui-link-button-text-hover: var(--fire-dark);
|
|
891
905
|
--uui-link-button-text-active: var(--fire-darkest);
|
|
892
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
906
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
893
907
|
}
|
|
894
908
|
|
|
895
909
|
.link-button-cobalt {
|
|
896
910
|
--uui-link-button-text: var(--cobalt-30);
|
|
897
911
|
--uui-link-button-text-hover: var(--cobalt-40);
|
|
898
912
|
--uui-link-button-text-active: var(--cobalt-50);
|
|
899
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
913
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
900
914
|
}
|
|
901
915
|
|
|
902
916
|
.link-button-lavanda {
|
|
903
917
|
--uui-link-button-text: var(--lavanda-30);
|
|
904
918
|
--uui-link-button-text-hover: var(--lavanda-40);
|
|
905
919
|
--uui-link-button-text-active: var(--lavanda-50);
|
|
906
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
920
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
907
921
|
}
|
|
908
922
|
|
|
909
923
|
.link-button-fuchsia {
|
|
910
924
|
--uui-link-button-text: var(--fuchia-30);
|
|
911
925
|
--uui-link-button-text-hover: var(--fuchia-40);
|
|
912
926
|
--uui-link-button-text-active: var(--fuchia-50);
|
|
913
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
927
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
914
928
|
}
|
|
915
929
|
|
|
916
930
|
.link-button-white {
|
|
917
931
|
--uui-link-button-text: var(--white);
|
|
918
932
|
--uui-link-button-text-hover: var(--uui-color-white-800);
|
|
919
933
|
--uui-link-button-text-active: var(--uui-color-white-900);
|
|
920
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
934
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
921
935
|
}
|
|
922
936
|
|
|
923
937
|
.link-button-night50 {
|
|
924
938
|
--uui-link-button-text: var(--night50);
|
|
925
939
|
--uui-link-button-text-hover: var(--uui-color-night50-800);
|
|
926
940
|
--uui-link-button-text-active: var(--uui-color-night50-900);
|
|
927
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
941
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
928
942
|
}
|
|
929
943
|
|
|
930
944
|
.link-button-night200 {
|
|
931
945
|
--uui-link-button-text: var(--night200);
|
|
932
946
|
--uui-link-button-text-hover: var(--uui-color-night200-800);
|
|
933
947
|
--uui-link-button-text-active: var(--uui-color-night200-900);
|
|
934
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
948
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
935
949
|
}
|
|
936
950
|
|
|
937
951
|
.link-button-night300 {
|
|
938
952
|
--uui-link-button-text: var(--night300);
|
|
939
953
|
--uui-link-button-text-hover: var(--uui-color-night300-800);
|
|
940
954
|
--uui-link-button-text-active: var(--uui-color-night300-900);
|
|
941
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
955
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
942
956
|
}
|
|
943
957
|
|
|
944
958
|
.link-button-night400 {
|
|
945
959
|
--uui-link-button-text: var(--night400);
|
|
946
960
|
--uui-link-button-text-hover: var(--uui-color-night400-800);
|
|
947
961
|
--uui-link-button-text-active: var(--uui-color-night400-900);
|
|
948
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
962
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
949
963
|
}
|
|
950
964
|
|
|
951
965
|
.link-button-night500 {
|
|
952
966
|
--uui-link-button-text: var(--night500);
|
|
953
967
|
--uui-link-button-text-hover: var(--uui-color-night500-800);
|
|
954
968
|
--uui-link-button-text-active: var(--uui-color-night500-900);
|
|
955
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
969
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
956
970
|
}
|
|
957
971
|
|
|
958
972
|
.link-button-night700 {
|
|
959
973
|
--uui-link-button-text: var(--night700);
|
|
960
974
|
--uui-link-button-text-hover: var(--uui-color-night700-800);
|
|
961
975
|
--uui-link-button-text-active: var(--uui-color-night700-900);
|
|
962
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
976
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
963
977
|
}
|
|
964
978
|
|
|
965
979
|
.link-button-night800 {
|
|
966
980
|
--uui-link-button-text: var(--night800);
|
|
967
981
|
--uui-link-button-text-hover: var(--uui-color-night800-800);
|
|
968
982
|
--uui-link-button-text-active: var(--uui-color-night800-900);
|
|
969
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
983
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
970
984
|
}
|
|
971
985
|
|
|
972
986
|
.link-button-night900 {
|
|
973
987
|
--uui-link-button-text: var(--night900);
|
|
974
988
|
--uui-link-button-text-hover: var(--uui-color-night900-800);
|
|
975
989
|
--uui-link-button-text-active: var(--uui-color-night900-900);
|
|
976
|
-
--uui-link-button-text-disabled: var(--uui-
|
|
990
|
+
--uui-link-button-text-disabled: var(--uui-text-disabled);
|
|
977
991
|
}
|
|
978
992
|
|
|
979
993
|
.icon-button-sky,
|
|
@@ -1115,7 +1129,7 @@
|
|
|
1115
1129
|
.alert-error,
|
|
1116
1130
|
.alert-fire {
|
|
1117
1131
|
--uui-alert-text: var(--uui-text-primary);
|
|
1118
|
-
--uui-alert-bg:
|
|
1132
|
+
--uui-alert-bg: var(--uui-error-lightest);
|
|
1119
1133
|
--uui-alert-border: var(--uui-error);
|
|
1120
1134
|
--uui-alert-icon: var(--uui-error);
|
|
1121
1135
|
}
|
|
@@ -1123,7 +1137,7 @@
|
|
|
1123
1137
|
.alert-warning,
|
|
1124
1138
|
.alert-sun {
|
|
1125
1139
|
--uui-alert-text: var(--uui-text-primary);
|
|
1126
|
-
--uui-alert-bg:
|
|
1140
|
+
--uui-alert-bg: var(--uui-warning-lightest);
|
|
1127
1141
|
--uui-alert-border: var(--uui-warning);
|
|
1128
1142
|
--uui-alert-icon: var(--uui-warning);
|
|
1129
1143
|
}
|
|
@@ -1132,7 +1146,7 @@
|
|
|
1132
1146
|
.alert-success,
|
|
1133
1147
|
.alert-grass {
|
|
1134
1148
|
--uui-alert-text: var(--uui-text-primary);
|
|
1135
|
-
--uui-alert-bg:
|
|
1149
|
+
--uui-alert-bg: var(--uui-success-lightest);
|
|
1136
1150
|
--uui-alert-border: var(--uui-success);
|
|
1137
1151
|
--uui-alert-icon: var(--uui-success);
|
|
1138
1152
|
}
|
|
@@ -1140,7 +1154,7 @@
|
|
|
1140
1154
|
.alert-info,
|
|
1141
1155
|
.alert-sky {
|
|
1142
1156
|
--uui-alert-text: var(--uui-text-primary);
|
|
1143
|
-
--uui-alert-bg:
|
|
1157
|
+
--uui-alert-bg: var(--uui-info-lightest);
|
|
1144
1158
|
--uui-alert-border: var(--uui-info);
|
|
1145
1159
|
--uui-alert-icon: var(--uui-info);
|
|
1146
1160
|
}
|
|
@@ -1148,232 +1162,232 @@
|
|
|
1148
1162
|
.badge-default, .badge-night300 {
|
|
1149
1163
|
--uui-badge-bg: var(--night300);
|
|
1150
1164
|
--uui-badge-bg-hover: var(--night400);
|
|
1151
|
-
--uui-badge-caption-solid: var(--uui-text-primary);
|
|
1152
|
-
--uui-badge-count-bg: var(--white);
|
|
1153
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1154
1165
|
--uui-badge-bg-halftone: var(--night200);
|
|
1155
1166
|
--uui-badge-bg-halftone-hover: var(--night300);
|
|
1156
1167
|
--uui-badge-border-halftone: var(--night400);
|
|
1157
1168
|
--uui-badge-border-halftone-hover: var(--night500);
|
|
1169
|
+
--uui-badge-caption-solid: var(--uui-text-primary);
|
|
1158
1170
|
--uui-badge-caption-halftone: var(--uui-text-primary);
|
|
1171
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1172
|
+
--uui-badge-count-bg: var(--white);
|
|
1159
1173
|
}
|
|
1160
1174
|
|
|
1161
1175
|
.badge-info, .badge-sky {
|
|
1162
1176
|
--uui-badge-bg: var(--uui-info);
|
|
1163
1177
|
--uui-badge-bg-hover: var(--uui-info-dark);
|
|
1164
|
-
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1165
|
-
--uui-badge-count-bg: var(--white);
|
|
1166
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1167
1178
|
--uui-badge-bg-halftone: var(--uui-info-lightest);
|
|
1168
1179
|
--uui-badge-bg-halftone-hover: var(--uui-info-light);
|
|
1169
1180
|
--uui-badge-border-halftone: var(--uui-info-light);
|
|
1170
1181
|
--uui-badge-border-halftone-hover: var(--uui-info);
|
|
1182
|
+
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1171
1183
|
--uui-badge-caption-halftone: var(--uui-info-darkest);
|
|
1184
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1185
|
+
--uui-badge-count-bg: var(--white);
|
|
1172
1186
|
}
|
|
1173
1187
|
|
|
1174
1188
|
.badge-success, .badge-grass {
|
|
1175
1189
|
--uui-badge-bg: var(--uui-success);
|
|
1176
1190
|
--uui-badge-bg-hover: var(--uui-success-dark);
|
|
1177
|
-
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1178
|
-
--uui-badge-count-bg: var(--white);
|
|
1179
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1180
1191
|
--uui-badge-bg-halftone: var(--uui-success-lightest);
|
|
1181
1192
|
--uui-badge-bg-halftone-hover: var(--uui-success-light);
|
|
1182
1193
|
--uui-badge-border-halftone: var(--uui-success-light);
|
|
1183
1194
|
--uui-badge-border-halftone-hover: var(--uui-success);
|
|
1195
|
+
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1184
1196
|
--uui-badge-caption-halftone: var(--uui-success-darkest);
|
|
1197
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1198
|
+
--uui-badge-count-bg: var(--white);
|
|
1185
1199
|
}
|
|
1186
1200
|
|
|
1187
1201
|
.badge-warning, .badge-sun {
|
|
1188
1202
|
--uui-badge-bg: var(--uui-warning);
|
|
1189
1203
|
--uui-badge-bg-hover: var(--uui-warning-dark);
|
|
1190
|
-
--uui-badge-caption-solid: var(--uui-text-primary);
|
|
1191
|
-
--uui-badge-count-bg: var(--white);
|
|
1192
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1193
1204
|
--uui-badge-bg-halftone: var(--uui-warning-lightest);
|
|
1194
1205
|
--uui-badge-bg-halftone-hover: var(--uui-warning-light);
|
|
1195
1206
|
--uui-badge-border-halftone: var(--uui-warning-light);
|
|
1196
1207
|
--uui-badge-border-halftone-hover: var(--uui-warning);
|
|
1208
|
+
--uui-badge-caption-solid: var(--uui-text-primary);
|
|
1197
1209
|
--uui-badge-caption-halftone: var(--uui-warning-darkest);
|
|
1210
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1211
|
+
--uui-badge-count-bg: var(--white);
|
|
1198
1212
|
}
|
|
1199
1213
|
|
|
1200
1214
|
.badge-error, .badge-fire {
|
|
1201
1215
|
--uui-badge-bg: var(--uui-error);
|
|
1202
1216
|
--uui-badge-bg-hover: var(--uui-error-dark);
|
|
1203
|
-
--uui-badge-caption-solid: var(--white);
|
|
1204
|
-
--uui-badge-count-bg: var(--white);
|
|
1205
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1206
1217
|
--uui-badge-bg-halftone: var(--uui-error-lightest);
|
|
1207
1218
|
--uui-badge-bg-halftone-hover: var(--uui-error-light);
|
|
1208
1219
|
--uui-badge-border-halftone: var(--uui-error-light);
|
|
1209
1220
|
--uui-badge-border-halftone-hover: var(--uui-error);
|
|
1221
|
+
--uui-badge-caption-solid: var(--white);
|
|
1210
1222
|
--uui-badge-caption-halftone: var(--uui-error-darkest);
|
|
1223
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1224
|
+
--uui-badge-count-bg: var(--white);
|
|
1211
1225
|
}
|
|
1212
1226
|
|
|
1213
1227
|
.badge-cobalt {
|
|
1214
1228
|
--uui-badge-bg: var(--cobalt-30);
|
|
1215
1229
|
--uui-badge-bg-hover: var(--cobalt-40);
|
|
1216
|
-
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1217
|
-
--uui-badge-count-bg: var(--white);
|
|
1218
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1219
1230
|
--uui-badge-bg-halftone: var(--cobalt-10);
|
|
1220
1231
|
--uui-badge-bg-halftone-hover: var(--cobalt-20);
|
|
1221
1232
|
--uui-badge-border-halftone: var(--cobalt-30);
|
|
1222
1233
|
--uui-badge-border-halftone-hover: var(--cobalt-40);
|
|
1234
|
+
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1223
1235
|
--uui-badge-caption-halftone: var(--cobalt-50);
|
|
1236
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1237
|
+
--uui-badge-count-bg: var(--white);
|
|
1224
1238
|
}
|
|
1225
1239
|
|
|
1226
1240
|
.badge-lavanda {
|
|
1227
1241
|
--uui-badge-bg: var(--lavanda-30);
|
|
1228
1242
|
--uui-badge-bg-hover: var(--lavanda-40);
|
|
1229
|
-
--uui-badge-caption-solid: var(--white);
|
|
1230
|
-
--uui-badge-count-bg: var(--white);
|
|
1231
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1232
1243
|
--uui-badge-bg-halftone: var(--lavanda-10);
|
|
1233
1244
|
--uui-badge-bg-halftone-hover: var(--lavanda-20);
|
|
1234
1245
|
--uui-badge-border-halftone: var(--lavanda-30);
|
|
1235
1246
|
--uui-badge-border-halftone-hover: var(--lavanda-40);
|
|
1247
|
+
--uui-badge-caption-solid: var(--white);
|
|
1236
1248
|
--uui-badge-caption-halftone: var(--lavanda-50);
|
|
1249
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1250
|
+
--uui-badge-count-bg: var(--white);
|
|
1237
1251
|
}
|
|
1238
1252
|
|
|
1239
1253
|
.badge-fuchsia {
|
|
1240
1254
|
--uui-badge-bg: var(--fuchia-30);
|
|
1241
1255
|
--uui-badge-bg-hover: var(--fuchia-40);
|
|
1242
|
-
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1243
|
-
--uui-badge-count-bg: var(--white);
|
|
1244
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1245
1256
|
--uui-badge-bg-halftone: var(--fuchia-10);
|
|
1246
1257
|
--uui-badge-bg-halftone-hover: var(--fuchia-20);
|
|
1247
1258
|
--uui-badge-border-halftone: var(--fuchia-30);
|
|
1248
1259
|
--uui-badge-border-halftone-hover: var(--fuchia-40);
|
|
1260
|
+
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1249
1261
|
--uui-badge-caption-halftone: var(--fuchia-50);
|
|
1262
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1263
|
+
--uui-badge-count-bg: var(--white);
|
|
1250
1264
|
}
|
|
1251
1265
|
|
|
1252
1266
|
.badge-white {
|
|
1253
1267
|
--uui-badge-bg: var(--white);
|
|
1254
1268
|
--uui-badge-bg-hover: var(--gray5);
|
|
1255
|
-
--uui-badge-caption-solid: var(--night800);
|
|
1256
|
-
--uui-badge-count-bg: var(--white);
|
|
1257
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1258
1269
|
--uui-badge-bg-halftone: var(--white);
|
|
1259
1270
|
--uui-badge-bg-halftone-hover: var(--gray5);
|
|
1260
1271
|
--uui-badge-border-halftone: var(--white);
|
|
1261
1272
|
--uui-badge-border-halftone-hover: var(--gray5);
|
|
1273
|
+
--uui-badge-caption-solid: var(--night800);
|
|
1262
1274
|
--uui-badge-caption-halftone: var(--uui-text-secondary);
|
|
1275
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1276
|
+
--uui-badge-count-bg: var(--white);
|
|
1263
1277
|
}
|
|
1264
1278
|
|
|
1265
1279
|
.badge-night200 {
|
|
1266
1280
|
--uui-badge-bg: var(--uui-color-night200-700);
|
|
1267
1281
|
--uui-badge-bg-hover: var(--uui-color-night200-800);
|
|
1268
|
-
--uui-badge-caption-solid: var(--night800);
|
|
1269
|
-
--uui-badge-count-bg: var(--white);
|
|
1270
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1271
1282
|
--uui-badge-bg-halftone: var(--white);
|
|
1272
1283
|
--uui-badge-bg-halftone-hover: var(--gray5);
|
|
1273
1284
|
--uui-badge-border-halftone: var(--white);
|
|
1274
1285
|
--uui-badge-border-halftone-hover: var(--gray5);
|
|
1286
|
+
--uui-badge-caption-solid: var(--night800);
|
|
1275
1287
|
--uui-badge-caption-halftone: var(--uui-text-secondary);
|
|
1288
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1289
|
+
--uui-badge-count-bg: var(--white);
|
|
1276
1290
|
}
|
|
1277
1291
|
|
|
1278
1292
|
.badge-night300 {
|
|
1279
1293
|
--uui-badge-bg: var(--uui-color-night300-700);
|
|
1280
1294
|
--uui-badge-bg-hover: var(--uui-color-night300-800);
|
|
1281
|
-
--uui-badge-caption-solid: var(--night800);
|
|
1282
|
-
--uui-badge-count-bg: var(--white);
|
|
1283
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1284
1295
|
--uui-badge-bg-halftone: var(--white);
|
|
1285
1296
|
--uui-badge-bg-halftone-hover: var(--gray5);
|
|
1286
1297
|
--uui-badge-border-halftone: var(--white);
|
|
1287
1298
|
--uui-badge-border-halftone-hover: var(--gray5);
|
|
1299
|
+
--uui-badge-caption-solid: var(--night800);
|
|
1288
1300
|
--uui-badge-caption-halftone: var(--uui-text-secondary);
|
|
1301
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1302
|
+
--uui-badge-count-bg: var(--white);
|
|
1289
1303
|
}
|
|
1290
1304
|
|
|
1291
1305
|
.badge-night400 {
|
|
1292
1306
|
--uui-badge-bg: var(--uui-color-night400-700);
|
|
1293
1307
|
--uui-badge-bg-hover: var(--uui-color-night400-800);
|
|
1294
|
-
--uui-badge-caption-solid: var(--night800);
|
|
1295
|
-
--uui-badge-count-bg: var(--white);
|
|
1296
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1297
1308
|
--uui-badge-bg-halftone: var(--white);
|
|
1298
1309
|
--uui-badge-bg-halftone-hover: var(--gray5);
|
|
1299
1310
|
--uui-badge-border-halftone: var(--white);
|
|
1300
1311
|
--uui-badge-border-halftone-hover: var(--gray5);
|
|
1312
|
+
--uui-badge-caption-solid: var(--night800);
|
|
1301
1313
|
--uui-badge-caption-halftone: var(--uui-text-secondary);
|
|
1314
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1315
|
+
--uui-badge-count-bg: var(--white);
|
|
1302
1316
|
}
|
|
1303
1317
|
|
|
1304
1318
|
.badge-night500 {
|
|
1305
1319
|
--uui-badge-bg: var(--uui-color-night500-700);
|
|
1306
1320
|
--uui-badge-bg-hover: var(--uui-color-night500-800);
|
|
1307
|
-
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1308
|
-
--uui-badge-count-bg: var(--white);
|
|
1309
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1310
1321
|
--uui-badge-bg-halftone: var(--white);
|
|
1311
1322
|
--uui-badge-bg-halftone-hover: var(--gray5);
|
|
1312
1323
|
--uui-badge-border-halftone: var(--white);
|
|
1313
1324
|
--uui-badge-border-halftone-hover: var(--gray5);
|
|
1325
|
+
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1314
1326
|
--uui-badge-caption-halftone: var(--uui-text-secondary);
|
|
1327
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1328
|
+
--uui-badge-count-bg: var(--white);
|
|
1315
1329
|
}
|
|
1316
1330
|
|
|
1317
1331
|
.badge-night600 {
|
|
1318
1332
|
--uui-badge-bg: var(--uui-color-night600-700);
|
|
1319
1333
|
--uui-badge-bg-hover: var(--uui-color-night600-800);
|
|
1320
|
-
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1321
|
-
--uui-badge-count-bg: var(--white);
|
|
1322
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1323
1334
|
--uui-badge-bg-halftone: var(--white);
|
|
1324
1335
|
--uui-badge-bg-halftone-hover: var(--gray5);
|
|
1325
1336
|
--uui-badge-border-halftone: var(--white);
|
|
1326
1337
|
--uui-badge-border-halftone-hover: var(--gray5);
|
|
1338
|
+
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1327
1339
|
--uui-badge-caption-halftone: var(--uui-text-secondary);
|
|
1340
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1341
|
+
--uui-badge-count-bg: var(--white);
|
|
1328
1342
|
}
|
|
1329
1343
|
|
|
1330
1344
|
.badge-violet {
|
|
1331
1345
|
--uui-badge-bg: var(--lavanda-30);
|
|
1332
1346
|
--uui-badge-bg-hover: var(--lavanda-40);
|
|
1333
|
-
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1334
|
-
--uui-badge-count-bg: var(--white);
|
|
1335
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1336
1347
|
--uui-badge-bg-halftone: var(--lavanda-10);
|
|
1337
1348
|
--uui-badge-bg-halftone-hover: var(--lavanda-20);
|
|
1338
1349
|
--uui-badge-border-halftone: var(--lavanda-20);
|
|
1339
1350
|
--uui-badge-border-halftone-hover: var(--lavanda-30);
|
|
1351
|
+
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1340
1352
|
--uui-badge-caption-halftone: var(--lavanda-50);
|
|
1353
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1354
|
+
--uui-badge-count-bg: var(--white);
|
|
1341
1355
|
}
|
|
1342
1356
|
|
|
1343
1357
|
.badge-orange {
|
|
1344
1358
|
--uui-badge-bg: var(--orange-30);
|
|
1345
1359
|
--uui-badge-bg-hover: var(--orange-40);
|
|
1346
|
-
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1347
|
-
--uui-badge-count-bg: var(--white);
|
|
1348
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1349
1360
|
--uui-badge-bg-halftone: var(--orange-10);
|
|
1350
1361
|
--uui-badge-bg-halftone-hover: var(--orange-20);
|
|
1351
1362
|
--uui-badge-border-halftone: var(--orange-20);
|
|
1352
1363
|
--uui-badge-border-halftone-hover: var(--orange-30);
|
|
1364
|
+
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1353
1365
|
--uui-badge-caption-halftone: var(--orange-50);
|
|
1366
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1367
|
+
--uui-badge-count-bg: var(--white);
|
|
1354
1368
|
}
|
|
1355
1369
|
|
|
1356
1370
|
.badge-purple {
|
|
1357
1371
|
--uui-badge-bg: var(--purple-30);
|
|
1358
1372
|
--uui-badge-bg-hover: var(--purple-40);
|
|
1359
|
-
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1360
|
-
--uui-badge-count-bg: var(--white);
|
|
1361
|
-
--uui-badge-count: var(--uui-text-secondary);
|
|
1362
1373
|
--uui-badge-bg-halftone: var(--purple-10);
|
|
1363
1374
|
--uui-badge-bg-halftone-hover: var(--purple-20);
|
|
1364
1375
|
--uui-badge-border-halftone: var(--purple-20);
|
|
1365
1376
|
--uui-badge-border-halftone-hover: var(--purple-30);
|
|
1377
|
+
--uui-badge-caption-solid: var(--uui-text-contrast);
|
|
1366
1378
|
--uui-badge-caption-halftone: var(--purple-50);
|
|
1379
|
+
--uui-badge-count: var(--uui-text-secondary);
|
|
1380
|
+
--uui-badge-count-bg: var(--white);
|
|
1367
1381
|
}
|
|
1368
1382
|
|
|
1369
1383
|
.informer-default {
|
|
1370
1384
|
--uui-informer-bg: var(--night300);
|
|
1371
|
-
--uui-informer-caption: var(--
|
|
1385
|
+
--uui-informer-caption: var(--uui-text-secondary);
|
|
1372
1386
|
}
|
|
1373
1387
|
|
|
1374
1388
|
.informer-focus {
|
|
1375
1389
|
--uui-informer-bg: var(--fire);
|
|
1376
|
-
--uui-informer-caption: var(--uui-
|
|
1390
|
+
--uui-informer-caption: var(--uui-text-white);
|
|
1377
1391
|
}
|
|
1378
1392
|
|
|
1379
1393
|
.informer-white {
|