@epam/assets 5.2.0-rc.3 → 5.2.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 (23) hide show
  1. package/css/theme/theme_loveship.css +1097 -399
  2. package/css/theme/theme_loveship.css.map +1 -1
  3. package/css/theme/theme_promo.css +853 -427
  4. package/css/theme/theme_promo.css.map +1 -1
  5. package/css/theme/theme_vanilla_thunder.css +196 -194
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  7. package/package.json +2 -2
  8. package/scss/loveship/font-faces.scss +0 -120
  9. package/scss/loveship/fonts.scss +4 -20
  10. package/scss/loveship/typography.scss +5 -12
  11. package/scss/promo/font-faces.scss +3 -118
  12. package/scss/promo/fonts.scss +4 -14
  13. package/scss/promo/typography.scss +4 -11
  14. package/theme/theme_loveship.scss +1329 -450
  15. package/theme/theme_promo.scss +1043 -476
  16. package/theme/theme_vanilla_thunder.scss +210 -205
  17. package/css/theme/theme_electric.css +0 -473
  18. package/css/theme/theme_electric.css.map +0 -1
  19. package/css/theme/theme_loveship_dark.css +0 -543
  20. package/css/theme/theme_loveship_dark.css.map +0 -1
  21. package/scss/electric/font-faces.scss +0 -131
  22. package/theme/theme_electric.scss +0 -486
  23. package/theme/theme_loveship_dark.scss +0 -674
