@epam/assets 5.9.0-beta.0 → 5.9.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 (35) 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-search-fill.svg +1 -1
  12. package/icons/content-person_contacts-fill.svg +1 -0
  13. package/icons/content-person_contacts-outline.svg +1 -0
  14. package/icons/content-person_group-outline.svg +1 -0
  15. package/icons/editor-headline_h4-outline.svg +1 -0
  16. package/icons/editor-headline_h5-outline.svg +1 -0
  17. package/icons/editor-headline_h6-outline.svg +1 -0
  18. package/icons/external_logo/figma-logo-outline-inverted.svg +1 -0
  19. package/icons/file-file_csv-fill.svg +1 -0
  20. package/icons/navigation-chevron_down-outline.svg +1 -1
  21. package/icons/navigation-chevron_left-outline.svg +1 -1
  22. package/icons/navigation-chevron_right-outline.svg +1 -1
  23. package/icons/navigation-chevron_up-outline.svg +1 -1
  24. package/icons/radio_dot-fill.svg +1 -1
  25. package/package.json +2 -2
  26. package/theme/theme_6px.scss +2 -91
  27. package/theme/theme_electric.scss +8 -68
  28. package/theme/theme_loveship.scss +5 -41
  29. package/theme/theme_loveship_dark.scss +7 -89
  30. package/theme/theme_promo.scss +1 -64
  31. package/theme/tokens/_color_classes.scss +103 -0
  32. package/theme/tokens/_theme_electric.scss +12 -1
  33. package/theme/tokens/_theme_loveship_dark.scss +12 -1
  34. package/theme/tokens/_theme_loveship_light.scss +12 -1
  35. package/theme/tokens/_theme_promo.scss +12 -1
package/css/theme/theme_promo.css CHANGED
@@ -197,48 +197,56 @@
197
197
  --uui-accent-50:var(--green-50);
198
198
  --uui-accent-60:var(--green-60);
199
199
  --uui-accent-70:var(--green-70);
200
+ --uui-accent-contrast:var(--white);
200
201
  --uui-critical-5:var(--red-5);
201
202
  --uui-critical-10:var(--red-10);
202
203
  --uui-critical-20:var(--red-20);
203
204
  --uui-critical-50:var(--red-50);
204
205
  --uui-critical-60:var(--red-60);
205
206
  --uui-critical-70:var(--red-70);
207
+ --uui-critical-contrast:var(--white);
206
208
  --uui-error-5:var(--red-5);
207
209
  --uui-error-10:var(--red-10);
208
210
  --uui-error-20:var(--red-20);
209
211
  --uui-error-50:var(--red-50);
210
212
  --uui-error-60:var(--red-60);
211
213
  --uui-error-70:var(--red-70);
214
+ --uui-error-contrast:var(--white);
212
215
  --uui-info-5:var(--blue-5);
213
216
  --uui-info-10:var(--blue-10);
214
217
  --uui-info-20:var(--blue-20);
215
218
  --uui-info-50:var(--blue-50);
216
219
  --uui-info-60:var(--blue-60);
217
220
  --uui-info-70:var(--blue-70);
221
+ --uui-info-contrast:var(--white);
218
222
  --uui-primary-5:var(--blue-5);
219
223
  --uui-primary-10:var(--blue-10);
220
224
  --uui-primary-20:var(--blue-20);
221
225
  --uui-primary-50:var(--blue-50);
222
226
  --uui-primary-60:var(--blue-60);
223
227
  --uui-primary-70:var(--blue-70);
228
+ --uui-primary-contrast:var(--white);
224
229
  --uui-secondary-5:var(--gray10);
225
230
  --uui-secondary-10:var(--gray20);
226
231
  --uui-secondary-20:var(--gray30);
227
232
  --uui-secondary-50:var(--gray60);
228
233
  --uui-secondary-60:var(--gray70);
229
234
  --uui-secondary-70:var(--gray80);
