@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_loveship.css CHANGED
@@ -208,48 +208,56 @@
208
208
  --uui-accent-50:var(--grass-50);
209
209
  --uui-accent-60:var(--grass-60);
210
210
  --uui-accent-70:var(--grass-70);
211
+ --uui-accent-contrast:var(--white);
211
212
  --uui-critical-5:var(--fire-5);
212
213
  --uui-critical-10:var(--fire-10);
213
214
  --uui-critical-20:var(--fire-20);
214
215
  --uui-critical-50:var(--fire-50);
215
216
  --uui-critical-60:var(--fire-60);
216
217
  --uui-critical-70:var(--fire-70);
218
+ --uui-critical-contrast:var(--white);
217
219
  --uui-error-5:var(--fire-5);
218
220
  --uui-error-10:var(--fire-10);
219
221
  --uui-error-20:var(--fire-20);
220
222
  --uui-error-50:var(--fire-50);
221
223
  --uui-error-60:var(--fire-60);
222
224
  --uui-error-70:var(--fire-70);
225
+ --uui-error-contrast:var(--white);
223
226
  --uui-info-5:var(--sky-5);
224
227
  --uui-info-10:var(--sky-10);
225
228
  --uui-info-20:var(--sky-20);
226
229
  --uui-info-50:var(--sky-50);
227
230
  --uui-info-60:var(--sky-60);
228
231
  --uui-info-70:var(--sky-70);
232
+ --uui-info-contrast:var(--white);
229
233
  --uui-primary-5:var(--sky-5);
230
234
  --uui-primary-10:var(--sky-10);
231
235
  --uui-primary-20:var(--sky-20);
232
236
  --uui-primary-50:var(--sky-50);
233
237
  --uui-primary-60:var(--sky-60);
234
238
  --uui-primary-70:var(--sky-70);
239
+ --uui-primary-contrast:var(--white);
235
240
  --uui-secondary-5:var(--night100);
236
241
  --uui-secondary-10:var(--night200);
237
242
  --uui-secondary-20:var(--night300);
238
243
  --uui-secondary-50:var(--night600);
239
244
  --uui-secondary-60:var(--night700);
240
245
  --uui-secondary-70:var(--night800);
246
+ --uui-secondary-contrast:var(--white);
241
247
  --uui-success-5:var(--grass-5);
242
248
  --uui-success-10:var(--grass-10);
243
249
  --uui-success-20:var(--grass-20);
244
250
  --uui-success-50:var(--grass-50);
245
251
  --uui-success-60:var(--grass-60);
246
252
  --uui-success-70:var(--grass-70);
253
+ --uui-success-contrast:var(--white);
247
254
  --uui-warning-5:var(--sun-5);
248
255
  --uui-warning-10:var(--sun-10);
249
256
  --uui-warning-20:var(--sun-20);
250
257
  --uui-warning-50:var(--sun-50);
251
258
  --uui-warning-60:var(--sun-60);
252
259
  --uui-warning-70:var(--sun-70);
260
+ --uui-warning-contrast:var(--night800);
253
261
  --uui-neutral-0:var(--white);
254
262
  --uui-neutral-5:var(--night50);
255
263
  --uui-neutral-10:var(--night100);
@@ -309,14 +317,6 @@
309
317
  --uui-color-night100-900:#B1B9D8;
310
318
  --uui-color-night700-800:#30323D;
311
319
  --uui-color-night700-900:#1A1B20;
312
- --uui-primary-contrast:var(--white);
313
- --uui-accent-contrast:var(--white);
314
- --uui-secondary-contrast:var(--white);
315
- --uui-critical-contrast:var(--white);
316
- --uui-info-contrast:var(--white);
317
- --uui-success-contrast:var(--white);
318
- --uui-warning-contrast:var(--night800);
319
- --uui-error-contrast:var(--white);
320
320
  --uui-shadow-level-1:0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
321
321
  --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);
322
322
  --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);
@@ -332,7 +332,6 @@
332
332
  --uui-icon-size:12px;
333
333
  --uui-line-height:12px;
334
334
  --uui-font-size:12px;
335
- --uui-dot-size:6px;
336
335
  }
337
336
  .uui-theme-loveship .uui-size-18{
338
337
  --uui-size:18px;
@@ -344,7 +343,6 @@
344
343
  --uui-icon-size:12px;
345
344
  --uui-line-height:12px;
346
345
  --uui-font-size:10px;
347
- --uui-dot-size:6px;
348
346
  }
349
347
  .uui-theme-loveship .uui-size-24{
350
348
  --uui-size:24px;
@@ -356,7 +354,6 @@
356
354
  --uui-icon-size:12px;
357
355
  --uui-line-height:18px;
358
356
  --uui-font-size:12px;
359
- --uui-dot-size:8px;
360
357
  }
