@westayltd/design-tokens 0.2.1 → 0.3.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.
- package/README.md +213 -0
- package/colors.json +165 -169
- package/dist/index.cjs +332 -171
- package/dist/index.d.cts +512 -176
- package/dist/index.d.ts +512 -176
- package/dist/index.js +332 -171
- package/grid.json +16 -0
- package/iconSizes.json +18 -0
- package/package.json +5 -2
- package/radius.json +8 -3
- package/shadows.json +28 -0
- package/spacing.json +17 -1
- package/typography.json +43 -2
package/spacing.json
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"0": "0px",
|
|
3
3
|
"1": "4px",
|
|
4
|
+
"1.5": "6px",
|
|
4
5
|
"2": "8px",
|
|
5
6
|
"3": "12px",
|
|
6
7
|
"4": "16px",
|
|
7
8
|
"5": "20px",
|
|
8
9
|
"6": "24px",
|
|
10
|
+
"7": "28px",
|
|
9
11
|
"8": "32px",
|
|
12
|
+
"9": "36px",
|
|
10
13
|
"10": "40px",
|
|
11
|
-
"
|
|
14
|
+
"11": "44px",
|
|
15
|
+
"12": "48px",
|
|
16
|
+
"13": "52px",
|
|
17
|
+
"14": "56px",
|
|
18
|
+
"15": "60px",
|
|
19
|
+
"16": "64px",
|
|
20
|
+
"17": "68px",
|
|
21
|
+
"18": "72px",
|
|
22
|
+
"19": "76px",
|
|
23
|
+
"20": "80px",
|
|
24
|
+
"21": "84px",
|
|
25
|
+
"22": "88px",
|
|
26
|
+
"23": "92px",
|
|
27
|
+
"24": "96px"
|
|
12
28
|
}
|
package/typography.json
CHANGED
|
@@ -1,16 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"fontFamily": {
|
|
3
|
-
"sans": ["Helvetica", "Arial", "sans-serif"]
|
|
3
|
+
"sans": ["Inter", "Helvetica", "Arial", "sans-serif"],
|
|
4
|
+
"serif": ["Bodoni Moda", "Georgia", "serif"]
|
|
4
5
|
},
|
|
5
6
|
|
|
6
7
|
"fontSize": {
|
|
8
|
+
"3xs": "9px",
|
|
9
|
+
"2xs": "10px",
|
|
10
|
+
"xs-alt": "11px",
|
|
7
11
|
"xs": "12px",
|
|
12
|
+
"13": "13px",
|
|
8
13
|
"sm": "14px",
|
|
9
14
|
"base": "16px",
|
|
10
15
|
"lg": "18px",
|
|
11
16
|
"xl": "20px",
|
|
17
|
+
"xxl": "22px",
|
|
12
18
|
"2xl": "24px",
|
|
13
|
-
"
|
|
19
|
+
"2xl-alt": "28px",
|
|
20
|
+
"3xl": "30px",
|
|
21
|
+
"3xl-alt": "32px",
|
|
22
|
+
"4xl": "36px",
|
|
23
|
+
"5xl": "48px"
|
|
14
24
|
},
|
|
15
25
|
|
|
16
26
|
"fontWeight": {
|
|
@@ -24,5 +34,36 @@
|
|
|
24
34
|
"tight": "1.2",
|
|
25
35
|
"normal": "1.5",
|
|
26
36
|
"relaxed": "1.7"
|
|
37
|
+
},
|
|
38
|
+
|
|
39
|
+
"textStyles": {
|
|
40
|
+
"desktop": {
|
|
41
|
+
"h1": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "36px", "lineHeight": "48px" },
|
|
42
|
+
"h2": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "30px", "lineHeight": "40px" },
|
|
43
|
+
"h3": { "fontFamily": "sans", "fontWeight": "500", "fontSize": "24px", "lineHeight": "32px" },
|
|
44
|
+
"headingLg": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "32px", "lineHeight": "40px" },
|
|
45
|
+
"headingMd": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "28px", "lineHeight": "36px" },
|
|
46
|
+
"headingSm": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "22px", "lineHeight": "30px" },
|
|
47
|
+
"body": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "18px", "lineHeight": "26px" },
|
|
48
|
+
"bodyBold": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "18px", "lineHeight": "26px" },
|
|
49
|
+
"labelLg": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "16px", "lineHeight": "18px" },
|
|
50
|
+
"labelMd": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "14px", "lineHeight": "18px" },
|
|
51
|
+
"labelSm": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "12px", "lineHeight": "16px" },
|
|
52
|
+
"labelXs": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "11px", "lineHeight": "14px" }
|
|
53
|
+
},
|
|
54
|
+
"mobile": {
|
|
55
|
+
"h1": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "28px", "lineHeight": "36px" },
|
|
56
|
+
"h2": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "24px", "lineHeight": "32px" },
|
|
57
|
+
"h3": { "fontFamily": "sans", "fontWeight": "500", "fontSize": "20px", "lineHeight": "28px" },
|
|
58
|
+
"headingLg": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "28px", "lineHeight": "36px" },
|
|
59
|
+
"headingMd": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "24px", "lineHeight": "28px" },
|
|
60
|
+
"headingSm": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "20px", "lineHeight": "28px" },
|
|
61
|
+
"body": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "16px", "lineHeight": "24px" },
|
|
62
|
+
"bodyBold": { "fontFamily": "sans", "fontWeight": "600", "fontSize": "16px", "lineHeight": "24px" },
|
|
63
|
+
"labelLg": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "14px", "lineHeight": "20px" },
|
|
64
|
+
"labelMd": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "12px", "lineHeight": "16px" },
|
|
65
|
+
"labelSm": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "10px", "lineHeight": "14px" },
|
|
66
|
+
"labelXs": { "fontFamily": "sans", "fontWeight": "400", "fontSize": "9px", "lineHeight": "12px" }
|
|
67
|
+
}
|
|
27
68
|
}
|
|
28
69
|
}
|