@epam/assets 5.4.2 → 5.5.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 (27) hide show
  1. package/css/theme/theme_electric.css +46 -49
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +51 -53
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +131 -111
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +29 -31
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css +11 -0
  10. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  11. package/icons/loaders/dots_loader_30.svg +37 -20
  12. package/package.json +3 -3
  13. package/scss/loveship/colors.scss +4 -25
  14. package/scss/promo/colors.scss +10 -26
  15. package/theme/theme_electric.scss +73 -68
  16. package/theme/theme_loveship.scss +85 -79
  17. package/theme/theme_loveship_dark.scss +172 -132
  18. package/theme/theme_promo.scss +52 -47
  19. package/theme/theme_vanilla_thunder.scss +16 -0
  20. package/icons/common/content-link-opt-12.2 +0 -1
  21. package/icons/common/content-link-opt-18.2 +0 -1
  22. package/icons/common/content-link-opt-24.2 +0 -1
  23. package/icons/common/content-link-opt-36.2 +0 -1
  24. package/icons/common/content-link_off-opt-12.2 +0 -1
  25. package/icons/common/content-link_off-opt-18.2 +0 -1
  26. package/icons/common/content-link_off-opt-24.2 +0 -1
  27. package/icons/common/content-link_off-opt-36.2 +0 -1
package/theme/theme_loveship_dark.scss CHANGED
@@ -16,33 +16,33 @@
16
16
  --night800: #272833;
17
17
  --night900: #1D1E26;
18
18
 
19
- --blue-5: #2C394B;
20
- --blue-10: #334052;
21
- --blue-20: #3E586F;
22
- --blue-50: #008ACE;
23
- --blue-60: #48A4D0;
24
- --blue-70: #7DBCDB;
25
-
26
- --green-5: #343A3B;
27
- --green-10: #39443D;
28
- --green-20: #505F49;
29
- --green-50: #669900;
30
- --green-60: #83B918;
31
- --green-70: #A6D151;
32
-
33
- --amber-5: #3F3B3B;
34
- --amber-10: #47433D;
35
- --amber-20: #625747;
36
- --amber-50: #F1A105;
37
- --amber-60: #F4B83A;
38
- --amber-70: #FFD06D;
39
-
40
- --red-5: #3C343E;
41
- --red-10: #473943;
42
- --red-20: #6B4447;
43
- --red-50: #CC482D;
44
- --red-60: #E56248;
45
- --red-70: #F78C77;
19
+ --sky-5: #2C394B;
20
+ --sky-10: #334052;
21
+ --sky-20: #3E586F;
22
+ --sky-50: #008ACE;
23
+ --sky-60: #48A4D0;
24
+ --sky-70: #7DBCDB;
25
+
26
+ --grass-5: #343A3B;
27
+ --grass-10: #39443D;
28
+ --grass-20: #505F49;
29
+ --grass-50: #669900;
30
+ --grass-60: #83B918;
31
+ --grass-70: #A6D151;
32
+
33
+ --sun-5: #3F3B3B;
34
+ --sun-10: #47433D;
35
+ --sun-20: #625747;
36
+ --sun-50: #F1A105;
37
+ --sun-60: #F4B83A;
38
+ --sun-70: #FFD06D;
39
+
40
+ --fire-5: #3C343E;
41
+ --fire-10: #473943;
42
+ --fire-20: #6B4447;
43
+ --fire-50: #CC482D;
44
+ --fire-60: #E56248;
45
+ --fire-70: #F78C77;
46
46
 
47
47
  --white: #FFFFFF;
48
48
 
@@ -106,22 +106,22 @@
106
106
 
107
107
  /* brand colors */
108
108
 
109
- --uui-accent-5: var(--green-5);
110
- --uui-accent-10: var(--green-10);
111
- --uui-accent-20: var(--green-20);
112
- --uui-accent-50: var(--green-50);
113
- --uui-accent-60: var(--green-60);
114
- --uui-accent-70: var(--green-70);
115
- --uui-accent-contrast: var(--white);
116
-
117
- --uui-primary-5: var(--blue-5);
118
- --uui-primary-10: var(--blue-10);
119
- --uui-primary-20: var(--blue-20);
120
- --uui-primary-50: var(--blue-50);
121
- --uui-primary-60: var(--blue-60);
122
- --uui-primary-70: var(--blue-70);
109
+ --uui-primary-5: var(--sky-5);
110
+ --uui-primary-10: var(--sky-10);
111
+ --uui-primary-20: var(--sky-20);
112
+ --uui-primary-50: var(--sky-50);
113
+ --uui-primary-60: var(--sky-60);
114
+ --uui-primary-70: var(--sky-70);
123
115
  --uui-primary-contrast: var(--white);
