@epam/assets 5.8.1 → 5.8.3

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 (23) hide show
  1. package/css/theme/theme_electric.css +238 -28
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +260 -26
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +261 -68
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +244 -34
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css +162 -0
  10. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  11. package/package.json +2 -2
  12. package/readme.md +2 -2
  13. package/theme/theme_6px.scss +216 -0
  14. package/theme/theme_electric.scss +4 -66
  15. package/theme/theme_loveship.scss +6 -40
  16. package/theme/theme_loveship_dark.scss +4 -84
  17. package/theme/theme_promo.scss +2 -63
  18. package/theme/theme_vanilla_thunder.scss +4 -1
  19. package/theme/tokens/_color_classes.scss +103 -0
  20. package/theme/tokens/_theme_electric.scss +12 -1
  21. package/theme/tokens/_theme_loveship_dark.scss +12 -1
  22. package/theme/tokens/_theme_loveship_light.scss +12 -1
  23. package/theme/tokens/_theme_promo.scss +12 -1
package/theme/theme_electric.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use './tokens/_theme_electric.scss' as tokens;
2
+ @use './theme_6px' as *;
2
3
  @import '../scss/electric/font-faces';
3
4
 
4
5
  /* Name convention */
@@ -18,23 +19,6 @@
18
19
  --gradient-4: linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
19
20
  --gradient-5: linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
20
21
 
21
- /* contrast colors */
22
- --uui-primary-contrast: var(--white);
23
-
24
- --uui-accent-contrast: var(--white);
25
-
26
- --uui-secondary-contrast: var(--white);
27
-
28
- --uui-critical-contrast: var(--white);
29
-
30
- --uui-info-contrast: var(--white);
31
-
32
- --uui-success-contrast: var(--white);
33
-
34
- --uui-warning-contrast: var(--uui-neutral-80);
35
-
36
- --uui-error-contrast: var(--white);
37
-
38
22
  /* shadows */
39
23
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
40
24
  --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);
@@ -49,31 +33,7 @@
49
33
  /* override variables */
50
34
 
51
35
  /* begin color classes */
