@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_electric.scss CHANGED
@@ -52,12 +52,12 @@
52
52
 
53
53
  --white: #FFFFFF;
54
54
 
55
- --yellow-5: #FFFFF0;
56
- --yellow-10: #FFFECC;
55
+ --yellow-5: #FFFFF5;
56
+ --yellow-10: #FFFFE5;
57
57
  --yellow-20: #FFFCA4;
58
58
  --yellow-50: #FDD63B;
59
- --yellow-60: #F9B71D;
60
- --yellow-70: #D3910C;
59
+ --yellow-60: #EDBE02;
60
+ --yellow-70: #BC7E02;
61
61
 
62
62
  --orange-5: #FEF8F4;
63
63
  --orange-10: #FFE8D7;
@@ -94,18 +94,18 @@
94
94
  --cobalt-60: #006FE5;
95
95
  --cobalt-70: #0954A5;
96
96
 
97
- --cyan-5: #F5FBFF;
97
+ --cyan-5: #F6FEFE;
98
98
  --cyan-10: #D1FAFA;
99
99
  --cyan-20: #AAEEEE;
100
100
  --cyan-50: #14CCCC;
101
- --cyan-60: #0F9E9E;
101
+ --cyan-60: #12B5B5;
102
102
  --cyan-70: #0B6F6F;
103
103
 
104
104
  --mint-5: #F2FCF5;
105
105
  --mint-10: #DDF3E4;
106
106
  --mint-20: #B4DFC4;
107
107
  --mint-50: #4FC48C;
108
- --mint-60: #2E9E68;
108
+ --mint-60: #31AA70;
109
109
  --mint-70: #236E4A;
110
110
 
111
111
  --gradient-1: linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
@@ -118,14 +118,6 @@
118
118
 
119
119
  /* brand colors */
120
120
 
121
- --uui-accent-5: var(--emerald-5);
122
- --uui-accent-10: var(--emerald-10);
123
- --uui-accent-20: var(--emerald-20);
124
- --uui-accent-50: var(--emerald-50);
125
- --uui-accent-60: var(--emerald-60);
126
- --uui-accent-70: var(--emerald-70);
127
- --uui-accent-contrast: var(--white);
128
-
129
121
  --uui-primary-5: var(--electric-5);
130
122
  --uui-primary-10: var(--electric-10);
131
123
  --uui-primary-20: var(--electric-20);
@@ -134,6 +126,14 @@
134
126
  --uui-primary-70: var(--electric-70);
135
127
  --uui-primary-contrast: var(--white);
136
128
 
129
+ --uui-accent-5: var(--electric-5);
130
+ --uui-accent-10: var(--electric-10);
131
+ --uui-accent-20: var(--electric-20);
132
+ --uui-accent-50: var(--electric-50);
133
+ --uui-accent-60: var(--electric-60);
134
+ --uui-accent-70: var(--electric-70);
135
+ --uui-accent-contrast: var(--white);
136
+
137
137
  --uui-secondary-5: var(--night200);
138
138
  --uui-secondary-10: var(--night300);
139
139
  --uui-secondary-20: var(--night400);
@@ -235,7 +235,7 @@
235
235
  --uui-icon: var(--uui-neutral-95);
236
236
  --uui-icon-hover: var(--uui-neutral-100);
237
237
  --uui-icon-active: var(--uui-neutral-100);
238
- --uui-icon-disabled: var(--uui-neutral-40);
238
+ --uui-icon-disabled: var(--uui-neutral-50);
239
239
 
240
240
  --uui-control-bg: var(--uui-surface-main);
241
241
  --uui-control-bg-hover: var(--uui-neutral-60);
@@ -273,21 +273,7 @@
273
273
 
274
274
  /* begin color classes */
275
275
 
