@epam/assets 5.0.0-alpha.3 → 5.0.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 (48) hide show
  1. package/css/theme/theme_loveship.css +1209 -0
  2. package/css/theme/theme_loveship.css.map +1 -0
  3. package/css/theme/theme_promo.css +961 -0
  4. package/css/theme/theme_promo.css.map +1 -0
  5. package/css/theme/theme_vanilla_thunder.css +806 -0
  6. package/css/theme/theme_vanilla_thunder.css.map +1 -0
  7. package/package.json +4 -6
  8. package/scss/font-faces.scss +2 -105
  9. package/scss/fonts.scss +2 -13
  10. package/scss/index.scss +4 -10
  11. package/scss/loveship/colors.scss +121 -0
  12. package/{less/font-faces.less → scss/loveship/font-faces.scss} +3 -43
  13. package/scss/loveship/fonts.scss +7 -0
  14. package/scss/loveship/typography.scss +153 -0
  15. package/scss/loveship-colors.scss +2 -56
  16. package/scss/promo/colors.scss +94 -49
  17. package/scss/promo/font-faces.scss +8 -0
  18. package/scss/promo/fonts.scss +2 -4
  19. package/scss/promo/typography.scss +2 -26
  20. package/scss/typography.scss +2 -172
  21. package/theme/theme_loveship.scss +403 -275
  22. package/theme/theme_promo.scss +242 -152
  23. package/theme/theme_vanilla_thunder.scss +43 -43
  24. package/less/control-mods.less +0 -52
  25. package/less/control-size.less +0 -43
  26. package/less/effects.less +0 -25
  27. package/less/fonts.less +0 -13
  28. package/less/globals.less +0 -11
  29. package/less/index.less +0 -7
  30. package/less/loveship-color-vars.less +0 -172
  31. package/less/loveship-colors.less +0 -37
  32. package/less/text-size.less +0 -49
  33. package/less/typography.less +0 -196
  34. package/scss/contrast.scss +0 -39
  35. package/scss/control-layout.scss +0 -2
  36. package/scss/control-mods.scss +0 -42
  37. package/scss/control-size.scss +0 -7
  38. package/scss/dnd.scss +0 -9
  39. package/scss/effects.scss +0 -25
  40. package/scss/globals.scss +0 -9
  41. package/scss/loveship-color-vars.scss +0 -183
  42. package/scss/text-size.scss +0 -37
  43. package/styles/error-pages.less +0 -68
  44. package/styles/index.less +0 -2
  45. package/styles/menu.less +0 -359
  46. package/styles/scss/error-pages.scss +0 -67
  47. package/styles/scss/index.scss +0 -2
  48. package/styles/scss/menu.scss +0 -359
package/theme/theme_promo.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /* Name convention */
2
2
  /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
