@epam/assets 5.7.2 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/css/theme/theme_electric.css +51 -20
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +48 -81
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +131 -104
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +52 -45
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/package.json +3 -3
  10. package/theme/theme_electric.scss +51 -14
  11. package/theme/theme_loveship.scss +57 -94
  12. package/theme/theme_loveship_dark.scss +139 -103
  13. package/theme/theme_promo.scss +65 -48
  14. package/theme/tokens/_theme_electric.scss +6 -6
  15. package/theme/tokens/_theme_loveship_dark.scss +6 -6
  16. /package/theme/tokens/{_theme_loveship.scss → _theme_loveship_light.scss} +0 -0
package/theme/theme_loveship_dark.scss CHANGED
@@ -224,13 +224,13 @@
224
224
  }
225
225
 
226
226
  .uui-color-white {
227
- --uui-color-5: var(--white);
228
- --uui-color-10: var(--white);
229
- --uui-color-20: var(--white);
230
- --uui-color-50: var(--white);
227
+ --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
228
+ --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
229
+ --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
230
+ --uui-color-50: var(--uui-neutral-0);
231
231
  --uui-color-60: var(--uui-neutral-10);
232
232
  --uui-color-70: var(--uui-neutral-20);
233
- --uui-color-contrast: var(--night700);
233
+ --uui-color-contrast: var(--uui-neutral-70);
234
234
  }
235
235
 
236
236
  /* override variables */
@@ -259,6 +259,15 @@
259
259
  --uui-btn-bg-disabled: var(--uui-neutral-50);
260
260
  --uui-btn-border-disabled: var(--uui-neutral-50);
261
261
 
262
+ &.uui-fill-solid.uui-color-white {
263
+ --uui-btn-bg-active: var(--uui-neutral-20);
264
+
265
+ &:active {
266
+ background-color: var(--uui-neutral-20);
267
+ border-color: var(--uui-neutral-20);
268
+ }
269
+ }
270
+
262
271
  &.uui-fill-outline {
263
272
  --uui-btn-border: var(--uui-color-60);
264
273
  --uui-btn-border-hover: var(--uui-color-60);
@@ -274,6 +283,13 @@
274
283
  --uui-btn-border-active: var(--uui-neutral-30);
275
284
  --uui-btn-caption: var(--uui-neutral-10);
276
285
  }
286
+
287
+ &.uui-color-white {
288
+ --uui-btn-caption: var(--uui-neutral-0);
289
+ --uui-btn-border: var(--uui-neutral-0);
290
+ --uui-btn-border-hover: var(--uui-neutral-0);
291
+ --uui-btn-border-active: var(--uui-neutral-0);
292
+ }
277
293
  }
278
294
 
279
295
  &.uui-fill-none {
@@ -291,6 +307,13 @@
291
307
  --uui-btn-border-active: var(--uui-neutral-30);
292
308
  --uui-btn-caption: var(--uui-neutral-10);
293
309
  }
310
+
311
+ &.uui-color-white {
312
+ --uui-btn-caption: var(--uui-neutral-0);
313
+ --uui-btn-border: var(--uui-neutral-0);
314
+ --uui-btn-border-hover: var(--uui-neutral-0);
315
+ --uui-btn-border-active: var(--uui-neutral-0);
316
+ }
294
317
  }
295
318
 
296
319
  &.uui-fill-ghost {
@@ -304,23 +327,9 @@
304
327
  --uui-btn-border-active: var(--uui-neutral-50);
305
328
  --uui-btn-caption: var(--uui-neutral-10);
306
329
  }
307
- }
308
-
309
- &.uui-color-white {
310
- &.uui-fill-none, &.uui-fill-ghost {
311
- --uui-btn-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 20%, transparent);
312
- --uui-btn-bg-active: color-mix(in srgb, var(--uui-neutral-0) 30%, transparent);
313
- }
314
-
315
- &.uui-fill-ghost {
316
- --uui-btn-border: var(--uui-btn-bg);
317
- --uui-btn-border-hover: var(--uui-btn-bg);
318
- --uui-btn-border-active: var(--uui-btn-bg);
319
- }
320
330
 