276
- .uui-color-accent,
277
- .uui-color-emerald,
278
- .uui-color-success {
279
- --uui-color-5: var(--uui-accent-5);
280
- --uui-color-10: var(--uui-accent-10);
281
- --uui-color-20: var(--uui-accent-20);
282
- --uui-color-50: var(--uui-accent-50);
283
- --uui-color-60: var(--uui-accent-60);
284
- --uui-color-70: var(--uui-accent-70);
285
- --uui-color-contrast: var(--white);
286
- }
287
-
288
- .uui-button.uui-color-accent,
289
276
  .uui-color-primary,
290
- .uui-color-electric,
291
277
  .uui-color-info {
292
278
  --uui-color-5: var(--uui-primary-5);
293
279
  --uui-color-10: var(--uui-primary-10);
@@ -298,6 +284,16 @@
298
284
  --uui-color-contrast: var(--white);
299
285
  }
300
286
 
287
+ .uui-color-accent {
288
+ --uui-color-5: var(--uui-accent-5);
289
+ --uui-color-10: var(--uui-accent-10);
290
+ --uui-color-20: var(--uui-accent-20);
291
+ --uui-color-50: var(--uui-accent-50);
292
+ --uui-color-60: var(--uui-accent-60);
293
+ --uui-color-70: var(--uui-accent-70);
294
+ --uui-color-contrast: var(--white);
295
+ }
296
+
301
297
  .uui-color-fire,
302
298
  .uui-color-critical,
303
299
  .uui-color-error {
@@ -341,7 +337,8 @@
341
337
  }
342
338
 
343
339
  .uui-color-neutral,
