@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/css/theme/theme_electric.css CHANGED
@@ -180,48 +180,56 @@
180
180
  --uui-accent-50:var(--emerald-50);
181
181
  --uui-accent-60:var(--emerald-60);
182
182
  --uui-accent-70:var(--emerald-70);
183
+ --uui-accent-contrast:var(--white);
183
184
  --uui-critical-5:var(--fire-5);
184
185
  --uui-critical-10:var(--fire-10);
185
186
  --uui-critical-20:var(--fire-20);
186
187
  --uui-critical-50:var(--fire-50);
187
188
  --uui-critical-60:var(--fire-60);
188
189
  --uui-critical-70:var(--fire-70);
190
+ --uui-critical-contrast:var(--white);
189
191
  --uui-error-5:var(--fire-5);
190
192
  --uui-error-10:var(--fire-10);
191
193
  --uui-error-20:var(--fire-20);
192
194
  --uui-error-50:var(--fire-50);
193
195
  --uui-error-60:var(--fire-60);
194
196
  --uui-error-70:var(--fire-70);
197
+ --uui-error-contrast:var(--white);
195
198
  --uui-info-5:var(--electric-5);
196
199
  --uui-info-10:var(--electric-10);
197
200
  --uui-info-20:var(--electric-20);
198
201
  --uui-info-50:var(--electric-50);
199
202
  --uui-info-60:var(--electric-60);
200
203
  --uui-info-70:var(--electric-70);
204
+ --uui-info-contrast:var(--white);
201
205
  --uui-primary-5:var(--electric-5);
202
206
  --uui-primary-10:var(--electric-10);
203
207
  --uui-primary-20:var(--electric-20);
204
208
  --uui-primary-50:var(--electric-50);
205
209
  --uui-primary-60:var(--electric-60);
206
210
  --uui-primary-70:var(--electric-70);
211
+ --uui-primary-contrast:var(--white);
207
212
  --uui-secondary-5:var(--night100);
208
213
  --uui-secondary-10:var(--night200);
209
214
  --uui-secondary-20:var(--night300);
210
215
  --uui-secondary-50:var(--night600);
211
216
  --uui-secondary-60:var(--night700);
212
217
  --uui-secondary-70:var(--night800);
218
+ --uui-secondary-contrast:var(--white);
213
219
  --uui-success-5:var(--emerald-5);
214
220
  --uui-success-10:var(--emerald-10);
215
221
  --uui-success-20:var(--emerald-20);
216
222
  --uui-success-50:var(--emerald-50);
217
223
  --uui-success-60:var(--emerald-60);
218
224
  --uui-success-70:var(--emerald-70);
225
+ --uui-success-contrast:var(--white);
219
226
  --uui-warning-5:var(--sun-5);
220
227
  --uui-warning-10:var(--sun-10);
221
228
  --uui-warning-20:var(--sun-20);
222
229
  --uui-warning-50:var(--sun-50);
223
230
  --uui-warning-60:var(--sun-60);
224
231
  --uui-warning-70:var(--sun-70);
232
+ --uui-warning-contrast:var(--uui-neutral-80);
225
233
  --uui-neutral-0:var(--white);
226
234
  --uui-neutral-5:var(--night50);
227
235
  --uui-neutral-10:var(--night100);
@@ -284,14 +292,6 @@
284
292
  --gradient-3:linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%);
285
293
  --gradient-4:linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
286
294
  --gradient-5:linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
287
- --uui-primary-contrast:var(--white);
288
- --uui-accent-contrast:var(--white);
289
- --uui-secondary-contrast:var(--white);
290
- --uui-critical-contrast:var(--white);
291
- --uui-info-contrast:var(--white);
292
- --uui-success-contrast:var(--white);
293
- --uui-warning-contrast:var(--uui-neutral-80);
294
- --uui-error-contrast:var(--white);
295
295
  --uui-shadow-level-1:0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
296
296
  --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);
297
297
  --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);
@@ -307,7 +307,6 @@
307
307
  --uui-icon-size:12px;
308
308
  --uui-line-height:12px;
309
309
  --uui-font-size:12px;
310
- --uui-dot-size:6px;
311
310
  }
312
311
  .uui-theme-electric .uui-size-18{
313
312
  --uui-size:18px;
@@ -319,7 +318,6 @@
319
318
  --uui-icon-size:12px;
320
319
  --uui-line-height:12px;
321
320
  --uui-font-size:10px;
322
- --uui-dot-size:6px;
323
321
  }