124
116
 
117
+ --uui-accent-5: var(--grass-5);
118
+ --uui-accent-10: var(--grass-10);
119
+ --uui-accent-20: var(--grass-20);
120
+ --uui-accent-50: var(--grass-50);
121
+ --uui-accent-60: var(--grass-60);
122
+ --uui-accent-70: var(--grass-70);
123
+ --uui-accent-contrast: var(--white);
124
+
125
125
  --uui-secondary-5: var(--night800);
126
126
  --uui-secondary-10: var(--night700);
127
127
  --uui-secondary-20: var(--night600);
@@ -130,46 +130,46 @@
130
130
  --uui-secondary-70: var(--night300);
131
131
  --uui-secondary-contrast: var(--white);
132
132
 
133
- --uui-critical-5: var(--red-5);
134
- --uui-critical-10: var(--red-10);
135
- --uui-critical-20: var(--red-20);
136
- --uui-critical-50: var(--red-50);
137
- --uui-critical-60: var(--red-60);
138
- --uui-critical-70: var(--red-70);
133
+ --uui-critical-5: var(--fire-5);
134
+ --uui-critical-10: var(--fire-10);
135
+ --uui-critical-20: var(--fire-20);
136
+ --uui-critical-50: var(--fire-50);
137
+ --uui-critical-60: var(--fire-60);
138
+ --uui-critical-70: var(--fire-70);
139
139
  --uui-critical-contrast: var(--white);
140
140
 
141
141
  /* semantic colors */
142
142
 
143
- --uui-info-5: var(--blue-5);
144
- --uui-info-10: var(--blue-10);
145
- --uui-info-20: var(--blue-20);
146
- --uui-info-50: var(--blue-50);
147
- --uui-info-60: var(--blue-60);
148
- --uui-info-70: var(--blue-70);
143
+ --uui-info-5: var(--sky-5);
144
+ --uui-info-10: var(--sky-10);
145
+ --uui-info-20: var(--sky-20);
146
+ --uui-info-50: var(--sky-50);
147
+ --uui-info-60: var(--sky-60);
148
+ --uui-info-70: var(--sky-70);
149
149
  --uui-info-contrast: var(--white);
150
150
 
151
- --uui-success-5: var(--green-5);
152
- --uui-success-10: var(--green-10);
153
- --uui-success-20: var(--green-20);
154
- --uui-success-50: var(--green-50);
155
- --uui-success-60: var(--green-60);
156
- --uui-success-70: var(--green-70);
151
+ --uui-success-5: var(--grass-5);
152
+ --uui-success-10: var(--grass-10);
153
+ --uui-success-20: var(--grass-20);
154
+ --uui-success-50: var(--grass-50);
155
+ --uui-success-60: var(--grass-60);
156
+ --uui-success-70: var(--grass-70);
157
157
  --uui-success-contrast: var(--white);
158
158
 
159
- --uui-warning-5: var(--amber-5);
160
- --uui-warning-10: var(--amber-10);
161
- --uui-warning-20: var(--amber-20);
162
- --uui-warning-50: var(--amber-50);
163
- --uui-warning-60: var(--amber-60);
164
- --uui-warning-70: var(--amber-70);
159
+ --uui-warning-5: var(--sun-5);
160
+ --uui-warning-10: var(--sun-10);
161
+ --uui-warning-20: var(--sun-20);
162
+ --uui-warning-50: var(--sun-50);
163
+ --uui-warning-60: var(--sun-60);
164
+ --uui-warning-70: var(--sun-70);
165
165
  --uui-warning-contrast: var(--night700);
166
166
 
167
- --uui-error-5: var(--red-5);
168
- --uui-error-10: var(--red-10);
169
- --uui-error-20: var(--red-20);
170
- --uui-error-50: var(--red-50);
171
- --uui-error-60: var(--red-60);
172
- --uui-error-70: var(--red-70);
167
+ --uui-error-5: var(--fire-5);
168
+ --uui-error-10: var(--fire-10);
169
+ --uui-error-20: var(--fire-20);
170
+ --uui-error-50: var(--fire-50);
171
+ --uui-error-60: var(--fire-60);
172
+ --uui-error-70: var(--fire-70);
173
173
  --uui-error-contrast: var(--white);
174
174
 
175
175
  --uui-neutral-0: #FFFFFF;