361
358
  .uui-theme-loveship .uui-size-30{
362
359
  --uui-size:30px;
@@ -368,7 +365,6 @@
368
365
  --uui-icon-size:18px;
369
366
  --uui-line-height:18px;
370
367
  --uui-font-size:14px;
371
- --uui-dot-size:8px;
372
368
  }
373
369
  .uui-theme-loveship .uui-size-36{
374
370
  --uui-size:36px;
@@ -380,7 +376,6 @@
380
376
  --uui-icon-size:18px;
381
377
  --uui-line-height:18px;
382
378
  --uui-font-size:14px;
383
- --uui-dot-size:8px;
384
379
  }
385
380
  .uui-theme-loveship .uui-size-42{
386
381
  --uui-size:42px;
@@ -392,7 +387,6 @@
392
387
  --uui-icon-size:18px;
393
388
  --uui-line-height:24px;
394
389
  --uui-font-size:16px;
395
- --uui-dot-size:10px;
396
390
  }
397
391
  .uui-theme-loveship .uui-size-48{
398
392
  --uui-size:48px;
@@ -404,7 +398,6 @@
404
398
  --uui-icon-size:24px;
405
399
  --uui-line-height:24px;
406
400
  --uui-font-size:16px;
407
- --uui-dot-size:12px;
408
401
  }
409
402
  .uui-theme-loveship .uui-size-60{
410
403
  --uui-size:60px;
@@ -416,7 +409,6 @@
416
409
  --uui-icon-size:24px;
417
410
  --uui-line-height:24px;
418
411
  --uui-font-size:20px;
419
- --uui-dot-size:12px;
420
412
  }
421
413
  .uui-theme-loveship .uui-input-box.uui-size-42{
422
414
  --uui-horizontal-padding:6px;
@@ -424,12 +416,6 @@
424
416
  .uui-theme-loveship .uui-input-box.uui-size-48{
425
417
  --uui-horizontal-padding:6px;
426
418
  }
427
- .uui-theme-loveship .uui-input-box.uui-textarea{
428
- --uui-horizontal-padding:12px;
429
- }
430
- .uui-theme-loveship .uui-input-box.uui-textarea.uui-size-24{
431
- --uui-line-height:12px;
432
- }
433
419
  .uui-theme-loveship .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
434
420
  --uui-horizontal-padding:12px;
435
421
  --uui-horizontal-gap:6px;
@@ -493,63 +479,97 @@
493
479
  --uui-line-height:24px;
494
480
  --uui-font-size:16px;
495
481
  }