52
-
53
- .uui-color-primary,
54
- .uui-color-info {
55
- --uui-color-5: var(--uui-primary-5);
56
- --uui-color-10: var(--uui-primary-10);
57
- --uui-color-20: var(--uui-primary-20);
58
- --uui-color-50: var(--uui-primary-50);
59
- --uui-color-60: var(--uui-primary-60);
60
- --uui-color-70: var(--uui-primary-70);
61
- --uui-color-contrast: var(--white);
62
- }
63
-
64
- .uui-color-accent {
65
- --uui-color-5: var(--uui-accent-5);
66
- --uui-color-10: var(--uui-accent-10);
67
- --uui-color-20: var(--uui-accent-20);
68
- --uui-color-50: var(--uui-accent-50);
69
- --uui-color-60: var(--uui-accent-60);
70
- --uui-color-70: var(--uui-accent-70);
71
- --uui-color-contrast: var(--white);
72
- }
73
-
74
- .uui-color-fire,
75
- .uui-color-critical,
76
- .uui-color-error {
36
+ .uui-color-fire {
77
37
  --uui-color-5: var(--uui-critical-5);
78
38
  --uui-color-10: var(--uui-critical-10);
79
39
  --uui-color-20: var(--uui-critical-20);
@@ -83,16 +43,6 @@
83
43
  --uui-color-contrast: var(--white);
84
44
  }
85
45
 
86
- .uui-color-white {
87
- --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
88
- --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
89
- --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
90
- --uui-color-50: var(--uui-neutral-0);
91
- --uui-color-60: var(--uui-neutral-10);
92
- --uui-color-70: var(--uui-neutral-20);
93
- --uui-color-contrast: var(--uui-neutral-70);
94
- }
95
-
96
46
  .uui-color-night100 {
97
47
  --uui-color-5: var(--white);
98
48
  --uui-color-10: var(--white);
@@ -113,8 +63,6 @@
113
63
  --uui-color-contrast: var(--uui-neutral-80);
114
64
  }
115
65
 
116
- .uui-color-neutral,
117
- .uui-color-secondary,
118
66
  .uui-color-night600 {
119
67
  --uui-color-5: var(--uui-secondary-5);
120
68
  --uui-color-10: var(--uui-secondary-10);
@@ -135,18 +83,7 @@
135
83
  --uui-color-contrast: var(--white);
136
84
  }
137
85
 
138
- .uui-color-success {
139
- --uui-color-5: var(--uui-success-5);
140
- --uui-color-10: var(--uui-success-10);
141
- --uui-color-20: var(--uui-success-20);
142
- --uui-color-50: var(--uui-success-50);
143
- --uui-color-60: var(--uui-success-60);
144
- --uui-color-70: var(--uui-success-70);
145
- --uui-color-contrast: var(--white);
146
- }
147
-
148
- .uui-color-sun,
149
- .uui-color-warning {
86
+ .uui-color-sun {
150
87
  --uui-color-5: var(--sun-5);
151
88
  --uui-color-10: var(--sun-10);
152
89
  --uui-color-20: var(--sun-20);
@@ -572,5 +509,6 @@
572
509
  }
573
510
 
574
511
  .uui-theme-electric {
512
+ @include uui-6px-grid();
575
513
  @include theme-electric();
576
514
  }
package/theme/theme_loveship.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../scss/loveship/font-faces';
2
+ @use './theme_6px' as *;
2
3
  @use './tokens/_theme_loveship_light.scss' as tokens;
3
4
  /* Name convention */
4
5
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
@@ -17,23 +18,6 @@
17
18
 
18
19
  /* end Loveship old colors */
19
20
 
20
- /* contrast colors */
21
- --uui-primary-contrast: var(--white);
22
-
23
- --uui-accent-contrast: var(--white);
24
-
25
- --uui-secondary-contrast: var(--white);
26
-
27
- --uui-critical-contrast: var(--white);
28
-
29
- --uui-info-contrast: var(--white);
30
-
31
- --uui-success-contrast: var(--white);
32
-
33
- --uui-warning-contrast: var(--night800);
34
-
35
- --uui-error-contrast: var(--white);
36
-
37
21
  /* shadows */
38
22
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
39
23
  --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);
@@ -47,9 +31,7 @@
47
31
 
48
32
  /* begin color classes */
49
33
 
50
- .uui-color-accent,
51
- .uui-color-grass,
52
- .uui-color-success {
34
+ .uui-color-grass {
53
35
  --uui-color-5: var(--uui-accent-5);
54
36
  --uui-color-10: var(--uui-accent-10);
55
37
  --uui-color-20: var(--uui-accent-20);
@@ -59,9 +41,7 @@
59
41
  --uui-color-contrast: var(--uui-accent-contrast);
60
42
  }
61
43
 
62
- .uui-color-primary,
63
- .uui-color-sky,
64
- .uui-color-info {
44
+ .uui-color-sky {
65
45
  --uui-color-5: var(--uui-primary-5);
66
46
  --uui-color-10: var(--uui-primary-10);
67
47
  --uui-color-20: var(--uui-primary-20);
@@ -71,9 +51,7 @@
71
51
  --uui-color-contrast: var(--uui-primary-contrast);
72
52
  }
73
53
 
74
- .uui-color-fire,
75
- .uui-color-critical,
76
- .uui-color-error {
54
+ .uui-color-fire {
77
55
  --uui-color-5: var(--uui-critical-5);
78
56
  --uui-color-10: var(--uui-critical-10);
79
57
  --uui-color-20: var(--uui-critical-20);
@@ -83,16 +61,6 @@
83
61
  --uui-color-contrast: var(--uui-critical-contrast);
84
62
  }
85
63
 
86
- .uui-color-white {
87
- --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
88
- --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
89
- --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
90
- --uui-color-50: var(--uui-neutral-0);
91
- --uui-color-60: var(--uui-neutral-10);
92
- --uui-color-70: var(--uui-neutral-20);
93
- --uui-color-contrast: var(--uui-neutral-70);
94
- }
95
-
96
64
  .uui-color-night100 {
97
65
  --uui-color-5: var(--white);
98
66
  --uui-color-10: var(--white);
@@ -124,9 +92,7 @@
124
92
  }
125
93
 
126
94
  .uui-color-night600,
127
- .uui-color-neutral,
128
- .uui-color-gray,
129
- .uui-color-secondary {
95
+ .uui-color-gray {
130
96
  --uui-color-5: var(--uui-secondary-5);
131
97
  --uui-color-10: var(--uui-secondary-10);
132
98
  --uui-color-20: var(--uui-secondary-20);
@@ -146,7 +112,6 @@
146
112
  --uui-color-contrast: var(--white);
147
113
  }
148
114
 
149
- .uui-color-warning,
150
115
  .uui-color-sun {
151
116
  --uui-color-5: var(--uui-warning-5);
152
117
  --uui-color-10: var(--uui-warning-10);
@@ -603,5 +568,6 @@
603
568
  }
604
569
 
605
570
  .uui-theme-loveship {
571
+ @include uui-6px-grid();
606
572
  @include theme-loveship();
607
573
  }
package/theme/theme_loveship_dark.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../scss/loveship/font-faces';
2
+ @use './theme_6px' as *;
2
3
  @use './tokens/_theme_loveship_dark.scss' as tokens;
3
4
  /* Name convention */
4
5
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
@@ -8,23 +9,6 @@
8
9
  --uui-font: 'Source Sans Pro', sans-serif;
9
10
  --uui-font-mono: 'Roboto Mono', monospace;
10
11
 
11
- /* contrast colors */
12
- --uui-primary-contrast: var(--white);
13
-
14
- --uui-accent-contrast: var(--white);
15
-
16
- --uui-secondary-contrast: var(--white);
17
-
18
- --uui-critical-contrast: var(--white);
19
-
20
- --uui-info-contrast: var(--white);
21
-
22
- --uui-success-contrast: var(--white);
23
-
24
- --uui-warning-contrast: var(--night700);
25
-
26
- --uui-error-contrast: var(--white);
27
-
28
12
  /* shadows */
29
13
  --uui-shadow-level-1: 0 0 4px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
30
14
  --uui-shadow-level-2: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 22px 3px rgba(0, 0, 0, 0.26);
@@ -38,9 +22,7 @@
38
22
 
39
23
  /* begin color classes */
40
24
 
41
- .uui-color-neutral,
42
- .uui-color-gray,
43
- .uui-color-secondary {
25
+ .uui-color-gray {
44
26
  --uui-color-5: var(--uui-secondary-5);
45
27
  --uui-color-10: var(--uui-secondary-10);
46
28
  --uui-color-20: var(--uui-secondary-20);
@@ -50,7 +32,6 @@
50
32
  --uui-color-contrast: var(--white);
51
33
  }
52
34
 
53
- .uui-color-accent,
54
35
  .uui-color-grass {
55
36
  --uui-color-5: var(--grass-5);
56
37
  --uui-color-10: var(--grass-10);
@@ -61,17 +42,6 @@
61
42
  --uui-color-contrast: var(--white);
62
43
  }
63
44
 
64
- .uui-color-success {
65
- --uui-color-5: var(--uui-success-5);
66
- --uui-color-10: var(--uui-success-10);
67
- --uui-color-20: var(--uui-success-20);
68
- --uui-color-50: var(--uui-success-50);
69
- --uui-color-60: var(--uui-success-60);
70
- --uui-color-70: var(--uui-success-70);
71
- --uui-color-contrast: var(--white);
72
- }
73
-
74
- .uui-color-primary,
75
45
  .uui-color-sky {
76
46
  --uui-color-5: var(--sky-5);
77
47
  --uui-color-10: var(--sky-10);
@@ -92,28 +62,7 @@
92
62
  --uui-color-contrast: var(--white);
93
63
  }
94
64
 
95
- .uui-color-info {
96
- --uui-color-5: var(--uui-info-5);
97
- --uui-color-10: var(--uui-info-10);
98
- --uui-color-20: var(--uui-info-20);
99
- --uui-color-50: var(--uui-info-50);
100
- --uui-color-60: var(--uui-info-60);
101
- --uui-color-70: var(--uui-info-70);
102
- --uui-color-contrast: var(--white);
103
- }
104
-
105
- .uui-color-success {
106
- --uui-color-5: var(--uui-success-5);
107
- --uui-color-10: var(--uui-success-10);
108
- --uui-color-20: var(--uui-success-20);
109
- --uui-color-50: var(--uui-success-50);
110
- --uui-color-60: var(--uui-success-60);
111
- --uui-color-70: var(--uui-success-70);
112
- --uui-color-contrast: var(--white);
113
- }
114
-
115
- .uui-color-sun,
116
- .uui-color-warning {
65
+ .uui-color-sun {
117
66
  --uui-color-5: var(--sun-5);
118
67
  --uui-color-10: var(--sun-10);
119
68
  --uui-color-20: var(--sun-20);
@@ -123,26 +72,6 @@
123
72
  --uui-color-contrast: var(--night700);
124
73
  }
125
74
 
126
- .uui-color-error {
127
- --uui-color-5: var(--uui-error-5);
128
- --uui-color-10: var(--uui-error-10);
129
- --uui-color-20: var(--uui-error-20);
130
- --uui-color-50: var(--uui-error-50);
131
- --uui-color-60: var(--uui-error-60);
132
- --uui-color-70: var(--uui-error-70);
133
- --uui-color-contrast: var(--white);
134
- }
135
-
136
- .uui-color-critical {
137
- --uui-color-5: var(--uui-critical-5);
138
- --uui-color-10: var(--uui-critical-10);
139
- --uui-color-20: var(--uui-critical-20);
140
- --uui-color-50: var(--uui-critical-50);
141
- --uui-color-60: var(--uui-critical-60);
142
- --uui-color-70: var(--uui-critical-70);
143
- --uui-color-contrast: var(--white);
144
- }
145
-
146
75
  .uui-color-yellow {
147
76
  --uui-color-5: var(--yellow-5);
148
77
  --uui-color-10: var(--yellow-10);
@@ -223,16 +152,6 @@
223
152
  --uui-color-contrast: var(--night700);
224
153
  }
225
154
 
226
- .uui-color-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
- --uui-color-60: var(--uui-neutral-10);
232
- --uui-color-70: var(--uui-neutral-20);
233
- --uui-color-contrast: var(--uui-neutral-70);
234
- }
235
-
236
155
  /* override variables */
237
156
 
238
157
  /* isInvalid color */
@@ -849,5 +768,6 @@
849
768
  }
850
769
 
851
770
  .uui-theme-loveship_dark {
771
+ @include uui-6px-grid();
852
772
  @include theme-loveship_dark();
853
773
  }
package/theme/theme_promo.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use '../scss/promo/font-faces';
2
+ @use './theme_6px' as *;
2
3
  @use './tokens/_theme_promo.scss' as tokens;
3
4
  /* Name convention */
4
5
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
@@ -12,23 +13,6 @@
12
13
  --font-museo-sans: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
13
14
  --font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
14
15
 
15
- /* contrast colors */
16
- --uui-primary-contrast: var(--white);
17
-
18
- --uui-accent-contrast: var(--white);
19
-
20
- --uui-secondary-contrast: var(--white);
21
-
22
- --uui-critical-contrast: var(--white);
23
-
24
- --uui-info-contrast: var(--white);
25
-
26
- --uui-success-contrast: var(--white);
27
-
28
- --uui-warning-contrast: var(--gray80);
29
-
30
- --uui-error-contrast: var(--white);
31
-
32
16
  /* shadows */
33
17
  --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
34
18
  --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);
@@ -42,7 +26,6 @@
42
26
 
43
27
  /* begin color classes */
44
28
 
45
- .uui-color-accent,
46
29
  .uui-color-green {
47
30
  --uui-color-5: var(--uui-accent-5);
48
31
  --uui-color-10: var(--uui-accent-10);
@@ -53,7 +36,6 @@
53
36
  --uui-color-contrast: var(--uui-accent-contrast);
54
37
  }
55
38
 
56
- .uui-color-primary,
57
39
  .uui-color-blue {
58
40
  --uui-color-5: var(--uui-primary-5);
59
41
  --uui-color-10: var(--uui-primary-10);
@@ -64,8 +46,6 @@
64
46
  --uui-color-contrast: var(--uui-primary-contrast);
65
47
  }
66
48
 
67
- .uui-color-secondary,
68
- .uui-color-neutral,
69
49
  .uui-color-gray {
70
50
  --uui-color-5: var(--uui-secondary-5);
71
51
  --uui-color-10: var(--uui-secondary-10);
@@ -76,7 +56,6 @@
76
56
  --uui-color-contrast: var(--uui-secondary-contrast);
77
57
  }
78
58
 
79
- .uui-color-critical,
80
59
  .uui-color-red {
81
60
  --uui-color-5: var(--uui-critical-5);
82
61
  --uui-color-10: var(--uui-critical-10);
@@ -87,27 +66,6 @@
87
66
  --uui-color-contrast: var(--uui-critical-contrast);
88
67
  }
89
68
 
90
- .uui-color-info {
91
- --uui-color-5: var(--uui-info-5);
92
- --uui-color-10: var(--uui-info-10);
93
- --uui-color-20: var(--uui-info-20);
94
- --uui-color-50: var(--uui-info-50);
95
- --uui-color-60: var(--uui-info-60);
96
- --uui-color-70: var(--uui-info-70);
97
- --uui-color-contrast: var(--uui-info-contrast);
98
- }
99
-
100
- .uui-color-success {
101
- --uui-color-5: var(--uui-success-5);
102
- --uui-color-10: var(--uui-success-10);
103
- --uui-color-20: var(--uui-success-20);
104
- --uui-color-50: var(--uui-success-50);
105
- --uui-color-60: var(--uui-success-60);
106
- --uui-color-70: var(--uui-success-70);
107
- --uui-color-contrast: var(--uui-success-contrast);
108
- }
109
-
110
- .uui-color-warning,
111
69
  .uui-color-amber {
112
70
  --uui-color-5: var(--uui-warning-5);
113
71
  --uui-color-10: var(--uui-warning-10);
@@ -118,26 +76,6 @@
118
76
  --uui-color-contrast: var(--uui-warning-contrast);
119
77
  }
120
78
 
121
- .uui-color-error {
122
- --uui-color-5: var(--uui-error-5);
123
- --uui-color-10: var(--uui-error-10);
124
- --uui-color-20: var(--uui-error-20);
125
- --uui-color-50: var(--uui-error-50);
126
- --uui-color-60: var(--uui-error-60);
127
- --uui-color-70: var(--uui-error-70);
128
- --uui-color-contrast: var(--uui-error-contrast);
129
- }
130
-
131
- .uui-color-white {
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);
139
- }
140
-
141
79
  .uui-link_button.uui-color-contrast,
142
80
  .uui-color-gray10 {
143
81
  --uui-color-5: var(--white);
@@ -648,6 +586,7 @@
648
586
  }
649
587
 
650
588
  .uui-theme-promo {
589
+ @include uui-6px-grid();
651
590
  @include theme-promo();
652
591
  }
653
592
 
package/theme/theme_vanilla_thunder.scss CHANGED
@@ -1,6 +1,9 @@
1
+ @use './theme_6px' as *;
2
+
1
3
  /* Name convention */
2
4
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
5
  .uui-theme-vanilla_thunder {
6
+ @include uui-6px-grid();
4
7
  --uui-font: var(--font-inter);
5
8
  --uui-font-mono: 'Roboto Mono', monospace;
6
9
 
@@ -478,4 +481,4 @@
478
481
  }
479
482
  }
480
483
  }
481
- }
484
+ }
package/theme/tokens/_color_classes.scss ADDED
@@ -0,0 +1,103 @@
1
+ // This file is AUTOGENERATED. DO NOT EDIT THIS FILE DIRECTLY.
2
+
3
+ @mixin theme-color-classes {
4
+ .uui-color-primary {
5
+ --uui-color-5: var(--uui-primary-5);
6
+ --uui-color-10: var(--uui-primary-10);
7
+ --uui-color-20: var(--uui-primary-20);
8
+ --uui-color-50: var(--uui-primary-50);
9
+ --uui-color-60: var(--uui-primary-60);
10
+ --uui-color-70: var(--uui-primary-70);
11
+ --uui-color-contrast: var(--uui-primary-contrast);
12
+ }
13
+
14
+ .uui-color-secondary {
15
+ --uui-color-5: var(--uui-secondary-5);
16
+ --uui-color-10: var(--uui-secondary-10);
17
+ --uui-color-20: var(--uui-secondary-20);
18
+ --uui-color-50: var(--uui-secondary-50);
19
+ --uui-color-60: var(--uui-secondary-60);
20
+ --uui-color-70: var(--uui-secondary-70);
21
+ --uui-color-contrast: var(--uui-secondary-contrast);
22
+ }
23
+
24
+ .uui-color-accent {
25
+ --uui-color-5: var(--uui-accent-5);
26
+ --uui-color-10: var(--uui-accent-10);
27
+ --uui-color-20: var(--uui-accent-20);
28
+ --uui-color-50: var(--uui-accent-50);
29
+ --uui-color-60: var(--uui-accent-60);
30
+ --uui-color-70: var(--uui-accent-70);
31
+ --uui-color-contrast: var(--uui-accent-contrast);
32
+ }
33
+
34
+ .uui-color-info {
35
+ --uui-color-5: var(--uui-info-5);
36
+ --uui-color-10: var(--uui-info-10);
37
+ --uui-color-20: var(--uui-info-20);
38
+ --uui-color-50: var(--uui-info-50);
39
+ --uui-color-60: var(--uui-info-60);
40
+ --uui-color-70: var(--uui-info-70);
41
+ --uui-color-contrast: var(--uui-info-contrast);
42
+ }
43
+
44
+ .uui-color-success {
45
+ --uui-color-5: var(--uui-success-5);
46
+ --uui-color-10: var(--uui-success-10);
47
+ --uui-color-20: var(--uui-success-20);
48
+ --uui-color-50: var(--uui-success-50);
49
+ --uui-color-60: var(--uui-success-60);
50
+ --uui-color-70: var(--uui-success-70);
51
+ --uui-color-contrast: var(--uui-success-contrast);
52
+ }
53
+
54
+ .uui-color-warning {
55
+ --uui-color-5: var(--uui-warning-5);
56
+ --uui-color-10: var(--uui-warning-10);
57
+ --uui-color-20: var(--uui-warning-20);
58
+ --uui-color-50: var(--uui-warning-50);
59
+ --uui-color-60: var(--uui-warning-60);
60
+ --uui-color-70: var(--uui-warning-70);
61
+ --uui-color-contrast: var(--uui-warning-contrast);
62
+ }
63
+
64
+ .uui-color-error {
65
+ --uui-color-5: var(--uui-error-5);
66
+ --uui-color-10: var(--uui-error-10);
67
+ --uui-color-20: var(--uui-error-20);
68
+ --uui-color-50: var(--uui-error-50);
69
+ --uui-color-60: var(--uui-error-60);
70
+ --uui-color-70: var(--uui-error-70);
71
+ --uui-color-contrast: var(--uui-error-contrast);
72
+ }
73
+
74
+ .uui-color-critical {
75
+ --uui-color-5: var(--uui-critical-5);
76
+ --uui-color-10: var(--uui-critical-10);
77
+ --uui-color-20: var(--uui-critical-20);
78
+ --uui-color-50: var(--uui-critical-50);
79
+ --uui-color-60: var(--uui-critical-60);
80
+ --uui-color-70: var(--uui-critical-70);
81
+ --uui-color-contrast: var(--uui-critical-contrast);
82
+ }
83
+
84
+ .uui-color-white {
85
+ --uui-color-5: color-mix(in srgb, #FFFFFF 15%, transparent);
86
+ --uui-color-10: color-mix(in srgb, #FFFFFF 22%, transparent);
87
+ --uui-color-20: color-mix(in srgb, #FFFFFF 29%, transparent);
88
+ --uui-color-50: var(--uui-neutral-0);
89
+ --uui-color-60: var(--uui-neutral-10);
90
+ --uui-color-70: var(--uui-neutral-20);
91
+ --uui-color-contrast: var(--uui-neutral-70);
92
+ }
93
+
94
+ .uui-color-neutral {
95
+ --uui-color-5: var(--uui-secondary-5);
96
+ --uui-color-10: var(--uui-secondary-10);
97
+ --uui-color-20: var(--uui-secondary-20);
98
+ --uui-color-50: var(--uui-secondary-50);
99
+ --uui-color-60: var(--uui-secondary-60);
100
+ --uui-color-70: var(--uui-secondary-70);
101
+ --uui-color-contrast: var(--uui-secondary-contrast);
102
+ }
103
+ }
package/theme/tokens/_theme_electric.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  // This file is AUTOGENERATED from Figma. DO NOT EDIT THIS FILE DIRECTLY.
2
+ @use './_color_classes.scss' as colorClasses;
2
3
 
3
4
  @mixin theme-tokens {
4
5
 
@@ -130,6 +131,7 @@
130
131
  --uui-accent-50: var(--emerald-50);
131
132
  --uui-accent-60: var(--emerald-60);
132
133
  --uui-accent-70: var(--emerald-70);
134
+ --uui-accent-contrast: var(--white);
133
135
 
134
136
  // "core/semantic/critical-"
135
137
  --uui-critical-5: var(--fire-5);
@@ -138,6 +140,7 @@
138
140
  --uui-critical-50: var(--fire-50);
139
141
  --uui-critical-60: var(--fire-60);
140
142
  --uui-critical-70: var(--fire-70);
143
+ --uui-critical-contrast: var(--white);
141
144
 
142
145
  // "core/semantic/error-"
143
146
  --uui-error-5: var(--fire-5);
@@ -146,6 +149,7 @@
146
149
  --uui-error-50: var(--fire-50);
147
150
  --uui-error-60: var(--fire-60);
148
151
  --uui-error-70: var(--fire-70);
152
+ --uui-error-contrast: var(--white);
149
153
 
150
154
  // "core/semantic/info-"
151
155
  --uui-info-5: var(--electric-5);
@@ -154,6 +158,7 @@
154
158
  --uui-info-50: var(--electric-50);
155
159
  --uui-info-60: var(--electric-60);
156
160
  --uui-info-70: var(--electric-70);
161
+ --uui-info-contrast: var(--white);
157
162
 
158
163
  // "core/semantic/primary-"
159
164
  --uui-primary-5: var(--electric-5);
@@ -162,6 +167,7 @@
162
167
  --uui-primary-50: var(--electric-50);
163
168
  --uui-primary-60: var(--electric-60);
164
169
  --uui-primary-70: var(--electric-70);
170
+ --uui-primary-contrast: var(--white);
165
171
 
166
172
  // "core/semantic/secondary-"
167
173
  --uui-secondary-5: var(--night100);
@@ -170,6 +176,7 @@
170
176
  --uui-secondary-50: var(--night600);
171
177
  --uui-secondary-60: var(--night700);
172
178
  --uui-secondary-70: var(--night800);
179
+ --uui-secondary-contrast: var(--white);
173
180
 
174
181
  // "core/semantic/success-"
175
182
  --uui-success-5: var(--emerald-5);
@@ -178,6 +185,7 @@
178
185
  --uui-success-50: var(--emerald-50);
179
186
  --uui-success-60: var(--emerald-60);
180
187
  --uui-success-70: var(--emerald-70);
188
+ --uui-success-contrast: var(--white);
181
189
 
182
190
  // "core/semantic/warning-"
183
191
  --uui-warning-5: var(--sun-5);
@@ -186,6 +194,7 @@
186
194
  --uui-warning-50: var(--sun-50);
187
195
  --uui-warning-60: var(--sun-60);
188
196
  --uui-warning-70: var(--sun-70);
197
+ --uui-warning-contrast: var(--uui-neutral-80);
189
198
 
190
199
  /********************/
191
200
  /*** Core Neutral ***/
@@ -263,4 +272,6 @@
263
272
  --uui-text-success: var(--uui-success-70);
264
273
  --uui-text-tertiary: var(--uui-neutral-60);
265
274
  --uui-text-warning: var(--uui-warning-70);
266
- }
275
+
276
+ @include colorClasses.theme-color-classes;
277
+ }