@@ -213,8 +213,8 @@
213
213
 
214
214
  /* control specific */
215
215
 
216
- --uui-link: var(--blue-60);
217
- --uui-link-hover: var(--blue-70);
216
+ --uui-link: var(--sky-60);
217
+ --uui-link-hover: var(--sky-70);
218
218
  --uui-link-visited: #9062EC;
219
219
  --uui-link-visited-hover: #A884F0;
220
220
  --uui-link-disabled: var(--uui-neutral-60);
@@ -272,12 +272,12 @@
272
272
 
273
273
  .uui-color-accent,
274
274
  .uui-color-grass {
275
- --uui-color-5: var(--green-5);
276
- --uui-color-10: var(--green-10);
277
- --uui-color-20: var(--green-20);
278
- --uui-color-50: var(--green-50);
279
- --uui-color-60: var(--green-60);
280
- --uui-color-70: var(--green-70);
275
+ --uui-color-5: var(--grass-5);
276
+ --uui-color-10: var(--grass-10);
277
+ --uui-color-20: var(--grass-20);
278
+ --uui-color-50: var(--grass-50);
279
+ --uui-color-60: var(--grass-60);
280
+ --uui-color-70: var(--grass-70);
281
281
  --uui-color-contrast: var(--white);
282
282
  }
283
283
 
@@ -293,22 +293,22 @@
293
293
 
294
294
  .uui-color-primary,
295
295
  .uui-color-sky {
296
- --uui-color-5: var(--blue-5);
297
- --uui-color-10: var(--blue-10);
298
- --uui-color-20: var(--blue-20);
299
- --uui-color-50: var(--blue-50);
300
- --uui-color-60: var(--blue-60);
301
- --uui-color-70: var(--blue-70);
296
+ --uui-color-5: var(--sky-5);
297
+ --uui-color-10: var(--sky-10);
298
+ --uui-color-20: var(--sky-20);
299
+ --uui-color-50: var(--sky-50);
300
+ --uui-color-60: var(--sky-60);
301
+ --uui-color-70: var(--sky-70);
302
302
  --uui-color-contrast: var(--white);
303
303
  }
304
304
 
305
305
  .uui-color-fire {
306
- --uui-color-5: var(--red-5);
307
- --uui-color-10: var(--red-10);
308
- --uui-color-20: var(--red-20);
309
- --uui-color-50: var(--red-50);
310
- --uui-color-60: var(--red-60);
311
- --uui-color-70: var(--red-70);
306
+ --uui-color-5: var(--fire-5);
307
+ --uui-color-10: var(--fire-10);
308
+ --uui-color-20: var(--fire-20);
309
+ --uui-color-50: var(--fire-50);
310
+ --uui-color-60: var(--fire-60);
311
+ --uui-color-70: var(--fire-70);
312
312
  --uui-color-contrast: var(--white);
313
313
  }
314
314
 
@@ -334,12 +334,12 @@
334
334
 
335
335
  .uui-color-sun,
336
336
  .uui-color-warning {
337
- --uui-color-5: var(--amber-5);
338
- --uui-color-10: var(--amber-10);
339
- --uui-color-20: var(--amber-20);
340
- --uui-color-50: var(--amber-50);
341
- --uui-color-60: var(--amber-60);
342
- --uui-color-70: var(--amber-70);
337
+ --uui-color-5: var(--sun-5);
338
+ --uui-color-10: var(--sun-10);
339
+ --uui-color-20: var(--sun-20);
340
+ --uui-color-50: var(--sun-50);
341
+ --uui-color-60: var(--sun-60);
342
+ --uui-color-70: var(--sun-70);
343
343
  --uui-color-contrast: var(--night700);
344
344
  }
345
345
 
@@ -455,6 +455,12 @@
455
455
 
456
456
  /* override variables */
457
457
 
458
+ /* isInvalid color */
459
+
460
+ .uui-invalid:is(.uui-input-box, .uui-radio-input-container, .uui-checkbox-container) {
461
+ --uui-error-50: var(--uui-error-60);
462
+ }
463
+
458
464
  /* Accordion */
459
465
 
460
466
  .uui-accordion-container {
@@ -519,6 +525,24 @@
519
525
  --uui-btn-caption: var(--uui-neutral-10);
520
526
  }
521
527
  }