321
- &.uui-fill-outline {
322
- --uui-btn-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 20%, transparent);
323
- --uui-btn-bg-active: color-mix(in srgb, var(--uui-neutral-0) 30%, transparent);
331
+ &.uui-color-white {
332
+ --uui-btn-caption: var(--uui-neutral-0);
324
333
  }
325
334
  }
326
335
  }
@@ -335,7 +344,7 @@
335
344
  .uui-badge {
336
345
  &.uui-fill-outline {
337
346
  .uui-count_indicator {
338
- --uui-count_indicator-bg: var(--uui-neutral-70);
347
+ --uui-count_indicator-bg: var(--uui-neutral-80);
339
348
  --uui-count_indicator-border: var(--uui-neutral-40);
340
349
  --uui-count_indicator-caption: var(--uui-neutral-10);
341
350
  }
@@ -345,18 +354,23 @@
345
354
  .uui-badge.uui-color-neutral,
346
355
  .uui-badge.uui-color-night300 {
347
356
  &.uui-fill-solid {
348
- --uui-badge-bg: var(--uui-neutral-40);
349
- --uui-badge-bg-hover: var(--uui-neutral-30);
350
- --uui-badge-border: var(--uui-neutral-40);
351
- --uui-badge-border-hover: var(--uui-neutral-30);
352
- --uui-color-contrast: var(--uui-neutral-5);
353
- --uui-badge-caption: var(--uui-neutral-0);
357
+ --uui-badge-bg: var(--uui-neutral-30);
358
+ --uui-badge-border: var(--uui-neutral-30);
359
+ --uui-badge-bg-hover: var(--uui-neutral-40);
360
+ --uui-badge-border-hover: var(--uui-neutral-40);
361
+ --uui-badge-caption: var(--uui-neutral-5);
362
+
363
+ .uui-count_indicator {
364
+ --uui-count_indicator-bg: var(--uui-neutral-0);
365
+ --uui-count_indicator-border: var(--uui-neutral-0);
366
+ --uui-count_indicator-caption: var(--uui-neutral-80);
367
+ }
354
368
  }
355
369
 
356
370
  &.uui-fill-outline {
357
- --uui-badge-bg: var(--uui-neutral-30);
358
- --uui-badge-bg-hover: var(--uui-neutral-40);
359
- --uui-badge-border: var(--uui-neutral-20);
371
+ --uui-badge-bg: var(--uui-neutral-60);
372
+ --uui-badge-border: var(--uui-neutral-30);
373
+ --uui-badge-bg-hover: var(--uui-neutral-50);
360
374
  --uui-badge-border-hover: var(--uui-neutral-30);
361
375
  --uui-badge-caption: var(--uui-neutral-0);
362
376
  --uui-badge-caption-hover: var(--uui-neutral-5);
@@ -364,65 +378,63 @@
364
378
  }
365
379
 
366
380
  .uui-badge.uui-color-white {
367
- &.uui-fill-solid {
368
- --uui-badge-bg-hover: var(--uui-neutral-5);
369
- }
370
-
371
381
  &.uui-fill-outline {
372
- --uui-badge-bg: color-mix(in srgb, var(--white) 8%, transparent);
373
- --uui-badge-bg-hover: color-mix(in srgb, var(--white) 11%, transparent);
374
- --uui-badge-caption: var(--white);
375
- --uui-badge-caption-hover: var(--white);
382
+ --uui-badge-bg: var(--uui-neutral-0);
383
+ --uui-badge-border: var(--uui-neutral-30);
384
+ --uui-badge-bg-hover: var(--uui-neutral-10);
385
+ --uui-badge-border-hover: var(--uui-neutral-30);
386
+ --uui-badge-caption: var(--uui-neutral-70);
387
+ --uui-badge-caption-hover: var(--uui-neutral-70);
376
388
 
377
389
  .uui-count_indicator {
378
- --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 8%, transparent);
379
- --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 40%, transparent);
380
- --uui-count_indicator-caption: var(--uui-neutral-0);
390
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent);
391
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent);
392
+ --uui-count_indicator-caption: var(--uui-neutral-70);
381
393
  }
382
394
  }
383
395
  }
384
396
 
