@trafilea/afrodita-components 7.1.1 → 7.1.3
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/build/es/components/icons/Messaging/MailSent.js +2 -0
- package/build/es/components/icons/Messaging/MailSent.js.map +1 -0
- package/build/es/components/icons/Messaging/index.js +1 -1
- package/build/es/components/molecules/ScarcityTag/ScarcityTag.js +1 -1
- package/build/es/components/molecules/ScarcityTag/ScarcityTag.styled.js +1 -1
- package/build/es/components/organisms/TwoCtasAtCart/TwoCtasAtCart.js +1 -1
- package/build/es/core/theme/defaults.js +1 -1
- package/build/index.d.ts +69 -6
- package/build/lib/components/icons/Messaging/MailSent.js +2 -0
- package/build/lib/components/icons/Messaging/MailSent.js.map +1 -0
- package/build/lib/components/icons/Messaging/index.js +1 -1
- package/build/lib/components/molecules/ScarcityTag/ScarcityTag.js +1 -1
- package/build/lib/components/molecules/ScarcityTag/ScarcityTag.styled.js +1 -1
- package/build/lib/components/organisms/TwoCtasAtCart/TwoCtasAtCart.js +1 -1
- package/build/lib/core/theme/defaults.js +1 -1
- package/build/theme/revel.theme.d.ts +61 -3
- package/build/theme/revel.theme.js +6 -0
- package/build/theme/shapermint.theme.d.ts +61 -3
- package/build/theme/shapermint.theme.js +258 -0
- package/build/theme/thebodcon.theme.d.ts +61 -3
- package/build/theme/thebodcon.theme.js +6 -0
- package/build/theme/thespadr.theme.d.ts +61 -3
- package/build/theme/thespadr.theme.js +143 -0
- package/build/theme/truekind.theme.d.ts +61 -3
- package/build/theme/truekind.theme.js +6 -0
- package/package.json +1 -1
|
@@ -67,6 +67,12 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
67
67
|
mobile: 640,
|
|
68
68
|
tablet: 1024,
|
|
69
69
|
desktop: 1280,
|
|
70
|
+
xs: '480px',
|
|
71
|
+
sm: '640px',
|
|
72
|
+
md: '768px',
|
|
73
|
+
lg: '1024px',
|
|
74
|
+
xl: '1280px',
|
|
75
|
+
'2xl': '1536px',
|
|
70
76
|
};
|
|
71
77
|
|
|
72
78
|
var shapermint = {
|
|
@@ -860,10 +866,38 @@ var shapermint = {
|
|
|
860
866
|
heavy: 900,
|
|
861
867
|
bold: 700,
|
|
862
868
|
demi: 600,
|
|
869
|
+
medium: 500,
|
|
863
870
|
regular: 400,
|
|
864
871
|
},
|
|
865
872
|
},
|
|
873
|
+
size: {
|
|
874
|
+
xxs: '10px',
|
|
875
|
+
xs: '12px',
|
|
876
|
+
sm: '14px',
|
|
877
|
+
md: '16px',
|
|
878
|
+
lg: '18px',
|
|
879
|
+
xl: '20px',
|
|
880
|
+
'2xl': '24px',
|
|
881
|
+
'3xl': '30px',
|
|
882
|
+
'4xl': '36px',
|
|
883
|
+
'5xl': '42px',
|
|
884
|
+
'6xl': '52px',
|
|
885
|
+
'7xl': '60px',
|
|
886
|
+
},
|
|
887
|
+
lineHeight: {
|
|
888
|
+
xs: '16px',
|
|
889
|
+
sm: '20px',
|
|
890
|
+
md: '22px',
|
|
891
|
+
lg: '24px',
|
|
892
|
+
xl: '28px',
|
|
893
|
+
'2xl': '32px',
|
|
894
|
+
'3xl': '40px',
|
|
895
|
+
'4xl': '48px',
|
|
896
|
+
'5xl': '68px',
|
|
897
|
+
'6xl': '76px',
|
|
898
|
+
},
|
|
866
899
|
variants: {
|
|
900
|
+
// to be removed after new foundation is implemented starting here
|
|
867
901
|
hero1: {
|
|
868
902
|
fontSize: 76,
|
|
869
903
|
lineHeight: '92px',
|
|
@@ -991,6 +1025,230 @@ var shapermint = {
|
|
|
991
1025
|
fontSize: 8,
|
|
992
1026
|
lineHeight: '12px',
|
|
993
1027
|
},
|
|
1028
|
+
// to be removed after new foundation is implemented ending here
|
|
1029
|
+
// new foundation
|
|
1030
|
+
// display1new: {
|
|
1031
|
+
// desktop: {
|
|
1032
|
+
// fontSize: '--typography-size-7xl-desktop',
|
|
1033
|
+
// lineHeight: '--typography-line-height-6xl-desktop',
|
|
1034
|
+
// },
|
|
1035
|
+
// mobile: {
|
|
1036
|
+
// fontSize: '--typography-size-7xl-mobile',
|
|
1037
|
+
// lineHeight: '--typography-line-height-6xl-mobile',
|
|
1038
|
+
// },
|
|
1039
|
+
// tablet: {
|
|
1040
|
+
// fontSize: '--typography-size-7xl-tablet',
|
|
1041
|
+
// lineHeight: '--typography-line-height-6xl-tablet',
|
|
1042
|
+
// },
|
|
1043
|
+
// },
|
|
1044
|
+
// display2new: {
|
|
1045
|
+
// desktop: {
|
|
1046
|
+
// fontSize: '--typography-size-6xl-desktop',
|
|
1047
|
+
// lineHeight: '--typography-line-height-5xl-desktop',
|
|
1048
|
+
// },
|
|
1049
|
+
// mobile: {
|
|
1050
|
+
// fontSize: '--typography-size-6xl-mobile',
|
|
1051
|
+
// lineHeight: '--typography-line-height-5xl-mobile',
|
|
1052
|
+
// },
|
|
1053
|
+
// tablet: {
|
|
1054
|
+
// fontSize: '--typography-size-6xl-tablet',
|
|
1055
|
+
// lineHeight: '--typography-line-height-5xl-tablet',
|
|
1056
|
+
// },
|
|
1057
|
+
// },
|
|
1058
|
+
// h1: {
|
|
1059
|
+
// desktop: {
|
|
1060
|
+
// fontSize: '--typography-size-5xl-desktop',
|
|
1061
|
+
// lineHeight: '--typography-line-height-4xl-desktop',
|
|
1062
|
+
// },
|
|
1063
|
+
// mobile: {
|
|
1064
|
+
// fontSize: '--typography-size-5xl-mobile',
|
|
1065
|
+
// lineHeight: '--typography-line-height-4xl-mobile',
|
|
1066
|
+
// },
|
|
1067
|
+
// tablet: {
|
|
1068
|
+
// fontSize: '--typography-size-5xl-tablet',
|
|
1069
|
+
// lineHeight: '--typography-line-height-4xl-tablet',
|
|
1070
|
+
// },
|
|
1071
|
+
// },
|
|
1072
|
+
// h2: {
|
|
1073
|
+
// desktop: {
|
|
1074
|
+
// fontSize: '--typography-size-4xl-desktop',
|
|
1075
|
+
// lineHeight: '--typography-line-height-3xl-desktop',
|
|
1076
|
+
// },
|
|
1077
|
+
// mobile: {
|
|
1078
|
+
// fontSize: '--typography-size-4xl-mobile',
|
|
1079
|
+
// lineHeight: '--typography-line-height-3xl-mobile',
|
|
1080
|
+
// },
|
|
1081
|
+
// tablet: {
|
|
1082
|
+
// fontSize: '--typography-size-4xl-tablet',
|
|
1083
|
+
// lineHeight: '--typography-line-height-3xl-tablet',
|
|
1084
|
+
// },
|
|
1085
|
+
// },
|
|
1086
|
+
// h3: {
|
|
1087
|
+
// desktop: {
|
|
1088
|
+
// fontSize: '--typography-size-3xl-desktop',
|
|
1089
|
+
// lineHeight: '--typography-line-height-3xl-desktop',
|
|
1090
|
+
// },
|
|
1091
|
+
// mobile: {
|
|
1092
|
+
// fontSize: '--typography-size-3xl-mobile',
|
|
1093
|
+
// lineHeight: '--typography-line-height-3xl-mobile',
|
|
1094
|
+
// },
|
|
1095
|
+
// tablet: {
|
|
1096
|
+
// fontSize: '--typography-size-3xl-tablet',
|
|
1097
|
+
// lineHeight: '--typography-line-height-3xl-tablet',
|
|
1098
|
+
// },
|
|
1099
|
+
// },
|
|
1100
|
+
// h4: {
|
|
1101
|
+
// desktop: {
|
|
1102
|
+
// fontSize: '--typography-size-2xl-desktop',
|
|
1103
|
+
// lineHeight: '--typography-line-height-2xl-desktop',
|
|
1104
|
+
// },
|
|
1105
|
+
// mobile: {
|
|
1106
|
+
// fontSize: '--typography-size-2xl-mobile',
|
|
1107
|
+
// lineHeight: '--typography-line-height-2xl-mobile',
|
|
1108
|
+
// },
|
|
1109
|
+
// tablet: {
|
|
1110
|
+
// fontSize: '--typography-size-2xl-tablet',
|
|
1111
|
+
// lineHeight: '--typography-line-height-2xl-tablet',
|
|
1112
|
+
// },
|
|
1113
|
+
// },
|
|
1114
|
+
// h5: {
|
|
1115
|
+
// desktop: {
|
|
1116
|
+
// fontSize: '--typography-size-xl-desktop',
|
|
1117
|
+
// lineHeight: '--typography-line-height-xl-desktop',
|
|
1118
|
+
// },
|
|
1119
|
+
// mobile: {
|
|
1120
|
+
// fontSize: '--typography-size-xl-mobile',
|
|
1121
|
+
// lineHeight: '--typography-line-height-xl-mobile',
|
|
1122
|
+
// },
|
|
1123
|
+
// tablet: {
|
|
1124
|
+
// fontSize: '--typography-size-xl-tablet',
|
|
1125
|
+
// lineHeight: '--typography-line-height-xl-tablet',
|
|
1126
|
+
// },
|
|
1127
|
+
// },
|
|
1128
|
+
// h6: {
|
|
1129
|
+
// desktop: {
|
|
1130
|
+
// fontSize: '--typography-size-lg-desktop',
|
|
1131
|
+
// lineHeight: '--typography-line-height-lg-desktop',
|
|
1132
|
+
// },
|
|
1133
|
+
// mobile: {
|
|
1134
|
+
// fontSize: '--typography-size-lg-mobile',
|
|
1135
|
+
// lineHeight: '--typography-line-height-lg-mobile',
|
|
1136
|
+
// },
|
|
1137
|
+
// tablet: {
|
|
1138
|
+
// fontSize: '--typography-size-lg-tablet',
|
|
1139
|
+
// lineHeight: '--typography-line-height-lg-tablet',
|
|
1140
|
+
// },
|
|
1141
|
+
// },
|
|
1142
|
+
// 'body-lg': {
|
|
1143
|
+
// desktop: {
|
|
1144
|
+
// fontSize: '--typography-size-lg-desktop',
|
|
1145
|
+
// lineHeight: '--typography-line-height-xl-desktop',
|
|
1146
|
+
// },
|
|
1147
|
+
// mobile: {
|
|
1148
|
+
// fontSize: '--typography-size-lg-mobile',
|
|
1149
|
+
// lineHeight: '--typography-line-height-xl-mobile',
|
|
1150
|
+
// },
|
|
1151
|
+
// tablet: {
|
|
1152
|
+
// fontSize: '--typography-size-lg-tablet',
|
|
1153
|
+
// lineHeight: '--typography-line-height-xl-tablet',
|
|
1154
|
+
// },
|
|
1155
|
+
// },
|
|
1156
|
+
// 'body-md': {
|
|
1157
|
+
// desktop: {
|
|
1158
|
+
// fontSize: '--typography-size-md-desktop',
|
|
1159
|
+
// lineHeight: '--typography-line-height-lg-desktop',
|
|
1160
|
+
// },
|
|
1161
|
+
// mobile: {
|
|
1162
|
+
// fontSize: '--typography-size-md-mobile',
|
|
1163
|
+
// lineHeight: '--typography-line-height-lg-mobile',
|
|
1164
|
+
// },
|
|
1165
|
+
// tablet: {
|
|
1166
|
+
// fontSize: '--typography-size-md-tablet',
|
|
1167
|
+
// lineHeight: '--typography-line-height-lg-tablet',
|
|
1168
|
+
// },
|
|
1169
|
+
// },
|
|
1170
|
+
// 'body-sm': {
|
|
1171
|
+
// desktop: {
|
|
1172
|
+
// fontSize: '--typography-size-sm-desktop',
|
|
1173
|
+
// lineHeight: '--typography-line-height-md-desktop',
|
|
1174
|
+
// },
|
|
1175
|
+
// mobile: {
|
|
1176
|
+
// fontSize: '--typography-size-sm-mobile',
|
|
1177
|
+
// lineHeight: '--typography-line-height-md-mobile',
|
|
1178
|
+
// },
|
|
1179
|
+
// tablet: {
|
|
1180
|
+
// fontSize: '--typography-size-sm-tablet',
|
|
1181
|
+
// lineHeight: '--typography-line-height-md-tablet',
|
|
1182
|
+
// },
|
|
1183
|
+
// },
|
|
1184
|
+
// 'button-md': {
|
|
1185
|
+
// desktop: {
|
|
1186
|
+
// fontSize: '--typography-size-md-desktop',
|
|
1187
|
+
// lineHeight: '--typography-line-height-md-desktop',
|
|
1188
|
+
// },
|
|
1189
|
+
// mobile: {
|
|
1190
|
+
// fontSize: '--typography-size-md-mobile',
|
|
1191
|
+
// lineHeight: '--typography-line-height-md-mobile',
|
|
1192
|
+
// },
|
|
1193
|
+
// tablet: {
|
|
1194
|
+
// fontSize: '--typography-size-md-tablet',
|
|
1195
|
+
// lineHeight: '--typography-line-height-md-tablet',
|
|
1196
|
+
// },
|
|
1197
|
+
// },
|
|
1198
|
+
// 'button-sm': {
|
|
1199
|
+
// desktop: {
|
|
1200
|
+
// fontSize: '--typography-size-sm-desktop',
|
|
1201
|
+
// lineHeight: '--typography-line-height-sm-desktop',
|
|
1202
|
+
// },
|
|
1203
|
+
// mobile: {
|
|
1204
|
+
// fontSize: '--typography-size-sm-mobile',
|
|
1205
|
+
// lineHeight: '--typography-line-height-sm-mobile',
|
|
1206
|
+
// },
|
|
1207
|
+
// tablet: {
|
|
1208
|
+
// fontSize: '--typography-size-sm-tablet',
|
|
1209
|
+
// lineHeight: '--typography-line-height-sm-tablet',
|
|
1210
|
+
// },
|
|
1211
|
+
// },
|
|
1212
|
+
// 'caption-xxs': {
|
|
1213
|
+
// // to be replaced with caption after new foundation is implemented
|
|
1214
|
+
// desktop: {
|
|
1215
|
+
// fontSize: '--typography-size-xs-desktop',
|
|
1216
|
+
// },
|
|
1217
|
+
// mobile: {
|
|
1218
|
+
// fontSize: '--typography-size-xs-mobile',
|
|
1219
|
+
// },
|
|
1220
|
+
// tablet: {
|
|
1221
|
+
// fontSize: '--typography-size-xs-tablet',
|
|
1222
|
+
// },
|
|
1223
|
+
// },
|
|
1224
|
+
// 'label-md': {
|
|
1225
|
+
// desktop: {
|
|
1226
|
+
// fontSize: '--typography-size-sm-desktop',
|
|
1227
|
+
// lineHeight: '--typography-line-height-sm-desktop',
|
|
1228
|
+
// },
|
|
1229
|
+
// mobile: {
|
|
1230
|
+
// fontSize: '--typography-size-sm-mobile',
|
|
1231
|
+
// lineHeight: '--typography-line-height-sm-mobile',
|
|
1232
|
+
// },
|
|
1233
|
+
// tablet: {
|
|
1234
|
+
// fontSize: '--typography-size-sm-tablet',
|
|
1235
|
+
// lineHeight: '--typography-line-height-sm-tablet',
|
|
1236
|
+
// },
|
|
1237
|
+
// },
|
|
1238
|
+
// 'label-sm': {
|
|
1239
|
+
// desktop: {
|
|
1240
|
+
// fontSize: '--typography-size-xs-desktop',
|
|
1241
|
+
// lineHeight: '--typography-line-height-xs-desktop',
|
|
1242
|
+
// },
|
|
1243
|
+
// mobile: {
|
|
1244
|
+
// fontSize: '--typography-size-xs-mobile',
|
|
1245
|
+
// lineHeight: '--typography-line-height-xs-mobile',
|
|
1246
|
+
// },
|
|
1247
|
+
// tablet: {
|
|
1248
|
+
// fontSize: '--typography-size-xs-tablet',
|
|
1249
|
+
// lineHeight: '--typography-line-height-xs-tablet',
|
|
1250
|
+
// },
|
|
1251
|
+
// },
|
|
994
1252
|
},
|
|
995
1253
|
},
|
|
996
1254
|
fonts: {
|
|
@@ -20,9 +20,7 @@ declare type Theme = {
|
|
|
20
20
|
fontWeights: number[];
|
|
21
21
|
lineHeights: number[];
|
|
22
22
|
mediaQueries: ThemeBreakpoints;
|
|
23
|
-
radius:
|
|
24
|
-
regular: string;
|
|
25
|
-
};
|
|
23
|
+
radius: ThemeRadius;
|
|
26
24
|
zIndex: {
|
|
27
25
|
modal: number;
|
|
28
26
|
overlay: number;
|
|
@@ -35,11 +33,19 @@ declare type Theme = {
|
|
|
35
33
|
label: {
|
|
36
34
|
member: string;
|
|
37
35
|
};
|
|
36
|
+
space?: ThemeSpacing;
|
|
37
|
+
shadow?: ThemeElevation;
|
|
38
38
|
};
|
|
39
39
|
declare type ThemeBreakpoints = {
|
|
40
40
|
mobile: number;
|
|
41
41
|
tablet: number;
|
|
42
42
|
desktop: number;
|
|
43
|
+
xs: string;
|
|
44
|
+
sm: string;
|
|
45
|
+
md: string;
|
|
46
|
+
lg: string;
|
|
47
|
+
xl: string;
|
|
48
|
+
'2xl': string;
|
|
43
49
|
};
|
|
44
50
|
declare type ThemeBasicPallete = {
|
|
45
51
|
color: string;
|
|
@@ -869,15 +875,32 @@ declare type ThemeComponent = {
|
|
|
869
875
|
};
|
|
870
876
|
};
|
|
871
877
|
};
|
|
878
|
+
declare type SizeConfig = {
|
|
879
|
+
xxs?: string;
|
|
880
|
+
xs: string;
|
|
881
|
+
sm: string;
|
|
882
|
+
md: string;
|
|
883
|
+
lg: string;
|
|
884
|
+
xl: string;
|
|
885
|
+
'2xl': string;
|
|
886
|
+
'3xl': string;
|
|
887
|
+
'4xl': string;
|
|
888
|
+
'5xl': string;
|
|
889
|
+
'6xl': string;
|
|
890
|
+
'7xl'?: string;
|
|
891
|
+
};
|
|
872
892
|
declare type ThemeTypography = {
|
|
873
893
|
config: {
|
|
874
894
|
weight: {
|
|
875
895
|
heavy: number;
|
|
876
896
|
bold: number;
|
|
877
897
|
demi: number;
|
|
898
|
+
medium?: number;
|
|
878
899
|
regular: number;
|
|
879
900
|
};
|
|
880
901
|
};
|
|
902
|
+
size?: SizeConfig;
|
|
903
|
+
lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
|
|
881
904
|
variants: Record<string, CSSProperties>;
|
|
882
905
|
};
|
|
883
906
|
declare type ThemeFonts = {
|
|
@@ -954,6 +977,41 @@ declare type ThemeAssets = {
|
|
|
954
977
|
};
|
|
955
978
|
};
|
|
956
979
|
[key: string]: any;
|
|
980
|
+
};
|
|
981
|
+
declare type ThemeSpacing = {
|
|
982
|
+
0?: string;
|
|
983
|
+
25?: string;
|
|
984
|
+
50: string;
|
|
985
|
+
75: string;
|
|
986
|
+
100: string;
|
|
987
|
+
150: string;
|
|
988
|
+
200: string;
|
|
989
|
+
250: string;
|
|
990
|
+
300: string;
|
|
991
|
+
400: string;
|
|
992
|
+
500: string;
|
|
993
|
+
600: string;
|
|
994
|
+
800?: string;
|
|
995
|
+
1000?: string;
|
|
996
|
+
1200?: string;
|
|
997
|
+
1600?: string;
|
|
998
|
+
2000?: string;
|
|
999
|
+
};
|
|
1000
|
+
declare type ThemeRadius = {
|
|
1001
|
+
regular: string;
|
|
1002
|
+
none?: string;
|
|
1003
|
+
md?: string;
|
|
1004
|
+
lg?: string;
|
|
1005
|
+
xl?: string;
|
|
1006
|
+
full?: string;
|
|
1007
|
+
};
|
|
1008
|
+
declare type ThemeElevation = {
|
|
1009
|
+
100: string;
|
|
1010
|
+
200: string;
|
|
1011
|
+
300: string;
|
|
1012
|
+
400: string;
|
|
1013
|
+
500: string;
|
|
1014
|
+
600: string;
|
|
957
1015
|
};
|
|
958
1016
|
|
|
959
1017
|
declare const thebodcon: Theme;
|
|
@@ -20,9 +20,7 @@ declare type Theme = {
|
|
|
20
20
|
fontWeights: number[];
|
|
21
21
|
lineHeights: number[];
|
|
22
22
|
mediaQueries: ThemeBreakpoints;
|
|
23
|
-
radius:
|
|
24
|
-
regular: string;
|
|
25
|
-
};
|
|
23
|
+
radius: ThemeRadius;
|
|
26
24
|
zIndex: {
|
|
27
25
|
modal: number;
|
|
28
26
|
overlay: number;
|
|
@@ -35,11 +33,19 @@ declare type Theme = {
|
|
|
35
33
|
label: {
|
|
36
34
|
member: string;
|
|
37
35
|
};
|
|
36
|
+
space?: ThemeSpacing;
|
|
37
|
+
shadow?: ThemeElevation;
|
|
38
38
|
};
|
|
39
39
|
declare type ThemeBreakpoints = {
|
|
40
40
|
mobile: number;
|
|
41
41
|
tablet: number;
|
|
42
42
|
desktop: number;
|
|
43
|
+
xs: string;
|
|
44
|
+
sm: string;
|
|
45
|
+
md: string;
|
|
46
|
+
lg: string;
|
|
47
|
+
xl: string;
|
|
48
|
+
'2xl': string;
|
|
43
49
|
};
|
|
44
50
|
declare type ThemeBasicPallete = {
|
|
45
51
|
color: string;
|
|
@@ -869,15 +875,32 @@ declare type ThemeComponent = {
|
|
|
869
875
|
};
|
|
870
876
|
};
|
|
871
877
|
};
|
|
878
|
+
declare type SizeConfig = {
|
|
879
|
+
xxs?: string;
|
|
880
|
+
xs: string;
|
|
881
|
+
sm: string;
|
|
882
|
+
md: string;
|
|
883
|
+
lg: string;
|
|
884
|
+
xl: string;
|
|
885
|
+
'2xl': string;
|
|
886
|
+
'3xl': string;
|
|
887
|
+
'4xl': string;
|
|
888
|
+
'5xl': string;
|
|
889
|
+
'6xl': string;
|
|
890
|
+
'7xl'?: string;
|
|
891
|
+
};
|
|
872
892
|
declare type ThemeTypography = {
|
|
873
893
|
config: {
|
|
874
894
|
weight: {
|
|
875
895
|
heavy: number;
|
|
876
896
|
bold: number;
|
|
877
897
|
demi: number;
|
|
898
|
+
medium?: number;
|
|
878
899
|
regular: number;
|
|
879
900
|
};
|
|
880
901
|
};
|
|
902
|
+
size?: SizeConfig;
|
|
903
|
+
lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
|
|
881
904
|
variants: Record<string, CSSProperties>;
|
|
882
905
|
};
|
|
883
906
|
declare type ThemeFonts = {
|
|
@@ -954,6 +977,41 @@ declare type ThemeAssets = {
|
|
|
954
977
|
};
|
|
955
978
|
};
|
|
956
979
|
[key: string]: any;
|
|
980
|
+
};
|
|
981
|
+
declare type ThemeSpacing = {
|
|
982
|
+
0?: string;
|
|
983
|
+
25?: string;
|
|
984
|
+
50: string;
|
|
985
|
+
75: string;
|
|
986
|
+
100: string;
|
|
987
|
+
150: string;
|
|
988
|
+
200: string;
|
|
989
|
+
250: string;
|
|
990
|
+
300: string;
|
|
991
|
+
400: string;
|
|
992
|
+
500: string;
|
|
993
|
+
600: string;
|
|
994
|
+
800?: string;
|
|
995
|
+
1000?: string;
|
|
996
|
+
1200?: string;
|
|
997
|
+
1600?: string;
|
|
998
|
+
2000?: string;
|
|
999
|
+
};
|
|
1000
|
+
declare type ThemeRadius = {
|
|
1001
|
+
regular: string;
|
|
1002
|
+
none?: string;
|
|
1003
|
+
md?: string;
|
|
1004
|
+
lg?: string;
|
|
1005
|
+
xl?: string;
|
|
1006
|
+
full?: string;
|
|
1007
|
+
};
|
|
1008
|
+
declare type ThemeElevation = {
|
|
1009
|
+
100: string;
|
|
1010
|
+
200: string;
|
|
1011
|
+
300: string;
|
|
1012
|
+
400: string;
|
|
1013
|
+
500: string;
|
|
1014
|
+
600: string;
|
|
957
1015
|
};
|
|
958
1016
|
|
|
959
1017
|
declare const thespadr: Theme;
|
|
@@ -36,6 +36,12 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
36
36
|
mobile: 640,
|
|
37
37
|
tablet: 1024,
|
|
38
38
|
desktop: 1280,
|
|
39
|
+
xs: '480px',
|
|
40
|
+
sm: '640px',
|
|
41
|
+
md: '768px',
|
|
42
|
+
lg: '1024px',
|
|
43
|
+
xl: '1280px',
|
|
44
|
+
'2xl': '1536px',
|
|
39
45
|
};
|
|
40
46
|
|
|
41
47
|
var thespadr = {
|
|
@@ -46,6 +52,11 @@ var thespadr = {
|
|
|
46
52
|
mediaQueries: DEFAULT_BREAKPOINTS,
|
|
47
53
|
radius: {
|
|
48
54
|
regular: '8px',
|
|
55
|
+
none: '0px',
|
|
56
|
+
md: '4px',
|
|
57
|
+
lg: '8px',
|
|
58
|
+
xl: '16px',
|
|
59
|
+
full: '9999px',
|
|
49
60
|
},
|
|
50
61
|
zIndex: {
|
|
51
62
|
modal: 50,
|
|
@@ -1033,10 +1044,38 @@ var thespadr = {
|
|
|
1033
1044
|
heavy: 800,
|
|
1034
1045
|
bold: 700,
|
|
1035
1046
|
demi: 500,
|
|
1047
|
+
medium: 500,
|
|
1036
1048
|
regular: 400,
|
|
1037
1049
|
},
|
|
1038
1050
|
},
|
|
1051
|
+
size: {
|
|
1052
|
+
xxs: '10px',
|
|
1053
|
+
xs: '12px',
|
|
1054
|
+
sm: '14px',
|
|
1055
|
+
md: '16px',
|
|
1056
|
+
lg: '18px',
|
|
1057
|
+
xl: '20px',
|
|
1058
|
+
'2xl': '24px',
|
|
1059
|
+
'3xl': '30px',
|
|
1060
|
+
'4xl': '36px',
|
|
1061
|
+
'5xl': '42px',
|
|
1062
|
+
'6xl': '52px',
|
|
1063
|
+
'7xl': '60px',
|
|
1064
|
+
},
|
|
1065
|
+
lineHeight: {
|
|
1066
|
+
xs: '16px',
|
|
1067
|
+
sm: '20px',
|
|
1068
|
+
md: '22px',
|
|
1069
|
+
lg: '24px',
|
|
1070
|
+
xl: '28px',
|
|
1071
|
+
'2xl': '32px',
|
|
1072
|
+
'3xl': '40px',
|
|
1073
|
+
'4xl': '48px',
|
|
1074
|
+
'5xl': '68px',
|
|
1075
|
+
'6xl': '76px',
|
|
1076
|
+
},
|
|
1039
1077
|
variants: {
|
|
1078
|
+
// to be removed after new foundation is implemented starting from here
|
|
1040
1079
|
hero1: {
|
|
1041
1080
|
fontSize: 76,
|
|
1042
1081
|
lineHeight: '92px',
|
|
@@ -1156,6 +1195,83 @@ var thespadr = {
|
|
|
1156
1195
|
fontSize: 12,
|
|
1157
1196
|
lineHeight: '14px',
|
|
1158
1197
|
},
|
|
1198
|
+
// to be removed after new foundation is implemented ending here
|
|
1199
|
+
display: {
|
|
1200
|
+
fontSize: '--typography-size-6xl',
|
|
1201
|
+
lineHeight: '--typography-line-height-5xl',
|
|
1202
|
+
},
|
|
1203
|
+
'heading-xl': {
|
|
1204
|
+
fontSize: '--typography-size-3xl',
|
|
1205
|
+
lineHeight: '--typography-line-height-3xl',
|
|
1206
|
+
},
|
|
1207
|
+
'heading-lg': {
|
|
1208
|
+
fontSize: '--typography-size-2xl',
|
|
1209
|
+
lineHeight: '--typography-line-height-2xl',
|
|
1210
|
+
},
|
|
1211
|
+
'subtitle-md': {
|
|
1212
|
+
fontSize: '--typography-size-xl',
|
|
1213
|
+
lineHeight: '--typography-line-height-xl',
|
|
1214
|
+
},
|
|
1215
|
+
'subtitle-sm': {
|
|
1216
|
+
fontSize: '--typography-size-lg',
|
|
1217
|
+
lineHeight: '--typography-line-height-lg',
|
|
1218
|
+
},
|
|
1219
|
+
'body-md': {
|
|
1220
|
+
fontSize: '--typography-size-md',
|
|
1221
|
+
lineHeight: '--typography-line-height-lg',
|
|
1222
|
+
},
|
|
1223
|
+
'body-sm': {
|
|
1224
|
+
fontSize: '--typography-size-sm',
|
|
1225
|
+
lineHeight: '--typography-line-height-md',
|
|
1226
|
+
},
|
|
1227
|
+
'price-lg': {
|
|
1228
|
+
fontSize: '--typography-size-lg',
|
|
1229
|
+
lineHeight: '--typography-line-height-xl',
|
|
1230
|
+
},
|
|
1231
|
+
'price-md': {
|
|
1232
|
+
fontSize: '--typography-size-md',
|
|
1233
|
+
lineHeight: '--typography-line-height-lg',
|
|
1234
|
+
},
|
|
1235
|
+
'button-lg': {
|
|
1236
|
+
fontSize: '--typography-size-lg',
|
|
1237
|
+
lineHeight: '--typography-line-height-lg',
|
|
1238
|
+
},
|
|
1239
|
+
'button-md': {
|
|
1240
|
+
fontSize: '--typography-size-md',
|
|
1241
|
+
lineHeight: '--typography-line-height-md',
|
|
1242
|
+
},
|
|
1243
|
+
'button-sm': {
|
|
1244
|
+
fontSize: '--typography-size-sm',
|
|
1245
|
+
lineHeight: '--typography-line-height-sm',
|
|
1246
|
+
},
|
|
1247
|
+
'caption-xxs': {
|
|
1248
|
+
// to be replaced with caption after new foundation is implemented
|
|
1249
|
+
fontSize: '--typography-size-xxs',
|
|
1250
|
+
},
|
|
1251
|
+
'label-md': {
|
|
1252
|
+
fontSize: '--typography-size-md',
|
|
1253
|
+
lineHeight: '--typography-line-height-lg',
|
|
1254
|
+
},
|
|
1255
|
+
'label-sm': {
|
|
1256
|
+
fontSize: '--typography-size-sm',
|
|
1257
|
+
lineHeight: '--typography-line-height-sm',
|
|
1258
|
+
},
|
|
1259
|
+
'label-xs': {
|
|
1260
|
+
fontSize: '--typography-size-xs',
|
|
1261
|
+
lineHeight: '--typography-line-height-xs',
|
|
1262
|
+
},
|
|
1263
|
+
'link-md': {
|
|
1264
|
+
fontSize: '--typography-size-md',
|
|
1265
|
+
lineHeight: '--typography-line-height-lg',
|
|
1266
|
+
},
|
|
1267
|
+
'link-sm': {
|
|
1268
|
+
fontSize: '--typography-size-sm',
|
|
1269
|
+
lineHeight: '--typography-line-height-md',
|
|
1270
|
+
},
|
|
1271
|
+
'link-xs': {
|
|
1272
|
+
fontSize: '--typography-size-xs',
|
|
1273
|
+
lineHeight: '--typography-line-height-sm',
|
|
1274
|
+
},
|
|
1159
1275
|
},
|
|
1160
1276
|
},
|
|
1161
1277
|
fonts: {
|
|
@@ -1335,6 +1451,33 @@ var thespadr = {
|
|
|
1335
1451
|
label: {
|
|
1336
1452
|
member: '',
|
|
1337
1453
|
},
|
|
1454
|
+
space: {
|
|
1455
|
+
0: '0px',
|
|
1456
|
+
25: '2px',
|
|
1457
|
+
50: '4px',
|
|
1458
|
+
75: '6px',
|
|
1459
|
+
100: '8px',
|
|
1460
|
+
150: '12px',
|
|
1461
|
+
200: '16px',
|
|
1462
|
+
250: '20px',
|
|
1463
|
+
300: '24px',
|
|
1464
|
+
400: '32px',
|
|
1465
|
+
500: '40px',
|
|
1466
|
+
600: '48px',
|
|
1467
|
+
800: '64px',
|
|
1468
|
+
1000: '80px',
|
|
1469
|
+
1200: '96px',
|
|
1470
|
+
1600: '128px',
|
|
1471
|
+
2000: '160px',
|
|
1472
|
+
},
|
|
1473
|
+
shadow: {
|
|
1474
|
+
100: '0px 1px 4px 0px rgba(12, 12, 13, 0.05);',
|
|
1475
|
+
200: '0px 4px 6px -2px rgba(12, 12, 13, 0.10), 0px 2px 4px -2px rgba(12, 12, 13, 0.05)',
|
|
1476
|
+
300: '0px 12px 16px -4px rgba(12, 12, 13, 0.08), 0px 4px 4px -2px rgba(12, 12, 13, 0.05)',
|
|
1477
|
+
400: '0px 16px 32px -4px rgba(12, 12, 13, 0.10), 0px 4px 4px -4px rgba(12, 12, 13, 0.05)',
|
|
1478
|
+
500: '0px 16px 32px -8px rgba(12, 12, 13, 0.40)',
|
|
1479
|
+
600: '0px 0px 0px 4px rgba(69, 122, 65, 0.30)',
|
|
1480
|
+
},
|
|
1338
1481
|
};
|
|
1339
1482
|
|
|
1340
1483
|
exports["default"] = thespadr;
|