235
+ --uui-secondary-contrast:var(--white);
230
236
  --uui-success-5:var(--green-5);
231
237
  --uui-success-10:var(--green-10);
232
238
  --uui-success-20:var(--green-20);
233
239
  --uui-success-50:var(--green-50);
234
240
  --uui-success-60:var(--green-60);
235
241
  --uui-success-70:var(--green-70);
242
+ --uui-success-contrast:var(--white);
236
243
  --uui-warning-5:var(--amber-5);
237
244
  --uui-warning-10:var(--amber-10);
238
245
  --uui-warning-20:var(--amber-20);
239
246
  --uui-warning-50:var(--amber-50);
240
247
  --uui-warning-60:var(--amber-60);
241
248
  --uui-warning-70:var(--amber-70);
249
+ --uui-warning-contrast:var(--gray80);
242
250
  --uui-neutral-0:var(--white);
243
251
  --uui-neutral-5:var(--gray5);
244
252
  --uui-neutral-10:var(--gray10);
@@ -296,14 +304,6 @@
296
304
  --uui-font-mono:"Roboto Mono", monospace;
297
305
  --font-museo-sans:"Museo Sans", "Source Sans Pro", Arial, sans-serif;
298
306
  --font-museo-slab:"Museo Slab", "Roboto Slab", Arial, sans-serif;
299
- --uui-primary-contrast:var(--white);
300
- --uui-accent-contrast:var(--white);
301
- --uui-secondary-contrast:var(--white);
302
- --uui-critical-contrast:var(--white);
303
- --uui-info-contrast:var(--white);
304
- --uui-success-contrast:var(--white);
305
- --uui-warning-contrast:var(--gray80);
306
- --uui-error-contrast:var(--white);
307
307
  --uui-shadow-level-1:0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
308
308
  --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);
309
309
  --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);
@@ -319,7 +319,6 @@
319
319
  --uui-icon-size:12px;
320
320
  --uui-line-height:12px;
321
321
  --uui-font-size:12px;
322
- --uui-dot-size:6px;
323
322
  }
324
323
  .uui-theme-promo .uui-size-18{
325
324
  --uui-size:18px;
@@ -331,7 +330,6 @@
331
330
  --uui-icon-size:12px;
332
331
  --uui-line-height:12px;
333
332
  --uui-font-size:10px;
334
- --uui-dot-size:6px;
335
333
  }
336
334
  .uui-theme-promo .uui-size-24{
337
335
  --uui-size:24px;
@@ -343,7 +341,6 @@
343
341
  --uui-icon-size:12px;
344
342
  --uui-line-height:18px;
345
343
  --uui-font-size:12px;
346
- --uui-dot-size:8px;
347
344
  }
348
345
  .uui-theme-promo .uui-size-30{
349
346
  --uui-size:30px;
@@ -355,7 +352,6 @@
355
352
  --uui-icon-size:18px;
356
353
  --uui-line-height:18px;
357
354
  --uui-font-size:14px;
358
- --uui-dot-size:8px;
359
355
  }
360
356
  .uui-theme-promo .uui-size-36{
361
357
  --uui-size:36px;
@@ -367,7 +363,6 @@
367
363
  --uui-icon-size:18px;
368
364
  --uui-line-height:18px;
369
365
  --uui-font-size:14px;
370
- --uui-dot-size:8px;
371
366
  }
372
367
  .uui-theme-promo .uui-size-42{
373
368
  --uui-size:42px;
@@ -379,7 +374,6 @@
379
374
  --uui-icon-size:18px;
380
375
  --uui-line-height:24px;
381
376
  --uui-font-size:16px;
382
- --uui-dot-size:10px;
383
377
  }
384
378
  .uui-theme-promo .uui-size-48{
385
379
  --uui-size:48px;
@@ -391,7 +385,6 @@
391
385
  --uui-icon-size:24px;
392
386
  --uui-line-height:24px;
393
387
  --uui-font-size:16px;
394
- --uui-dot-size:12px;
395
388
  }