package/theme/theme_electric.scss DELETED
@@ -1,486 +0,0 @@
1
- /* Name convention */
2
- /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
-
4
- @import '../scss/electric/font-faces';
5
-
6
- .uui-theme-electric {
7
- --uui-font: 'Source Sans Pro', sans-serif;
8
- --font-primary: 'Museo Sans', 'Source Sans Pro', Arial, sans-serif;
9
- --font-promo: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
10
- --font-mono: monospace;
11
-
12
- --night50: #FAFAFC;
13
- --night100: #F5F6FA;
14
- --night200: #EBEDF5;
15
- --night300: #E1E3EB;
16
- --night400: #CED0DB;
17
- --night500: #ACAFBF;
18
- --night600: #6C6F80;
19
- --night700: #474A59;
20
- --night800: #303240;
21
- --night900: #1D1E26;
22
- --night950: #111111;
23
-
24
- --electric-5: #F3F8FE;
25
- --electric-10: #CEE1FC;
26
- --electric-20: #85B4F8;
27
- --electric-50: #0A68F1;
28
- --electric-60: #095ED9;
29
- --electric-70: #0853C1;
30
-
31
- --emerald-5: #F3FBF7;
32
- --emerald-10: #CDEEDD;
33
- --emerald-20: #97D9B7;
34
- --emerald-50: #07A956;
35
- --emerald-60: #06984D;
36
- --emerald-70: #068745;
37
-
38
- --sun-5: #FFFCF5;
39
- --sun-10: #FFEDC9;
40
- --sun-20: #FFD785;
41
- --sun-50: #FCAA00;
42
- --sun-60: #FF9000;
43
- --sun-70: #BD5800;
44
-
45
- --fire-5: #FEF6F6;
46
- --fire-10: #FDE1E1;
47
- --fire-20: #FBB6B6;
48
- --fire-50: #FF4242;
49
- --fire-60: #E22A2A;
50
- --fire-70: #AD0000;
51
-
52
- --white: #FFFFFF;
53
-
54
- --yellow-5: #FFFFF0;
55
- --yellow-10: #FFFECC;
56
- --yellow-20: #FFFCA4;
57
- --yellow-30: #FDD63B;
58
- --yellow-40: #F9B71D;
59
- --yellow-50: #D3910C;
60
-
61
- --orange-5: #FEF8F4;
62
- --orange-10: #FFE8D7;
63
- --orange-20: #FFCCA7;
64
- --orange-30: #FF8B3E;
65
- --orange-40: #F76B0D;
66
- --orange-50: #BD4B00;
67
-
68
- --fuchsia-5: #FFF7FB;
69
- --fuchsia-10: #F9D8E7;
70
- --fuchsia-20: #EDADC8;
71
- --fuchsia-30: #EA4386;
72
- --fuchsia-40: #D61E68;
73
- --fuchsia-50: #AE1955;
74
-
75
- --purple-5: #FDF6FE;
76
- --purple-10: #F2CCFA;
77
- --purple-20: #E79DF5;
78
- --purple-30: #B114D1;
79
- --purple-40: #860F9E;
80
- --purple-50: #5E0B6F;
81
-
82
- --lavanda-5: #F8F6FE;
83
- --lavanda-10: #DBCCFA;
84
- --lavanda-20: #BB9DF5;
85
- --lavanda-30: #773CEC;
86
- --lavanda-40: #5514D6;
87
- --lavanda-50: #40109E;
88
-
89
- --cobalt-5: #F8FAFF;
90
- --cobalt-10: #D9E2FC;
91
- --cobalt-20: #AEC0F5;
92
- --cobalt-30: #0F98FF;
93
- --cobalt-40: #006FE5;
94
- --cobalt-50: #0954A5;
95
-
96
- --cyan-5: #F5FBFF;
97
- --cyan-10: #D1FAFA;
98
- --cyan-20: #AAEEEE;
99
- --cyan-30: #14CCCC;
100
- --cyan-40: #0F9E9E;
101
- --cyan-50: #0B6F6F;
102
-
103
- --mint-5: #F2FCF5;
104
- --mint-10: #DDF3E4;
105
- --mint-20: #B4DFC4;
106
- --mint-30: #4FC48C;
107
- --mint-40: #2E9E68;
108
- --mint-50: #236E4A;
109
-
110
- --gradient-1: linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
111
- --gradient-2: linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
112
- --gradient-3: linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%);
113
- --gradient-4: linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
114
- --gradient-5: linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
115
-
116
- /* core variables start */
117
-
118
- /* brand colors */
119
-
120
- --uui-accent-5: var(--emerald-5);
121
- --uui-accent-10: var(--emerald-10);
122
- --uui-accent-20: var(--emerald-20);
123
- --uui-accent-50: var(--emerald-50);
124
- --uui-accent-60: var(--emerald-60);
125
- --uui-accent-70: var(--emerald-70);
126
-
127
- --uui-primary-5: var(--electric-5);
128
- --uui-primary-10: var(--electric-10);
129
- --uui-primary-20: var(--electric-20);
130
- --uui-primary-50: var(--electric-50);
131
- --uui-primary-60: var(--electric-60);
132
- --uui-primary-70: var(--electric-70);
133
-
134
- --uui-secondary-5: var(--night200);
135
- --uui-secondary-10: var(--night300);
136
- --uui-secondary-20: var(--night400);
137
- --uui-secondary-50: var(--night600);
138
- --uui-secondary-60: var(--night700);
139
- --uui-secondary-70: var(--night800);
140
-
141
- --uui-critical-5: var(--fire-5);
142
- --uui-critical-10: var(--fire-10);
143
- --uui-critical-20: var(--fire-20);
144
- --uui-critical-50: var(--fire-50);
145
- --uui-critical-60: var(--fire-60);
146
- --uui-critical-70: var(--fire-70);
147
-
148
- /* semantic colors */
149
-
150
- --uui-info-5: var(--electric-5);
151
- --uui-info-10: var(--electric-10);
152
- --uui-info-20: var(--electric-20);
153
- --uui-info-50: var(--electric-50);
154
- --uui-info-60: var(--electric-60);
155
- --uui-info-70: var(--electric-70);
156
-
157
- --uui-success-5: var(--emerald-5);
158
- --uui-success-10: var(--emerald-10);
159
- --uui-success-20: var(--emerald-20);
160
- --uui-success-50: var(--emerald-50);
161
- --uui-success-60: var(--emerald-60);
162
- --uui-success-70: var(--emerald-70);
163
-
164
- --uui-warning-5: var(--sun-5);
165
- --uui-warning-10: var(--sun-10);
166
- --uui-warning-20: var(--sun-20);
167
- --uui-warning-50: var(--sun-50);
168
- --uui-warning-60: var(--sun-60);
169
- --uui-warning-70: var(--sun-70);
170
-
171
- --uui-error-5: var(--fire-5);
172
- --uui-error-10: var(--fire-10);
173
- --uui-error-20: var(--fire-20);
174
- --uui-error-50: var(--fire-50);
175
- --uui-error-60: var(--fire-60);
176
- --uui-error-70: var(--fire-70);
177
-
178
- --uui-neutral-0: #FFFFFF;
179
- --uui-neutral-5: var(--night50);
180
- --uui-neutral-10: var(--night100);
181
- --uui-neutral-20: var(--night200);
182
- --uui-neutral-30: var(--night300);
183
- --uui-neutral-40: var(--night400);
184
- --uui-neutral-50: var(--night500);
185
- --uui-neutral-60: var(--night600);
186
- --uui-neutral-70: var(--night700);
187
- --uui-neutral-80: var(--night800);
188
- --uui-neutral-90: var(--night900);
189
- --uui-neutral-100: #000000;
190
-
191
- /* Surfaces Figma - https://www.figma.com/file/M5Njgc6SQJ3TPUccp5XHQx/Loveship-aka-UUI3-(Components)?type=design&node-id=20044%3A300925&mode=design&t=R433dqGrpXDGoFli-1 */
192
-
193
- --uui-app-bg: var(--uui-neutral-10);
194
- --uui-overlay: rgba(29, 30, 38, 0.8);
195
-
196
- --uui-surface: var(--uui-neutral-0);
197
- --uui-surface-low: var(--uui-neutral-5);
198
- --uui-surface-lower: var(--uui-neutral-10);
199
- --uui-surface-lowest: var(--uui-neutral-20);
200
- --uui-surface-contrast: var(--uui-neutral-70);
201
- --uui-surface-contrast-low: var(--uui-neutral-80);
202
- --uui-surface-contrast-lower: var(--uui-neutral-90);
203
-
204
- --uui-surface-active: var(--sky-lightest);
205
- --uui-surface-critical: var(--fire-lightest);
206
- --uui-surface-warning: var(--sun-lightest);
207
-
208
- --uui-divider: var(--uui-neutral-40);
209
- --uui-divider-light: var(--uui-neutral-30);
210
-
211
- --uui-text-brand: var(--uui-neutral-90);
212
- --uui-text-primary: var(--night950);
213
- --uui-text-secondary: var(--uui-neutral-70);
214
- --uui-text-tertiary: var(--uui-neutral-60);
215
- --uui-text-disabled: var(--uui-neutral-50);
216
- --uui-text-contrast: var(--uui-neutral-5);
217
- --uui-text-white: var(--white);
218
- --uui-text-dark: var(--night800);
219
-
220
- --uui-text-info: var(--uui-info-50);
221
- --uui-text-warning: var(--uui-warning-50);
222
- --uui-text-error: var(--uui-error-50);
223
- --uui-text-success: var(--uui-success-50);
224
-
225
- /* not accepted part */
226
-
227
- --uui-disabled: var(--uui-neutral-30); // TODO: name does not clearly reflect the meaning
228
-
229
- /* control specific */
230
-
231
- --uui-link: var(--sky);
232
- --uui-link-hover: var(--sky-dark);
233
- --uui-link-wite-hover: var(--uui-neutral-40);
234
- --uui-link-black-hover: var(--uui-neutral-80);
235
- --uui-link-visited: #8018A0;
236
- --uui-link-disabled: var(--uui-neutral-50);
237
-
238
- --uui-icon: var(--uui-neutral-60);
239
- --uui-icon-hover: var(--uui-neutral-70);
240
- --uui-icon-active: var(--uui-neutral-80);
241
- --uui-icon-disabled: var(--uui-neutral-50);
242
-
243
- --uui-scroll_bars-bg: var(--uui-neutral-40);
244
- --uui-scroll_bars-bg-active: var(--uui-neutral-60);
245
-
246
- --uui-control-bg: var(--uui-surface);
247
- --uui-control-bg-hover: var(--uui-neutral-60);
248
- --uui-control-bg-disabled: var(--uui-neutral-5);
249
- --uui-control-bg-readonly: var(--uui-neutral-5);
250
-
251
- --uui-control-border: var(--uui-neutral-40);
252
- --uui-control-border-hover: var(--uui-neutral-60);
253
- --uui-control-border-disabled: var(--uui-neutral-30);
254
- --uui-control-border-readonly: var(--uui-neutral-30);
255
- --uui-control-border-checked: var(--uui-primary-50);
256
-
257
- --uui-control-label: var(--uui-text-primary);
258
- --uui-control-label-disabled: var(--uui-text-disabled);
259
-
260
- --uui-control-placeholder: var(--uui-text-tertiary);
261
- --uui-control-placeholder-disabled: var(--uui-text-disabled); // one place of usage
262
-
263
- --uui-control-text: var(--uui-text-primary);
264
- --uui-control-text-disabled: var(--uui-text-disabled);
265
-
266
- --uui-control-icon: var(--uui-neutral-50);
267
- --uui-control-icon-disabled: var(--uui-neutral-50);
268
-
269
- --uui-control-checkbox-icon: var(--uui-neutral-0);
270
-
271
- --uui-control-focus: #008ACE80;
272
-
273
- --uui-search-result-highlight: var(--uui-warning-10);
274
-
275
- --uui-skeleton: var(--uui-neutral-40);
276
- --uui-skeleton-gradient: linear-gradient(90deg, var(--uui-neutral-40) 0%, var(--uui-neutral-10) 50%, var(--uui-neutral-40) 100%);
277
-
278
- --uui-border-radius: 3px;
279
- --uui-shadow-level-1: 0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
280
- --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);
281
- --uui-shadow-level-3: 0 0 10px rgba(29, 30, 38, 0.05), 0 6px 24px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.1);
282
-
283
- /* core variables end */
284
-
285
- /* ------------------------------------ */
286
-
287
- /* override variables */
288
-
289
- --uui-accordion-border-radius: 6px;
290
-
291
- /* begin color classes */
292
-
293
- .uui-color-accent,
294
- .uui-color-emerald,
295
- .uui-color-success {
296
- --uui-color-5: var(--uui-accent-5);
297
- --uui-color-10: var(--uui-accent-10);
298
- --uui-color-20: var(--uui-accent-20);
299
- --uui-color-50: var(--uui-accent-50);
300
- --uui-color-60: var(--uui-accent-60);
301
- --uui-color-70: var(--uui-accent-70);
302
- --uui-color-text: var(--uui-accent-50);
303
- --uui-color-contrast-text: var(--uui-text-white);
304
- }
305
-
306
- .uui-color-primary,
307
- .uui-color-electric,
308
- .uui-color-info {
309
- --uui-color-5: var(--uui-primary-5);
310
- --uui-color-10: var(--uui-primary-10);
311
- --uui-color-20: var(--uui-primary-20);
312
- --uui-color-50: var(--uui-primary-50);
313
- --uui-color-60: var(--uui-primary-60);
314
- --uui-color-70: var(--uui-primary-70);
315
- --uui-color-text: var(--uui-primary-50);
316
- --uui-color-contrast-text: var(--uui-text-white);
317
- }
318
-
319
- .uui-color-fire,
320
- .uui-color-critical,
321
- .uui-color-error {
322
- --uui-color-5: var(--uui-critical-5);
323
- --uui-color-10: var(--uui-critical-10);
324
- --uui-color-20: var(--uui-critical-20);
325
- --uui-color-50: var(--uui-critical-50);
326
- --uui-color-60: var(--uui-critical-60);
327
- --uui-color-70: var(--uui-critical-70);
328
- --uui-color-text: var(--uui-critical-50);
329
- --uui-color-contrast-text: var(--uui-text-white);
330
- }
331
-
332
- .uui-color-gray,
333
- .uui-color-secondary { // +
334
- --uui-color-5: var(--uui-secondary-5);
335
- --uui-color-10: var(--uui-secondary-10);
336
- --uui-color-20: var(--uui-secondary-20);
337
- --uui-color-50: var(--uui-secondary-50);
338
- --uui-color-60: var(--uui-secondary-60);
339
- --uui-color-70: var(--uui-secondary-70);
340
- --uui-color-text: var(--uui-secondary-60);
341
- --uui-color-contrast-text: var(--uui-text-white);
342
- }
343
-
344
- .uui-color-sun,
345
- .uui-color-warning {
346
- --uui-color-5: var(--sun-5);
347
- --uui-color-10: var(--sun-10);
348
- --uui-color-20: var(--sun-20);
349
- --uui-color-50: var(--sun-50);
350
- --uui-color-60: var(--sun-60);
351
- --uui-color-70: var(--sun-70);
352
- --uui-color-text: var(--sun-70);
353
- --uui-color-contrast-text: var(--uui-text-dark);
354
- }
355
-
356
- .uui-color-yellow {
357
- --uui-color-5: var(--yellow-5);
358
- --uui-color-10: var(--yellow-10);
359
- --uui-color-20: var(--yellow-20);
360
- --uui-color-50: var(--yellow-30);
361
- --uui-color-60: var(--yellow-40);
362
- --uui-color-70: var(--yellow-50);
363
- --uui-color-text: var(--yellow-50);
364
- --uui-color-contrast-text: var(--uui-text-dark);
365
- }
366
-
367
- .uui-color-orange {
368
- --uui-color-5: var(--orange-5);
369
- --uui-color-10: var(--orange-10);
370
- --uui-color-20: var(--orange-20);
371
- --uui-color-50: var(--orange-30);
372
- --uui-color-60: var(--orange-40);
373
- --uui-color-70: var(--orange-50);
374
- --uui-color-text: var(--orange-50);
375
- --uui-color-contrast-text: var(--uui-text-dark);
376
- }
377
-
378
- .uui-color-fuchsia {
379
- --uui-color-5: var(--fuchsia-5);
380
- --uui-color-10: var(--fuchsia-10);
381
- --uui-color-20: var(--fuchsia-20);
382
- --uui-color-50: var(--fuchsia-30);
383
- --uui-color-60: var(--fuchsia-40);
384
- --uui-color-70: var(--fuchsia-50);
385
- --uui-color-text: var(--fuchsia-50);
386
- --uui-color-contrast-text: var(--uui-text-white);
387
- }
388
-
389
- .uui-color-purple {
390
- --uui-color-5: var(--purple-5);
391
- --uui-color-10: var(--purple-10);
392
- --uui-color-20: var(--purple-20);
393
- --uui-color-50: var(--purple-30);
394
- --uui-color-60: var(--purple-40);
395
- --uui-color-70: var(--purple-50);
396
- --uui-color-text: var(--purple-50);
397
- --uui-color-contrast-text: var(--uui-text-white);
398
- }
399
-
400
- .uui-color-lavanda {
401
- --uui-color-5: var(--lavanda-5);
402
- --uui-color-10: var(--lavanda-10);
403
- --uui-color-20: var(--lavanda-20);
404
- --uui-color-50: var(--lavanda-30);
405
- --uui-color-60: var(--lavanda-40);
406
- --uui-color-70: var(--lavanda-50);
407
- --uui-color-text: var(--lavanda-50);
408
- --uui-color-contrast-text: var(--uui-text-white);
409
- }
410
-
411
- .uui-color-cobalt {
412
- --uui-color-5: var(--cobalt-5);
413
- --uui-color-10: var(--cobalt-10);
414
- --uui-color-20: var(--cobalt-20);
415
- --uui-color-50: var(--cobalt-30);
416
- --uui-color-60: var(--cobalt-40);
417
- --uui-color-70: var(--cobalt-50);
418
- --uui-color-text: var(--cobalt-50);
419
- --uui-color-contrast-text: var(--uui-text-white);
420
- }
421
-
422
- .uui-color-cyan {
423
- --uui-color-5: var(--cyan-5);
424
- --uui-color-10: var(--cyan-10);
425
- --uui-color-20: var(--cyan-20);
426
- --uui-color-50: var(--cyan-30);
427
- --uui-color-60: var(--cyan-40);
428
- --uui-color-70: var(--cyan-50);
429
- --uui-color-text: var(--cyan-50);
430
- --uui-color-contrast-text: var(--uui-text-dark);
431
- }
432
-
433
- .uui-color-mint {
434
- --uui-color-5: var(--mint-5);
435
- --uui-color-10: var(--mint-10);
436
- --uui-color-20: var(--mint-20);
437
- --uui-color-50: var(--mint-30);
438
- --uui-color-60: var(--mint-40);
439
- --uui-color-70: var(--mint-50);
440
- --uui-color-text: var(--mint-50);
441
- --uui-color-contrast-text: var(--uui-text-dark);
442
- }
443
-
444
- .uui-badge.uui-color-neutral {
445
- --uui-color-5: var(--night200);
446
- --uui-color-10: var(--night300);
447
- --uui-color-20: var(--night400);
448
- --uui-color-50: var(--night300);
449
- --uui-color-60: var(--night400);
450
- --uui-color-70: var(--night500);
451
- --uui-color-text: var(--uui-text-primary);
452
- --uui-color-contrast-text: var(--uui-text-primary);
453
- }
454
-
455
- .uui-icon_button.uui-color-neutral {
456
- --uui-color-5: var(--uui-secondary-5);
457
- --uui-color-10: var(--uui-secondary-10);
458
- --uui-color-20: var(--uui-secondary-20);
459
- --uui-color-50: var(--uui-secondary-50);
460
- --uui-color-60: var(--uui-secondary-60);
461
- --uui-color-70: var(--uui-secondary-70);
462
- --uui-color-text: var(--uui-secondary-60);
463
- --uui-color-contrast-text: var(--uui-text-white);
464
- }
465
-
466
- .uui-tooltip-container.uui-color-neutral {
467
- --uui-color-50: var(--white);
468
- --uui-color-contrast-text: var(--uui-text-dark);
469
- }
470
-
471
- .uui-tooltip-container.uui-color-critical {
472
- --uui-color-50: var(--uui-critical-60);
473
- }
474
-
475
- .uui-tooltip-container.uui-color-contrast {
476
- --uui-color-50: var(--night800);
477
- --uui-color-contrast-text: var(--uui-text-white);
478
- }
479
-
480
- /* Informer */
481
-
482
- .uui-informer.uui-color-neutral {
483
- --uui-color-50: var(--uui-neutral-30);
484
- --uui-informer-caption: var(--uui-text-dark);
485
- }
486
- }