324
322
  .uui-theme-electric .uui-size-24{
325
323
  --uui-size:24px;
@@ -331,7 +329,6 @@
331
329
  --uui-icon-size:12px;
332
330
  --uui-line-height:18px;
333
331
  --uui-font-size:12px;
334
- --uui-dot-size:8px;
335
332
  }
336
333
  .uui-theme-electric .uui-size-30{
337
334
  --uui-size:30px;
@@ -343,7 +340,6 @@
343
340
  --uui-icon-size:18px;
344
341
  --uui-line-height:18px;
345
342
  --uui-font-size:14px;
346
- --uui-dot-size:8px;
347
343
  }
348
344
  .uui-theme-electric .uui-size-36{
349
345
  --uui-size:36px;
@@ -355,7 +351,6 @@
355
351
  --uui-icon-size:18px;
356
352
  --uui-line-height:18px;
357
353
  --uui-font-size:14px;
358
- --uui-dot-size:8px;
359
354
  }
360
355
  .uui-theme-electric .uui-size-42{
361
356
  --uui-size:42px;
@@ -367,7 +362,6 @@
367
362
  --uui-icon-size:18px;
368
363
  --uui-line-height:24px;
369
364
  --uui-font-size:16px;
370
- --uui-dot-size:10px;
371
365
  }
372
366
  .uui-theme-electric .uui-size-48{
373
367
  --uui-size:48px;
@@ -379,7 +373,6 @@
379
373
  --uui-icon-size:24px;
380
374
  --uui-line-height:24px;
381
375
  --uui-font-size:16px;
382
- --uui-dot-size:12px;
383
376
  }
384
377
  .uui-theme-electric .uui-size-60{
385
378
  --uui-size:60px;
@@ -391,7 +384,6 @@
391
384
  --uui-icon-size:24px;
392
385
  --uui-line-height:24px;
393
386
  --uui-font-size:20px;
394
- --uui-dot-size:12px;
395
387
  }
396
388
  .uui-theme-electric .uui-input-box.uui-size-42{
397
389
  --uui-horizontal-padding:6px;
@@ -399,12 +391,6 @@
399
391
  .uui-theme-electric .uui-input-box.uui-size-48{
400
392
  --uui-horizontal-padding:6px;
401
393
  }
402
- .uui-theme-electric .uui-input-box.uui-textarea{
403
- --uui-horizontal-padding:12px;
404
- }
405
- .uui-theme-electric .uui-input-box.uui-textarea.uui-size-24{
406
- --uui-line-height:12px;
407
- }
408
394
  .uui-theme-electric .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
409
395
  --uui-horizontal-padding:12px;
410
396
  --uui-horizontal-gap:6px;
@@ -468,69 +454,23 @@
468
454
  --uui-line-height:24px;
469
455
  --uui-font-size:16px;
470
456
  }
