@epam/assets 5.0.0-alpha.3 → 5.0.0-alpha.4

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 (27) hide show
  1. package/package.json +3 -5
  2. package/scss/index.scss +0 -1
  3. package/scss/promo/typography.scss +2 -25
  4. package/scss/typography.scss +0 -31
  5. package/theme/theme_loveship.scss +222 -206
  6. package/theme/theme_promo.scss +191 -148
  7. package/theme/theme_vanilla_thunder.scss +43 -43
  8. package/less/control-mods.less +0 -52
  9. package/less/control-size.less +0 -43
  10. package/less/effects.less +0 -25
  11. package/less/font-faces.less +0 -106
  12. package/less/fonts.less +0 -13
  13. package/less/globals.less +0 -11
  14. package/less/index.less +0 -7
  15. package/less/loveship-color-vars.less +0 -172
  16. package/less/loveship-colors.less +0 -37
  17. package/less/text-size.less +0 -49
  18. package/less/typography.less +0 -196
  19. package/scss/control-mods.scss +0 -42
  20. package/scss/globals.scss +0 -9
  21. package/scss/loveship-color-vars.scss +0 -183
  22. package/styles/error-pages.less +0 -68
  23. package/styles/index.less +0 -2
  24. package/styles/menu.less +0 -359
  25. package/styles/scss/error-pages.scss +0 -67
  26. package/styles/scss/index.scss +0 -2
  27. 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,6 +200,10 @@
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);
@@ -681,25 +702,25 @@
681
702
 
682
703
  /* ------------------------------------ */
683
704
 