385
397
  .uui-badge.uui-color-night100 {
386
398
  &.uui-fill-solid {
387
- --uui-badge-bg: var(--uui-neutral-40);
388
- --uui-badge-bg-hover: var(--uui-neutral-30);
389
- --uui-badge-border: var(--uui-neutral-40);
399
+ --uui-badge-bg: var(--uui-neutral-10);
400
+ --uui-badge-border: var(--uui-neutral-10);
401
+ --uui-badge-bg-hover: var(--uui-neutral-20);
402
+ --uui-badge-border-hover: var(--uui-neutral-20);
403
+ --uui-badge-caption: var(--uui-neutral-70);
404
+ --uui-badge-caption-hover: var(--uui-neutral-70);
405
+ }
406
+
407
+ &.uui-fill-outline {
408
+ --uui-badge-bg: var(--uui-neutral-10);
409
+ --uui-badge-border: var(--uui-neutral-30);
410
+ --uui-badge-bg-hover: var(--uui-neutral-20);
390
411
  --uui-badge-border-hover: var(--uui-neutral-30);
391
- --uui-badge-caption: var(--white);
392
- --uui-badge-caption-hover: var(--white);
412
+ --uui-badge-caption: var(--uui-neutral-70);
413
+ --uui-badge-caption-hover: var(--uui-neutral-70);
393
414
 
394
415
  .uui-count_indicator {
395
- --uui-count_indicator-bg: var(--uui-neutral-50);
396
- --uui-count_indicator-border: var(--uui-neutral-50);
397
- --uui-count_indicator-caption: var(--uui-neutral-10);
416
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-100) 8%, transparent);
417
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-100) 40%, transparent);
418
+ --uui-count_indicator-caption: var(--uui-neutral-70);
398
419
  }
399
420
  }
400
-
401
- &.uui-fill-outline {
402
- --uui-badge-bg: color-mix(in srgb, var(--white) 20%, transparent);
403
- --uui-badge-bg-hover: color-mix(in srgb, var(--white) 25%, transparent);
404
- --uui-badge-border: var(--uui-neutral-20);
405
- --uui-badge-border-hover: var(--uui-neutral-20);
406
- --uui-badge-caption: var(--uui-neutral-5);
407
- --uui-badge-caption-hover: var(--uui-neutral-5);
408
- }
409
421
  }
410
422
 
411
423
  .uui-badge.uui-color-night600 {
412
424
  &.uui-fill-solid {
413
- --uui-badge-bg: var(--uui-neutral-80);
414
- --uui-badge-bg-hover: var(--uui-neutral-70);
415
- --uui-badge-border: var(--uui-neutral-80);
416
- --uui-badge-border-hover: var(--uui-neutral-70);
425
+ --uui-badge-bg: var(--uui-neutral-60);
426
+ --uui-badge-border: var(--uui-neutral-60);
427
+ --uui-badge-bg-hover: var(--uui-neutral-50);
428
+ --uui-badge-border-hover: var(--uui-neutral-50);
417
429
  --uui-badge-caption: var(--white);
418
430
  --uui-badge-caption-hover: var(--white);
419
431
  }
420
432
 
421
433
  &.uui-fill-outline {
422
434
  --uui-badge-bg: var(--uui-neutral-80);
435
+ --uui-badge-border: var(--uui-neutral-60);
423
436
  --uui-badge-bg-hover: var(--uui-neutral-70);
424
- --uui-badge-border: var(--uui-neutral-30);
425
- --uui-badge-border-hover: var(--uui-neutral-30);
437
+ --uui-badge-border-hover: var(--uui-neutral-60);
426
438
  --uui-badge-caption: var(--uui-neutral-5);
427
439
  --uui-badge-caption-hover: var(--uui-neutral-5);
428
440
  }
@@ -430,12 +442,17 @@
430
442
 
431
443
  /* IconButton */
432
444
 
433
- .uui-icon_button:is(.uui-color-info, .uui-color-success, .uui-color-warning, .uui-color-error) {
445
+ .uui-icon_button:is(.uui-color-info, .uui-color-primary, .uui-color-sky, .uui-color-success, .uui-color-accent, .uui-color-grass .uui-color-error, .uui-color-critical, .uui-color-sun, .uui-color-fire) {
434
446
  --uui-icon_btn: var(--uui-color-60);
435
447
  --uui-icon_btn-hover: var(--uui-color-70);
436
448
  --uui-icon_btn-active: var(--uui-color-70);
437
449
  }
438
450
 
451
+ .uui-icon_button.uui-color-white {
452
+ --uui-icon_btn-hover: var(--uui-neutral-20);
453
+ --uui-icon_btn-active: var(--uui-neutral-30);
454
+ }
455
+
439
456
  .uui-icon_button.uui-color-secondary {
440
457
  --uui-icon_btn: var(--uui-neutral-40);
441
458
  --uui-icon_btn-hover: var(--uui-neutral-30);
@@ -450,11 +467,25 @@
450
467
  --uui-link_btn-text-active: var(--uui-neutral-10);
451
468
  }
452
469
 
470
+ .uui-link_button:is(.uui-color-primary, .uui-color-sky, .uui-color-secondary, .uui-color-accent, .uui-color-grass, .uui-color-critical, .uui-color-fire) {
471
+ --uui-link_btn-text-disabled: var(--uui-neutral-40);
472
+ }
473
+
453
474
  .uui-link_button.uui-color-primary,
454
475
  .uui-link_button.uui-color-sky {
455
476
  --uui-link_btn-text: var(--uui-color-60);
456
477
  --uui-link_btn-text-hover: var(--uui-color-70);
457
- --uui-link_btn-text-disabled: var(--uui-text-disabled);
478
+ }
479
+
480
+ .uui-link_button.uui-color-secondary {
481
+ --uui-link_btn-text: var(--uui-neutral-30);
482
+ --uui-link_btn-text-hover: var(--uui-neutral-20);
483
+ --uui-link_btn-text-active: var(--uui-neutral-10);
484
+ }
485
+
486
+ .uui-link_button.uui-color-white {
487
+ --uui-link_btn-text: var(--uui-neutral-5);
488
+ --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);
458
489
  }
459
490
 
460
491
  /* TubButton */
@@ -521,8 +552,12 @@
521
552
  --uui-tooltip-border: var(--uui-neutral-50);
522
553
  }