396
389
  .uui-theme-promo .uui-size-60{
397
390
  --uui-size:60px;
@@ -403,7 +396,6 @@
403
396
  --uui-icon-size:24px;
404
397
  --uui-line-height:24px;
405
398
  --uui-font-size:20px;
406
- --uui-dot-size:12px;
407
399
  }
408
400
  .uui-theme-promo .uui-input-box.uui-size-42{
409
401
  --uui-horizontal-padding:6px;
@@ -411,12 +403,6 @@
411
403
  .uui-theme-promo .uui-input-box.uui-size-48{
412
404
  --uui-horizontal-padding:6px;
413
405
  }
414
- .uui-theme-promo .uui-input-box.uui-textarea{
415
- --uui-horizontal-padding:12px;
416
- }
417
- .uui-theme-promo .uui-input-box.uui-textarea.uui-size-24{
418
- --uui-line-height:12px;
419
- }
420
406
  .uui-theme-promo .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
421
407
  --uui-horizontal-padding:12px;
422
408
  --uui-horizontal-gap:6px;
@@ -480,72 +466,7 @@
480
466
  --uui-line-height:24px;
481
467
  --uui-font-size:16px;
482
468
  }
483
- .uui-theme-promo .uui-labeled-input.uui-size-30{
484
- --uui-icon-size:12px;
485
- --uui-font-size:12px;
486
- }
487
- .uui-theme-promo .uui-labeled-input.uui-size-42{
488
- --uui-line-height:18px;
489
- --uui-font-size:14px;
490
- }
491
- .uui-theme-promo .uui-labeled-input.uui-size-48{
492
- --uui-icon-size:18px;
493
- --uui-line-height:18px;
494
- --uui-font-size:14px;
495
- }
496
- .uui-theme-promo .uui-badge.uui-size-18{
497
- --uui-font-size:12px;
498
- }
499
- .uui-theme-promo .uui-badge.uui-size-24{
500
- --uui-horizontal-padding:3px;
501
- --uui-icon-size:18px;
502
- --uui-line-height:12px;
503
- }
504
- .uui-theme-promo .uui-badge.uui-size-36{
505
- --uui-horizontal-padding:9px;
506
- }
507
- .uui-theme-promo .uui-badge.uui-size-42{
508
- --uui-icon-size:24px;
509
- }
510
- .uui-theme-promo .uui-status_indicator.uui-size-12{
511
- --uui-horizontal-gap:4px;
512
- }
513
- .uui-theme-promo .uui-status_indicator.uui-size-18{
514
- --uui-horizontal-gap:6px;
515
- --uui-line-height:18px;
516
- --uui-font-size:14px;
517
- --uui-dot-size:8px;
518
- }
519
- .uui-theme-promo .uui-status_indicator.uui-size-24{
520
- --uui-font-size:14px;
521
- --uui-dot-size:10px;
522
- }
523
- .uui-theme-promo .uui-count_indicator.uui-size-12{
524
- --uui-horizontal-padding:3px;
525
- --uui-line-height:10px;
526
- --uui-font-size:8px;
527
- }
528
- .uui-theme-promo .uui-count_indicator.uui-size-18{
529
- --uui-horizontal-padding:6px;
530
- --uui-line-height:16px;
531
- --uui-font-size:12px;
532
- }
533
- .uui-theme-promo .uui-count_indicator.uui-size-24{
534
- --uui-line-height:22px;
535
- --uui-font-size:14px;
536
- }
537
- .uui-theme-promo .uui-color-accent,
538
- .uui-theme-promo .uui-color-green{
539
- --uui-color-5:var(--uui-accent-5);
540
- --uui-color-10:var(--uui-accent-10);
541
- --uui-color-20:var(--uui-accent-20);
542
- --uui-color-50:var(--uui-accent-50);
543
- --uui-color-60:var(--uui-accent-60);
544
- --uui-color-70:var(--uui-accent-70);
545
- --uui-color-contrast:var(--uui-accent-contrast);
546
- }
547
- .uui-theme-promo .uui-color-primary,
548
- .uui-theme-promo .uui-color-blue{
469
+ .uui-theme-promo .uui-color-primary{
549
470
  --uui-color-5:var(--uui-primary-5);
550
471
  --uui-color-10:var(--uui-primary-10);
551
472
  --uui-color-20:var(--uui-primary-20);
@@ -554,9 +475,7 @@
554
475
  --uui-color-70:var(--uui-primary-70);
555
476
  --uui-color-contrast:var(--uui-primary-contrast);
556
477
  }
557
- .uui-theme-promo .uui-color-secondary,
558
- .uui-theme-promo .uui-color-neutral,
559
- .uui-theme-promo .uui-color-gray{
478
+ .uui-theme-promo .uui-color-secondary{
560
479
  --uui-color-5:var(--uui-secondary-5);
561
480
  --uui-color-10:var(--uui-secondary-10);
562
481
  --uui-color-20:var(--uui-secondary-20);
@@ -565,15 +484,14 @@
565
484
  --uui-color-70:var(--uui-secondary-70);
566
485
  --uui-color-contrast:var(--uui-secondary-contrast);
567
486
  }
568
- .uui-theme-promo .uui-color-critical,
569
- .uui-theme-promo .uui-color-red{
570
- --uui-color-5:var(--uui-critical-5);
571
- --uui-color-10:var(--uui-critical-10);
572
- --uui-color-20:var(--uui-critical-20);
573
- --uui-color-50:var(--uui-critical-50);
574
- --uui-color-60:var(--uui-critical-60);
575
- --uui-color-70:var(--uui-critical-70);
576
- --uui-color-contrast:var(--uui-critical-contrast);
487
+ .uui-theme-promo .uui-color-accent{
488
+ --uui-color-5:var(--uui-accent-5);
489
+ --uui-color-10:var(--uui-accent-10);
490
+ --uui-color-20:var(--uui-accent-20);
491
+ --uui-color-50:var(--uui-accent-50);
492
+ --uui-color-60:var(--uui-accent-60);
493
+ --uui-color-70:var(--uui-accent-70);
494
+ --uui-color-contrast:var(--uui-accent-contrast);
577
495
  }
578
496
  .uui-theme-promo .uui-color-info{
579
497
  --uui-color-5:var(--uui-info-5);
@@ -593,8 +511,7 @@
593
511
  --uui-color-70:var(--uui-success-70);
594
512
  --uui-color-contrast:var(--uui-success-contrast);
595
513
  }
596
- .uui-theme-promo .uui-color-warning,
597
- .uui-theme-promo .uui-color-amber{
514
+ .uui-theme-promo .uui-color-warning{
598
515
  --uui-color-5:var(--uui-warning-5);
599
516
  --uui-color-10:var(--uui-warning-10);
600
517
  --uui-color-20:var(--uui-warning-20);
@@ -612,6 +529,15 @@
612
529
  --uui-color-70:var(--uui-error-70);
613
530
  --uui-color-contrast:var(--uui-error-contrast);
614
531
  }
532
+ .uui-theme-promo .uui-color-critical{
533
+ --uui-color-5:var(--uui-critical-5);
534
+ --uui-color-10:var(--uui-critical-10);
535
+ --uui-color-20:var(--uui-critical-20);
536
+ --uui-color-50:var(--uui-critical-50);
537
+ --uui-color-60:var(--uui-critical-60);
538
+ --uui-color-70:var(--uui-critical-70);
539
+ --uui-color-contrast:var(--uui-critical-contrast);
540
+ }
615
541
  .uui-theme-promo .uui-color-white{
616
542
  --uui-color-5:color-mix(in srgb, #FFFFFF 15%, transparent);
617
543
  --uui-color-10:color-mix(in srgb, #FFFFFF 22%, transparent);
@@ -621,6 +547,60 @@
621
547
  --uui-color-70:var(--uui-neutral-20);
622
548
  --uui-color-contrast:var(--uui-neutral-70);
623
549
  }
550
+ .uui-theme-promo .uui-color-neutral{
551
+ --uui-color-5:var(--uui-secondary-5);
552
+ --uui-color-10:var(--uui-secondary-10);
553
+ --uui-color-20:var(--uui-secondary-20);
554
+ --uui-color-50:var(--uui-secondary-50);
555
+ --uui-color-60:var(--uui-secondary-60);
556
+ --uui-color-70:var(--uui-secondary-70);
557
+ --uui-color-contrast:var(--uui-secondary-contrast);
558
+ }
559
+ .uui-theme-promo .uui-color-green{
560
+ --uui-color-5:var(--uui-accent-5);
561
+ --uui-color-10:var(--uui-accent-10);
562
+ --uui-color-20:var(--uui-accent-20);
563
+ --uui-color-50:var(--uui-accent-50);
564
+ --uui-color-60:var(--uui-accent-60);
565
+ --uui-color-70:var(--uui-accent-70);
566
+ --uui-color-contrast:var(--uui-accent-contrast);
567
+ }
568
+ .uui-theme-promo .uui-color-blue{
569
+ --uui-color-5:var(--uui-primary-5);
570
+ --uui-color-10:var(--uui-primary-10);
571
+ --uui-color-20:var(--uui-primary-20);
572
+ --uui-color-50:var(--uui-primary-50);
573
+ --uui-color-60:var(--uui-primary-60);
574
+ --uui-color-70:var(--uui-primary-70);
575
+ --uui-color-contrast:var(--uui-primary-contrast);
576
+ }
577
+ .uui-theme-promo .uui-color-gray{
578
+ --uui-color-5:var(--uui-secondary-5);
579
+ --uui-color-10:var(--uui-secondary-10);
580
+ --uui-color-20:var(--uui-secondary-20);
581
+ --uui-color-50:var(--uui-secondary-50);
582
+ --uui-color-60:var(--uui-secondary-60);
583
+ --uui-color-70:var(--uui-secondary-70);
584
+ --uui-color-contrast:var(--uui-secondary-contrast);
585
+ }
586
+ .uui-theme-promo .uui-color-red{
587
+ --uui-color-5:var(--uui-critical-5);
588
+ --uui-color-10:var(--uui-critical-10);
589
+ --uui-color-20:var(--uui-critical-20);
590
+ --uui-color-50:var(--uui-critical-50);
591
+ --uui-color-60:var(--uui-critical-60);
592
+ --uui-color-70:var(--uui-critical-70);
593
+ --uui-color-contrast:var(--uui-critical-contrast);
594
+ }
595
+ .uui-theme-promo .uui-color-amber{
596
+ --uui-color-5:var(--uui-warning-5);
597
+ --uui-color-10:var(--uui-warning-10);
598
+ --uui-color-20:var(--uui-warning-20);
599
+ --uui-color-50:var(--uui-warning-50);
600
+ --uui-color-60:var(--uui-warning-60);
601
+ --uui-color-70:var(--uui-warning-70);
602
+ --uui-color-contrast:var(--uui-warning-contrast);
603
+ }
624
604
  .uui-theme-promo .uui-link_button.uui-color-contrast,
625
605
  .uui-theme-promo .uui-color-gray10{
626
606
  --uui-color-5:var(--white);
@@ -839,7 +819,7 @@
839
819
  .uui-theme-promo .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-amber, .uui-color-warning){
840
820
  --uui-count_indicator-caption:var(--uui-neutral-70);
841
821
  }
842
- .uui-theme-promo .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator-dot{
822
+ .uui-theme-promo .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator_dot{
843
823
  background-color:color-mix(in srgb, var(--white) 20%, transparent);
844
824
  border:1px solid var(--uui-neutral-40);
845
825
  }