344
- .uui-color-secondary {
340
+ .uui-color-secondary,
341
+ .uui-color-night600 {
345
342
  --uui-color-5: var(--uui-secondary-5);
346
343
  --uui-color-10: var(--uui-secondary-10);
347
344
  --uui-color-20: var(--uui-secondary-20);
@@ -361,6 +358,16 @@
361
358
  --uui-color-contrast: var(--white);
362
359
  }
363
360
 
361
+ .uui-color-success {
362
+ --uui-color-5: var(--uui-success-5);
363
+ --uui-color-10: var(--uui-success-10);
364
+ --uui-color-20: var(--uui-success-20);
365
+ --uui-color-50: var(--uui-success-50);
366
+ --uui-color-60: var(--uui-success-60);
367
+ --uui-color-70: var(--uui-success-70);
368
+ --uui-color-contrast: var(--white);
369
+ }
370
+
364
371
  .uui-color-sun,
365
372
  .uui-color-warning {
366
373
  --uui-color-5: var(--sun-5);
@@ -466,20 +473,24 @@
466
473
 
467
474
  /* Badge */
468
475
 
469
- .uui-badge.uui-color-white.uui-fill-outline {
470
- --uui-badge-bg-hover: var(--uui-neutral-10);
471
- --uui-badge-border: var(--uui-neutral-30);
472
- --uui-badge-border-hover: var(--uui-neutral-30);
473
- --uui-badge-caption: var(--uui-neutral-80);
474
- --uui-badge-caption-hover: var(--uui-neutral-80);
476
+ .uui-badge.uui-color-white {
477
+ &.uui-fill-outline {
478
+ --uui-badge-bg-hover: var(--uui-neutral-10);
479
+ --uui-badge-border: var(--uui-neutral-30);
480
+ --uui-badge-border-hover: var(--uui-neutral-30);
481
+ --uui-badge-caption: var(--uui-neutral-80);
482
+ --uui-badge-caption-hover: var(--uui-neutral-80);
483
+ }
475
484
  }
476
485
 
477
486
  .uui-badge.uui-color-neutral {
478
- --uui-badge-bg: var(--uui-neutral-30);
479
- --uui-badge-bg-hover: var(--uui-neutral-40);
480
- --uui-badge-border: var(--uui-neutral-30);
481
- --uui-badge-border-hover: var(--uui-neutral-40);
482
- --uui-color-contrast: var(--uui-neutral-80);
487
+ &.uui-fill-solid {
488
+ --uui-badge-bg: var(--uui-neutral-30);
489
+ --uui-badge-bg-hover: var(--uui-neutral-40);
490
+ --uui-badge-border: var(--uui-neutral-30);
491
+ --uui-badge-border-hover: var(--uui-neutral-40);
492
+ --uui-color-contrast: var(--uui-neutral-80);
493
+ }
483
494
 
484
495
  &.uui-fill-outline {
485
496
  --uui-badge-bg: var(--uui-neutral-20);
@@ -491,8 +502,10 @@
491
502
  }
492
503
 
493
504
  .uui-badge.uui-color-night100 {
494
- --uui-badge-bg-hover: var(--uui-neutral-20);
495
- --uui-badge-border-hover: var(--uui-neutral-20);
505
+ &.uui-fill-solid {
506
+ --uui-badge-bg-hover: var(--uui-neutral-20);
507
+ --uui-badge-border-hover: var(--uui-neutral-20);
508
+ }
496
509
 
497
510
  &.uui-fill-outline {
498
511
  --uui-badge-border: var(--uui-neutral-30);
@@ -502,11 +515,13 @@
502
515
  }
503
516
  }
504
517
 
505
- .uui-badge.uui-color-night600.uui-fill-outline {
506
- --uui-badge-border: var(--night600);
507
- --uui-badge-border-hover: var(--night600);
508
- --uui-badge-caption: var(--night800);
509
- --uui-badge-caption-hover: var(--night800);
518
+ .uui-badge.uui-color-night600 {
519
+ &.uui-fill-outline {
520
+ --uui-badge-border: var(--uui-neutral-60);
521
+ --uui-badge-border-hover: var(--uui-neutral-60);
522
+ --uui-badge-caption: var(--uui-neutral-80);
523
+ --uui-badge-caption-hover: var(--uui-neutral-80);
524
+ }
510
525
  }
511
526
 
512
527
  .uui-badge.uui-color-yellow.uui-fill-outline {
@@ -531,23 +546,15 @@
531
546
  --uui-color-contrast: var(--white);
532
547
  }
533
548
 
534
- /* Tooltip */
535
-
536
- .uui-tooltip-container.uui-color-neutral {
537
- --uui-tooltip-bg: var(--white);
538
- --uui-tooltip-text: var(--uui-text-primary);
539
- }
540
-
541
- .uui-tooltip-container.uui-color-critical {
542
- --uui-tooltip-bg: var(--uui-critical-60);
543
- }
549
+ /* LinkButton */
544
550
 
545
- .uui-tooltip-container.uui-color-inverted {
546
- --uui-tooltip-bg: var(--night800);
547
- --uui-tooltip-text: var(--uui-neutral-5);
551
+ .uui-link_button.uui-color-contrast {
552
+ --uui-link_btn-text: var(--uui-neutral-5);
553
+ --uui-link_btn-text-hover: var(--uui-neutral-10);
554
+ --uui-link_btn-text-active: var(--uui-neutral-20);
548
555
  }
549
556
 
550
- /* CuntIndicator */
557
+ /* CountIndicator */
551
558
 
552
559
  .uui-count_indicator.uui-color-neutral {
553
560
  --uui-count_indicator-bg: var(--uui-neutral-30);
@@ -592,6 +599,7 @@
592
599
  .uui-tag {
593
600
  &.uui-fill-outline {
594
601
  --uui-tag-fill: var(--uui-neutral-95);
602
+ --uui-tag-caption: var(--uui-text-primary);
595
603
  }
596
604
 
597
605
  &.uui-color-white {
@@ -608,7 +616,6 @@
608
616
  --uui-tag-border: var(--uui-neutral-30);
609
617
  --uui-tag-border-hover: var(--uui-neutral-30);
610
618
  --uui-tag-bg-hover: var(--uui-neutral-10);
611
- --uui-tag-caption: var(--uui-text-primary);
612
619
 
613
620
  .uui-count_indicator {
614
621
  --uui-count_indicator-bg: var(--uui-neutral-30);
@@ -630,7 +637,6 @@
630
637
 
631
638
  &.uui-fill-outline {
632
639
  --uui-tag-bg: var(--uui-neutral-5);
633
- --uui-tag-caption: var(--uui-text-primary);
634
640
  --uui-tag-bg-hover: var(--uui-neutral-10);
635
641
  --uui-tag-border: var(--uui-neutral-30);
636
642
  --uui-tag-border-hover: var(--uui-neutral-30);
@@ -651,7 +657,6 @@
651
657
  }
652
658
 
653
659
  &.uui-fill-outline {
654
- --uui-tag-caption: var(--uui-text-primary);
655
660
  --uui-tag-bg: var(--uui-neutral-20);
656
661
  --uui-tag-bg-hover: var(--uui-neutral-30);
657
662
  --uui-tag-border: var(--uui-neutral-50);
@@ -659,7 +664,8 @@
659
664
  }
660
665
  }
661
666
 
662
- &.uui-color-warning, &.uui-color-sun {
667
+ &.uui-color-warning,
668
+ &.uui-color-sun {
663
669
  --uui-tag-fill: var(--uui-neutral-100);
664
670
 
665
671
  &.uui-fill-solid {
@@ -700,7 +706,6 @@
700
706
 
701
707
  &.uui-fill-outline {
702
708
  --uui-tag-fill: var(--uui-neutral-95);
703
- --uui-tag-caption: var(--uui-text-primary);
704
709
 
705
710
  .uui-count_indicator {
706
711
  --uui-count_indicator-bg: var(--uui-neutral-30);
package/theme/theme_loveship.scss CHANGED
@@ -46,12 +46,12 @@
46
46
 
47
47
  --white: #FFFFFF;
48
48
 
49
- --yellow-5: #FFFFF0;
50
- --yellow-10: #FFFECC;
49
+ --yellow-5: #FFFFF5;
50
+ --yellow-10: #FFFFE5;
51
51
  --yellow-20: #FFFCA4;
52
52
  --yellow-50: #FDD63B;
53
- --yellow-60: #F9B71D;
54
- --yellow-70: #D3910C;
53
+ --yellow-60: #EDBE02;
54
+ --yellow-70: #BC7E02;
55
55
 
56
56
  --orange-5: #FEF8F4;
57
57
  --orange-10: #FFE8D7;
@@ -88,71 +88,44 @@
88
88
  --cobalt-60: #006FE5;
89
89
  --cobalt-70: #0954A5;
90
90
 
91
- --cyan-5: #F5FBFF;
91
+ --cyan-5: #F6FEFE;
92
92
  --cyan-10: #D1FAFA;
93
93
  --cyan-20: #AAEEEE;
94
94
  --cyan-50: #14CCCC;
95
- --cyan-60: #0F9E9E;
95
+ --cyan-60: #12B5B5;
96
96
  --cyan-70: #0B6F6F;
97
97
 
98
98
  --mint-5: #F2FCF5;
99
99
  --mint-10: #DDF3E4;
100
100
  --mint-20: #B4DFC4;
101
101
  --mint-50: #4FC48C;
102
- --mint-60: #2E9E68;
102
+ --mint-60: #31AA70;
103
103
  --mint-70: #236E4A;
104
104
 
105
105
  /* Loveship old colors */
106
- --uui-color-white-800: #E6E6E6;
107
- --uui-color-white-900: #CCCCCC;
108
-
109
106
  --uui-color-night50-800: #DADAE9;
110
107
  --uui-color-night50-900: #BABAD6;
111
108
 
112
109
  --uui-color-night100-800: #D3D7E9;
113
110
  --uui-color-night100-900: #B1B9D8;
114
111
 
115
- --uui-color-night200-700: #E6E8F2;
116
112
  --uui-color-night200-800: #C9CEE4;
117
113
  --uui-color-night200-900: #A7B0D3;
118
114
 
119
- --uui-color-night300-700: #D9DCE6;
120
- --uui-color-night300-800: #C2C6D7;
121
- --uui-color-night300-900: #A4AAC2;
122
-
123
- --uui-color-night400-700: #C3C5D2;
124
115
  --uui-color-night400-800: #B1B4C5;
125
116
  --uui-color-night400-900: #9398B0;
126
117
 
127
- --uui-color-night500-700: #9D9FB2;
128
- --uui-color-night500-800: #8F93A9;
129
- --uui-color-night500-900: #727793;
130
-
131
- --uui-color-night600-700: #595B6D;
132
- --uui-color-night600-800: #555764;
133
-
134
118
  --uui-color-night700-800: #30323D;
135
119
  --uui-color-night700-900: #1A1B20;
136
120
 
137
121
  --uui-color-night800-800: #1A1B23;
138
122
  --uui-color-night800-900: #040406;
139
-
140
- --uui-color-night900-800: #070709;
141
- --uui-color-night900-900: #000000;
142
123
  /* end Loveship old colors */
143
124
 
144
125
  /* core variables start */
145
126
 
146
127
  /* brand colors */
147
128
 
148
- --uui-accent-5: var(--grass-5);
149
- --uui-accent-10: var(--grass-10);
150
- --uui-accent-20: var(--grass-20);
151
- --uui-accent-50: var(--grass-50);
152
- --uui-accent-60: var(--grass-60);
153
- --uui-accent-70: var(--grass-70);
154
- --uui-accent-contrast: var(--white);
155
-
156
129
  --uui-primary-5: var(--sky-5);
157
130
  --uui-primary-10: var(--sky-10);
158
131
  --uui-primary-20: var(--sky-20);
@@ -161,6 +134,14 @@
161
134
  --uui-primary-70: var(--sky-70);
162
135
  --uui-primary-contrast: var(--white);
163
136
 
137
+ --uui-accent-5: var(--grass-5);
138
+ --uui-accent-10: var(--grass-10);
139
+ --uui-accent-20: var(--grass-20);
140
+ --uui-accent-50: var(--grass-50);
141
+ --uui-accent-60: var(--grass-60);
142
+ --uui-accent-70: var(--grass-70);
143
+ --uui-accent-contrast: var(--white);
144
+
164
145
  --uui-secondary-5: var(--night100);
165
146
  --uui-secondary-10: var(--night200);
166
147
  --uui-secondary-20: var(--night300);
@@ -248,7 +229,6 @@
248
229
  --uui-text-critical: var(--uui-critical-70);
249
230
  --uui-text-success: var(--uui-success-70);
250
231
 
251
- /* not accepted part */
252
232
 
253
233
  /* control specific */
254
234
 
@@ -263,8 +243,6 @@
263
243
  --uui-icon-active: var(--uui-neutral-80);
264
244
  --uui-icon-disabled: var(--uui-neutral-50);
265
245
 
266
- // TODO: should be updated
267
-
268
246
  --uui-control-bg: var(--uui-surface-main);
269
247
  --uui-control-bg-hover: var(--uui-neutral-60);
270
248
  --uui-control-bg-disabled: var(--uui-neutral-5);
@@ -380,8 +358,8 @@
380
358
  --uui-color-10: var(--night100);
381
359
  --uui-color-20: var(--night200);
382
360
  --uui-color-50: var(--night300);
383
- --uui-color-60: var(--uui-color-night300-800);
384
- --uui-color-70: var(--uui-color-night300-900);
361
+ --uui-color-60: var(--night400);
362
+ --uui-color-70: var(--night500);
385
363
  --uui-color-contrast: var(--uui-neutral-80);
386
364
  }
387
365
 
@@ -400,8 +378,8 @@
400
378
  --uui-color-10: var(--night300);
401
379
  --uui-color-20: var(--night400);
402
380
  --uui-color-50: var(--night500);
403
- --uui-color-60: var(--uui-color-night500-800);
404
- --uui-color-70: var(--uui-color-night500-900);
381
+ --uui-color-60: var(--night600);
382
+ --uui-color-70: var(--night700);
405
383
  --uui-color-contrast: var(--white);
406
384
  }
407
385
 
@@ -438,7 +416,6 @@
438
416
  --uui-color-contrast: var(--white);
439
417
  }
440
418
 
441
-
442
419
  .uui-color-warning,
443
420
  .uui-color-sun {
444
421
  --uui-color-5: var(--uui-warning-5);
@@ -544,34 +521,40 @@
544
521
 
545
522
  /* Badge */
546
523
 
547
- .uui-badge.uui-color-white.uui-fill-outline {
548
- --uui-badge-bg-hover: var(--uui-neutral-10);
549
- --uui-badge-border: var(--uui-neutral-30);
550
- --uui-badge-border-hover: var(--uui-neutral-30);
551
- --uui-badge-caption: var(--uui-neutral-80);
552
- --uui-badge-caption-hover: var(--uui-neutral-80);
524
+ .uui-badge.uui-color-white {
525
+ &.uui-fill-outline {
526
+ --uui-badge-bg-hover: var(--uui-neutral-10);
527
+ --uui-badge-border: var(--uui-neutral-30);
528
+ --uui-badge-border-hover: var(--uui-neutral-30);
529
+ --uui-badge-caption: var(--uui-neutral-80);
530
+ --uui-badge-caption-hover: var(--uui-neutral-80);
531
+ }
553
532
  }
554
533
 
555
534
  .uui-badge.uui-color-neutral,
556
535
  .uui-badge.uui-color-night300 {
557
- --uui-badge-bg: var(--uui-neutral-30);
558
- --uui-badge-bg-hover: var(--uui-neutral-40);
559
- --uui-badge-border: var(--uui-neutral-30);
560
- --uui-badge-border-hover: var(--uui-neutral-40);
561
- --uui-color-contrast: var(--uui-neutral-80);
536
+ &.uui-fill-solid {
537
+ --uui-badge-bg: var(--uui-neutral-30);
538
+ --uui-badge-bg-hover: var(--uui-neutral-40);
539
+ --uui-badge-border: var(--uui-neutral-30);
540
+ --uui-badge-border-hover: var(--uui-neutral-40);
541
+ --uui-color-contrast: var(--uui-neutral-80);
542
+ }
562
543
 
563
544
  &.uui-fill-outline {
564
545
  --uui-badge-bg: var(--uui-neutral-20);
565
- --uui-badge-border: var(--uui-neutral-40);
566
546
  --uui-badge-bg-hover: var(--uui-neutral-30);
547
+ --uui-badge-border: var(--uui-neutral-40);
567
548
  --uui-badge-caption: var(--uui-neutral-80);
568
549
  --uui-badge-caption-hover: var(--uui-neutral-80);
569
550
  }
570
551
  }
571
552
 
572
553
  .uui-badge.uui-color-night100 {
573
- --uui-badge-bg-hover: var(--uui-neutral-20);
574
- --uui-badge-border-hover: var(--uui-neutral-20);
554
+ &.uui-fill-solid {
555
+ --uui-badge-bg-hover: var(--uui-neutral-20);
556
+ --uui-badge-border-hover: var(--uui-neutral-20);
557
+ }
575
558
 
576
559
  &.uui-fill-outline {
577
560
  --uui-badge-border: var(--uui-neutral-30);
@@ -581,11 +564,13 @@
581
564
  }
582
565
  }
583
566
 
584
- .uui-badge.uui-color-night600.uui-fill-outline {
585
- --uui-badge-border: var(--night600);
586
- --uui-badge-border-hover: var(--night600);
587
- --uui-badge-caption: var(--night800);
588
- --uui-badge-caption-hover: var(--night800);
567
+ .uui-badge.uui-color-night600 {
568
+ &.uui-fill-outline {
569
+ --uui-badge-border: var(--uui-neutral-60);
570
+ --uui-badge-border-hover: var(--uui-neutral-60);
571
+ --uui-badge-caption: var(--uui-neutral-80);
572
+ --uui-badge-caption-hover: var(--uui-neutral-80);
573
+ }
589
574
  }
590
575
 
591
576
  .uui-badge.uui-color-yellow.uui-fill-outline {
@@ -594,19 +579,35 @@
594
579
 
595
580
  /* Button */
596
581
 
597
- .uui-button:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
598
- --uui-btn-caption: var(--uui-neutral-70);
599
- }
582
+ .uui-button {
583
+ &:is(.uui-color-secondary, .uui-color-neutral, .uui-color-gray, .uui-color-night600):is(.uui-fill-outline, .uui-fill-none, .uui-fill-ghost) {
584
+ --uui-btn-caption: var(--uui-neutral-70);
585
+ }
600
586
 
601
- /* IconButton */
587
+ &.uui-color-white {
588
+ &.uui-fill-none, &.uui-fill-ghost {
589
+ --uui-btn-bg-hover: color-mix(in srgb, var(--uui-neutral-0) 20%, transparent);
590
+ --uui-btn-bg-active: color-mix(in srgb, var(--uui-neutral-0) 30%, transparent);
591
+ }
602
592
 
603
- .uui-icon_button.uui-color-neutral,
604
- .uui-icon_button.uui-color-night600 {
605
- --uui-icon_btn: var(--uui-neutral-60);
606
- --uui-icon_btn-hover: var(--uui-neutral-70);
607
- --uui-icon_btn-active: var(--uui-neutral-80);
593
+ &.uui-fill-ghost {
594
+ --uui-btn-border: transparent;
595
+ --uui-btn-border-hover: transparent;
596
+ --uui-btn-border-active: transparent;
597
+ }
598
+
599
+ &.uui-fill-outline, &.uui-fill-solid {
600
+ --uui-btn-caption: var(--uui-neutral-70);
601
+ --uui-btn-bg-hover: var(--uui-neutral-20);
602
+ --uui-btn-border-hover: var(--uui-neutral-20);
603
+ --uui-btn-bg-active: var(--uui-neutral-30);
604
+ --uui-btn-border-active: var(--uui-neutral-30);
605
+ }
606
+ }
608
607
  }
609
608
 
609
+ /* IconButton */
610
+
610
611
  .uui-icon_button.uui-color-secondary {
611
612
  --uui-icon_btn: var(--uui-neutral-50);
612
613
  --uui-icon_btn-hover: var(--uui-neutral-60);
@@ -618,23 +619,28 @@
618
619
  --uui-icon_btn-active: var(--uui-neutral-30);
619
620
  }
620
621
 
621
- /* TooltipContainer */
622
+ /* LinkButton */
623
+
624
+ .uui-link_button.uui-color-contrast {
625
+ --uui-link_btn-text: var(--uui-neutral-5);
626
+ --uui-link_btn-text-hover: var(--uui-neutral-10);
627
+ --uui-link_btn-text-active: var(--uui-neutral-20);
628
+ }
629
+
630
+ /* Tooltip */
622
631
 
623
- .uui-tooltip-container.uui-color-white,
624
- .uui-tooltip-container.uui-color-neutral {
625
- --uui-tooltip-bg: var(--white);
632
+ .uui-tooltip-container.uui-color-white {
633
+ --uui-tooltip-bg: var(--uui-neutral-0);
626
634
  --uui-tooltip-text: var(--uui-neutral-80);
627
635
  }
628
636
 
629
- .uui-tooltip-container.uui-color-red,
630
- .uui-tooltip-container.uui-color-critical {
637
+ .uui-tooltip-container.uui-color-red {
631
638
  --uui-tooltip-bg: var(--uui-error-60);
632
639
  }
633
640
 
634
- .uui-tooltip-container.uui-color-gray,
635
- .uui-tooltip-container.uui-color-inverted {
641
+ .uui-tooltip-container.uui-color-gray {
636
642
  --uui-tooltip-bg: var(--uui-neutral-80);
637
- --uui-tooltip-text: var(--white);
643
+ --uui-tooltip-text: var(--uui-neutral-5);
638
644
  }
639
645
 
640
646
  /* CountIndicator */