@epam/assets 5.9.0-beta.0 → 5.9.1

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 (41) hide show
  1. package/css/theme/theme_electric.css +81 -98
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +95 -91
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +97 -134
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +83 -103
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css +0 -68
  10. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  11. package/icons/action-clock_fast-fill.svg +1 -0
  12. package/icons/action-clock_fast-outline.svg +1 -0
  13. package/icons/action-job_function-fill.svg +1 -1
  14. package/icons/action-job_function-outline.svg +1 -1
  15. package/icons/action-search-fill.svg +1 -1
  16. package/icons/communication-mail-fill.svg +1 -1
  17. package/icons/communication-mail-outline.svg +1 -1
  18. package/icons/content-person_contacts-fill.svg +1 -0
  19. package/icons/content-person_contacts-outline.svg +1 -0
  20. package/icons/content-person_group-outline.svg +1 -0
  21. package/icons/editor-headline_h4-outline.svg +1 -0
  22. package/icons/editor-headline_h5-outline.svg +1 -0
  23. package/icons/editor-headline_h6-outline.svg +1 -0
  24. package/icons/external_logo/figma-logo-outline-inverted.svg +1 -0
  25. package/icons/file-file_csv-fill.svg +1 -0
  26. package/icons/navigation-chevron_down-outline.svg +1 -1
  27. package/icons/navigation-chevron_left-outline.svg +1 -1
  28. package/icons/navigation-chevron_right-outline.svg +1 -1
  29. package/icons/navigation-chevron_up-outline.svg +1 -1
  30. package/icons/radio_dot-fill.svg +1 -1
  31. package/package.json +2 -2
  32. package/theme/theme_6px.scss +2 -91
  33. package/theme/theme_electric.scss +8 -68
  34. package/theme/theme_loveship.scss +5 -41
  35. package/theme/theme_loveship_dark.scss +7 -89
  36. package/theme/theme_promo.scss +1 -64
  37. package/theme/tokens/_color_classes.scss +103 -0
  38. package/theme/tokens/_theme_electric.scss +12 -1
  39. package/theme/tokens/_theme_loveship_dark.scss +12 -1
  40. package/theme/tokens/_theme_loveship_light.scss +12 -1
  41. package/theme/tokens/_theme_promo.scss +12 -1
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
+ }
package/theme/tokens/_theme_loveship_dark.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
 
@@ -129,6 +130,7 @@
129
130
  --uui-accent-50: var(--grass-50);
130
131
  --uui-accent-60: var(--grass-60);
131
132
  --uui-accent-70: var(--grass-70);
133
+ --uui-accent-contrast: var(--white);
132
134
 
133
135
  // "core/semantic/critical-"
134
136
  --uui-critical-5: var(--fire-5);
@@ -137,6 +139,7 @@
137
139
  --uui-critical-50: var(--fire-50);
138
140
  --uui-critical-60: var(--fire-60);
139
141
  --uui-critical-70: var(--fire-70);
142
+ --uui-critical-contrast: var(--white);
140
143
 
141
144
  // "core/semantic/error-"
142
145
  --uui-error-5: var(--fire-5);
@@ -145,6 +148,7 @@
145
148
  --uui-error-50: var(--fire-50);
146
149
  --uui-error-60: var(--fire-60);
147
150
  --uui-error-70: var(--fire-70);
151
+ --uui-error-contrast: var(--white);
148
152
 
149
153
  // "core/semantic/info-"
150
154
  --uui-info-5: var(--sky-5);
@@ -153,6 +157,7 @@
153
157
  --uui-info-50: var(--sky-50);
154
158
  --uui-info-60: var(--sky-60);
155
159
  --uui-info-70: var(--sky-70);
160
+ --uui-info-contrast: var(--white);
156
161
 
157
162
  // "core/semantic/primary-"
158
163
  --uui-primary-5: var(--sky-5);
@@ -161,6 +166,7 @@
161
166
  --uui-primary-50: var(--sky-50);
162
167
  --uui-primary-60: var(--sky-60);
163
168
  --uui-primary-70: var(--sky-70);
169
+ --uui-primary-contrast: var(--white);
164
170
 