496
- .uui-theme-loveship .uui-labeled-input.uui-size-30{
497
- --uui-icon-size:12px;
498
- --uui-font-size:12px;
499
- }
500
- .uui-theme-loveship .uui-labeled-input.uui-size-42{
501
- --uui-line-height:18px;
502
- --uui-font-size:14px;
503
- }
504
- .uui-theme-loveship .uui-labeled-input.uui-size-48{
505
- --uui-icon-size:18px;
506
- --uui-line-height:18px;
507
- --uui-font-size:14px;
508
- }
509
- .uui-theme-loveship .uui-badge.uui-size-18{
510
- --uui-font-size:12px;
511
- }
512
- .uui-theme-loveship .uui-badge.uui-size-24{
513
- --uui-horizontal-padding:3px;
514
- --uui-icon-size:18px;
515
- --uui-line-height:12px;
516
- }
517
- .uui-theme-loveship .uui-badge.uui-size-36{
518
- --uui-horizontal-padding:9px;
482
+ .uui-theme-loveship .uui-color-primary{
483
+ --uui-color-5:var(--uui-primary-5);
484
+ --uui-color-10:var(--uui-primary-10);
485
+ --uui-color-20:var(--uui-primary-20);
486
+ --uui-color-50:var(--uui-primary-50);
487
+ --uui-color-60:var(--uui-primary-60);
488
+ --uui-color-70:var(--uui-primary-70);
489
+ --uui-color-contrast:var(--uui-primary-contrast);
519
490
  }
520
- .uui-theme-loveship .uui-badge.uui-size-42{
521
- --uui-icon-size:24px;
491
+ .uui-theme-loveship .uui-color-secondary{
492
+ --uui-color-5:var(--uui-secondary-5);
493
+ --uui-color-10:var(--uui-secondary-10);
494
+ --uui-color-20:var(--uui-secondary-20);
495
+ --uui-color-50:var(--uui-secondary-50);
496
+ --uui-color-60:var(--uui-secondary-60);
497
+ --uui-color-70:var(--uui-secondary-70);
498
+ --uui-color-contrast:var(--uui-secondary-contrast);
522
499
  }
523
- .uui-theme-loveship .uui-status_indicator.uui-size-12{
524
- --uui-horizontal-gap:4px;
500
+ .uui-theme-loveship .uui-color-accent{
501
+ --uui-color-5:var(--uui-accent-5);
502
+ --uui-color-10:var(--uui-accent-10);
503
+ --uui-color-20:var(--uui-accent-20);
504
+ --uui-color-50:var(--uui-accent-50);
505
+ --uui-color-60:var(--uui-accent-60);
506
+ --uui-color-70:var(--uui-accent-70);
507
+ --uui-color-contrast:var(--uui-accent-contrast);
525
508
  }
526
- .uui-theme-loveship .uui-status_indicator.uui-size-18{
527
- --uui-horizontal-gap:6px;
528
- --uui-line-height:18px;
529
- --uui-font-size:14px;
530
- --uui-dot-size:8px;
509
+ .uui-theme-loveship .uui-color-info{
510
+ --uui-color-5:var(--uui-info-5);
511
+ --uui-color-10:var(--uui-info-10);
512
+ --uui-color-20:var(--uui-info-20);
513
+ --uui-color-50:var(--uui-info-50);
514
+ --uui-color-60:var(--uui-info-60);
515
+ --uui-color-70:var(--uui-info-70);
516
+ --uui-color-contrast:var(--uui-info-contrast);
531
517
  }
532
- .uui-theme-loveship .uui-status_indicator.uui-size-24{
533
- --uui-font-size:14px;
534
- --uui-dot-size:10px;
518
+ .uui-theme-loveship .uui-color-success{
519
+ --uui-color-5:var(--uui-success-5);
520
+ --uui-color-10:var(--uui-success-10);
521
+ --uui-color-20:var(--uui-success-20);
522
+ --uui-color-50:var(--uui-success-50);
523
+ --uui-color-60:var(--uui-success-60);
524
+ --uui-color-70:var(--uui-success-70);
525
+ --uui-color-contrast:var(--uui-success-contrast);
526
+ }
527
+ .uui-theme-loveship .uui-color-warning{
528
+ --uui-color-5:var(--uui-warning-5);
529
+ --uui-color-10:var(--uui-warning-10);
530
+ --uui-color-20:var(--uui-warning-20);
531
+ --uui-color-50:var(--uui-warning-50);
532
+ --uui-color-60:var(--uui-warning-60);
533
+ --uui-color-70:var(--uui-warning-70);
534
+ --uui-color-contrast:var(--uui-warning-contrast);
535
535
  }
536
- .uui-theme-loveship .uui-count_indicator.uui-size-12{
537
- --uui-horizontal-padding:3px;
538
- --uui-line-height:10px;
539
- --uui-font-size:8px;
536
+ .uui-theme-loveship .uui-color-error{
537
+ --uui-color-5:var(--uui-error-5);
538
+ --uui-color-10:var(--uui-error-10);
539
+ --uui-color-20:var(--uui-error-20);
540
+ --uui-color-50:var(--uui-error-50);
541
+ --uui-color-60:var(--uui-error-60);
542
+ --uui-color-70:var(--uui-error-70);
543
+ --uui-color-contrast:var(--uui-error-contrast);
544
+ }
545
+ .uui-theme-loveship .uui-color-critical{
546
+ --uui-color-5:var(--uui-critical-5);
547
+ --uui-color-10:var(--uui-critical-10);
548
+ --uui-color-20:var(--uui-critical-20);
549
+ --uui-color-50:var(--uui-critical-50);
550
+ --uui-color-60:var(--uui-critical-60);
551
+ --uui-color-70:var(--uui-critical-70);
552
+ --uui-color-contrast:var(--uui-critical-contrast);
540
553
  }
541
- .uui-theme-loveship .uui-count_indicator.uui-size-18{
542
- --uui-horizontal-padding:6px;
543
- --uui-line-height:16px;
544
- --uui-font-size:12px;
554
+ .uui-theme-loveship .uui-color-white{
555
+ --uui-color-5:color-mix(in srgb, #FFFFFF 15%, transparent);
556
+ --uui-color-10:color-mix(in srgb, #FFFFFF 22%, transparent);
557
+ --uui-color-20:color-mix(in srgb, #FFFFFF 29%, transparent);
558
+ --uui-color-50:var(--uui-neutral-0);
559
+ --uui-color-60:var(--uui-neutral-10);
560
+ --uui-color-70:var(--uui-neutral-20);
561
+ --uui-color-contrast:var(--uui-neutral-70);
545
562
  }
546
- .uui-theme-loveship .uui-count_indicator.uui-size-24{
547
- --uui-line-height:22px;
548
- --uui-font-size:14px;
563
+ .uui-theme-loveship .uui-color-neutral{
564
+ --uui-color-5:var(--uui-secondary-5);
565
+ --uui-color-10:var(--uui-secondary-10);
566
+ --uui-color-20:var(--uui-secondary-20);
567
+ --uui-color-50:var(--uui-secondary-50);
568
+ --uui-color-60:var(--uui-secondary-60);
569
+ --uui-color-70:var(--uui-secondary-70);
570
+ --uui-color-contrast:var(--uui-secondary-contrast);
549
571
  }
550
- .uui-theme-loveship .uui-color-accent,
551
- .uui-theme-loveship .uui-color-grass,
552
- .uui-theme-loveship .uui-color-success{
572
+ .uui-theme-loveship .uui-color-grass{
553
573
  --uui-color-5:var(--uui-accent-5);
554
574
  --uui-color-10:var(--uui-accent-10);
555
575
  --uui-color-20:var(--uui-accent-20);
@@ -558,9 +578,7 @@
558
578
  --uui-color-70:var(--uui-accent-70);
559
579
  --uui-color-contrast:var(--uui-accent-contrast);
560
580
  }
561
- .uui-theme-loveship .uui-color-primary,
562
- .uui-theme-loveship .uui-color-sky,
563
- .uui-theme-loveship .uui-color-info{
581
+ .uui-theme-loveship .uui-color-sky{
564
582
  --uui-color-5:var(--uui-primary-5);
565
583
  --uui-color-10:var(--uui-primary-10);
566
584
  --uui-color-20:var(--uui-primary-20);
@@ -569,9 +587,7 @@
569
587
  --uui-color-70:var(--uui-primary-70);
570
588
  --uui-color-contrast:var(--uui-primary-contrast);
571
589
  }
572
- .uui-theme-loveship .uui-color-fire,
573
- .uui-theme-loveship .uui-color-critical,
574
- .uui-theme-loveship .uui-color-error{
590
+ .uui-theme-loveship .uui-color-fire{
575
591
  --uui-color-5:var(--uui-critical-5);
576
592
  --uui-color-10:var(--uui-critical-10);
577
593
  --uui-color-20:var(--uui-critical-20);
@@ -580,15 +596,6 @@
580
596
  --uui-color-70:var(--uui-critical-70);
581
597
  --uui-color-contrast:var(--uui-critical-contrast);
582
598
  }
583
- .uui-theme-loveship .uui-color-white{
584
- --uui-color-5:color-mix(in srgb, #FFFFFF 15%, transparent);
585
- --uui-color-10:color-mix(in srgb, #FFFFFF 22%, transparent);
586
- --uui-color-20:color-mix(in srgb, #FFFFFF 29%, transparent);
587
- --uui-color-50:var(--uui-neutral-0);
588
- --uui-color-60:var(--uui-neutral-10);
589
- --uui-color-70:var(--uui-neutral-20);
590
- --uui-color-contrast:var(--uui-neutral-70);
591
- }
592
599
  .uui-theme-loveship .uui-color-night100{
593
600
  --uui-color-5:var(--white);
594
601
  --uui-color-10:var(--white);
@@ -617,9 +624,7 @@
617
624
  --uui-color-contrast:var(--white);
618
625
  }
619
626
  .uui-theme-loveship .uui-color-night600,
620
- .uui-theme-loveship .uui-color-neutral,
621
- .uui-theme-loveship .uui-color-gray,
622
- .uui-theme-loveship .uui-color-secondary{
627
+ .uui-theme-loveship .uui-color-gray{
623
628
  --uui-color-5:var(--uui-secondary-5);
624
629
  --uui-color-10:var(--uui-secondary-10);
625
630
  --uui-color-20:var(--uui-secondary-20);
@@ -637,7 +642,6 @@
637
642
  --uui-color-70:var(--uui-color-night700-900);
638
643
  --uui-color-contrast:var(--white);
639
644
  }
640
- .uui-theme-loveship .uui-color-warning,
641
645
  .uui-theme-loveship .uui-color-sun{
642
646
  --uui-color-5:var(--uui-warning-5);
643
647
  --uui-color-10:var(--uui-warning-10);
@@ -825,7 +829,7 @@
825
829
  .uui-theme-loveship .uui-count_indicator:is(.uui-color-gray, .uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning){
826
830
  --uui-count_indicator-caption:var(--uui-neutral-70);
827
831
  }
828
- .uui-theme-loveship .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator-dot{
832
+ .uui-theme-loveship .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator_dot{
829
833
  background-color:color-mix(in srgb, var(--white) 20%, transparent);
830
834
  border:1px solid var(--uui-neutral-40);
831
835
  }