/
_tokens.scss
109 lines (109 loc) · 1.79 KB
/
_tokens.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
$tokens: (
size: (
leading: (
"4xs": 1,
"3xs": 1.1,
"2xs": 1.2,
"xs": 1.3,
"sm": 1.4,
"base": 1.55,
"md": 1.6,
"lg": 1.7,
),
font: (
"xs": (
min: 12px,
max: 16px,
),
"sm": (
min: 14px,
max: 18px,
),
"base": (
min: 18px,
max: 20px,
leading: "base",
),
"md": (
min: 20px,
max: 22px,
leading: "sm",
),
"lg": (
min: 22px,
max: 26px,
leading: "xs",
),
"xl": (
min: 24px,
max: 32px,
leading: "2xs",
),
"2xl": (
min: 28px,
max: 36px,
leading: "2xs",
),
"3xl": (
min: 32px,
max: 42px,
leading: "2xs",
tracking: "sm",
),
"4xl": (
min: 36px,
max: 56px,
leading: "3xs",
tracking: "sm",
),
"5xl": (
min: 40px,
max: 72px,
leading: "3xs",
tracking: "xs",
),
),
tracking: (
"xs": -0.5px,
"sm": -0.25px,
"md": 0.25px,
"lg": 1px,
),
spacing: (
"-4": 2px,
"-3": 4px,
"-2": 8px,
"-1": 12px,
"0": 16px,
"1": 18px,
"2": 20px,
"3": 24px,
"4": 28px,
"5": 32px,
"6": 36px,
"7": 40px,
"8": 48px,
"9": 56px,
"10": 64px,
"11": 76px,
"12": 96px,
),
relative: (
"-3": 0.25em,
"-2": 0.50em,
"-1": 0.75em,
"0": 1.00em,
"1": 1.25em,
"2": 1.50em,
)
),
breakpoints: (
"mobile-min": 360px,
"mobile": 400px,
"mobile-lg": 480px,
"tablet-sm": 768px,
"tablet": 896px,
"desktop": 960px,
"desktop-lg": 1200px,
),
);