@epam/assets 5.9.5 → 5.10.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 (18) hide show
  1. package/css/theme/theme_electric.css +238 -175
  2. package/css/theme/theme_electric.css.map +1 -1
  3. package/css/theme/theme_loveship.css +236 -173
  4. package/css/theme/theme_loveship.css.map +1 -1
  5. package/css/theme/theme_loveship_dark.css +238 -175
  6. package/css/theme/theme_loveship_dark.css.map +1 -1
  7. package/css/theme/theme_promo.css +234 -171
  8. package/css/theme/theme_promo.css.map +1 -1
  9. package/css/theme/theme_vanilla_thunder.css +83 -21
  10. package/css/theme/theme_vanilla_thunder.css.map +1 -1
  11. package/package.json +2 -2
  12. package/scss/loveship/typography.scss +2 -2
  13. package/theme/theme_6px.scss +112 -38
  14. package/theme/theme_electric.scss +9 -12
  15. package/theme/theme_loveship.scss +9 -9
  16. package/theme/theme_loveship_dark.scss +10 -11
  17. package/theme/theme_promo.scss +9 -10
  18. package/theme/theme_vanilla_thunder.scss +6 -2
package/css/theme/theme_electric.css CHANGED
@@ -84,11 +84,17 @@
84
84
  src:url("https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf") format("truetype");
85
85
  }
86
86
  .uui-theme-electric{
87
- --uui-focus-outline-width:2px;
88
- --uui-focus-outline-offset:2px;
89
- --uui-focus-radius:2px;
90
- --uui-tab-line-width:3px;
91
- --uui-notify-size:6px;
87
+ --uui-font:"Source Sans Pro", sans-serif;
88
+ --uui-font-mono:"Roboto Mono", monospace;
89
+ --font-museo-sans:"Museo Sans", "Source Sans Pro", Arial, sans-serif;
90
+ --gradient-1:linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
91
+ --gradient-2:linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
92
+ --gradient-3:linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%);
93
+ --gradient-4:linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
94
+ --gradient-5:linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
95
+ --uui-shadow-level-1:0 0 3px rgba(29, 30, 38, 0.05), 0 3px 6px rgba(29, 30, 38, 0.1);
96
+ --uui-shadow-level-2:0 6px 12px rgba(29, 30, 38, 0.05), 0 3px 12px rgba(29, 30, 38, 0.1), 0 0 6px rgba(29, 30, 38, 0.05);
97
+ --uui-shadow-level-3:0 0 10px rgba(29, 30, 38, 0.05), 0 6px 36px rgba(29, 30, 38, 0.12), 0 9px 15px rgba(29, 30, 38, 0.05);
92
98
  --black:#000000;
93
99
  --white:#FFFFFF;
94
100
  --cobalt-5:#F8FAFF;
@@ -284,175 +290,6 @@
284
290
  --uui-text-success:var(--uui-success-70);
285
291
  --uui-text-tertiary:var(--uui-neutral-60);
286
292
  --uui-text-warning:var(--uui-warning-70);