523
554
 
555
+ .uui-tooltip-container.uui-color-white {
556
+ --uui-tooltip-bg: var(--uui-neutral-10);
557
+ }
558
+
524
559
  .uui-tooltip-container.uui-color-critical {
525
- --uui-tooltip-border: var(--uui-critical-50);
560
+ --uui-tooltip-bg: var(--uui-critical-50);
526
561
  }
527
562
 
528
563
  .uui-tooltip-container.uui-color-inverted {
@@ -535,9 +570,7 @@
535
570
  .uui-count_indicator:is(.uui-color-neutral, .uui-color-gray, .uui-color-info, .uui-color-sky, .uui-color-grass, .uui-color-success, .uui-color-critical, .uui-color-fire, .uui-color-warning, .uui-color-sun) {
536
571
  --uui-count_indicator-bg: var(--uui-color-60);
537
572
  --uui-count_indicator-border: var(--uui-color-60);
538
- }
539
573
 
540
- .uui-count_indicator {
541
574
  &.uui-color-neutral, &.uui-color-gray {
542
575
  --uui-count_indicator-caption: var(--uui-neutral-10);
543
576
  }
@@ -597,8 +630,8 @@
597
630
  }
598
631
 
599
632
  &.uui-fill-outline {
600
- --uui-tag-caption: var(--uui-text-primary);
601
- --uui-tag-fill: var(--uui-neutral-10);
633
+ --uui-tag-caption: var(--uui-neutral-0);
634
+ --uui-tag-fill: var(--uui-neutral-0);
602
635
 
603
636
  .uui-count_indicator {
604
637
  --uui-count_indicator-bg: var(--uui-neutral-70);
@@ -610,12 +643,12 @@
610
643
  &.uui-color-neutral,
611
644
  &.uui-color-night300 {
612
645
  &.uui-fill-solid {
613
- --uui-tag-caption: var(--uui-neutral-5);
614
- --uui-tag-fill: var(--uui-neutral-10);
615
- --uui-tag-bg: var(--uui-neutral-40);
616
- --uui-tag-border: var(--uui-neutral-40);
617
- --uui-tag-bg-hover: var(--uui-neutral-30);
618
- --uui-tag-border-hover: var(--uui-neutral-30);
646
+ --uui-tag-caption: var(--uui-neutral-0);
647
+ --uui-tag-fill: var(--uui-neutral-0);
648
+ --uui-tag-bg: var(--uui-neutral-50);
649
+ --uui-tag-border: var(--uui-neutral-50);
650
+ --uui-tag-bg-hover: var(--uui-neutral-60);
651
+ --uui-tag-border-hover: var(--uui-neutral-60);
619
652
 
620
653
  .uui-count_indicator {
621
654
  --uui-count_indicator-bg: var(--uui-neutral-0);
@@ -624,12 +657,10 @@
624
657
  }
625
658
 
626
659
  &.uui-fill-outline {
627
- --uui-tag-caption: var(--uui-neutral-5);
628
- --uui-tag-fill: var(--uui-neutral-10);
629
- --uui-tag-bg: var(--uui-neutral-60);
630
- --uui-tag-border: var(--uui-neutral-40);
631
- --uui-tag-bg-hover: var(--uui-neutral-50);
632
- --uui-tag-border-hover: var(--uui-neutral-40);
660
+ --uui-tag-bg: var(--uui-neutral-30);
661
+ --uui-tag-border: var(--uui-neutral-20);
662
+ --uui-tag-bg-hover: var(--uui-neutral-40);
663
+ --uui-tag-border-hover: var(--uui-neutral-20);
633
664
 
634
665
  .uui-count_indicator {
635
666
  --uui-count_indicator-bg: var(--uui-neutral-40);
@@ -652,10 +683,10 @@
652
683
  }
653
684
 
654
685
  &.uui-fill-outline {
655
- --uui-tag-caption: var(--uui-neutral-0);
656
- --uui-tag-fill: var(--uui-neutral-0);
657
686
  --uui-tag-bg: color-mix(in srgb, var(--white) 5%, transparent);
687
+ --uui-tag-border: var(--uui-neutral-0);
658
688
  --uui-tag-bg-hover: color-mix(in srgb, var(--white) 10%, transparent);
689
+ --uui-tag-border-hover: var(--uui-neutral-0);
659
690
 
660
691
  .uui-count_indicator {
661
692
  --uui-count_indicator-bg: var(--uui-neutral-40);
@@ -666,11 +697,11 @@
666
697
 
667
698
  &.uui-color-night100 {
668
699
  &.uui-fill-solid {
669
- --uui-tag-caption: var(--uui-neutral-0);
670
- --uui-tag-fill: var(--uui-neutral-0);
671
- --uui-tag-bg: var(--uui-neutral-40);
700
+ --uui-tag-caption: var(--uui-neutral-80);
701
+ --uui-tag-fill: var(--uui-neutral-80);
702
+ --uui-tag-bg: var(--uui-neutral-10);
672
703
  --uui-tag-border: var(--uui-neutral-40);
673
- --uui-tag-bg-hover: var(--uui-neutral-30);
704
+ --uui-tag-bg-hover: var(--uui-neutral-5);
674
705
  --uui-tag-border-hover: var(--uui-neutral-30);
675
706
 
676
707
  .uui-count_indicator {
@@ -681,8 +712,6 @@
681
712
  }
682
713
 
683
714
  &.uui-fill-outline {
684
- --uui-tag-caption: var(--uui-neutral-5);
685
- --uui-tag-fill: var(--uui-neutral-5);
686
715
  --uui-tag-bg: color-mix(in srgb, var(--uui-neutral-0) 12%, transparent);
687
716
  --uui-tag-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 15%, transparent);
688
717
  --uui-tag-border: var(--uui-neutral-20);
@@ -700,10 +729,10 @@
700
729
  &.uui-fill-solid {
701
730
  --uui-tag-caption: var(--uui-neutral-0);
702
731
  --uui-tag-fill: var(--uui-neutral-0);
703
- --uui-tag-bg: var(--uui-neutral-80);
704
- --uui-tag-border: var(--uui-neutral-80);
705
- --uui-tag-bg-hover: var(--uui-neutral-70);
706
- --uui-tag-border-hover: var(--uui-neutral-70);
732
+ --uui-tag-bg: var(--uui-neutral-70);
733
+ --uui-tag-border: var(--uui-neutral-70);
734
+ --uui-tag-bg-hover: var(--uui-neutral-60);
735
+ --uui-tag-border-hover: var(--uui-neutral-60);
707
736
 
708
737
  .uui-count_indicator {
709
738
  --uui-count_indicator-caption: var(--uui-neutral-0);
@@ -711,12 +740,10 @@
711
740
  }
712
741
 
713
742
  &.uui-fill-outline {
714
- --uui-tag-caption: var(--uui-neutral-5);
715
- --uui-tag-fill: var(--uui-neutral-0);
716
743
  --uui-tag-bg: var(--uui-neutral-80);
717
- --uui-tag-border: var(--uui-neutral-50);
744
+ --uui-tag-border: var(--uui-neutral-40);
718
745
  --uui-tag-bg-hover: var(--uui-neutral-70);
719
- --uui-tag-border-hover: var(--uui-neutral-50);
746
+ --uui-tag-border-hover: var(--uui-neutral-40);
720
747
 
721
748
  .uui-count_indicator {
722
749
  --uui-count_indicator-caption: var(--uui-neutral-0);
@@ -729,9 +756,6 @@
729
756
  &.uui-color-warning,
730
757
  &.uui-color-sun {
731
758
  &.uui-fill-solid {
732
- --uui-tag-caption: var(--uui-neutral-70);
733
- --uui-tag-fill: var(--uui-neutral-70);
734
-
735
759
  .uui-count_indicator {
736
760
  --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-5) 5%, transparent);
737
761
  --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-70) 30%, transparent);
@@ -767,6 +791,18 @@
767
791
  --uui-filters_toggler-bg-hover: var(--uui-neutral-30);
768
792
  }
769
793
 
794
+ /* DropdownMenu */
795
+
796
+ .uui-dropdownMenu-body {
797
+ --uui-dropdown-selected_mark: var(--uui-info-60);
798
+ }
799
+
800
+ /* PickerInput */
801
+
802
+ .uui-pickerInput-body {
803
+ --uui-pickerInput-selected_mark: var(--uui-info-60);
804
+ }
805
+
770
806
  /* fonts */
771
807
 
772
808
  .uui-font-sans {
package/theme/theme_promo.scss CHANGED
@@ -129,23 +129,13 @@
129
129
  }
130
130
 
131
131
  .uui-color-white {
132
- --uui-color-5: var(--white);
133
- --uui-color-10: var(--white);
134
- --uui-color-20: var(--white);
135
- --uui-color-50: var(--white);
136
- --uui-color-60: var(--gray10);
137
- --uui-color-70: var(--gray20);
138
- --uui-color-contrast: var(--gray80);
139
- }
140
-
141
- .uui-color-gray5 {
142
- --uui-color-5: var(--white);
143
- --uui-color-10: var(--white);
144
- --uui-color-20: var(--white);
145
- --uui-color-50: var(--gray5);
146
- --uui-color-60: var(--gray10);
147
- --uui-color-70: var(--gray20);
148
- --uui-color-contrast: var(--gray80);
132
+ --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
133
+ --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
134
+ --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
135
+ --uui-color-50: var(--uui-neutral-0);
136
+ --uui-color-60: var(--uui-neutral-10);
137
+ --uui-color-70: var(--uui-neutral-20);
138
+ --uui-color-contrast: var(--uui-neutral-70);
149
139
  }
150
140
 
151
141
  .uui-link_button.uui-color-contrast,
@@ -156,7 +146,7 @@
156
146
  --uui-color-50: var(--gray10);
157
147
  --uui-color-60: var(--gray20);
158
148
  --uui-color-70: var(--gray30);
159
- --uui-color-contrast: var(--gray80);
149
+ --uui-color-contrast: var(--gray70);
160
150
  }
161
151
 
162
152
  .uui-color-gray30 {
@@ -179,7 +169,6 @@
179
169
  --uui-color-contrast: var(--gray80);
180
170
  }
181
171
 
182
- .uui-button.uui-color-gray50,
183
172
  .uui-color-gray60 {
184
173
  --uui-color-5: var(--gray20);
185
174
  --uui-color-10: var(--gray60);
@@ -190,26 +179,6 @@
190
179
  --uui-color-contrast: var(--white);
191
180
  }
192
181
 
193
- .uui-color-gray80 {
194
- --uui-color-5: var(--white);
195
- --uui-color-10: var(--gray10);
196
- --uui-color-20: var(--gray20);
197
- --uui-color-50: var(--gray80);
198
- --uui-color-60: var(--gray80);
199
- --uui-color-70: var(--gray80);
200
- --uui-color-contrast: var(--white);
201
- }
202
-
203
- .uui-color-gray90 {
204
- --uui-color-5: var(--gray60);
205
- --uui-color-10: var(--gray70);
206
- --uui-color-20: var(--gray80);
207
- --uui-color-50: var(--gray90);
208
- --uui-color-60: var(--gray90);
209
- --uui-color-70: var(--gray90);
210
- --uui-color-contrast: var(--white);
211
- }
212
-
213
182
  .uui-color-yellow {
214
183
  --uui-color-5: var(--yellow-5);
215
184
  --uui-color-10: var(--yellow-10);
@@ -293,12 +262,23 @@
293
262
  /* Badge */
294
263
 
295
264
  .uui-badge.uui-color-white {
265
+ &.uui-fill-solid {
266
+ --uui-badge-bg-hover: var(--uui-neutral-30);
267
+ --uui-badge-border-hover: var(--uui-neutral-30);
268
+ }
269
+
296
270
  &.uui-fill-outline {
271
+ --uui-badge-bg: var(--uui-neutral-0);
297
272
  --uui-badge-bg-hover: var(--uui-neutral-10);
298
273
  --uui-badge-border: var(--uui-neutral-30);
299
274
  --uui-badge-border-hover: var(--uui-neutral-30);
300
275
  --uui-badge-caption: var(--uui-neutral-80);
301
276
  --uui-badge-caption-hover: var(--uui-neutral-80);
277
+
278
+ .uui-count_indicator {
279
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
280
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
281
+ }
302
282
  }
303
283
  }
304
284
 
@@ -310,11 +290,17 @@
310
290
  --uui-badge-border: var(--uui-neutral-30);
311
291
  --uui-badge-border-hover: var(--uui-neutral-40);
312
292
  --uui-color-contrast: var(--uui-neutral-80);
293
+
294
+ .uui-count_indicator {
295
+ --uui-count_indicator-bg: var(--uui-neutral-0);
296
+ --uui-count_indicator-border: var(--uui-neutral-0);
297
+ }
313
298
  }
314
299
 
315
300
  &.uui-fill-outline {
316
301
  --uui-badge-bg: var(--uui-neutral-20);
317
302
  --uui-badge-border: var(--uui-neutral-40);
303
+ --uui-badge-border-hover: var(--uui-neutral-40);
318
304
  --uui-badge-bg-hover: var(--uui-neutral-30);
319
305
  --uui-badge-caption: var(--uui-neutral-80);
320
306
  --uui-badge-caption-hover: var(--uui-neutral-80);
@@ -332,8 +318,13 @@
332
318
  --uui-badge-bg-hover: var(--uui-neutral-20);
333
319
  --uui-badge-border: var(--uui-neutral-30);
334
320
  --uui-badge-border-hover: var(--uui-neutral-30);
335
- --uui-badge-caption: var(--uui-neutral-80);
336
- --uui-badge-caption-hover: var(--uui-neutral-80);
321
+ --uui-badge-caption: var(--uui-neutral-70);
322
+ --uui-badge-caption-hover: var(--uui-neutral-70);
323
+
324
+ .uui-count_indicator {
325
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
326
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
327
+ }
337
328
  }
338
329
  }
339
330
 
@@ -380,6 +371,19 @@
380
371
  --uui-icon_btn-active: var(--uui-neutral-70);
381
372
  }
382
373
 
374
+ .uui-icon_button.uui-color-white {
375
+ --uui-icon_btn-hover: var(--uui-neutral-20);
376
+ --uui-icon_btn-active: var(--uui-neutral-30);
377
+ }
378
+
379
+ /* LinkButton */
380
+
381
+ .uui-link_button.uui-color-white {
382
+ --uui-link_btn-text-hover: var(--uui-neutral-30);
383
+ --uui-link_btn-text-active: var(--uui-neutral-40);
384
+ --uui-link_btn-text-disabled: color-mix(in srgb, var(--white) 40%, transparent);
385
+ }
386
+
383
387
  /* Tooltip */
384
388
 
385
389
  .uui-tooltip-container.uui-color-white {
@@ -439,6 +443,21 @@
439
443
  --uui-panel-bg: var(--gray90);
440
444
  }
441
445
 
446
+ /* Text */
447
+
448
+ .uui-text.uui-color-gray5 {
449
+ --uui-text: var(--gray5);
450
+ }
451
+
452
+ .uui-text.uui-color-gray80 {
453
+ --uui-text: var(--gray80);
454
+ }
455
+
456
+ .uui-text.uui-color-gray90 {
457
+ --uui-text: var(--gray90);
458
+ }
459
+
460
+
442
461
  /* Tag */
443
462
 
444
463
  .uui-tag {
@@ -448,18 +467,17 @@
448
467
  &.uui-fill-solid {
449
468
  --uui-tag-bg-hover: var(--uui-neutral-10);
450
469
  --uui-tag-border-hover: var(--uui-neutral-10);
451
- --uui-tag-fill: var(--uui-neutral-60);
452
470
 
453
471
  .uui-count_indicator {
454
472
  --uui-count_indicator-bg: var(--uui-neutral-30);
455
473
  --uui-count_indicator-border: var(--uui-neutral-30);
456
- --uui-count_indicator-caption: var(--uui-neutral-70);
457
474
  }
458
475
  }
459
476
 
460
477
  &.uui-fill-outline {
461
- --uui-tag-bg-hover: var(--uui-neutral-10);
478
+ --uui-tag-bg: var(--uui-neutral-0);
462
479
  --uui-tag-border: var(--uui-neutral-30);
480
+ --uui-tag-bg-hover: var(--uui-neutral-10);
463
481
  --uui-tag-border-hover: var(--uui-neutral-30);
464
482
 
465
483
  .uui-count_indicator {
@@ -471,13 +489,12 @@
471
489
 
472
490
  &.uui-color-gray10 {
473
491
  &.uui-fill-solid {
492
+ --uui-tag-bg-hover: var(--uui-neutral-20);
474
493
  --uui-tag-border-hover: var(--uui-neutral-20);
475
- --uui-tag-fill: var(--uui-neutral-60);
476
494
 
477
495
  .uui-count_indicator {
478
496
  --uui-count_indicator-bg: var(--uui-neutral-30);
479
497
  --uui-count_indicator-border: var(--uui-neutral-30);
480
- --uui-count_indicator-caption: var(--uui-neutral-70);
481
498
  }
482
499
  }
483
500
 
@@ -501,8 +518,8 @@
501
518
  --uui-tag-bg-hover: var(--uui-neutral-40);
502
519
  --uui-tag-border: var(--uui-neutral-30);
503
520
  --uui-tag-border-hover: var(--uui-neutral-40);
504
- --uui-tag-caption: var(--uui-text-primary);
505
- --uui-tag-fill: var(--uui-neutral-60);
521
+ --uui-tag-caption: var(--uui-neutral-70);
522
+ --uui-tag-fill: var(--uui-neutral-70);
506
523
 
507
524
  .uui-count_indicator {
508
525
  --uui-count_indicator-bg: var(--uui-neutral-0);
package/theme/tokens/_theme_electric.scss CHANGED
@@ -124,12 +124,12 @@
124
124
  /*********************/
125
125
 
126
126
  // "core/semantic/accent-"
127
- --uui-accent-5: var(--electric-5);
128
- --uui-accent-10: var(--electric-10);
129
- --uui-accent-20: var(--electric-20);
130
- --uui-accent-50: var(--electric-50);
131
- --uui-accent-60: var(--electric-60);
132
- --uui-accent-70: var(--electric-70);
127
+ --uui-accent-5: var(--emerald-5);
128
+ --uui-accent-10: var(--emerald-10);
129
+ --uui-accent-20: var(--emerald-20);
130
+ --uui-accent-50: var(--emerald-50);
131
+ --uui-accent-60: var(--emerald-60);
132
+ --uui-accent-70: var(--emerald-70);
133
133
 
134
134
  // "core/semantic/critical-"
135
135
  --uui-critical-5: var(--fire-5);