165
171
  // "core/semantic/secondary-"
166
172
  --uui-secondary-5: var(--night800);
@@ -169,6 +175,7 @@
169
175
  --uui-secondary-50: var(--night500);
170
176
  --uui-secondary-60: var(--night400);
171
177
  --uui-secondary-70: var(--night300);
178
+ --uui-secondary-contrast: var(--white);
172
179
 
173
180
  // "core/semantic/success-"
174
181
  --uui-success-5: var(--grass-5);
@@ -177,6 +184,7 @@
177
184
  --uui-success-50: var(--grass-50);
178
185
  --uui-success-60: var(--grass-60);
179
186
  --uui-success-70: var(--grass-70);
187
+ --uui-success-contrast: var(--white);
180
188
 
181
189
  // "core/semantic/warning-"
182
190
  --uui-warning-5: var(--sun-5);
@@ -185,6 +193,7 @@
185
193
  --uui-warning-50: var(--sun-50);
186
194
  --uui-warning-60: var(--sun-60);
187
195
  --uui-warning-70: var(--sun-70);
196
+ --uui-warning-contrast: var(--night700);
188
197
 
189
198
  /********************/
190
199
  /*** Core Neutral ***/
@@ -261,4 +270,6 @@
261
270
  --uui-text-success: var(--uui-success-70);
262
271
  --uui-text-tertiary: var(--uui-neutral-20);
263
272
  --uui-text-warning: var(--uui-warning-70);
264
- }
273
+
274
+ @include colorClasses.theme-color-classes;
275
+ }
package/theme/tokens/_theme_loveship_light.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
 
@@ -129,6 +130,7 @@
129
130
  --uui-accent-50: var(--grass-50);
130
131
  --uui-accent-60: var(--grass-60);
131
132
  --uui-accent-70: var(--grass-70);
133
+ --uui-accent-contrast: var(--white);
132
134
 
133
135
  // "core/semantic/critical-"
134
136
  --uui-critical-5: var(--fire-5);
@@ -137,6 +139,7 @@
137
139
  --uui-critical-50: var(--fire-50);
138
140
  --uui-critical-60: var(--fire-60);
139
141
  --uui-critical-70: var(--fire-70);
142
+ --uui-critical-contrast: var(--white);
140
143
 
141
144
  // "core/semantic/error-"
142
145
  --uui-error-5: var(--fire-5);
@@ -145,6 +148,7 @@
145
148
  --uui-error-50: var(--fire-50);
146
149
  --uui-error-60: var(--fire-60);
147
150
  --uui-error-70: var(--fire-70);
151
+ --uui-error-contrast: var(--white);
148
152
 
149
153
  // "core/semantic/info-"
150
154
  --uui-info-5: var(--sky-5);
@@ -153,6 +157,7 @@
153
157
  --uui-info-50: var(--sky-50);
154
158
  --uui-info-60: var(--sky-60);
155
159
  --uui-info-70: var(--sky-70);
160
+ --uui-info-contrast: var(--white);
156
161
 
157
162
  // "core/semantic/primary-"
158
163
  --uui-primary-5: var(--sky-5);
@@ -161,6 +166,7 @@
161
166
  --uui-primary-50: var(--sky-50);
162
167
  --uui-primary-60: var(--sky-60);
163
168
  --uui-primary-70: var(--sky-70);
169
+ --uui-primary-contrast: var(--white);
164
170
 
165
171
  // "core/semantic/secondary-"
166
172
  --uui-secondary-5: var(--night100);
@@ -169,6 +175,7 @@
169
175
  --uui-secondary-50: var(--night600);
170
176
  --uui-secondary-60: var(--night700);
171
177
  --uui-secondary-70: var(--night800);
178
+ --uui-secondary-contrast: var(--white);
172
179
 
173
180
  // "core/semantic/success-"
174
181
  --uui-success-5: var(--grass-5);
@@ -177,6 +184,7 @@
177
184
  --uui-success-50: var(--grass-50);
178
185
  --uui-success-60: var(--grass-60);
179
186
  --uui-success-70: var(--grass-70);
187
+ --uui-success-contrast: var(--white);
180
188
 