684
- :global(.tooltip-contrast),
685
- :global(.tooltip-gray80) {
705
+ .tooltip-contrast,
706
+ .tooltip-gray {
686
707
  --uui-tooltip-bg: var(--uui-surface-contrast);
687
708
  --uui-tooltip-text: var(--uui-contrast);
688
709
  }
689
710
 
690
- :global(.tooltip-default),
691
- :global(.tooltip-white) {
711
+ .tooltip-default,
712
+ .tooltip-white {
692
713
  --uui-tooltip-bg: var(--uui-surface);
693
714
  --uui-tooltip-text: var(--uui-text-primary);
694
715
  }
695
716
 
696
- :global(.tooltip-critical),
697
- :global(.tooltip-red) {
717
+ .tooltip-critical,
718
+ .tooltip-red {
698
719
  --uui-tooltip-bg: var(--uui-error-dark);
699
720
  --uui-tooltip-text: var(--uui-contrast);
700
721
  }
701
722
 
702
- :global(.badge-cyan) {
723
+ .badge-cyan {
703
724
  --uui-badge-bg: var(--cyan-30);
704
725
  --uui-badge-bg-hover: var(--cyan-40);
705
726
  --uui-badge-caption-solid: var(--white);
@@ -712,7 +733,7 @@
712
733
  --uui-badge-border-halftone-hover: var(--cyan-30);
713
734
  }
714
735
 
715
- :global(.badge-violet) {
736
+ .badge-violet {
716
737
  --uui-badge-bg: var(--violet-30);
717
738
  --uui-badge-bg-hover: var(--violet-40);
718
739
  --uui-badge-caption-solid: var(--white);
@@ -725,7 +746,7 @@
725
746
  --uui-badge-border-halftone-hover: var(--violet-30);
726
747
  }
727
748
 
728
- :global(.badge-orange) {
749
+ .badge-orange {
729
750
  --uui-badge-bg: var(--orange-30);
730
751
  --uui-badge-bg-hover: var(--orange-40);
731
752
  --uui-badge-caption-solid: var(--white);
@@ -738,7 +759,7 @@
738
759
  --uui-badge-border-halftone-hover: var(--orange-30);
739
760
  }
740
761
 
741
- :global(.badge-purple) {
762
+ .badge-purple {
742
763
  --uui-badge-bg: var(--purple-30);
743
764
  --uui-badge-bg-hover: var(--purple-40);
744
765
  --uui-badge-caption-solid: var(--white);
@@ -751,7 +772,7 @@
751
772
  --uui-badge-border-halftone-hover: var(--purple-30);
752
773
  }
753
774
 
754
- :global(.badge-default), :global(.badge-gray30) {
775
+ .badge-default, .badge-gray30 {
755
776
  --uui-badge-bg: var(--gray30);
756
777
  --uui-badge-bg-hover: var(--gray40);
757
778
  --uui-badge-caption-solid: var(--uui-text-primary);
@@ -764,7 +785,7 @@
764
785
  --uui-badge-border-halftone-hover: var(--gray50);
765
786
  }
766
787
 
767
- :global(.badge-info), :global(.badge-blue) {
788
+ .badge-info, .badge-blue {
768
789
  --uui-badge-bg: var(--uui-info);
769
790
  --uui-badge-bg-hover: var(--uui-info-dark);
770
791
  --uui-badge-caption-solid: var(--uui-contrast);
@@ -777,7 +798,7 @@
777
798
  --uui-badge-border-halftone-hover: var(--uui-info);
778
799
  }
779
800
 
780
- :global(.badge-success), :global(.badge-green) {
801
+ .badge-success, .badge-green {
781
802
  --uui-badge-bg: var(--uui-success);
782
803
  --uui-badge-bg-hover: var(--uui-success-dark);
783
804
  --uui-badge-caption-solid: var(--uui-contrast);
@@ -790,7 +811,7 @@
790
811
  --uui-badge-border-halftone-hover: var(--uui-success);
791
812
  }
792
813
 
793
- :global(.badge-warning), :global(.badge-amber) {
814
+ .badge-warning, .badge-amber {
794
815
  --uui-badge-bg: var(--uui-warning);
795
816
  --uui-badge-bg-hover: var(--uui-warning-dark);
796
817
  --uui-badge-caption-solid: var(--uui-text-primary);
@@ -803,7 +824,7 @@
803
824
  --uui-badge-border-halftone-hover: var(--uui-warning);
804
825
  }
805
826
 
806
- :global(.badge-error), :global(.badge-red) {
827
+ .badge-error, .badge-red {
807
828
  --uui-badge-bg: var(--uui-error);
808
829
  --uui-badge-bg-hover: var(--uui-error-dark);
809
830
  --uui-badge-caption-solid: var(--uui-contrast);
@@ -816,7 +837,7 @@
816
837
  --uui-badge-border-halftone-hover: var(--uui-error);
817
838
  }
818
839
 
819
- :global(.button-blue), :global(.button-primary) {
840
+ .button-blue, .button-primary {
820
841
  --uui-btn-bg: var(--uui-primary);
821
842
  --uui-btn-bg-hover: var(--uui-primary-dark);
822
843
  --uui-btn-bg-active: var(--uui-primary-darkest);
@@ -833,7 +854,7 @@
833
854
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
834
855
  }
835
856
 
836
- :global(.button-green), :global(.button-accent) {
857
+ .button-green, .button-accent {
837
858
  --uui-btn-bg: var(--uui-accent);
838
859
  --uui-btn-bg-hover: var(--uui-accent-dark);
839
860
  --uui-btn-bg-active: var(--uui-accent-darkest);
@@ -850,7 +871,7 @@
850
871
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
851
872
  }
852
873
 
853
- :global(.button-red), :global(.button-negative) {
874
+ .button-red, .button-negative {
854
875
  --uui-btn-bg: var(--uui-negative);
855
876
  --uui-btn-bg-hover: var(--uui-negative-dark);
856
877
  --uui-btn-bg-active: var(--uui-negative-darkest);
@@ -867,7 +888,9 @@
867
888
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
868
889
  }
869
890
 
870
- :global(.button-gray50), :global(.button-secondary) {
891
+ .button-gray50,
892
+ .button-gray,
893
+ .button-secondary {
871
894
  --uui-btn-bg: var(--uui-secondary);
872
895
  --uui-btn-bg-hover: var(--uui-secondary-dark);
873
896
  --uui-btn-bg-active: var(--uui-secondary-darkest);
@@ -884,222 +907,242 @@
884
907
  --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
885
908
  }
886
909
 
887
- :global(.icon-button-blue),
888
- :global(.icon-button-info) {
910
+ .icon-button-blue,
911
+ .icon-button-info {
889
912
  --uui-icon-btn: var(--uui-info);
890
913
  --uui-icon-btn-hover: var(--uui-info-dark);
891
914
  --uui-icon-btn-active: var(--uui-info-darkest);
892
915
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
893
916
  }
894
917
 
895
- :global(.icon-button-green),
896
- :global(.icon-button-success) {
918
+ .icon-button-green,
919
+ .icon-button-success {
897
920
  --uui-icon-btn: var(--uui-success);
898
921
  --uui-icon-btn-hover: var(--uui-success-dark);
899
922
  --uui-icon-btn-active: var(--uui-success-darkest);
900
923
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
901
924
  }
902
925
 
903
- :global(.icon-button-amber),
904
- :global(.icon-button-warning) {
926
+ .icon-button-amber,
927
+ .icon-button-warning {
905
928
  --uui-icon-btn: var(--uui-warning);
906
929
  --uui-icon-btn-hover: var(--uui-warning-dark);
907
930
  --uui-icon-btn-active: var(--uui-warning-darkest);
908
931
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
909
932
  }
910
933
 
911
- :global(.icon-button-red),
912
- :global(.icon-button-error) {
934
+ .icon-button-red,
935
+ .icon-button-error {
913
936
  --uui-icon-btn: var(--uui-error);
914
937
  --uui-icon-btn-hover: var(--uui-error-dark);
915
938
  --uui-icon-btn-active: var(--uui-error-darkest);
916
939
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
917
940
  }
918
941
 
919
- :global(.icon-button-gray30) {
942
+ .icon-button-gray30 {
920
943
  --uui-icon-btn: var(--uui-secondary-light);
921
944
  --uui-icon-btn-hover: var(--uui-button-bg-halftone);
922
945
  --uui-icon-btn-active: var(--uui-text-contrast);
923
946
  --uui-icon-btn-disabled: var(--uui-icon-disabled);;
924
947
  }
925
948
 
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);
949
+ .icon-button-gray50 {
950
+ --uui-icon-btn: var(--gray50);
951
+ --uui-icon-btn-hover: var(--gray60);
952
+ --uui-icon-btn-active: var(--gray70);
931
953
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
932
954
  }
933
955
 
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);
956
+ .icon-button-gray60,
957
+ .icon-button-default,
958
+ .icon-button-secondary {
959
+ --uui-icon-btn: var(--uui-secondary);
960
+ --uui-icon-btn-hover: var(--uui-secondary-dark);
961
+ --uui-icon-btn-active: var(--uui-secondary-darkest);
939
962
  --uui-icon-btn-disabled: var(--uui-icon-disabled);
940
963
  }
941
964
 
942
- :global(.notification-card-amber),
943
- :global(.notification-card-warning) {
965
+ .notification-card-amber,
966
+ .notification-card-warning {
944
967
  --uui-notification-card-fill: var(--uui-warning);
945
968
  --uui-notification-card-border: var(--uui-warning);
946
969
  --uui-notification-card-bg: var(--uui-surface);
947
970
  --uui-notification-card-text: var(--uui-text-primary);
948
971
  }
949
972
 
950
- :global(.notification-card-success) ,
951
- :global(.notification-card-green) {
973
+ .notification-card-success ,
974
+ .notification-card-green {
952
975
  --uui-notification-card-fill: var(--uui-success);
953
976
  --uui-notification-card-border: var(--uui-success);
954
977
  --uui-notification-card-bg: var(--uui-surface);
955
978
  --uui-notification-card-text: var(--uui-text-primary);
956
979
  }
957
980
 
958
- :global(.notification-card-info),
959
- :global(.notification-card-blue) {
981
+ .notification-card-info,
982
+ .notification-card-blue {
960
983
  --uui-notification-card-fill: var(--uui-info);
961
984
  --uui-notification-card-border: var(--uui-info);
962
985
  --uui-notification-card-bg: var(--uui-surface);
963
986
  --uui-notification-card-text: var(--uui-text-primary);
964
987
  }
965
988
 
966
- :global(.notification-card-error),
967
- :global(.notification-card-red) {
989
+ .notification-card-error,
990
+ .notification-card-red {
968
991
  --uui-notification-card-fill: var(--uui-error);
969
992
  --uui-notification-card-border: var(--uui-error);
970
993
  --uui-notification-card-bg: var(--uui-surface);
971
994
  --uui-notification-card-text: var(--uui-text-primary);
972
995
  }
973
996
 
974
- :global(.notification-card-gray60) {
997
+ .notification-card-gray60 {
975
998
  --uui-notification-card-fill: var(--uui-secondary-dark);
976
999
  --uui-notification-card-border: var(--uui-secondary-dark);
977
1000
  --uui-notification-card-bg: var(--uui-surface);
978
1001
  --uui-notification-card-text: var(--uui-text-primary);
979
1002
  }
980
1003
 
981
- :global(.alert-error),
982
- :global(.alert-red) {
1004
+ .alert-error,
1005
+ .alert-red {
983
1006
  --uui-alert-text: var(--uui-text-primary);
984
1007
  --uui-alert-bg: var(--uui-error-lightest);
985
1008
  --uui-alert-border: var(--uui-negative);
986
1009
  --uui-alert-icon: var(--uui-negative);
987
1010
  }
988
1011
 
989
- :global(.alert-warning),
990
- :global(.alert-amber) {
1012
+ .alert-warning,
1013
+ .alert-amber {
991
1014
  --uui-alert-text: var(--uui-text-primary);
992
1015
  --uui-alert-bg: var(--uui-warning-lightest);
993
1016
  --uui-alert-border: var(--amber);
994
1017
  --uui-alert-icon: var(--amber);
995
1018
  }
996
1019
 
997
- :global(.alert-success),
998
- :global(.alert-green) {
1020
+ .alert-success,
1021
+ .alert-green {
999
1022
  --uui-alert-text: var(--uui-text-primary);
1000
1023
  --uui-alert-bg: var(--uui-success-lightest);
1001
1024
  --uui-alert-border: var(--uui-accent);
1002
1025
  --uui-alert-icon: var(--uui-accent);
1003
1026
  }
1004
1027
 
1005
- :global(.alert-info),
1006
- :global(.alert-blue) {
1028
+ .alert-info,
1029
+ .alert-blue {
1007
1030
  --uui-alert-text: var(--uui-text-primary);
1008
1031
  --uui-alert-bg: var(--uui-info-lightest);
1009
1032
  --uui-alert-border: var(--uui-primary);
1010
1033
  --uui-alert-icon: var(--uui-primary);
1011
1034
  }
1012
1035
 
1013
- :global(.informer-default) {
1036
+ .informer-default {
1014
1037
  --uui-informer-bg: var(--gray30);
1015
1038
  --uui-informer-caption: var(--gray60);
1016
1039
  }
1017
1040
 
1018
- :global(.informer-focus) {
1041
+ .informer-focus {
1019
1042
  --uui-informer-bg: var(--red);
1020
1043
  --uui-informer-caption: var(--uui-contrast);
1021
1044
  }
1022
1045
 
1023
- :global(.informer-white) {
1046
+ .informer-white {
1024
1047
  --uui-informer-bg: var(--uui-surface);
1025
1048
  --uui-informer-caption: var(--uui-text-secondary);
1026
1049
  }
1027
1050
 
1028
- :global(.uui-text-brand),
1029
- :global(.uui-text-gray90 ) {
1051
+ .uui-text-info,
1052
+ .uui-text-blue {
1053
+ --uui-text: var(--uui-text-info);
1054
+ }
1055
+
1056
+ .uui-text-success,
1057
+ .uui-text-green {
1058
+ --uui-text: var(--uui-text-success);
1059
+ }
1060
+
1061
+ .uui-text-warning,
1062
+ .uui-text-amber {
1063
+ --uui-text: var(--uui-text-warning);
1064
+ }
1065
+
1066
+ .uui-text-error,
1067
+ .uui-text-red {
1068
+ --uui-text: var(--uui-text-error);
1069
+ }
1070
+
1071
+ .uui-text-brand,
1072
+ .uui-text-gray90 {
1030
1073
  --uui-text: var(--uui-text-brand);
1031
1074
  }
1032
1075
 
1033
- :global(.uui-text-primary),
1034
- :global(.uui-text-gray80 ) {
1076
+ .uui-text-primary,
1077
+ .uui-text-gray80 {
1035
1078
  --uui-text: var(--uui-text-primary);
1036
1079
  }
1037
1080
 
1038
- :global(.uui-text-secondary),
1039
- :global(.uui-text-gray60 ) {
1081
+ .uui-text-secondary,
1082
+ .uui-text-gray60 {
1040
1083
  --uui-text: var(--uui-text-secondary);
1041
1084
  }
1042
1085
 
1043
- :global(.uui-text-disabled),
1044
- :global(.uui-text-gray50 ) {
1086
+ .uui-text-disabled,
1087
+ .uui-text-gray50 {
1045
1088
  --uui-text: var(--uui-text-disabled);
1046
1089
  }
1047
1090
 
1048
- :global(.uui-text-contrast),
1049
- :global(.uui-text-gray5 ) {
1091
+ .uui-text-contrast,
1092
+ .uui-text-gray5 {
1050
1093
  --uui-text: var(--uui-text-contrast);
1051
1094
  }
1052
1095
 
1053
- :global(.uui-font-regular),
1054
- :global(.uui-font-sans) {
1096
+ .uui-font-regular,
1097
+ .uui-font-sans {
1055
1098
  --uui-text-font: var(--font-regular);
1056
1099
  }
1057
1100
 
1058
- :global(.uui-font-semibold),
1059
- :global(.uui-font-sans-semibold) {
1101
+ .uui-font-semibold,
1102
+ .uui-font-sans-semibold {
1060
1103
  --uui-text-font: var(--font-semibold);
1061
1104
  }
1062
1105
 
1063
- :global(.uui-font-italic),
1064
- :global(.uui-font-sans-italic) {
1106
+ .uui-font-italic,
1107
+ .uui-font-sans-italic {
1065
1108
  --uui-text-font: var(--font-italic);
1066
1109
  }
1067
1110
 
1068
- :global(.uui-font-primary),
1069
- :global(.uui-font-museo-sans) {
1111
+ .uui-font-primary,
1112
+ .uui-font-museo-sans {
1070
1113
  --uui-text-font: var(--font-primary);
1071
1114
  }
1072
1115
 
1073
- :global(.uui-font-promo),
1074
- :global(.uui-font-museo-slab) {
1116
+ .uui-font-promo,
1117
+ .uui-font-museo-slab {
1075
1118
  --uui-text-font: var(--font-promo);
1076
1119
  }
1077
1120
 
1078
- :global(.dropdown-container-white) {
1121
+ .dropdown-container-white {
1079
1122
  --uui-dropdown-container-bg: var(--white);
1080
1123
  }
1081
1124
 
1082
- :global(.dropdown-container-gray70) {
1125
+ .dropdown-container-gray70 {
1083
1126
  --uui-dropdown-container-bg: var(--gray70);
1084
1127
  }
1085
1128
 
1086
- :global(.flex-row-background-white) {
1129
+ .flex-row-background-white {
1087
1130
  --uui-flex-row-bg: var(--uui-surface);
1088
1131
  }
1089
1132
 
1090
- :global(.flex-row-background-gray5) {
1133
+ .flex-row-background-gray5 {
1091
1134
  --uui-flex-row-bg: var(--gray5);
1092
1135
  }
1093
1136
 
1094
- :global(.flex-row-background-none) {
1137
+ .flex-row-background-none {
1095
1138
  --uui-flex-row-bg: transparent;
1096
1139
  }
1097
1140
 
1098
- :global(.panel-white) {
1141
+ .panel-white {
1099
1142
  --uui-panel-bg: var(--uui-surface);
1100
1143
  }
1101
1144
 
1102
- :global(.panel-gray90) {
1145
+ .panel-gray90 {
1103
1146
  --uui-panel-bg: var(--uui-surface-inverted);
1104
1147
  }
1105
1148
  }