サイズ
横幅や縦幅などに使用するトークンのリスト。
使い方
<Box w="md" />
<Box h="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" |
セマンティックトークン
9xs
8xs
7xs
6xs
5xs
4xs
3xs
2xs
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
8xl
9xl
| トークン | 値 |
|---|---|
fit | "fit-content" |
max | "max-content" |
min | "min-content" |
dvh | "100dvh" |
dvw | "100dvw" |
full | "100%" |
lvh | "100lvh" |
lvw | "100lvw" |
svh | "100svh" |
svw | "100svw" |
vh | "100vh" |
vw | "100vw" |
9xs | "1rem" |
8xs | "2rem" |
7xs | "3rem" |
6xs | "4rem" |
5xs | "6rem" |
4xs | "8rem" |
3xs | "10rem" |
2xs | "12rem" |
xs | "16rem" |
sm | "20rem" |
md | "24rem" |
lg | "28rem" |
xl | "32rem" |
2xl | "38rem" |
3xl | "44rem" |
4xl | "50rem" |
5xl | "56rem" |
6xl | "64rem" |
7xl | "72rem" |
8xl | "80rem" |
9xl | "88rem" |
フラクショナルトークン
1/2
1/3
1/4
1/5
1/6
1/12
2/3
2/5
2/6
2/12
3/4
3/5
3/6
3/12
4/5
4/6
4/12
5/6
5/12
6/12
7/12
8/12
9/12
10/12
11/12
| トークン | 値 |
|---|---|
1/2 | "calc(100% / 2)" |
1/3 | "calc(100% / 3)" |
1/4 | "calc(100% / 4)" |
1/5 | "calc(100% / 5)" |
1/6 | "calc(100% / 6)" |
1/12 | "calc(100% / 12)" |
2/3 | "calc(100% / 3 * 2)" |
2/5 | "calc(100% / 5 * 2)" |
2/6 | "calc(100% / 6 * 2)" |
2/12 | "calc(100% / 12 * 2)" |
3/4 | "calc(100% / 4 * 3)" |
3/5 | "calc(100% / 5 * 3)" |
3/6 | "calc(100% / 6 * 3)" |
3/12 | "calc(100% / 12 * 3)" |
4/5 | "calc(100% / 5 * 4)" |
4/6 | "calc(100% / 6 * 4)" |
4/12 | "calc(100% / 12 * 4)" |
5/6 | "calc(100% / 6 * 5)" |
5/12 | "calc(100% / 12 * 5)" |
6/12 | "calc(100% / 12 * 6)" |
7/12 | "calc(100% / 12 * 7)" |
8/12 | "calc(100% / 12 * 8)" |
9/12 | "calc(100% / 12 * 9)" |
10/12 | "calc(100% / 12 * 10)" |
11/12 | "calc(100% / 12 * 11)" |