181
189
  // "core/semantic/warning-"
182
190
  --uui-warning-5: var(--sun-5);
@@ -185,6 +193,7 @@
185
193
  --uui-warning-50: var(--sun-50);
186
194
  --uui-warning-60: var(--sun-60);
187
195
  --uui-warning-70: var(--sun-70);
196
+ --uui-warning-contrast: var(--night800);
188
197
 
189
198
  /********************/
190
199
  /*** Core Neutral ***/
@@ -261,4 +270,6 @@
261
270
  --uui-text-success: var(--uui-success-70);
262
271
  --uui-text-tertiary: var(--uui-neutral-60);
263
272
  --uui-text-warning: var(--uui-warning-70);
264
- }
273
+
274
+ @include colorClasses.theme-color-classes;
275
+ }
package/theme/tokens/_theme_promo.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
 
@@ -129,6 +130,7 @@
129
130
  --uui-accent-50: var(--green-50);
130
131
  --uui-accent-60: var(--green-60);
131
132
  --uui-accent-70: var(--green-70);
133
+ --uui-accent-contrast: var(--white);
132
134
 
133
135
  // "core/semantic/critical-"
134
136
  --uui-critical-5: var(--red-5);
@@ -137,6 +139,7 @@
137
139
  --uui-critical-50: var(--red-50);
138
140
  --uui-critical-60: var(--red-60);
139
141
  --uui-critical-70: var(--red-70);
142
+ --uui-critical-contrast: var(--white);
140
143
 
141
144
  // "core/semantic/error-"
142
145
  --uui-error-5: var(--red-5);
@@ -145,6 +148,7 @@
145
148
  --uui-error-50: var(--red-50);
146
149
  --uui-error-60: var(--red-60);
147
150
  --uui-error-70: var(--red-70);
151
+ --uui-error-contrast: var(--white);
148
152
 
149
153
  // "core/semantic/info-"
150
154
  --uui-info-5: var(--blue-5);
@@ -153,6 +157,7 @@
153
157
  --uui-info-50: var(--blue-50);
154
158
  --uui-info-60: var(--blue-60);
155
159
  --uui-info-70: var(--blue-70);
160
+ --uui-info-contrast: var(--white);
156
161
 
157
162
  // "core/semantic/primary-"
158
163
  --uui-primary-5: var(--blue-5);
@@ -161,6 +166,7 @@
161
166
  --uui-primary-50: var(--blue-50);
162
167
  --uui-primary-60: var(--blue-60);
163
168
  --uui-primary-70: var(--blue-70);
169
+ --uui-primary-contrast: var(--white);
164
170
 
165
171
  // "core/semantic/secondary-"
166
172
  --uui-secondary-5: var(--gray10);
@@ -169,6 +175,7 @@
169
175
  --uui-secondary-50: var(--gray60);
170
176
  --uui-secondary-60: var(--gray70);
171
177
  --uui-secondary-70: var(--gray80);
178
+ --uui-secondary-contrast: var(--white);
172
179
 
173
180
  // "core/semantic/success-"
174
181
  --uui-success-5: var(--green-5);
@@ -177,6 +184,7 @@
177
184
  --uui-success-50: var(--green-50);
178
185
  --uui-success-60: var(--green-60);
179
186
  --uui-success-70: var(--green-70);
187
+ --uui-success-contrast: var(--white);
180
188
 
181
189
  // "core/semantic/warning-"
182
190
  --uui-warning-5: var(--amber-5);
@@ -185,6 +193,7 @@
185
193
  --uui-warning-50: var(--amber-50);
186
194
  --uui-warning-60: var(--amber-60);
187
195
  --uui-warning-70: var(--amber-70);
196
+ --uui-warning-contrast: var(--gray80);
188
197
 
189
198
  /********************/
190
199
  /*** Core Neutral ***/
@@ -261,4 +270,6 @@
261
270
  --uui-text-success: var(--uui-success-70);
262
271
  --uui-text-tertiary: var(--uui-neutral-60);
263
272
  --uui-text-warning: var(--uui-warning-70);
264
- }
273
+
274
+ @include colorClasses.theme-color-classes;
275
+ }