3
- :global(.uui-theme-promo) {
3
+ .uui-theme-promo {
4
4
  --font-regular: 'Sans Regular', Arial, sans-serif;
5
5
  --font-semibold: 'Sans Semibold', Arial, sans-serif;
6
6
  --font-italic: 'Sans Italic', Arial, sans-serif;
@@ -20,76 +20,93 @@
20
20
  --gray70: #474A59;
21
21
  --gray80: #303240;
22
22
  --gray90: #1D1E26;
23
- --blue-lightest: #CEEFFF;
24
- --blue-light: #B5E6FF;
25
- --blue: #008ACE;
26
- --blue-dark: #0079B5;
27
- --blue-darkest: #00689B;
23
+
24
+ --blue-soft: #F5FDFF;
25
+ --blue-lightest: #D6F2FF;
26
+ --blue-light: #99DDFF;
27
+ --blue: #007BBD;
28
+ --blue-dark: #006AA3;
29
+ --blue-darkest: #005685;
30
+
31
+ --green-soft: #FCFFF5;
28
32
  --green-lightest: #EEFFCC;
29
- --green-light: #E5FFB3;
30
- --green: #88CC00;
31
- --green-dark: #77B300;
32
- --green-darkest: #669900;
33
+ --green-light: #CFF486;
34
+ --green: #65A300;
35
+ --green-dark: #528500;
36
+ --green-darkest: #446600;
37
+
38
+ --amber-soft: #FFFCF5;
33
39
  --amber-lightest: #FFF2CC;
34
- --amber-light: #FFECB3;
40
+ --amber-light: #FFE38F;
35
41
  --amber: #FFC000;
36
- --amber-dark: #E6AD00;
37
- --amber-darkest: #CC9A00;
38
- --red-lightest: #FADED9;
39
- --red-light: #F8CBC2;
40
- --red: #E54322;
41
- --red-dark: #D53919;
42
- --red-darkest: #BE3316;
43
- --white: #FFFFFF;
44
-
45
- --red-10: #FADED9;
46
- --red-20: #F5B7AB;
47
- --red-30: #E54322;
48
- --red-40: #A72014;
49
- --red-50: #901111;
50
-
51
- --orange-10: #FAE4CF;
52
- --orange-20: #F6CBA0;
53
- --orange-30: #E67E17;
54
- --orange-40: #89370E;
55
- --orange-50: #72250B;
56
-
57
- --amber-10: #FFF2CC;
58
- --amber-20: #FFE699;
59
- --amber-30: #FFC000;
60
- --amber-40: #995A00;
61
- --amber-50: #804000;
62
-
63
- --green-10: #EEFFCC;
64
- --green-20: #DDFF99;
65
- --green-30: #88CC00;
66
- --green-40: #669900;
67
- --green-50: #446600;
68
-
69
- --cyan-10: #E3FCFC;
70
- --cyan-20: #B4F8F8;
71
- --cyan-30: #14CCCC;
72
- --cyan-40: #0F9E9E;
73
- --cyan-50: #0B6F6F;
42
+ --amber-dark: #DB9D00;
43
+ --amber-darkest: #9F6B04;
74
44
 
75
- --blue-10: #CEEFFF;
76
- --blue-20: #9BDEFF;
77
- --blue-30: #008ACE;
78
- --blue-40: #00689B;
79
- --blue-50: #004668;
45
+ --red-soft: #FEF7F6;
46
+ --red-lightest: #FADED9;
47
+ --red-light: #F5B5A8;
48
+ --red: #DB3A1A;
49
+ --red-dark: #C03316;
50
+ --red-darkest: #A02B13;
80
51
 
81
- --violet-10: #DBCCFA;
82
- --violet-20: #BB9DF5;
83
- --violet-30: #5214CC;
84
- --violet-40: #3F0F9E;
85
- --violet-50: #2D0B6F;
52
+ --white: #FFFFFF;
86
53
 
54
+ --yellow-0: #FFFFF0;
55
+ --yellow-10: #FFFECC;
56
+ --yellow-20: #FFFCA4;
57
+ --yellow-30: #FDD63B;
58
+ --yellow-40: #F9B71D;
59
+ --yellow-50: #D3910C;
60
+
61
+ --orange-0: #FEF8F4;
62
+ --orange-10: #FFE8D7;
63
+ --orange-20: #FFCCA7;
64
+ --orange-30: #FF8B3E;
65
+ --orange-40: #F76B0D;
66
+ --orange-50: #BD4B00;
67
+
68
+ --fuchia-0: #FFF7FB;
69
+ --fuchia-10: #F9D8E7;
70
+ --fuchia-20: #EDADC8;
71
+ --fuchia-30: #EA4386;
72
+ --fuchia-40: #D61E68;
73
+ --fuchia-50: #AE1955;
74
+
75
+ --purple-0: #FDF6FE;
87
76
  --purple-10: #F2CCFA;
88
77
  --purple-20: #E79DF5;
89
- --purple-30: #AD14CC;
78
+ --purple-30: #B114D1;
90
79
  --purple-40: #860F9E;
91
80
  --purple-50: #5E0B6F;
92
81
 
82
+ --violet-0: #F8F6FE;
83
+ --violet-10: #DBCCFA;
84
+ --violet-20: #BB9DF5;
85
+ --violet-30: #773CEC;
86
+ --violet-40: #5514D6;
87
+ --violet-50: #40109E;
88
+
89
+ --cobalt-0: #F8FAFF;
90
+ --cobalt-10: #D9E2FC;
91
+ --cobalt-20: #AEC0F5;
92
+ --cobalt-30: #0F98FF;
93
+ --cobalt-40: #006FE5;
94
+ --cobalt-50: #0954A5;
95
+
96
+ --cyan-0: #F5FBFF;
97
+ --cyan-10: #D1FAFA;
98
+ --cyan-20: #AAEEEE;
99
+ --cyan-30: #14CCCC;
100
+ --cyan-40: #0F9E9E;
101
+ --cyan-50: #0B6F6F;
102
+
103
+ --mint-0: #F2FCF5;
104
+ --mint-10: #DDF3E4;
105
+ --mint-20: #B4DFC4;
106
+ --mint-30: #4FC48C;
107
+ --mint-40: #2E9E68;
108
+ --mint-50: #236E4A;
109
+
93
110
  --uui-accent: var(--green);
94
111
  --uui-accent-light: var(--green-light);
95
112
  --uui-accent-lightest: var(--green-lightest);
@@ -103,11 +120,11 @@
103
120
  --uui-primary-dark: var(--blue-dark);
104
121
  --uui-primary-darkest: var(--blue-darkest);
105
122
 
106
- --uui-secondary: var(--gray50);
123
+ --uui-secondary: var(--gray60);
107
124
  --uui-secondary-light: var(--gray30);
108
125
  --uui-secondary-lightest: var(--gray20);
109
- --uui-secondary-dark: var(--gray60);
110
- --uui-secondary-darkest: var(--gray70);
126
+ --uui-secondary-dark: var(--gray70);
127
+ --uui-secondary-darkest: var(--gray80);
111
128
  --uui-secondary-hover: var(--gray60);
112
129
  --uui-secondary-active: var(--gray70);
113
130
 
@@ -183,11 +200,16 @@
183
200
  --uui-button-bg-halftone: var(--white);
184
201
  --uui-button-caption-disabled: var(--gray50);
185
202
 
203
+ --uui-text-info: var(--uui-info);
204
+ --uui-text-warning: var(--uui-warning);
205
+ --uui-text-error: var(--uui-error);
206
+ --uui-text-success: var(--uui-success);
186
207
  --uui-text-brand: var(--gray90);
187
208
  --uui-text-primary: var(--gray80);
188
209
  --uui-text-secondary: var(--gray60);
189
210
  --uui-text-disabled: var(--gray50);
190
211
  --uui-text-contrast: var(--gray5);
212
+ --uui-text-white: var(--white);
191
213
 
192
214
  --uui-control-bg: var(--white);
193
215
  --uui-control-bg-checked: var(--uui-primary);
@@ -272,10 +294,6 @@
272
294
  --uui-btn-font: var(--font-semibold);
273
295
 
274
296
  /* LinkButton vars */
275
- --uui-link-button-text: var(--uui-primary);
276
- --uui-link-button-text-hover: var(--uui-primary-dark);
277
- --uui-link-button-text-active: var(--uui-primary-darkest);
278
- --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
279
297
  --uui-link-button-font: var(--font-semibold);
280
298
 
281
299
  /* DatePicker vars */
@@ -498,6 +516,7 @@
498
516
 
499
517
  /* MainMenu */
500
518
  --uui-main_menu-text: var(--uui-text-contrast);
519
+ --uui-main_menu-text-active: var(--uui-text-contrast);
501
520
  --uui-main_menu-bg: var(--uui-surface-contrast);
502
521
  --uui-main_menu-hover: var(--uui-surface-contrast-hover);
503
522
  --uui-main_menu-active: var(--uui-surface-contrast-active);
@@ -681,25 +700,25 @@
681
700
 
682
701
  /* ------------------------------------ */
683
702
 
684
- :global(.tooltip-contrast),
685
- :global(.tooltip-gray80) {
703
+ .tooltip-contrast,
704
+ .tooltip-gray {
686
705
  --uui-tooltip-bg: var(--uui-surface-contrast);
687
706
  --uui-tooltip-text: var(--uui-contrast);
688
707
  }
689
708
 
690
- :global(.tooltip-default),
691
- :global(.tooltip-white) {
709
+ .tooltip-default,
710
+ .tooltip-white {
692
711
  --uui-tooltip-bg: var(--uui-surface);
693
712
  --uui-tooltip-text: var(--uui-text-primary);
694
713
  }
695
714
 
696
- :global(.tooltip-critical),
697
- :global(.tooltip-red) {
715
+ .tooltip-critical,
716
+ .tooltip-red {
698
717
  --uui-tooltip-bg: var(--uui-error-dark);
699
718
  --uui-tooltip-text: var(--uui-contrast);
700
719
  }
701
720
 
702
- :global(.badge-cyan) {
721
+ .badge-cyan {
703
722
  --uui-badge-bg: var(--cyan-30);
704
723
  --uui-badge-bg-hover: var(--cyan-40);
705
724
  --uui-badge-caption-solid: var(--white);
@@ -712,7 +731,7 @@
712
731
  --uui-badge-border-halftone-hover: var(--cyan-30);
713
732
  }
714
733
 
715
- :global(.badge-violet) {
734
+ .badge-violet {
716
735
  --uui-badge-bg: var(--violet-30);
717
736
  --uui-badge-bg-hover: var(--violet-40);
718
737
  --uui-badge-caption-solid: var(--white);
@@ -725,7 +744,7 @@
725
744
  --uui-badge-border-halftone-hover: var(--violet-30);
726
745
  }
727
746
 
728
- :global(.badge-orange) {
747
+ .badge-orange {
729
748
  --uui-badge-bg: var(--orange-30);
730
749
  --uui-badge-bg-hover: var(--orange-40);
731
750
  --uui-badge-caption-solid: var(--white);
@@ -738,7 +757,7 @@
738
757
  --uui-badge-border-halftone-hover: var(--orange-30);
739
758
  }
740
759
 
741
- :global(.badge-purple) {
760
+ .badge-purple {
742
761
  --uui-badge-bg: var(--purple-30);
743
762
  --uui-badge-bg-hover: var(--purple-40);
744
763
  --uui-badge-caption-solid: var(--white);
@@ -751,7 +770,7 @@
751
770
  --uui-badge-border-halftone-hover: var(--purple-30);
752
771
  }
753
772
 
754
- :global(.badge-default), :global(.badge-gray30) {
773
+ .badge-default, .badge-gray30 {
755
774
  --uui-badge-bg: var(--gray30);
756
775
  --uui-badge-bg-hover: var(--gray40);
757
776
  --uui-badge-caption-solid: var(--uui-text-primary);
@@ -764,7 +783,7 @@
764
783
  --uui-badge-border-halftone-hover: var(--gray50);
765
784
  }
766
785
 
767
- :global(.badge-info), :global(.badge-blue) {
786
+ .badge-info, .badge-blue {
768
787
  --uui-badge-bg: var(--uui-info);
769
788
  --uui-badge-bg-hover: var(--uui-info-dark);
770
789
  --uui-badge-caption-solid: var(--uui-contrast);
@@ -777,7 +796,7 @@
777
796
  --uui-badge-border-halftone-hover: var(--uui-info);
778
797
  }
779
798
 
780
- :global(.badge-success), :global(.badge-green) {
799
+ .badge-success, .badge-green {
781
800
  --uui-badge-bg: var(--uui-success);
782
801
  --uui-badge-bg-hover: var(--uui-success-dark);
783
802
  --uui-badge-caption-solid: var(--uui-contrast);
@@ -790,7 +809,7 @@
790
809
  --uui-badge-border-halftone-hover: var(--uui-success);
791
810
  }
792
811
 
793
- :global(.badge-warning), :global(.badge-amber) {
812
+ .badge-warning, .badge-amber {
794
813
  --uui-badge-bg: var(--uui-warning);
795
814
  --uui-badge-bg-hover: var(--uui-warning-dark);
796
815
  --uui-badge-caption-solid: var(--uui-text-primary);
@@ -803,7 +822,7 @@
803
822
  --uui-badge-border-halftone-hover: var(--uui-warning);
804
823
  }
805
824
 
806
- :global(.badge-error), :global(.badge-red) {
825
+ .badge-error, .badge-red {
807
826
  --uui-badge-bg: var(--uui-error);
808
827
  --uui-badge-bg-hover: var(--uui-error-dark);
809
828
  --uui-badge-caption-solid: var(--uui-contrast);
@@ -816,7 +835,7 @@
816
835
  --uui-badge-border-halftone-hover: var(--uui-error);
817
836
  }
818
837
 
819
- :global(.button-blue), :global(.button-primary) {
838
+ .button-blue, .button-primary {
820
839
  --uui-btn-bg: var(--uui-primary);
821
840
  --uui-btn-bg-hover: var(--uui-primary-dark);
822
841
  --uui-btn-bg-active: var(--uui-primary-darkest);
@@ -833,7 +852,7 @@
833
852
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
834
853
  }
835
854
 
836
- :global(.button-green), :global(.button-accent) {
855
+ .button-green, .button-accent {
837
856
  --uui-btn-bg: var(--uui-accent);
838
857
  --uui-btn-bg-hover: var(--uui-accent-dark);
839
858
  --uui-btn-bg-active: var(--uui-accent-darkest);
@@ -850,7 +869,7 @@
850
869
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
851
870
  }
852
871
 
853
- :global(.button-red), :global(.button-negative) {
872
+ .button-red, .button-negative {
854
873
  --uui-btn-bg: var(--uui-negative);
855
874
  --uui-btn-bg-hover: var(--uui-negative-dark);
856
875
  --uui-btn-bg-active: var(--uui-negative-darkest);
@@ -867,7 +886,9 @@
867
886
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
868
887
  }
869
888
 
870
- :global(.button-gray50), :global(.button-secondary) {
889
+ .button-gray50,
890
+ .button-gray,
891
+ .button-secondary {
871
892
  --uui-btn-bg: var(--uui-secondary);
872
893
  --uui-btn-bg-hover: var(--uui-secondary-dark);
873
894
  --uui-btn-bg-active: var(--uui-secondary-darkest);
@@ -884,222 +905,291 @@
884
905
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
885
906
  }
886
907
 
887
- :global(.icon-button-blue),
888
- :global(.icon-button-info) {
908
+ .link-button-primary,
909
+ .link-button-blue {
910
+ --uui-link-button-text: var(--blue);
911
+ --uui-link-button-text-hover: var(--blue-dark);
912
+ --uui-link-button-text-active: var(--blue-darkest);
913
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
914
+ }
915
+
916
+ .link-button-secondary,
917
+ .link-button-gray60 {
918
+ --uui-link-button-text: var(--uui-secondary);
919
+ --uui-link-button-text-hover: var(--uui-secondary-dark);
920
+ --uui-link-button-text-active: var(--uui-secondary-darkest);
921
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
922
+ }
923
+
924
+ .link-button-contrast,
925
+ .link-button-gray10 {
926
+ --uui-link-button-text: var(--gray10);
927
+ --uui-link-button-text-hover: var(--gray20);
928
+ --uui-link-button-text-active: var(--gray30);
929
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
930
+ }
931
+
932
+ .link-button-green {
933
+ --uui-link-button-text: var(--green);
934
+ --uui-link-button-text-hover: var(--green-dark);
935
+ --uui-link-button-text-active: var(--green-darkest);
936
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
937
+ }
938
+
939
+ .link-button-amber {
940
+ --uui-link-button-text: var(--amber);
941
+ --uui-link-button-text-hover: var(--amber-dark);
942
+ --uui-link-button-text-active: var(--amber-darkest);
943
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
944
+ }
945
+
946
+ .link-button-red {
947
+ --uui-link-button-text: var(--red);
948
+ --uui-link-button-text-hover: var(--red-dark);
949
+ --uui-link-button-text-active: var(--red-darkest);
950
+ --uui-link-button-text-disabled: var(--uui-button-caption-disabled);
951
+ }
952
+
953
+ .icon-button-blue,
954
+ .icon-button-info {
889
955
  --uui-icon-btn: var(--uui-info);
890
956
  --uui-icon-btn-hover: var(--uui-info-dark);
891
957
  --uui-icon-btn-active: var(--uui-info-darkest);
892
958
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
893
959
  }
894
960
 
895
- :global(.icon-button-green),
896
- :global(.icon-button-success) {
961
+ .icon-button-green,
962
+ .icon-button-success {
897
963
  --uui-icon-btn: var(--uui-success);
898
964
  --uui-icon-btn-hover: var(--uui-success-dark);
899
965
  --uui-icon-btn-active: var(--uui-success-darkest);
900
966
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
901
967
  }
902
968
 
903
- :global(.icon-button-amber),
904
- :global(.icon-button-warning) {
969
+ .icon-button-amber,
970
+ .icon-button-warning {
905
971
  --uui-icon-btn: var(--uui-warning);
906
972
  --uui-icon-btn-hover: var(--uui-warning-dark);
907
973
  --uui-icon-btn-active: var(--uui-warning-darkest);
908
974
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
909
975
  }
910
976
 
911
- :global(.icon-button-red),
912
- :global(.icon-button-error) {
977
+ .icon-button-red,
978
+ .icon-button-error {
913
979
  --uui-icon-btn: var(--uui-error);
914
980
  --uui-icon-btn-hover: var(--uui-error-dark);
915
981
  --uui-icon-btn-active: var(--uui-error-darkest);
916
982
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
917
983
  }
918
984
 
919
- :global(.icon-button-gray30) {
985
+ .icon-button-gray30 {
920
986
  --uui-icon-btn: var(--uui-secondary-light);
921
987
  --uui-icon-btn-hover: var(--uui-button-bg-halftone);
922
988
  --uui-icon-btn-active: var(--uui-text-contrast);
923
989
  --uui-icon-btn-disabled: var(--uui-icon-disabled);;
924
990
  }
925
991
 
926
- :global(.icon-button-gray50),
927
- :global(.icon-button-secondary) {
928
- --uui-icon-btn: var(--uui-secondary);
929
- --uui-icon-btn-hover: var(--uui-secondary-dark);
930
- --uui-icon-btn-active: var(--uui-secondary-darkest);
992
+ .icon-button-gray50 {
993
+ --uui-icon-btn: var(--gray50);
994
+ --uui-icon-btn-hover: var(--gray60);
995
+ --uui-icon-btn-active: var(--gray70);
931
996
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
932
997
  }
933
998
 
934
- :global(.icon-button-gray60),
935
- :global(.icon-button-default) {
936
- --uui-icon-btn: var(--uui-icon);
937
- --uui-icon-btn-hover: var(--uui-icon-hover);
938
- --uui-icon-btn-active: var(--uui-icon-active);
999
+ .icon-button-gray60,
1000
+ .icon-button-default,
1001
+ .icon-button-secondary {
1002
+ --uui-icon-btn: var(--uui-secondary);
1003
+ --uui-icon-btn-hover: var(--uui-secondary-dark);
1004
+ --uui-icon-btn-active: var(--uui-secondary-darkest);
939
1005
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
940
1006
  }
941
1007
 
942
- :global(.notification-card-amber),
943
- :global(.notification-card-warning) {
1008
+ .notification-card-amber,
1009
+ .notification-card-warning {
944
1010
  --uui-notification-card-fill: var(--uui-warning);
945
1011
  --uui-notification-card-border: var(--uui-warning);
946
1012
  --uui-notification-card-bg: var(--uui-surface);
947
1013
  --uui-notification-card-text: var(--uui-text-primary);
948
1014
  }
949
1015
 
950
- :global(.notification-card-success) ,
951
- :global(.notification-card-green) {
1016
+ .notification-card-success ,
1017
+ .notification-card-green {
952
1018
  --uui-notification-card-fill: var(--uui-success);
953
1019
  --uui-notification-card-border: var(--uui-success);
954
1020
  --uui-notification-card-bg: var(--uui-surface);
955
1021
  --uui-notification-card-text: var(--uui-text-primary);
956
1022
  }
957
1023
 
958
- :global(.notification-card-info),
959
- :global(.notification-card-blue) {
1024
+ .notification-card-info,
1025
+ .notification-card-blue {
960
1026
  --uui-notification-card-fill: var(--uui-info);
961
1027
  --uui-notification-card-border: var(--uui-info);
962
1028
  --uui-notification-card-bg: var(--uui-surface);
963
1029
  --uui-notification-card-text: var(--uui-text-primary);
964
1030
  }
965
1031
 
966
- :global(.notification-card-error),
967
- :global(.notification-card-red) {
1032
+ .notification-card-error,
1033
+ .notification-card-red {
968
1034
  --uui-notification-card-fill: var(--uui-error);
969
1035
  --uui-notification-card-border: var(--uui-error);
970
1036
  --uui-notification-card-bg: var(--uui-surface);
971
1037
  --uui-notification-card-text: var(--uui-text-primary);
972
1038
  }
973
1039
 
974
- :global(.notification-card-gray60) {
1040
+ .notification-card-gray60 {
975
1041
  --uui-notification-card-fill: var(--uui-secondary-dark);
976
1042
  --uui-notification-card-border: var(--uui-secondary-dark);
977
1043
  --uui-notification-card-bg: var(--uui-surface);
978
1044
  --uui-notification-card-text: var(--uui-text-primary);
979
1045
  }
980
1046
 
981
- :global(.alert-error),
982
- :global(.alert-red) {
1047
+ .alert-error,
1048
+ .alert-red {
983
1049
  --uui-alert-text: var(--uui-text-primary);
984
1050
  --uui-alert-bg: var(--uui-error-lightest);
985
1051
  --uui-alert-border: var(--uui-negative);
986
1052
  --uui-alert-icon: var(--uui-negative);
987
1053
  }
988
1054
 
989
- :global(.alert-warning),
990
- :global(.alert-amber) {
1055
+ .alert-warning,
1056
+ .alert-amber {
991
1057
  --uui-alert-text: var(--uui-text-primary);
992
1058
  --uui-alert-bg: var(--uui-warning-lightest);
993
1059
  --uui-alert-border: var(--amber);
994
1060
  --uui-alert-icon: var(--amber);
995
1061
  }
996
1062
 
997
- :global(.alert-success),
998
- :global(.alert-green) {
1063
+ .alert-success,
1064
+ .alert-green {
999
1065
  --uui-alert-text: var(--uui-text-primary);
1000
1066
  --uui-alert-bg: var(--uui-success-lightest);
1001
1067
  --uui-alert-border: var(--uui-accent);
1002
1068
  --uui-alert-icon: var(--uui-accent);
1003
1069
  }
1004
1070
 
1005
- :global(.alert-info),
1006
- :global(.alert-blue) {
1071
+ .alert-info,
1072
+ .alert-blue {
1007
1073
  --uui-alert-text: var(--uui-text-primary);
1008
1074
  --uui-alert-bg: var(--uui-info-lightest);
1009
1075
  --uui-alert-border: var(--uui-primary);
1010
1076
  --uui-alert-icon: var(--uui-primary);
1011
1077
  }
1012
1078
 
1013
- :global(.informer-default) {
1079
+ .informer-default {
1014
1080
  --uui-informer-bg: var(--gray30);
1015
1081
  --uui-informer-caption: var(--gray60);
1016
1082
  }
1017
1083
 
1018
- :global(.informer-focus) {
1084
+ .informer-focus {
1019
1085
  --uui-informer-bg: var(--red);
1020
1086
  --uui-informer-caption: var(--uui-contrast);
1021
1087
  }
1022
1088
 
1023
- :global(.informer-white) {
1089
+ .informer-white {
1024
1090
  --uui-informer-bg: var(--uui-surface);
1025
1091
  --uui-informer-caption: var(--uui-text-secondary);
1026
1092
  }
1027
1093
 
1028
- :global(.uui-text-brand),
1029
- :global(.uui-text-gray90 ) {
1094
+ .uui-text-info,
1095
+ .uui-text-blue {
1096
+ --uui-text: var(--uui-text-info);
1097
+ }
1098
+
1099
+ .uui-text-success,
1100
+ .uui-text-green {
1101
+ --uui-text: var(--uui-text-success);
1102
+ }
1103
+
1104
+ .uui-text-warning,
1105
+ .uui-text-amber {
1106
+ --uui-text: var(--uui-text-warning);
1107
+ }
1108
+
1109
+ .uui-text-error,
1110
+ .uui-text-red {
1111
+ --uui-text: var(--uui-text-error);
1112
+ }
1113
+
1114
+ .uui-text-brand,
1115
+ .uui-text-gray90 {
1030
1116
  --uui-text: var(--uui-text-brand);
1031
1117
  }
1032
1118
 
1033
- :global(.uui-text-primary),
1034
- :global(.uui-text-gray80 ) {
1119
+ .uui-text-primary,
1120
+ .uui-text-gray80 {
1035
1121
  --uui-text: var(--uui-text-primary);
1036
1122
  }
1037
1123
 
1038
- :global(.uui-text-secondary),
1039
- :global(.uui-text-gray60 ) {
1124
+ .uui-text-secondary,
1125
+ .uui-text-gray60 {
1040
1126
  --uui-text: var(--uui-text-secondary);
1041
1127
  }
1042
1128
 
1043
- :global(.uui-text-disabled),
1044
- :global(.uui-text-gray50 ) {
1129
+ .uui-text-disabled,
1130
+ .uui-text-gray50 {
1045
1131
  --uui-text: var(--uui-text-disabled);
1046
1132
  }
1047
1133
 
1048
- :global(.uui-text-contrast),
1049
- :global(.uui-text-gray5 ) {
1134
+ .uui-text-contrast,
1135
+ .uui-text-gray5 {
1050
1136
  --uui-text: var(--uui-text-contrast);
1051
1137
  }
1052
1138
 
1053
- :global(.uui-font-regular),
1054
- :global(.uui-font-sans) {
1139
+ .uui-text-white {
1140
+ --uui-text: var(--uui-text-white);
1141
+ }
1142
+
1143
+ .uui-font-regular,
1144
+ .uui-font-sans {
1055
1145
  --uui-text-font: var(--font-regular);
1056
1146
  }
1057
1147
 
1058
- :global(.uui-font-semibold),
1059
- :global(.uui-font-sans-semibold) {
1148
+ .uui-font-semibold,
1149
+ .uui-font-sans-semibold {
1060
1150
  --uui-text-font: var(--font-semibold);
1061
1151
  }
1062
1152
 
1063
- :global(.uui-font-italic),
1064
- :global(.uui-font-sans-italic) {
1153
+ .uui-font-italic,
1154
+ .uui-font-sans-italic {
1065
1155
  --uui-text-font: var(--font-italic);
1066
1156
  }
1067
1157
 
1068
- :global(.uui-font-primary),
1069
- :global(.uui-font-museo-sans) {
1158
+ .uui-font-primary,
1159
+ .uui-font-museo-sans {
1070
1160
  --uui-text-font: var(--font-primary);
1071
1161
  }
1072
1162
 
1073
- :global(.uui-font-promo),
1074
- :global(.uui-font-museo-slab) {
1163
+ .uui-font-promo,
1164
+ .uui-font-museo-slab {
1075
1165
  --uui-text-font: var(--font-promo);
1076
1166
  }
1077
1167
 
1078
- :global(.dropdown-container-white) {
1168
+ .dropdown-container-white {
1079
1169
  --uui-dropdown-container-bg: var(--white);
1080
1170
  }
1081
1171
 
1082
- :global(.dropdown-container-gray70) {
1172
+ .dropdown-container-gray70 {
1083
1173
  --uui-dropdown-container-bg: var(--gray70);
1084
1174
  }
1085
1175
 
1086
- :global(.flex-row-background-white) {
1176
+ .flex-row-background-white {
1087
1177
  --uui-flex-row-bg: var(--uui-surface);
1088
1178
  }
1089
1179
 
1090
- :global(.flex-row-background-gray5) {
1180
+ .flex-row-background-gray5 {
1091
1181
  --uui-flex-row-bg: var(--gray5);
1092
1182
  }
1093
1183
 
1094
- :global(.flex-row-background-none) {
1184
+ .flex-row-background-none {
1095
1185
  --uui-flex-row-bg: transparent;
1096
1186
  }
1097
1187
 
1098
- :global(.panel-white) {
1188
+ .panel-white {
1099
1189
  --uui-panel-bg: var(--uui-surface);
1100
1190
  }
1101
1191
 
1102
- :global(.panel-gray90) {
1192
+ .panel-gray90 {
1103
1193
  --uui-panel-bg: var(--uui-surface-inverted);
1104
1194
  }
1105
1195
  }