471
- .uui-theme-electric .uui-labeled-input.uui-size-30{
472
- --uui-icon-size:12px;
473
- --uui-font-size:12px;
474
- }
475
- .uui-theme-electric .uui-labeled-input.uui-size-42{
476
- --uui-line-height:18px;
477
- --uui-font-size:14px;
478
- }
479
- .uui-theme-electric .uui-labeled-input.uui-size-48{
480
- --uui-icon-size:18px;
481
- --uui-line-height:18px;
482
- --uui-font-size:14px;
483
- }
484
- .uui-theme-electric .uui-badge.uui-size-18{
485
- --uui-font-size:12px;
486
- }
487
- .uui-theme-electric .uui-badge.uui-size-24{
488
- --uui-horizontal-padding:3px;
489
- --uui-icon-size:18px;
490
- --uui-line-height:12px;
491
- }
492
- .uui-theme-electric .uui-badge.uui-size-36{
493
- --uui-horizontal-padding:9px;
494
- }
495
- .uui-theme-electric .uui-badge.uui-size-42{
496
- --uui-icon-size:24px;
497
- }
498
- .uui-theme-electric .uui-status_indicator.uui-size-12{
499
- --uui-horizontal-gap:4px;
500
- }
501
- .uui-theme-electric .uui-status_indicator.uui-size-18{
502
- --uui-horizontal-gap:6px;
503
- --uui-line-height:18px;
504
- --uui-font-size:14px;
505
- --uui-dot-size:8px;
506
- }
507
- .uui-theme-electric .uui-status_indicator.uui-size-24{
508
- --uui-font-size:14px;
509
- --uui-dot-size:10px;
510
- }
511
- .uui-theme-electric .uui-count_indicator.uui-size-12{
512
- --uui-horizontal-padding:3px;
513
- --uui-line-height:10px;
514
- --uui-font-size:8px;
515
- }
516
- .uui-theme-electric .uui-count_indicator.uui-size-18{
517
- --uui-horizontal-padding:6px;
518
- --uui-line-height:16px;
519
- --uui-font-size:12px;
520
- }
521
- .uui-theme-electric .uui-count_indicator.uui-size-24{
522
- --uui-line-height:22px;
523
- --uui-font-size:14px;
524
- }
525
- .uui-theme-electric .uui-color-primary,
526
- .uui-theme-electric .uui-color-info{
457
+ .uui-theme-electric .uui-color-primary{
527
458
  --uui-color-5:var(--uui-primary-5);
528
459
  --uui-color-10:var(--uui-primary-10);
529
460
  --uui-color-20:var(--uui-primary-20);
530
461
  --uui-color-50:var(--uui-primary-50);
531
462
  --uui-color-60:var(--uui-primary-60);
532
463
  --uui-color-70:var(--uui-primary-70);
533
- --uui-color-contrast:var(--white);
464
+ --uui-color-contrast:var(--uui-primary-contrast);
465
+ }
466
+ .uui-theme-electric .uui-color-secondary{
467
+ --uui-color-5:var(--uui-secondary-5);
468
+ --uui-color-10:var(--uui-secondary-10);
469
+ --uui-color-20:var(--uui-secondary-20);
470
+ --uui-color-50:var(--uui-secondary-50);
471
+ --uui-color-60:var(--uui-secondary-60);
472
+ --uui-color-70:var(--uui-secondary-70);
473
+ --uui-color-contrast:var(--uui-secondary-contrast);
534
474
  }
535
475
  .uui-theme-electric .uui-color-accent{
536
476
  --uui-color-5:var(--uui-accent-5);
@@ -539,18 +479,52 @@
539
479
  --uui-color-50:var(--uui-accent-50);
540
480
  --uui-color-60:var(--uui-accent-60);
541
481
  --uui-color-70:var(--uui-accent-70);
542
- --uui-color-contrast:var(--white);
482
+ --uui-color-contrast:var(--uui-accent-contrast);
483
+ }
484
+ .uui-theme-electric .uui-color-info{
485
+ --uui-color-5:var(--uui-info-5);
486
+ --uui-color-10:var(--uui-info-10);
487
+ --uui-color-20:var(--uui-info-20);
488
+ --uui-color-50:var(--uui-info-50);
489
+ --uui-color-60:var(--uui-info-60);
490
+ --uui-color-70:var(--uui-info-70);
491
+ --uui-color-contrast:var(--uui-info-contrast);
492
+ }
493
+ .uui-theme-electric .uui-color-success{
494
+ --uui-color-5:var(--uui-success-5);
495
+ --uui-color-10:var(--uui-success-10);
496
+ --uui-color-20:var(--uui-success-20);
497
+ --uui-color-50:var(--uui-success-50);
498
+ --uui-color-60:var(--uui-success-60);
499
+ --uui-color-70:var(--uui-success-70);
500
+ --uui-color-contrast:var(--uui-success-contrast);
501
+ }
502
+ .uui-theme-electric .uui-color-warning{
503
+ --uui-color-5:var(--uui-warning-5);
504
+ --uui-color-10:var(--uui-warning-10);
505
+ --uui-color-20:var(--uui-warning-20);
506
+ --uui-color-50:var(--uui-warning-50);
507
+ --uui-color-60:var(--uui-warning-60);
508
+ --uui-color-70:var(--uui-warning-70);
509
+ --uui-color-contrast:var(--uui-warning-contrast);
543
510
  }
544
- .uui-theme-electric .uui-color-fire,
545
- .uui-theme-electric .uui-color-critical,
546
511
  .uui-theme-electric .uui-color-error{
512
+ --uui-color-5:var(--uui-error-5);
513
+ --uui-color-10:var(--uui-error-10);
514
+ --uui-color-20:var(--uui-error-20);
515
+ --uui-color-50:var(--uui-error-50);
516
+ --uui-color-60:var(--uui-error-60);
517
+ --uui-color-70:var(--uui-error-70);
518
+ --uui-color-contrast:var(--uui-error-contrast);
519
+ }
520
+ .uui-theme-electric .uui-color-critical{
547
521
  --uui-color-5:var(--uui-critical-5);
548
522
  --uui-color-10:var(--uui-critical-10);
549
523
  --uui-color-20:var(--uui-critical-20);
550
524
  --uui-color-50:var(--uui-critical-50);
551
525
  --uui-color-60:var(--uui-critical-60);
552
526
  --uui-color-70:var(--uui-critical-70);
553
- --uui-color-contrast:var(--white);
527
+ --uui-color-contrast:var(--uui-critical-contrast);
554
528
  }
555
529
  .uui-theme-electric .uui-color-white{
556
530
  --uui-color-5:color-mix(in srgb, #FFFFFF 15%, transparent);
@@ -561,6 +535,24 @@
561
535
  --uui-color-70:var(--uui-neutral-20);
562
536
  --uui-color-contrast:var(--uui-neutral-70);
563
537
  }
538
+ .uui-theme-electric .uui-color-neutral{
539
+ --uui-color-5:var(--uui-secondary-5);
540
+ --uui-color-10:var(--uui-secondary-10);
541
+ --uui-color-20:var(--uui-secondary-20);
542
+ --uui-color-50:var(--uui-secondary-50);
543
+ --uui-color-60:var(--uui-secondary-60);
544
+ --uui-color-70:var(--uui-secondary-70);
545
+ --uui-color-contrast:var(--uui-secondary-contrast);
546
+ }
547
+ .uui-theme-electric .uui-color-fire{
548
+ --uui-color-5:var(--uui-critical-5);
549
+ --uui-color-10:var(--uui-critical-10);
550
+ --uui-color-20:var(--uui-critical-20);
551
+ --uui-color-50:var(--uui-critical-50);
552
+ --uui-color-60:var(--uui-critical-60);
553
+ --uui-color-70:var(--uui-critical-70);
554
+ --uui-color-contrast:var(--white);
555
+ }
564
556
  .uui-theme-electric .uui-color-night100{
565
557
  --uui-color-5:var(--white);
566
558
  --uui-color-10:var(--white);
@@ -579,8 +571,6 @@
579
571
  --uui-color-70:var(--night500);
580
572
  --uui-color-contrast:var(--uui-neutral-80);
581
573
  }
582
- .uui-theme-electric .uui-color-neutral,
583
- .uui-theme-electric .uui-color-secondary,
584
574
  .uui-theme-electric .uui-color-night600{
585
575
  --uui-color-5:var(--uui-secondary-5);
586
576
  --uui-color-10:var(--uui-secondary-10);
@@ -599,17 +589,7 @@
599
589
  --uui-color-70:var(--night900);
600
590
  --uui-color-contrast:var(--white);
601
591
  }
602
- .uui-theme-electric .uui-color-success{
603
- --uui-color-5:var(--uui-success-5);
604
- --uui-color-10:var(--uui-success-10);
605
- --uui-color-20:var(--uui-success-20);
606
- --uui-color-50:var(--uui-success-50);
607
- --uui-color-60:var(--uui-success-60);
608
- --uui-color-70:var(--uui-success-70);
609
- --uui-color-contrast:var(--white);
610
- }
611
- .uui-theme-electric .uui-color-sun,
612
- .uui-theme-electric .uui-color-warning{
592
+ .uui-theme-electric .uui-color-sun{
613
593
  --uui-color-5:var(--sun-5);
614
594
  --uui-color-10:var(--sun-10);
615
595
  --uui-color-20:var(--sun-20);
@@ -792,7 +772,7 @@
792
772
  .uui-theme-electric .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning){
793
773
  --uui-count_indicator-caption:var(--uui-neutral-70);
794
774
  }
795
- .uui-theme-electric .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator-dot{
775
+ .uui-theme-electric .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator_dot{
796
776
  background-color:color-mix(in srgb, var(--white) 20%, transparent);
797
777
  border:1px solid var(--uui-neutral-40);
798
778
  }
@@ -898,7 +878,10 @@
898
878
  --uui-count_indicator-bg:var(--uui-neutral-30);
899
879
  --uui-count_indicator-border:var(--uui-neutral-30);
900
880
  }
901
- .uui-theme-electric .uui-typography h1, .uui-theme-electric .uui-typography h3, .uui-theme-electric .uui-typography h4, .uui-theme-electric .uui-typography h5{
881
+ .uui-theme-electric .uui-typography h1{
882
+ font-weight:400;
883
+ }
884
+ .uui-theme-electric .uui-typography h2, .uui-theme-electric .uui-typography h3, .uui-theme-electric .uui-typography h4, .uui-theme-electric .uui-typography h5{
902
885
  font-weight:600;
903
886
  }
904
887
  .uui-theme-electric .uui-typography .promo-header:is(h1, h2, h3, h4, h5, h6){