スペース
余白などに使用するトークンのリスト。
使い方
<Box m="md" />
<Box p="md" />
<Flex mx="md" />
トークン
0.5
1
1.5
2
2.5
3
3.5
4
4.5
5
5.5
6
6.5
7
7.5
8
9
10
11
12
13
14
15
16
20
24
28
32
36
40
44
48
52
56
60
64
68
72
76
80
84
88
92
96
| トークン | 値 |
|---|---|
1 | "0.25rem" |
2 | "0.5rem" |
3 | "0.75rem" |
4 | "1rem" |
5 | "1.25rem" |
6 | "1.5rem" |
7 | "1.75rem" |
8 | "2rem" |
9 | "2.25rem" |
10 | "2.5rem" |
11 | "2.75rem" |
12 | "3rem" |
13 | "3.25rem" |
14 | "3.5rem" |
15 | "3.75rem" |
16 | "4rem" |
20 | "5rem" |
24 | "6rem" |
28 | "7rem" |
32 | "8rem" |
36 | "9rem" |
40 | "10rem" |
44 | "11rem" |
48 | "12rem" |
52 | "13rem" |
56 | "14rem" |
60 | "15rem" |
64 | "16rem" |
68 | "17rem" |
72 | "18rem" |
76 | "19rem" |
80 | "20rem" |
84 | "21rem" |
88 | "22rem" |
92 | "23rem" |
96 | "24rem" |
0.5 | "0.125rem" |
1.5 | "0.375rem" |
2.5 | "0.625rem" |
3.5 | "0.875rem" |
4.5 | "1.125rem" |
5.5 | "1.375rem" |
6.5 | "1.625rem" |
7.5 | "1.875rem" |
px | "1px" |
セマンティックトークン
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
| トークン | 値 |
|---|---|
xs | "1" |
sm | "2" |
md | "4" |
lg | "6" |
xl | "8" |
2xl | "12" |
3xl | "16" |
4xl | "24" |
5xl | "32" |