528
+
529
+ &.uui-color-white {
530
+ &.uui-fill-none, &.uui-fill-ghost {
531
+ --uui-btn-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 20%, transparent);
532
+ --uui-btn-bg-active: color-mix(in srgb, var(--uui-neutral-0) 30%, transparent);
533
+ }
534
+
535
+ &.uui-fill-ghost {
536
+ --uui-btn-border: var(--uui-btn-bg);
537
+ --uui-btn-border-hover: var(--uui-btn-bg);
538
+ --uui-btn-border-active: var(--uui-btn-bg);
539
+ }
540
+
541
+ &.uui-fill-outline {
542
+ --uui-btn-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 20%, transparent);
543
+ --uui-btn-bg-active: color-mix(in srgb, var(--uui-neutral-0) 30%, transparent);
544
+ }
545
+ }
522
546
  }
523
547
 
524
548
  .uui-blocker-container {
@@ -528,21 +552,25 @@
528
552
 
529
553
  /* Badge */
530
554
 
531
- .uui-badge.uui-fill-outline {
532
- .uui-count_indicator {
533
- --uui-count_indicator-bg: var(--uui-neutral-20);
534
- --uui-count_indicator-border: var(--uui-neutral-50);
535
- --uui-count_indicator-caption: var(--uui-neutral-80);
555
+ .uui-badge {
556
+ &.uui-fill-outline {
557
+ .uui-count_indicator {
558
+ --uui-count_indicator-bg: var(--uui-neutral-70);
559
+ --uui-count_indicator-border: var(--uui-neutral-40);
560
+ --uui-count_indicator-caption: var(--uui-neutral-10);
561
+ }
536
562
  }
537
563
  }
538
564
 
539
565
  .uui-badge.uui-color-neutral,
540
566
  .uui-badge.uui-color-night300 {
541
- --uui-badge-bg: var(--uui-neutral-40);
542
- --uui-badge-bg-hover: var(--uui-neutral-30);
543
- --uui-badge-border: var(--uui-neutral-40);
544
- --uui-badge-border-hover: var(--uui-neutral-30);
545
- --uui-color-contrast: var(--uui-neutral-5);
567
+ &.uui-fill-solid {
568
+ --uui-badge-bg: var(--uui-neutral-40);
569
+ --uui-badge-bg-hover: var(--uui-neutral-30);
570
+ --uui-badge-border: var(--uui-neutral-40);
571
+ --uui-badge-border-hover: var(--uui-neutral-30);
572
+ --uui-color-contrast: var(--uui-neutral-5);
573
+ }
546
574
 
547
575
  &.uui-fill-outline {
548
576
  --uui-badge-bg: var(--uui-neutral-60);
@@ -560,16 +588,30 @@
560
588
  --uui-badge-bg-hover: color-mix(in srgb, var(--white) 16%, transparent);
561
589
  --uui-badge-caption: var(--white);
562
590
  --uui-badge-caption-hover: var(--white);
591
+
592
+ .uui-count_indicator {
593
+ --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 8%, transparent);
594
+ --uui-count_indicator-border: color-mix(in srgb, var(--uui-neutral-0) 40%, transparent);
595
+ --uui-count_indicator-caption: var(--uui-neutral-0);
596
+ }
563
597
  }
564
598
  }
565
599
 
566
600
  .uui-badge.uui-color-night100 {
567
- --uui-badge-bg: var(--uui-neutral-40);
568
- --uui-badge-bg-hover: var(--uui-neutral-30);
569
- --uui-badge-border: var(--uui-neutral-40);
570
- --uui-badge-border-hover: var(--uui-neutral-30);
571
- --uui-badge-caption: var(--white);
572
- --uui-badge-caption-hover: var(--white);
601
+ &.uui-fill-solid {
602
+ --uui-badge-bg: var(--uui-neutral-40);
603
+ --uui-badge-bg-hover: var(--uui-neutral-30);
604
+ --uui-badge-border: var(--uui-neutral-40);
605
+ --uui-badge-border-hover: var(--uui-neutral-30);
606
+ --uui-badge-caption: var(--white);
607
+ --uui-badge-caption-hover: var(--white);
608
+
609
+ .uui-count_indicator {
610
+ --uui-count_indicator-bg: var(--uui-neutral-50);
611
+ --uui-count_indicator-border: var(--uui-neutral-50);
612
+ --uui-count_indicator-caption: var(--uui-neutral-10);
613
+ }
614
+ }
573
615
 
574
616
  &.uui-fill-outline {
575
617
  --uui-badge-bg: color-mix(in srgb, var(--white) 20%, transparent);
@@ -582,12 +624,14 @@
582
624
  }
583
625
 
584
626
  .uui-badge.uui-color-night600 {
585
- --uui-badge-bg: var(--uui-neutral-80);
586
- --uui-badge-bg-hover: var(--uui-neutral-70);
587
- --uui-badge-border: var(--uui-neutral-80);
588
- --uui-badge-border-hover: var(--uui-neutral-70);
589
- --uui-badge-caption: var(--white);
590
- --uui-badge-caption-hover: var(--white);
627
+ &.uui-fill-solid {
628
+ --uui-badge-bg: var(--uui-neutral-80);
629
+ --uui-badge-bg-hover: var(--uui-neutral-70);
630
+ --uui-badge-border: var(--uui-neutral-80);
631
+ --uui-badge-border-hover: var(--uui-neutral-70);
632
+ --uui-badge-caption: var(--white);
633
+ --uui-badge-caption-hover: var(--white);
634
+ }
591
635
 
592
636
  &.uui-fill-outline {
593
637
  --uui-badge-border: var(--uui-neutral-30);
@@ -597,14 +641,6 @@
597
641
  }
598
642
  }
599
643
 
600
- .uui-badge.uui-color-info.uui-fill-outline {
601
- --uui-badge-bg: var(--blue-5);
602
- --uui-badge-bg-hover: var(--blue-10);
603
- --uui-badge-border: var(--blue-20);
604
- --uui-badge-caption: var(--blue-70);
605
- --uui-badge-caption-hover: var(--blue-70);
606
- }
607
-
608
644
  /* IconButton */
609
645
 
610
646
  .uui-icon_button:is(.uui-color-info, .uui-color-success, .uui-color-warning, .uui-color-error) {
@@ -694,9 +730,11 @@
694
730
  /* Tooltip */
695
731
 
696
732
  .uui-tooltip-container.uui-color-neutral {
697
- --uui-tooltip-bg: var(--uui-surface-main);
698
733
  --uui-tooltip-border: var(--uui-neutral-50);
699
- --uui-color-contrast: var(--uui-text-primary);
734
+ }
735
+
736
+ .uui-tooltip-container.uui-color-critical {
737
+ --uui-tooltip-border: var(--uui-critical-50);
700
738
  }
701
739
 
702
740
  .uui-tooltip-container.uui-color-inverted {
@@ -706,13 +744,15 @@
706
744
 
707
745
  /* CountIndicator */
708
746
 
709
- .uui-count_indicator:is(.uui-color-neutral, .uui-color-info, .uui-color-blue, .uui-color-grass, .uui-color-success, .uui-color-critical, .uui-color-red, .uui-color-warning, .uui-color-amber) {
747
+ .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) {
710
748
  --uui-count_indicator-bg: var(--uui-color-60);
711
749
  --uui-count_indicator-border: var(--uui-color-60);
712
750
  }
713
751
 
714
- .uui-count_indicator.uui-color-neutral {
715
- --uui-count_indicator-caption: var(--uui-neutral-10);
752
+ .uui-count_indicator {
753
+ &.uui-color-neutral, &.uui-color-gray {
754
+ --uui-count_indicator-caption: var(--uui-neutral-10);
755
+ }
716
756
  }
717
757
 
718
758
  /* Status Indicator */
package/theme/theme_promo.scss CHANGED
@@ -50,12 +50,12 @@
50
50
 
51
51
  --white: #FFFFFF;
52
52
 
53
- --yellow-5: #FFFFF0;
54
- --yellow-10: #FFFECC;
53
+ --yellow-5: #FFFFF5;
54
+ --yellow-10: #FFFFE5;
55
55
  --yellow-20: #FFFCA4;
56
56
  --yellow-50: #FDD63B;
57
- --yellow-60: #F9B71D;
58
- --yellow-70: #D3910C;
57
+ --yellow-60: #EDBE02;
58
+ --yellow-70: #BC7E02;
59
59
 
60
60
  --orange-5: #FEF8F4;
61
61
  --orange-10: #FFE8D7;
@@ -92,32 +92,24 @@
92
92
  --cobalt-60: #006FE5;
93
93
  --cobalt-70: #0954A5;
94
94
 
95
- --cyan-5: #F5FBFF;
95
+ --cyan-5: #F6FEFE;
96
96
  --cyan-10: #D1FAFA;
97
97
  --cyan-20: #AAEEEE;
98
98
  --cyan-50: #14CCCC;
99
- --cyan-60: #0F9E9E;
99
+ --cyan-60: #12B5B5;
100
100
  --cyan-70: #0B6F6F;
101
101
 
102
102
  --mint-5: #F2FCF5;
103
103
  --mint-10: #DDF3E4;
104
104
  --mint-20: #B4DFC4;
105
105
  --mint-50: #4FC48C;
106
- --mint-60: #2E9E68;
106
+ --mint-60: #31AA70;
107
107
  --mint-70: #236E4A;
108
108
 
109
109
  /* core variables start */
110
110
 
111
111
  /* brand colors */
112
112
 
113
- --uui-accent-5: var(--green-5);
114
- --uui-accent-10: var(--green-10);
115
- --uui-accent-20: var(--green-20);
116
- --uui-accent-50: var(--green-50);
117
- --uui-accent-60: var(--green-60);
118
- --uui-accent-70: var(--green-70);
119
- --uui-accent-contrast: var(--white);
120
-
121
113
  --uui-primary-5: var(--blue-5);
122
114
  --uui-primary-10: var(--blue-10);
123
115
  --uui-primary-20: var(--blue-20);
@@ -126,6 +118,14 @@
126
118
  --uui-primary-70: var(--blue-70);
127
119
  --uui-primary-contrast: var(--white);
128
120
 
121
+ --uui-accent-5: var(--green-5);
122
+ --uui-accent-10: var(--green-10);
123
+ --uui-accent-20: var(--green-20);
124
+ --uui-accent-50: var(--green-50);
125
+ --uui-accent-60: var(--green-60);
126
+ --uui-accent-70: var(--green-70);
127
+ --uui-accent-contrast: var(--white);
128
+
129
129
  --uui-secondary-5: var(--gray10);
130
130
  --uui-secondary-10: var(--gray20);
131
131
  --uui-secondary-20: var(--gray30);
@@ -513,51 +513,56 @@
513
513
 
514
514
  /* Badge */
515
515
 
516
- .uui-badge.uui-color-white.uui-fill-outline {
517
- --uui-badge-bg-hover: var(--uui-neutral-10);
518
- --uui-badge-border: var(--uui-neutral-30);
519
- --uui-badge-border-hover: var(--uui-neutral-30);
520
- --uui-badge-caption: var(--uui-neutral-80);
521
- --uui-badge-caption-hover: var(--uui-neutral-80);
516
+ .uui-badge.uui-color-white {
517
+ &.uui-fill-outline {
518
+ --uui-badge-bg-hover: var(--uui-neutral-10);
519
+ --uui-badge-border: var(--uui-neutral-30);
520
+ --uui-badge-border-hover: var(--uui-neutral-30);
521
+ --uui-badge-caption: var(--uui-neutral-80);
522
+ --uui-badge-caption-hover: var(--uui-neutral-80);
523
+ }
522
524
  }
523
525
 
524
526
  .uui-badge.uui-color-neutral,
525
527
  .uui-badge.uui-color-gray30 {
526
- --uui-badge-bg: var(--uui-neutral-30);
527
- --uui-badge-bg-hover: var(--uui-neutral-40);
528
- --uui-badge-border: var(--uui-neutral-30);
529
- --uui-badge-border-hover: var(--uui-neutral-40);
530
- --uui-badge-caption: var(--uui-neutral-80);
531
- --uui-badge-caption-hover: var(--uui-neutral-80);
528
+ &.uui-fill-solid {
529
+ --uui-badge-bg: var(--uui-neutral-30);
530
+ --uui-badge-bg-hover: var(--uui-neutral-40);
531
+ --uui-badge-border: var(--uui-neutral-30);
532
+ --uui-badge-border-hover: var(--uui-neutral-40);
533
+ --uui-color-contrast: var(--uui-neutral-80);
534
+ }
532
535
 
533
536
  &.uui-fill-outline {
534
537
  --uui-badge-bg: var(--uui-neutral-20);
535
- --uui-badge-bg-hover: var(--uui-neutral-30);
536
538
  --uui-badge-border: var(--uui-neutral-40);
539
+ --uui-badge-bg-hover: var(--uui-neutral-30);
537
540
  --uui-badge-caption: var(--uui-neutral-80);
538
541
  --uui-badge-caption-hover: var(--uui-neutral-80);
539
542
  }
540
543
  }
541
544
 
542
545
  .uui-badge.uui-color-gray10 {
543
- --uui-badge-bg: var(--uui-neutral-10);
544
- --uui-badge-bg-hover: var(--uui-neutral-20);
545
- --uui-badge-border: var(--uui-neutral-10);
546
- --uui-badge-border-hover: var(--uui-neutral-20);
546
+ &.uui-fill-solid {
547
+ --uui-badge-bg-hover: var(--uui-neutral-20);
548
+ --uui-badge-border-hover: var(--uui-neutral-20);
549
+ }
547
550
 
548
551
  &.uui-fill-outline {
549
552
  --uui-badge-border: var(--uui-neutral-30);
553
+ --uui-badge-border-hover: var(--uui-neutral-30);
550
554
  --uui-badge-caption: var(--uui-neutral-80);
551
555
  --uui-badge-caption-hover: var(--uui-neutral-80);
552
556
  }
553
557
  }
554
558
 
555
- .uui-badge.uui-color-gray60.uui-fill-outline {
556
- --uui-badge-bg-hover: var(--uui-neutral-30);
557
- --uui-badge-border: var(--uui-neutral-60);
558
- --uui-badge-border-hover: var(--uui-neutral-60);
559
- --uui-badge-caption: var(--uui-neutral-80);
560
- --uui-badge-caption-hover: var(--uui-neutral-80);
559
+ .uui-badge.uui-color-gray60 {
560
+ &.uui-fill-outline {
561
+ --uui-badge-border: var(--uui-neutral-60);
562
+ --uui-badge-border-hover: var(--uui-neutral-60);
563
+ --uui-badge-caption: var(--uui-neutral-80);
564
+ --uui-badge-caption-hover: var(--uui-neutral-80);
565
+ }
561
566
  }
562
567
 
563
568
  .uui-badge.uui-color-yellow.uui-fill-outline {
@@ -593,23 +598,20 @@
593
598
  --uui-icon_btn-active: var(--uui-neutral-70);
594
599
  }
595
600
 
596
- /* TooltipContainer */
601
+ /* Tooltip */
597
602
 
598
- .uui-tooltip-container.uui-color-white,
599
- .uui-tooltip-container.uui-color-neutral {
600
- --uui-tooltip-bg: var(--white);
603
+ .uui-tooltip-container.uui-color-white {
604
+ --uui-tooltip-bg: var(--uui-neutral-0);
601
605
  --uui-tooltip-text: var(--uui-neutral-80);
602
606
  }
603
607
 
604
- .uui-tooltip-container.uui-color-red,
605
- .uui-tooltip-container.uui-color-critical {
608
+ .uui-tooltip-container.uui-color-red {
606
609
  --uui-tooltip-bg: var(--uui-critical-60);
607
610
  }
608
611
 
609
- .uui-tooltip-container.uui-color-gray,
610
- .uui-tooltip-container.uui-color-inverted {
612
+ .uui-tooltip-container.uui-color-gray {
611
613
  --uui-tooltip-bg: var(--uui-neutral-80);
612
- --uui-tooltip-text: var(--white);
614
+ --uui-tooltip-text: var(--uui-neutral-5);
613
615
  }
614
616
 
615
617
  /* CountIndicator */
@@ -658,6 +660,8 @@
658
660
  /* Tag */
659
661
 
660
662
  .uui-tag {
663
+ --uui-border-radius: 3px;
664
+
661
665
  &.uui-color-white {
662
666
  &.uui-fill-solid {
663
667
  --uui-tag-bg-hover: var(--uui-neutral-10);
@@ -721,6 +725,7 @@
721
725
  .uui-count_indicator {
722
726
  --uui-count_indicator-bg: var(--uui-neutral-0);
723
727
  --uui-count_indicator-border: var(--uui-neutral-0);
728
+ --uui-count_indicator-caption: var(--uui-neutral-70);
724
729
  }
725
730
  }
726
731
 
package/theme/theme_vanilla_thunder.scss CHANGED
@@ -391,6 +391,22 @@
391
391
  --uui-text_placeholder-gradient: repeating-linear-gradient(90deg, var(--chromatic-200) 0, var(--chromatic-100) 150px, var(--chromatic-200) 300px);
392
392
  }
393
393
 
394
+ /* Tooltip */
395
+
396
+ .uui-tooltip-container.uui-color-neutral {
397
+ --uui-tooltip-bg: var(--uui-neutral-0);
398
+ --uui-tooltip-text: var(--uui-text-primary);
399
+ }
400
+
401
+ .uui-tooltip-container.uui-color-critical {
402
+ --uui-tooltip-bg: var(--uui-critical-60);
403
+ }
404
+
405
+ .uui-tooltip-container.uui-color-inverted {
406
+ --uui-tooltip-bg: var(--uui-neutral-80);
407
+ --uui-tooltip-text: var(--uui-neutral-5);
408
+ }
409
+
394
410
  /* Tag */
395
411
 
396
412
  .uui-tag {
package/icons/common/content-link-opt-12.2 DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12"><path d="M7.207 3.172A1.5 1.5 0 019.33 5.293l-1.061 1.06.707.708L10.035 6A2.5 2.5 0 106.5 2.464l-1.06 1.06.707.707 1.06-1.06z"/><path d="M8.622 4.586L5.086 8.122l-.707-.707 3.535-3.536.708.707z"/><path d="M4.732 5.647l-1.06 1.06A1.5 1.5 0 005.793 8.83l1.06-1.061.708.707-1.06 1.06A2.5 2.5 0 012.964 6l1.06-1.06.707.707z"/></svg>
package/icons/common/content-link-opt-18.2 DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g><path d="M10.06 4.758a2.25 2.25 0 013.183 3.182l-1.591 1.59 1.06 1.061 1.591-1.59A3.75 3.75 0 009 3.696L7.41 5.288l1.06 1.06 1.59-1.59z"/><path d="M12.182 6.88L6.88 12.182l-1.06-1.061 5.303-5.303 1.06 1.06z"/><path d="M6.349 8.47l-1.591 1.591a2.25 2.25 0 003.182 3.182l1.59-1.59 1.061 1.06-1.59 1.59A3.75 3.75 0 113.696 9l1.591-1.59 1.06 1.06z"/></g></svg>
package/icons/common/content-link-opt-24.2 DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"><path d="M13.914 6.344a3 3 0 014.243 4.242l-2.121 2.121 1.414 1.415L19.571 12a5 5 0 00-7.07-7.07l-2.122 2.12 1.414 1.415 2.121-2.121z"/><path d="M16.743 9.172l-7.071 7.071-1.414-1.414 7.07-7.07 1.415 1.413z"/><path d="M8.965 11.293l-2.121 2.122a3 3 0 104.242 4.242l2.121-2.12 1.415 1.413-2.122 2.122A5 5 0 115.43 12l2.12-2.122 1.415 1.415z"/></svg>
package/icons/common/content-link-opt-36.2 DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M20.122 9.515a4.5 4.5 0 116.364 6.364l-3.182 3.182 2.121 2.122L28.607 18A7.5 7.5 0 1018 7.394l-3.182 3.182 2.122 2.121 3.182-3.182z"/><path d="M24.365 13.758L13.758 24.365l-2.121-2.121 10.606-10.607 2.122 2.121z"/><path d="M12.697 16.94l-3.182 3.182a4.5 4.5 0 106.364 6.364l3.182-3.182 2.122 2.122L18 28.607A7.5 7.5 0 117.394 18.001l3.182-3.182 2.121 2.121z"/></svg>
package/icons/common/content-link_off-opt-12.2 DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12"><path fill-rule="evenodd" d="M4.02 4.945L2.965 6A2.5 2.5 0 106.5 9.535L7.555 8.48l2.845 2.845.7-.7-9.2-9.2-.7.7 2.82 2.82zm.707.707l.707.707L4.38 7.414l.707.707 1.055-1.055.707.707-1.055 1.055a1.5 1.5 0 11-2.121-2.121l1.055-1.055z" clip-rule="evenodd"/><path d="M9.329 3.171a1.5 1.5 0 00-2.122 0l-1.06 1.061-.708-.707L6.5 2.465A2.5 2.5 0 1110.036 6L8.975 7.06l-.707-.707 1.06-1.06a1.5 1.5 0 000-2.122z"/><path d="M7.914 3.879L6.86 4.934l.707.707 1.056-1.055-.708-.707z"/></svg>
package/icons/common/content-link_off-opt-18.2 DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g><path fill-rule="evenodd" d="M5.28 7.417L3.697 9A3.75 3.75 0 009 14.303l1.583-1.583 4.267 4.267 1.05-1.05-13.8-13.8-1.05 1.05 4.23 4.23zm1.06 1.06l1.061 1.061-1.583 1.583 1.061 1.06L8.462 10.6l1.06 1.06-1.582 1.583a2.25 2.25 0 11-3.182-3.182L6.34 8.477z" clip-rule="evenodd"/><path d="M13.243 4.757a2.25 2.25 0 00-3.182 0L8.47 6.348l-1.06-1.06L9 3.695A3.75 3.75 0 0114.303 9l-1.59 1.59-1.061-1.06 1.59-1.591a2.25 2.25 0 000-3.182z"/><path d="M11.122 5.818L9.539 7.4l1.06 1.06 1.583-1.583-1.06-1.06z"/></g></svg>