287
- --uui-font:"Source Sans Pro", sans-serif;
288
- --uui-font-mono:"Roboto Mono", monospace;
289
- --font-museo-sans:"Museo Sans", "Source Sans Pro", Arial, sans-serif;
290
- --gradient-1:linear-gradient(90deg, #00FFD3 0%, #00F6FF 44.22%, #B896FF 90%);
291
- --gradient-2:linear-gradient(152deg, #0078C2 8.13%, #0047FF 59.98%, #8453D2 91.87%);
292
- --gradient-3:linear-gradient(135deg, #1294E2 14.78%, #0A68F1 57.36%, #8453D2 95%);
293
- --gradient-4:linear-gradient(315deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
294
- --gradient-5:linear-gradient(90deg, #1294E2 0%, #92B4FF 46.64%, #C3A6FF 100%);
295
- --uui-shadow-level-1:0 0 3px rgba(29, 30, 38, 0.15), 0 3px 6px rgba(29, 30, 38, 0.1);
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
- --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);
298
- --uui-border-radius:3px;
299
- }
300
- .uui-theme-electric .uui-size-12{
301
- --uui-size:12px;
302
- --uui-border-width:1px;
303
- --uui-horizontal-gap:6px;
304
- --uui-vertical-gap:3px;
305
- --uui-horizontal-padding:6px;
306
- --uui-vertical-padding:3px;
307
- --uui-icon-size:12px;
308
- --uui-line-height:12px;
309
- --uui-font-size:12px;
310
- }
311
- .uui-theme-electric .uui-size-18{
312
- --uui-size:18px;
313
- --uui-border-width:1px;
314
- --uui-horizontal-gap:3px;
315
- --uui-vertical-gap:3px;
316
- --uui-horizontal-padding:3px;
317
- --uui-vertical-padding:3px;
318
- --uui-icon-size:12px;
319
- --uui-line-height:12px;
320
- --uui-font-size:10px;
321
- }
322
- .uui-theme-electric .uui-size-24{
323
- --uui-size:24px;
324
- --uui-border-width:1px;
325
- --uui-horizontal-gap:6px;
326
- --uui-vertical-gap:3px;
327
- --uui-horizontal-padding:6px;
328
- --uui-vertical-padding:3px;
329
- --uui-icon-size:12px;
330
- --uui-line-height:18px;
331
- --uui-font-size:12px;
332
- }
333
- .uui-theme-electric .uui-size-30{
334
- --uui-size:30px;
335
- --uui-border-width:1px;
336
- --uui-horizontal-gap:6px;
337
- --uui-vertical-gap:3px;
338
- --uui-horizontal-padding:6px;
339
- --uui-vertical-padding:3px;
340
- --uui-icon-size:18px;
341
- --uui-line-height:18px;
342
- --uui-font-size:14px;
343
- }
344
- .uui-theme-electric .uui-size-36{
345
- --uui-size:36px;
346
- --uui-border-width:1px;
347
- --uui-horizontal-gap:6px;
348
- --uui-vertical-gap:3px;
349
- --uui-horizontal-padding:6px;
350
- --uui-vertical-padding:3px;
351
- --uui-icon-size:18px;
352
- --uui-line-height:18px;
353
- --uui-font-size:14px;
354
- }
355
- .uui-theme-electric .uui-size-42{
356
- --uui-size:42px;
357
- --uui-border-width:1px;
358
- --uui-horizontal-gap:6px;
359
- --uui-vertical-gap:3px;
360
- --uui-horizontal-padding:12px;
361
- --uui-vertical-padding:3px;
362
- --uui-icon-size:18px;
363
- --uui-line-height:24px;
364
- --uui-font-size:16px;
365
- }
366
- .uui-theme-electric .uui-size-48{
367
- --uui-size:48px;
368
- --uui-border-width:1px;
369
- --uui-horizontal-gap:6px;
370
- --uui-vertical-gap:3px;
371
- --uui-horizontal-padding:12px;
372
- --uui-vertical-padding:3px;
373
- --uui-icon-size:24px;
374
- --uui-line-height:24px;
375
- --uui-font-size:16px;
376
- }
377
- .uui-theme-electric .uui-size-60{
378
- --uui-size:60px;
379
- --uui-border-width:1px;
380
- --uui-horizontal-gap:6px;
381
- --uui-vertical-gap:3px;
382
- --uui-horizontal-padding:12px;
383
- --uui-vertical-padding:3px;
384
- --uui-icon-size:24px;
385
- --uui-line-height:24px;
386
- --uui-font-size:20px;
387
- }
388
- .uui-theme-electric .uui-input-box.uui-size-42{
389
- --uui-horizontal-padding:6px;
390
- }
391
- .uui-theme-electric .uui-input-box.uui-size-48{
392
- --uui-horizontal-padding:6px;
393
- }
394
- .uui-theme-electric .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
395
- --uui-horizontal-padding:12px;
396
- --uui-horizontal-gap:6px;
397
- --uui-icon-size:18px;
398
- --uui-line-height:18px;
399
- --uui-font-size:14px;
400
- }
401
- .uui-theme-electric .uui-tag.uui-size-18{
402
- --uui-font-size:12px;
403
- --uui-line-height:14px;
404
- }
405
- .uui-theme-electric .uui-tag.uui-size-24{
406
- --uui-icon-size:18px;
407
- }
408
- .uui-theme-electric .uui-tag.uui-size-42{
409
- --uui-icon-size:24px;
410
- }
411
- .uui-theme-electric .uui-tag.uui-size-42, .uui-theme-electric .uui-tag.uui-size-48{
412
- --uui-tag-count_indicator-margin-end:3px;
413
- }
414
- .uui-theme-electric .uui-tag.uui-size-18, .uui-theme-electric .uui-tag.uui-size-24, .uui-theme-electric .uui-tag.uui-size-30, .uui-theme-electric .uui-tag.uui-size-36{
415
- --uui-horizontal-gap:3px;
416
- }
417
- .uui-theme-electric .uui-tag.uui-size-18, .uui-theme-electric .uui-tag.uui-size-24, .uui-theme-electric .uui-tag.uui-size-30{
418
- --uui-horizontal-padding:3px;
419
- }
420
- .uui-theme-electric .uui-tag.uui-size-42, .uui-theme-electric .uui-tag.uui-size-48{
421
- --uui-horizontal-padding:6px;
422
- }
423
- .uui-theme-electric .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36, .uui-size-42) .uui-tag.uui-size-inherit{
424
- --uui-horizontal-gap:3px;
425
- }
426
- .uui-theme-electric .uui-picker_toggler:is(.uui-size-24, .uui-size-30, .uui-size-36) .uui-tag.uui-size-inherit{
427
- --uui-horizontal-padding:3px;
428
- }
429
- .uui-theme-electric .uui-size-48.uui-picker_toggler .uui-tag.uui-size-inherit{
430
- --uui-horizontal-padding:6px;
431
- }
432
- .uui-theme-electric .uui-checkbox-container.uui-size-18, .uui-theme-electric .uui-radio-input-container.uui-size-18{
433
- --uui-horizontal-gap:12px;
434
- --uui-line-height:18px;
435
- --uui-font-size:14px;
436
- }
437
- .uui-theme-electric .uui-switch.uui-size-18{
438
- --uui-horizontal-gap:12px;
439
- --uui-line-height:18px;
440
- --uui-font-size:14px;
441
- }
442
- .uui-theme-electric .uui-switch.uui-size-24{
443
- --uui-horizontal-gap:12px;
444
- --uui-line-height:24px;
445
- --uui-font-size:16px;
446
- }
447
- .uui-theme-electric .uui-picker-body:is(.uui-size-30, .uui-size-36) .uui-switch.uui-size-inherit{
448
- --uui-horizontal-gap:12px;
449
- --uui-line-height:18px;
450
- --uui-font-size:14px;
451
- }
452
- .uui-theme-electric .uui-picker-body:is(.uui-size-42, .uui-size-48) .uui-switch.uui-size-inherit{
453
- --uui-horizontal-gap:12px;
454
- --uui-line-height:24px;
455
- --uui-font-size:16px;
456
293
  }
457
294
  .uui-theme-electric .uui-color-primary{
458
295
  --uui-color-5:var(--uui-primary-5);
@@ -544,6 +381,9 @@
544
381
  --uui-color-70:var(--uui-secondary-70);
545
382
  --uui-color-contrast:var(--uui-secondary-contrast);
546
383
  }
384
+ .uui-theme-electric{
385
+ --uui-border-radius:3px;
386
+ }
547
387
  .uui-theme-electric .uui-color-fire{
548
388
  --uui-color-5:var(--uui-critical-5);
549
389
  --uui-color-10:var(--uui-critical-10);
@@ -772,7 +612,7 @@
772
612
  .uui-theme-electric .uui-count_indicator:is(.uui-color-neutral, .uui-color-white, .uui-color-sun, .uui-color-warning){
773
613
  --uui-count_indicator-caption:var(--uui-neutral-70);
774
614
  }
775
- .uui-theme-electric .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator_dot{
615
+ .uui-theme-electric .uui-status_indicator.uui-color-white.uui-fill-outline .uui-status_indicator-dot{
776
616
  background-color:color-mix(in srgb, var(--white) 20%, transparent);
777
617
  border:1px solid var(--uui-neutral-40);
778
618
  }
@@ -906,4 +746,227 @@
906
746
  }
907
747
  .uui-theme-electric .uui-typography h6.promo-header{
908
748
  font-size:18px;
749
+ }
750
+ .uui-theme-electric{
751
+ --uui-grid-unit:6px;
752
+ --uui-focus-outline-width:2px;
753
+ --uui-focus-outline-offset:2px;
754
+ --uui-focus-radius:2px;
755
+ --uui-tab-line-width:3px;
756
+ --uui-notify-size:6px;
757
+ }
758
+ .uui-theme-electric .uui-size-12{
759
+ --uui-size:12px;
760
+ --uui-border-width:1px;
761
+ --uui-horizontal-gap:6px;
762
+ --uui-vertical-gap:3px;
763
+ --uui-horizontal-padding:6px;
764
+ --uui-vertical-padding:3px;
765
+ --uui-icon-size:12px;
766
+ --uui-line-height:12px;
767
+ --uui-font-size:12px;
768
+ --uui-dot-size:6px;
769
+ }
770
+ .uui-theme-electric .uui-size-18{
771
+ --uui-size:18px;
772
+ --uui-border-width:1px;
773
+ --uui-horizontal-gap:3px;
774
+ --uui-vertical-gap:3px;
775
+ --uui-horizontal-padding:3px;
776
+ --uui-vertical-padding:3px;
777
+ --uui-icon-size:12px;
778
+ --uui-line-height:12px;
779
+ --uui-font-size:10px;
780
+ --uui-dot-size:6px;
781
+ }
782
+ .uui-theme-electric .uui-size-24{
783
+ --uui-size:24px;
784
+ --uui-border-width:1px;
785
+ --uui-horizontal-gap:6px;
786
+ --uui-vertical-gap:3px;
787
+ --uui-horizontal-padding:6px;
788
+ --uui-vertical-padding:3px;
789
+ --uui-icon-size:12px;
790
+ --uui-line-height:18px;
791
+ --uui-font-size:12px;
792
+ --uui-dot-size:8px;
793
+ }
794
+ .uui-theme-electric .uui-size-30{
795
+ --uui-size:30px;
796
+ --uui-border-width:1px;
797
+ --uui-horizontal-gap:6px;
798
+ --uui-vertical-gap:3px;
799
+ --uui-horizontal-padding:6px;
800
+ --uui-vertical-padding:3px;
801
+ --uui-icon-size:18px;
802
+ --uui-line-height:18px;
803
+ --uui-font-size:14px;
804
+ --uui-dot-size:8px;
805
+ }
806
+ .uui-theme-electric .uui-size-36{
807
+ --uui-size:36px;
808
+ --uui-border-width:1px;
809
+ --uui-horizontal-gap:6px;
810
+ --uui-vertical-gap:3px;
811
+ --uui-horizontal-padding:6px;
812
+ --uui-vertical-padding:3px;
813
+ --uui-icon-size:18px;
814
+ --uui-line-height:18px;
815
+ --uui-font-size:14px;
816
+ --uui-dot-size:8px;
817
+ }
818
+ .uui-theme-electric .uui-size-42{
819
+ --uui-size:42px;
820
+ --uui-border-width:1px;
821
+ --uui-horizontal-gap:6px;
822
+ --uui-vertical-gap:3px;
823
+ --uui-horizontal-padding:12px;
824
+ --uui-vertical-padding:3px;
825
+ --uui-icon-size:18px;
826
+ --uui-line-height:24px;
827
+ --uui-font-size:16px;
828
+ --uui-dot-size:10px;
829
+ }
830
+ .uui-theme-electric .uui-size-48{
831
+ --uui-size:48px;
832
+ --uui-border-width:1px;
833
+ --uui-horizontal-gap:6px;
834
+ --uui-vertical-gap:3px;
835
+ --uui-horizontal-padding:12px;
836
+ --uui-vertical-padding:3px;
837
+ --uui-icon-size:24px;
838
+ --uui-line-height:24px;
839
+ --uui-font-size:16px;
840
+ --uui-dot-size:12px;
841
+ }
842
+ .uui-theme-electric .uui-size-60{
843
+ --uui-size:60px;
844
+ --uui-border-width:1px;
845
+ --uui-horizontal-gap:6px;
846
+ --uui-vertical-gap:3px;
847
+ --uui-horizontal-padding:12px;
848
+ --uui-vertical-padding:3px;
849
+ --uui-icon-size:24px;
850
+ --uui-line-height:24px;
851
+ --uui-font-size:20px;
852
+ --uui-dot-size:12px;
853
+ }
854
+ .uui-theme-electric .uui-input-box.uui-size-42{
855
+ --uui-horizontal-padding:6px;
856
+ }
857
+ .uui-theme-electric .uui-input-box.uui-size-48{
858
+ --uui-horizontal-padding:6px;
859
+ }
860
+ .uui-theme-electric .uui-input-box.uui-textarea{
861
+ --uui-horizontal-padding:12px;
862
+ }
863
+ .uui-theme-electric .uui-input-box.uui-textarea.uui-size-24{
864
+ --uui-line-height:12px;
865
+ }
866
+ .uui-theme-electric .uui-tab-button:is(.uui-size-36, .uui-size-48, .uui-size-60){
867
+ --uui-horizontal-padding:6px;
868
+ --uui-horizontal-gap:3px;
869
+ --uui-icon-size:18px;
870
+ --uui-line-height:18px;
871
+ --uui-font-size:14px;
872
+ }
873
+ .uui-theme-electric .uui-tag.uui-size-18{
874
+ --uui-font-size:12px;
875
+ --uui-line-height:14px;
876
+ }
877
+ .uui-theme-electric .uui-tag.uui-size-24{
878
+ --uui-icon-size:18px;
879
+ }
880
+ .uui-theme-electric .uui-tag.uui-size-42{
881
+ --uui-icon-size:24px;
882
+ }
883
+ .uui-theme-electric .uui-tag.uui-size-42, .uui-theme-electric .uui-tag.uui-size-48{
884
+ --uui-tag-count_indicator-margin-end:3px;
885
+ }
886
+ .uui-theme-electric .uui-tag.uui-size-18, .uui-theme-electric .uui-tag.uui-size-24, .uui-theme-electric .uui-tag.uui-size-30, .uui-theme-electric .uui-tag.uui-size-36{
887
+ --uui-horizontal-gap:3px;
888
+ }
889
+ .uui-theme-electric .uui-tag.uui-size-18, .uui-theme-electric .uui-tag.uui-size-24, .uui-theme-electric .uui-tag.uui-size-30{
890
+ --uui-horizontal-padding:3px;
891
+ }
892
+ .uui-theme-electric .uui-tag.uui-size-42, .uui-theme-electric .uui-tag.uui-size-48{
893
+ --uui-horizontal-padding:6px;
894
+ }
895
+ .uui-theme-electric .uui-checkbox-container.uui-size-18, .uui-theme-electric .uui-radio-input-container.uui-size-18{
896
+ --uui-horizontal-gap:12px;
897
+ --uui-line-height:18px;
898
+ --uui-font-size:14px;
899
+ }
900
+ .uui-theme-electric .uui-switch.uui-size-18{
901
+ --uui-horizontal-gap:12px;
902
+ --uui-line-height:18px;
903
+ --uui-font-size:14px;
904
+ }
905
+ .uui-theme-electric .uui-switch.uui-size-24{
906
+ --uui-horizontal-gap:12px;
907
+ --uui-line-height:24px;
908
+ --uui-font-size:16px;
909
+ }
910
+ .uui-theme-electric .uui-labeled-input.uui-size-30{
911
+ --uui-icon-size:12px;
912
+ --uui-font-size:12px;
913
+ }
914
+ .uui-theme-electric .uui-labeled-input.uui-size-42{
915
+ --uui-line-height:18px;
916
+ --uui-font-size:14px;
917
+ }
918
+ .uui-theme-electric .uui-labeled-input.uui-size-48{
919
+ --uui-icon-size:18px;
920
+ --uui-line-height:18px;
921
+ --uui-font-size:14px;
922
+ }
923
+ .uui-theme-electric .uui-badge.uui-size-18{
924
+ --uui-font-size:12px;
925
+ }
926
+ .uui-theme-electric .uui-badge.uui-size-24{
927
+ --uui-horizontal-padding:3px;
928
+ --uui-icon-size:18px;
929
+ --uui-line-height:12px;
930
+ }
931
+ .uui-theme-electric .uui-badge.uui-size-36{
932
+ --uui-horizontal-padding:9px;
933
+ }
934
+ .uui-theme-electric .uui-badge.uui-size-42{
935
+ --uui-icon-size:24px;
936
+ }
937
+ .uui-theme-electric .uui-status_indicator.uui-size-12{
938
+ --uui-horizontal-gap:4px;
939
+ }
940
+ .uui-theme-electric .uui-status_indicator.uui-size-18{
941
+ --uui-horizontal-gap:6px;
942
+ --uui-line-height:18px;
943
+ --uui-font-size:14px;
944
+ --uui-dot-size:8px;
945
+ }
946
+ .uui-theme-electric .uui-status_indicator.uui-size-24{
947
+ --uui-font-size:14px;
948
+ --uui-dot-size:10px;
949
+ }
950
+ .uui-theme-electric .uui-count_indicator.uui-size-12{
951
+ --uui-horizontal-padding:3px;
952
+ --uui-line-height:10px;
953
+ --uui-font-size:8px;
954
+ }
955
+ .uui-theme-electric .uui-count_indicator.uui-size-18{
956
+ --uui-horizontal-padding:6px;
957
+ --uui-line-height:16px;
958
+ --uui-font-size:12px;
959
+ }
960
+ .uui-theme-electric .uui-count_indicator.uui-size-24{
961
+ --uui-line-height:22px;
962
+ --uui-font-size:14px;
963
+ }
964
+ .uui-theme-electric .uui-table-header-cell.uui-size-36{
965
+ --uui-horizontal-gap:12px;
966
+ }
967
+ .uui-theme-electric .uui-table-header-cell.uui-size-48{
968
+ --uui-horizontal-gap:12px;
969
+ }
970
+ .uui-theme-electric .uui-table-header-cell.uui-size-60{
971
+ --uui-horizontal-gap:12px;
909
972
  }