@eui/styles 21.0.0-next.35 → 21.0.0-next.37
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.
- package/dist/base/02-tokens/maps.scss +267 -154
- package/dist/base/03-vars/vars.scss +46 -77
- package/dist/base/99-utilities/default/tokens/_typography.scss +2 -2
- package/dist/eui-base.css +1 -1
- package/dist/eui-base.css.map +1 -1
- package/dist/eui-showcase-all.css +1 -1
- package/dist/eui-showcase-all.css.map +1 -1
- package/dist/eui-utilities.css +1 -1
- package/dist/eui-utilities.css.map +1 -1
- package/dist/eui.css +1 -1
- package/dist/eui.css.map +1 -1
- package/package.json +1 -1
|
@@ -46,7 +46,7 @@ $breakpoint-map: (
|
|
|
46
46
|
);
|
|
47
47
|
|
|
48
48
|
// naming
|
|
49
|
-
$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, '
|
|
49
|
+
$xs: base.new-breakpoint(min-width map.get($breakpoint-map, 'xs') max-width map.get($breakpoint-map, 'sm') - 1) !default;
|
|
50
50
|
$s: base.new-breakpoint(min-width map.get($breakpoint-map, 'sm') max-width map.get($breakpoint-map, 'md') - 1) !default;
|
|
51
51
|
$m: base.new-breakpoint(min-width map.get($breakpoint-map, 'md') max-width map.get($breakpoint-map, 'lg') - 1) !default;
|
|
52
52
|
$l: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg') max-width map.get($breakpoint-map, 'xl') - 1) !default;
|
|
@@ -55,8 +55,8 @@ $xxl: base.new-breakpoint(min-width map.get($breakpoint-map, 'xxl') max-width ma
|
|
|
55
55
|
$fhd: base.new-breakpoint(min-width map.get($breakpoint-map, 'fhd') max-width map.get($breakpoint-map, '2k') - 1) !default;
|
|
56
56
|
|
|
57
57
|
// human naming
|
|
58
|
-
$eui-bkp-mobile-
|
|
59
|
-
$eui-bkp-mobile:
|
|
58
|
+
$eui-bkp-mobile-xs: $xs !default;
|
|
59
|
+
$eui-bkp-mobile: $s !default;
|
|
60
60
|
$eui-bkp-mobile-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'md')) !default;
|
|
61
61
|
$eui-bkp-tablet: $m !default;
|
|
62
62
|
$eui-bkp-tablet-up: base.new-breakpoint(min-width map.get($breakpoint-map, 'lg')) !default;
|
|
@@ -794,63 +794,277 @@ $box-shadow-map: (
|
|
|
794
794
|
|
|
795
795
|
|
|
796
796
|
// TYPOGRAPHY
|
|
797
|
-
|
|
798
|
-
// new remapping against ECL v5
|
|
799
|
-
|
|
800
|
-
// eUI 2xs => ECL none => 0.675rem/0.875rem // 10px
|
|
801
|
-
// eUI xs => ECL 2xs => 0.75rem/0.875rem // 12px
|
|
802
|
-
// eUI s => ECL xs => 0.875rem/1.25rem // 14px
|
|
803
|
-
// eUI m => ECL s => 1rem/1.5rem // 16px
|
|
804
|
-
// eUI l => ECL m => 1.125rem/1.75rem // 18px
|
|
805
|
-
// eUI xl => ECL l => 1.25rem/1.75rem // 20px
|
|
806
|
-
// eUI 2xl => ECL xl => 1.375rem/2rem // 22px
|
|
807
|
-
// eUI 3xl => ECL 2xl => 1.5rem/2.25rem // 24px
|
|
808
|
-
// eUI 4xl => ECL 3xl => 1.75rem/2.25rem // 28px
|
|
809
|
-
// eUI 5xl => ECL 4xl => 2rem/2.75rem // 32px
|
|
810
|
-
// eUI 6XL => ECL 5xl => 2.25rem/3rem // 36px
|
|
811
|
-
// eUI 7XL => ECL 6xl => 2.5rem/3rem // 40px
|
|
812
|
-
// eUI 8XL => ECL 7xl => 3.25rem/3.75rem // 52px
|
|
813
|
-
// eUI 9XL => ECL 8xl => 3.75rem/4.25rem // 60px
|
|
814
|
-
// eUI 10XL => ECL 9xl => 4.5rem/4.875rem // 72px
|
|
815
|
-
|
|
816
|
-
$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl', '10xl');
|
|
797
|
+
$font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl');
|
|
817
798
|
|
|
818
799
|
$font-size-map: (
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
10xl: 4.5rem // 72px
|
|
800
|
+
'8xl': 3.75rem,
|
|
801
|
+
'7xl': 3.25rem,
|
|
802
|
+
'6xl': 2.5rem,
|
|
803
|
+
'5xl': 2.25rem,
|
|
804
|
+
'4xl': 2rem,
|
|
805
|
+
'3xl': 1.75rem,
|
|
806
|
+
'2xl': 1.5rem,
|
|
807
|
+
'xl': 1.375rem,
|
|
808
|
+
'l': 1.25rem,
|
|
809
|
+
'm': 1.125rem,
|
|
810
|
+
's': 1rem,
|
|
811
|
+
'xs': 0.875rem,
|
|
812
|
+
'2xs': 0.75rem,
|
|
813
|
+
'3xs': 0.675rem
|
|
834
814
|
);
|
|
835
815
|
|
|
836
816
|
$font-line-height-map: (
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
9xl: 4.25rem,
|
|
851
|
-
10xl: 4.875rem
|
|
817
|
+
'7xl': 3.75rem,
|
|
818
|
+
'6xl': 3.5rem,
|
|
819
|
+
'5xl': 3.25rem,
|
|
820
|
+
'4xl': 3rem,
|
|
821
|
+
'3xl': 2.75rem,
|
|
822
|
+
'2xl': 2.5rem,
|
|
823
|
+
'xl': 2.25rem,
|
|
824
|
+
'l': 2rem,
|
|
825
|
+
'm': 1.75rem,
|
|
826
|
+
's': 1.5rem,
|
|
827
|
+
'xs': 1.25rem,
|
|
828
|
+
'2xs': 1rem,
|
|
829
|
+
'3xs': 0.875rem
|
|
852
830
|
);
|
|
853
831
|
|
|
832
|
+
$font-map: (
|
|
833
|
+
8xl: (
|
|
834
|
+
desktop: (
|
|
835
|
+
font-size: 8xl,
|
|
836
|
+
line-height: 7xl
|
|
837
|
+
),
|
|
838
|
+
tablet: (
|
|
839
|
+
font-size: 7xl,
|
|
840
|
+
line-height: 6xl
|
|
841
|
+
),
|
|
842
|
+
mobile: (
|
|
843
|
+
font-size: 6xl,
|
|
844
|
+
line-height: 3xl
|
|
845
|
+
),
|
|
846
|
+
mobile-xs: (
|
|
847
|
+
font-size: 4xl,
|
|
848
|
+
line-height: xl
|
|
849
|
+
)
|
|
850
|
+
),
|
|
851
|
+
7xl: (
|
|
852
|
+
desktop: (
|
|
853
|
+
font-size: 7xl,
|
|
854
|
+
line-height: 6xl
|
|
855
|
+
),
|
|
856
|
+
tablet: (
|
|
857
|
+
font-size: 6xl,
|
|
858
|
+
line-height: 3xl
|
|
859
|
+
),
|
|
860
|
+
mobile: (
|
|
861
|
+
font-size: 5xl,
|
|
862
|
+
line-height: 3xl
|
|
863
|
+
),
|
|
864
|
+
mobile-xs: (
|
|
865
|
+
font-size: 4xl,
|
|
866
|
+
line-height: xl
|
|
867
|
+
)
|
|
868
|
+
),
|
|
869
|
+
6xl: (
|
|
870
|
+
desktop: (
|
|
871
|
+
font-size: 6xl,
|
|
872
|
+
line-height: 4xl
|
|
873
|
+
),
|
|
874
|
+
tablet: (
|
|
875
|
+
font-size: 5xl,
|
|
876
|
+
line-height: 3xl
|
|
877
|
+
),
|
|
878
|
+
mobile: (
|
|
879
|
+
font-size: 4xl,
|
|
880
|
+
line-height: xl
|
|
881
|
+
),
|
|
882
|
+
mobile-xs: (
|
|
883
|
+
font-size: 3xl,
|
|
884
|
+
line-height: xl
|
|
885
|
+
)
|
|
886
|
+
),
|
|
887
|
+
5xl: (
|
|
888
|
+
desktop: (
|
|
889
|
+
font-size: 5xl,
|
|
890
|
+
line-height: 3xl
|
|
891
|
+
),
|
|
892
|
+
tablet: (
|
|
893
|
+
font-size: 4xl,
|
|
894
|
+
line-height: xl
|
|
895
|
+
),
|
|
896
|
+
mobile: (
|
|
897
|
+
font-size: 3xl,
|
|
898
|
+
line-height: xl
|
|
899
|
+
),
|
|
900
|
+
mobile-xs: (
|
|
901
|
+
font-size: 2xl,
|
|
902
|
+
line-height: l
|
|
903
|
+
)
|
|
904
|
+
),
|
|
905
|
+
4xl: (
|
|
906
|
+
desktop: (
|
|
907
|
+
font-size: 4xl,
|
|
908
|
+
line-height: xl
|
|
909
|
+
),
|
|
910
|
+
tablet: (
|
|
911
|
+
font-size: 3xl,
|
|
912
|
+
line-height: xl
|
|
913
|
+
),
|
|
914
|
+
mobile: (
|
|
915
|
+
font-size: 2xl,
|
|
916
|
+
line-height: l
|
|
917
|
+
),
|
|
918
|
+
mobile-xs: (
|
|
919
|
+
font-size: xl,
|
|
920
|
+
line-height: l
|
|
921
|
+
)
|
|
922
|
+
),
|
|
923
|
+
3xl: (
|
|
924
|
+
desktop: (
|
|
925
|
+
font-size: 3xl,
|
|
926
|
+
line-height: xl
|
|
927
|
+
),
|
|
928
|
+
tablet: (
|
|
929
|
+
font-size: 2xl,
|
|
930
|
+
line-height: xl
|
|
931
|
+
),
|
|
932
|
+
mobile: (
|
|
933
|
+
font-size: xl,
|
|
934
|
+
line-height: l
|
|
935
|
+
),
|
|
936
|
+
mobile-xs: (
|
|
937
|
+
font-size: l,
|
|
938
|
+
line-height: m
|
|
939
|
+
)
|
|
940
|
+
),
|
|
941
|
+
2xl: (
|
|
942
|
+
desktop: (
|
|
943
|
+
font-size: 2xl,
|
|
944
|
+
line-height: xl
|
|
945
|
+
),
|
|
946
|
+
tablet: (
|
|
947
|
+
font-size: xl,
|
|
948
|
+
line-height: l
|
|
949
|
+
),
|
|
950
|
+
mobile: (
|
|
951
|
+
font-size: l,
|
|
952
|
+
line-height: m
|
|
953
|
+
),
|
|
954
|
+
mobile-xs: (
|
|
955
|
+
font-size: l,
|
|
956
|
+
line-height: m
|
|
957
|
+
)
|
|
958
|
+
),
|
|
959
|
+
xl: (
|
|
960
|
+
desktop: (
|
|
961
|
+
font-size: xl,
|
|
962
|
+
line-height: m
|
|
963
|
+
),
|
|
964
|
+
tablet: (
|
|
965
|
+
font-size: xl,
|
|
966
|
+
line-height: m
|
|
967
|
+
),
|
|
968
|
+
mobile: (
|
|
969
|
+
font-size: l,
|
|
970
|
+
line-height: m
|
|
971
|
+
),
|
|
972
|
+
mobile-xs: (
|
|
973
|
+
font-size: m,
|
|
974
|
+
line-height: s
|
|
975
|
+
)
|
|
976
|
+
),
|
|
977
|
+
l: (
|
|
978
|
+
desktop: (
|
|
979
|
+
font-size: m,
|
|
980
|
+
line-height: s
|
|
981
|
+
),
|
|
982
|
+
tablet: (
|
|
983
|
+
font-size: m,
|
|
984
|
+
line-height: s
|
|
985
|
+
),
|
|
986
|
+
mobile: (
|
|
987
|
+
font-size: s,
|
|
988
|
+
line-height: s
|
|
989
|
+
),
|
|
990
|
+
mobile-xs: (
|
|
991
|
+
font-size: s,
|
|
992
|
+
line-height: s
|
|
993
|
+
)
|
|
994
|
+
),
|
|
995
|
+
m: (
|
|
996
|
+
desktop: (
|
|
997
|
+
font-size: s,
|
|
998
|
+
line-height: s
|
|
999
|
+
),
|
|
1000
|
+
tablet: (
|
|
1001
|
+
font-size: s,
|
|
1002
|
+
line-height: s
|
|
1003
|
+
),
|
|
1004
|
+
mobile: (
|
|
1005
|
+
font-size: s,
|
|
1006
|
+
line-height: s
|
|
1007
|
+
),
|
|
1008
|
+
mobile-xs: (
|
|
1009
|
+
font-size: s,
|
|
1010
|
+
line-height: s
|
|
1011
|
+
)
|
|
1012
|
+
),
|
|
1013
|
+
s: (
|
|
1014
|
+
desktop: (
|
|
1015
|
+
font-size: xs,
|
|
1016
|
+
line-height: s
|
|
1017
|
+
),
|
|
1018
|
+
tablet: (
|
|
1019
|
+
font-size: xs,
|
|
1020
|
+
line-height: s
|
|
1021
|
+
),
|
|
1022
|
+
mobile: (
|
|
1023
|
+
font-size: xs,
|
|
1024
|
+
line-height: s
|
|
1025
|
+
),
|
|
1026
|
+
mobile-xs: (
|
|
1027
|
+
font-size: xs,
|
|
1028
|
+
line-height: s
|
|
1029
|
+
)
|
|
1030
|
+
),
|
|
1031
|
+
xs: (
|
|
1032
|
+
desktop: (
|
|
1033
|
+
font-size: 2xs,
|
|
1034
|
+
line-height: xs
|
|
1035
|
+
),
|
|
1036
|
+
tablet: (
|
|
1037
|
+
font-size: 2xs,
|
|
1038
|
+
line-height: xs
|
|
1039
|
+
),
|
|
1040
|
+
mobile: (
|
|
1041
|
+
font-size: 2xs,
|
|
1042
|
+
line-height: xs
|
|
1043
|
+
),
|
|
1044
|
+
mobile-xs: (
|
|
1045
|
+
font-size: 2xs,
|
|
1046
|
+
line-height: xs
|
|
1047
|
+
)
|
|
1048
|
+
),
|
|
1049
|
+
2xs: (
|
|
1050
|
+
desktop: (
|
|
1051
|
+
font-size: 3xs,
|
|
1052
|
+
line-height: 2xs
|
|
1053
|
+
),
|
|
1054
|
+
tablet: (
|
|
1055
|
+
font-size: 3xs,
|
|
1056
|
+
line-height: 2xs
|
|
1057
|
+
),
|
|
1058
|
+
mobile: (
|
|
1059
|
+
font-size: 3xs,
|
|
1060
|
+
line-height: 2xs
|
|
1061
|
+
),
|
|
1062
|
+
mobile-xs: (
|
|
1063
|
+
font-size: 3xs,
|
|
1064
|
+
line-height: 2xs
|
|
1065
|
+
)
|
|
1066
|
+
)
|
|
1067
|
+
);
|
|
854
1068
|
|
|
855
1069
|
$font-weight-map: (
|
|
856
1070
|
'light': 300,
|
|
@@ -859,104 +1073,3 @@ $font-weight-map: (
|
|
|
859
1073
|
'semi-bold': 600,
|
|
860
1074
|
'bold': 700
|
|
861
1075
|
);
|
|
862
|
-
|
|
863
|
-
// based on new EDS specs, but not convenient, better to have a flat list of sizes rather than too much semantic and overlaps
|
|
864
|
-
|
|
865
|
-
// $font-map-responsive: (
|
|
866
|
-
// 'display': (
|
|
867
|
-
// 'm': (
|
|
868
|
-
// 'desktop': (
|
|
869
|
-
// 'size': 3rem,
|
|
870
|
-
// 'line-height': 3.5rem
|
|
871
|
-
// ),
|
|
872
|
-
// 'tablet': (
|
|
873
|
-
// 'size': 2.75rem,
|
|
874
|
-
// 'line-height': 3.25rem
|
|
875
|
-
// ),
|
|
876
|
-
// 'mobile': (
|
|
877
|
-
// 'size': 2rem,
|
|
878
|
-
// 'line-height': 2.25rem
|
|
879
|
-
// )
|
|
880
|
-
// )
|
|
881
|
-
// ),
|
|
882
|
-
// 'title': (
|
|
883
|
-
// 'xl': (
|
|
884
|
-
// 'desktop': (
|
|
885
|
-
// 'size': 2.5rem,
|
|
886
|
-
// 'line-height': 3rem
|
|
887
|
-
// ),
|
|
888
|
-
// 'tablet': (
|
|
889
|
-
// 'size': 2rem,
|
|
890
|
-
// 'line-height': 2.75rem
|
|
891
|
-
// ),
|
|
892
|
-
// 'mobile': (
|
|
893
|
-
// 'size': 1.75rem,
|
|
894
|
-
// 'line-height': 2.5rem
|
|
895
|
-
// )
|
|
896
|
-
// ),
|
|
897
|
-
// 'xs': (
|
|
898
|
-
// 'desktop': (
|
|
899
|
-
// 'size': 1.25rem,
|
|
900
|
-
// 'line-height': 1.75rem
|
|
901
|
-
// ),
|
|
902
|
-
// 'tablet': (
|
|
903
|
-
// 'size': 1.25rem,
|
|
904
|
-
// 'line-height': 1.75rem
|
|
905
|
-
// ),
|
|
906
|
-
// 'mobile': (
|
|
907
|
-
// 'size': 1.2rem,
|
|
908
|
-
// 'line-height': 1.5rem
|
|
909
|
-
// )
|
|
910
|
-
// )
|
|
911
|
-
// )
|
|
912
|
-
// );
|
|
913
|
-
|
|
914
|
-
// $font-map: (
|
|
915
|
-
// 'title': (
|
|
916
|
-
// '2xs': (
|
|
917
|
-
// 'size': 1rem,
|
|
918
|
-
// 'line-height': 1.5rem
|
|
919
|
-
// )
|
|
920
|
-
// ),
|
|
921
|
-
// 'card-title': (
|
|
922
|
-
// 'm': (
|
|
923
|
-
// 'size': 1.125rem,
|
|
924
|
-
// 'line-height': 1.5rem
|
|
925
|
-
// )
|
|
926
|
-
// ),
|
|
927
|
-
// 'label': (
|
|
928
|
-
// 'm': (
|
|
929
|
-
// 'size': 0.875rem,
|
|
930
|
-
// 'line-height': 1.25rem
|
|
931
|
-
// ),
|
|
932
|
-
// 'l': (
|
|
933
|
-
// 'size': 1rem,
|
|
934
|
-
// 'line-height': 1.5rem
|
|
935
|
-
// )
|
|
936
|
-
// ),
|
|
937
|
-
// 'body': (
|
|
938
|
-
// 's': (
|
|
939
|
-
// 'size': 0.875rem,
|
|
940
|
-
// 'line-height': 1.25rem
|
|
941
|
-
// ),
|
|
942
|
-
// 'm': (
|
|
943
|
-
// 'size': 1rem,
|
|
944
|
-
// 'line-height': 1.5rem
|
|
945
|
-
// ),
|
|
946
|
-
// 'l': (
|
|
947
|
-
// 'size': 1.25rem,
|
|
948
|
-
// 'line-height': 1.75rem
|
|
949
|
-
// ),
|
|
950
|
-
// 'xl': (
|
|
951
|
-
// 'size': 1.5rem,
|
|
952
|
-
// 'line-height': 2rem
|
|
953
|
-
// )
|
|
954
|
-
// ),
|
|
955
|
-
// 'microcopy': (
|
|
956
|
-
// 'm': (
|
|
957
|
-
// 'size': 0.75rem,
|
|
958
|
-
// 'line-height': 1rem
|
|
959
|
-
// )
|
|
960
|
-
// )
|
|
961
|
-
// );
|
|
962
|
-
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
1
2
|
@use '../01-base' as base;
|
|
2
3
|
@use '../02-tokens/maps' as maps;
|
|
3
4
|
|
|
@@ -102,88 +103,57 @@
|
|
|
102
103
|
// font sizes
|
|
103
104
|
--eui-f-size-base: 16px;
|
|
104
105
|
|
|
106
|
+
// base line-height / scale-factor (for compact mode)
|
|
107
|
+
--eui-base-line-height: 1.5;
|
|
108
|
+
--eui-base-scale-factor: 1;
|
|
109
|
+
|
|
105
110
|
// font aliases
|
|
106
111
|
--eui-f: var(--eui-f-m);
|
|
112
|
+
--eui-f-light: var(--eui-f-m-light);
|
|
107
113
|
--eui-f-medium: var(--eui-f-m-medium);
|
|
108
114
|
--eui-f-semi-bold: var(--eui-f-m-semi-bold);
|
|
109
115
|
--eui-f-bold: var(--eui-f-m-bold);
|
|
110
116
|
|
|
117
|
+
@each $size, $sizeDef in maps.$font-map {
|
|
118
|
+
$desktop: map.get($sizeDef, 'desktop');
|
|
119
|
+
--eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
120
|
+
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
121
|
+
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
122
|
+
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
123
|
+
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($desktop, 'font-size')})/var(--eui-f-line-height-#{map.get($desktop, 'line-height')}) var(--eui-f-family);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@include base.media(maps.$eui-bkp-tablet) {
|
|
127
|
+
@each $size, $sizeDef in maps.$font-map {
|
|
128
|
+
$tablet: map.get($sizeDef, 'tablet');
|
|
129
|
+
--eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
130
|
+
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
131
|
+
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
132
|
+
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
133
|
+
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($tablet, 'font-size')})/var(--eui-f-line-height-#{map.get($tablet, 'line-height')}) var(--eui-f-family);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@include base.media(maps.$eui-bkp-mobile) {
|
|
138
|
+
@each $size, $sizeDef in maps.$font-map {
|
|
139
|
+
$mobile: map.get($sizeDef, 'mobile');
|
|
140
|
+
--eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
141
|
+
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
142
|
+
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
143
|
+
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
144
|
+
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($mobile, 'font-size')})/var(--eui-f-line-height-#{map.get($mobile, 'line-height')}) var(--eui-f-family);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
111
147
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
// --eui-f-#{$font}-#{$size}-#{$type}: #{$def};
|
|
122
|
-
// }
|
|
123
|
-
// @each $type, $def in $tablet {
|
|
124
|
-
// --eui-f-#{$font}-#{$size}-tablet-#{$type}: #{$def};
|
|
125
|
-
// }
|
|
126
|
-
// @each $type, $def in $mobile {
|
|
127
|
-
// --eui-f-#{$font}-#{$size}-mobile-#{$type}: #{$def};
|
|
128
|
-
// }
|
|
129
|
-
// --eui-f-#{$font}-#{$size}-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
130
|
-
// --eui-f-#{$font}-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
131
|
-
// --eui-f-#{$font}-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
132
|
-
// --eui-f-#{$font}-#{$size}-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
133
|
-
|
|
134
|
-
// --eui-f-#{$font}-#{$size}-tablet-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
|
|
135
|
-
// --eui-f-#{$font}-#{$size}-tablet-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
|
|
136
|
-
// --eui-f-#{$font}-#{$size}-tablet-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
|
|
137
|
-
// --eui-f-#{$font}-#{$size}-tablet-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-tablet-size)/var(--eui-f-#{$font}-#{$size}-tablet-line-height) var(--eui-f-family);
|
|
138
|
-
|
|
139
|
-
// --eui-f-#{$font}-#{$size}-mobile-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
|
|
140
|
-
// --eui-f-#{$font}-#{$size}-mobile-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
|
|
141
|
-
// --eui-f-#{$font}-#{$size}-mobile-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
|
|
142
|
-
// --eui-f-#{$font}-#{$size}-mobile-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-mobile-size)/var(--eui-f-#{$font}-#{$size}-mobile-line-height) var(--eui-f-family);
|
|
143
|
-
// }
|
|
144
|
-
// }
|
|
145
|
-
|
|
146
|
-
// @include base.media(maps.$eui-bkp-tablet) {
|
|
147
|
-
// @each $font, $fontDef in maps.$font-map-responsive {
|
|
148
|
-
// @each $size, $sizeDef in $fontDef {
|
|
149
|
-
// --eui-f-#{$font}-#{$size}-regular: var(--eui-f-#{$font}-#{$size}-tablet-regular);
|
|
150
|
-
// --eui-f-#{$font}-#{$size}-medium: var(--eui-f-#{$font}-#{$size}-tablet-medium);
|
|
151
|
-
// --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-tablet-semi-bold);
|
|
152
|
-
// --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-tablet-bold);
|
|
153
|
-
// }
|
|
154
|
-
// }
|
|
155
|
-
// }
|
|
156
|
-
// @include base.media(maps.$eui-bkp-mobile) {
|
|
157
|
-
// @each $font, $fontDef in maps.$font-map-responsive {
|
|
158
|
-
// @each $size, $sizeDef in $fontDef {
|
|
159
|
-
// --eui-f-#{$font}-#{$size}-regular: var(--eui-f-#{$font}-#{$size}-mobile-regular);
|
|
160
|
-
// --eui-f-#{$font}-#{$size}-medium: var(--eui-f-#{$font}-#{$size}-mobile-medium);
|
|
161
|
-
// --eui-f-#{$font}-#{$size}-semi-bold: var(--eui-f-#{$font}-#{$size}-mobile-semi-bold);
|
|
162
|
-
// --eui-f-#{$font}-#{$size}-bold: var(--eui-f-#{$font}-#{$size}-mobile-bold);
|
|
163
|
-
// }
|
|
164
|
-
// }
|
|
165
|
-
// }
|
|
166
|
-
|
|
167
|
-
// // normal fonts (non-responsive)
|
|
168
|
-
// @each $font, $fontDef in maps.$font-map {
|
|
169
|
-
// @each $size, $sizeDef in $fontDef {
|
|
170
|
-
// @each $type, $def in $sizeDef {
|
|
171
|
-
// --eui-f-#{$font}-#{$size}-#{$type}: #{$def};
|
|
172
|
-
// }
|
|
173
|
-
// --eui-f-#{$font}-#{$size}-regular: normal normal var(--eui-f-weight-regular) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
174
|
-
// --eui-f-#{$font}-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
175
|
-
// --eui-f-#{$font}-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
176
|
-
// --eui-f-#{$font}-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-#{$font}-#{$size}-size)/var(--eui-f-#{$font}-#{$size}-line-height) var(--eui-f-family);
|
|
177
|
-
// }
|
|
178
|
-
// }
|
|
179
|
-
|
|
180
|
-
// eUI font maps
|
|
181
|
-
@each $size in maps.$font-size-list {
|
|
182
|
-
--eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
|
|
183
|
-
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
|
|
184
|
-
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
|
|
185
|
-
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
|
|
186
|
-
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{$size})/var(--eui-f-line-height-#{$size}) var(--eui-f-family);
|
|
148
|
+
@include base.media(maps.$eui-bkp-mobile-xs) {
|
|
149
|
+
@each $size, $sizeDef in maps.$font-map {
|
|
150
|
+
$mobilexs: map.get($sizeDef, 'mobile-xs');
|
|
151
|
+
--eui-f-#{$size}-light: normal normal var(--eui-f-weight-light) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
152
|
+
--eui-f-#{$size}: normal normal var(--eui-f-weight-regular) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
153
|
+
--eui-f-#{$size}-medium: normal normal var(--eui-f-weight-medium) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
154
|
+
--eui-f-#{$size}-semi-bold: normal normal var(--eui-f-weight-semi-bold) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
155
|
+
--eui-f-#{$size}-bold: normal normal var(--eui-f-weight-bold) var(--eui-f-size-#{map.get($mobilexs, 'font-size')})/var(--eui-f-line-height-#{map.get($mobilexs, 'line-height')}) var(--eui-f-family);
|
|
156
|
+
}
|
|
187
157
|
}
|
|
188
158
|
|
|
189
159
|
@each $size, $def in maps.$font-size-map {
|
|
@@ -271,8 +241,7 @@
|
|
|
271
241
|
--eui-internal-icon-external-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/external.svg');
|
|
272
242
|
--eui-internal-icon-chevron-down-path: url('#{base.$eui-assets-base-path}/icons/eui-internals/chevron-down.svg');
|
|
273
243
|
|
|
274
|
-
|
|
275
|
-
--eui-base-scale-factor: 1;
|
|
244
|
+
|
|
276
245
|
|
|
277
246
|
// Animations related
|
|
278
247
|
--eui-base-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
@@ -292,10 +292,10 @@
|
|
|
292
292
|
|
|
293
293
|
// HEADINGS
|
|
294
294
|
.eui-u-text-h1 {
|
|
295
|
-
font: var(--eui-f-
|
|
295
|
+
font: var(--eui-f-6xl) !important;
|
|
296
296
|
}
|
|
297
297
|
.eui-u-text-h2 {
|
|
298
|
-
font: var(--eui-f-
|
|
298
|
+
font: var(--eui-f-4xl) !important;
|
|
299
299
|
}
|
|
300
300
|
.eui-u-text-h3 {
|
|
301
301
|
font: var(--eui-f-2xl) !important;
|