Design Tokens
This content is not available in your language yet.
| トークン名 | 変数 |
|---|---|
base | --c-base |
base-2 | --c-base-2 |
text | --c-text |
text-2 | --c-text-2 |
divider | --c-divider |
link | --c-link |
main | --c-main |
accent | --c-accent |
モダンCSSではcolor-mix()があるので、hsl値の中身を変数にすることはしていません。
PALETTE
Section titled “PALETTE”| パレットトークン | 変数 |
|---|---|
red | --red |
orange | --orange |
yellow | --yellow |
green | --green |
blue | --blue |
purple | --purple |
pink | --pink |
gray | --gray |
black | --black |
white | --white |
| トークン値 | 変数 | デフォルト値 |
|---|---|---|
5 | --s5 | 0.25rem |
10 | --s10 | 0.375rem |
20 | --s20 | 0.625rem |
30 | --s30 | 1rem |
40 | --s40 | 1.625rem |
50 | --s50 | 2.625rem |
60 | --s60 | 4.25rem |
70 | --s70 | 6.875rem |
80 | --s80 | 11.125rem |
5
10
20
30
40
50
60
70
80
フィボナッチ数列 ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, …) に基づいたスケーリングを採用しています。
デフォルトでは1 = 0.125rem, 2 = 0.25rem として計算し、0.25remから順にトークン化しています。
RADIUS
Section titled “RADIUS”| トークン値 | 変数 | クラス | 初期値 |
|---|---|---|---|
5 | --bdrs-5 | -bdrs:5 | 2px |
10 | --bdrs-10 | -bdrs:10 | 0.25rem |
20 | --bdrs-20 | -bdrs:20 | 0.5rem |
30 | --bdrs-30 | -bdrs:30 | 1rem |
40 | --bdrs-40 | -bdrs:40 | 1.5rem |
50 | --bdrs-50 | -bdrs:50 | 2rem |
99 | --bdrs-99 | -bdrs:99 | 99rem |
<div class="-bdrs:5">...</div><div class="-bdrs:10">...</div><div class="-bdrs:20">...</div><div class="-bdrs:30">...</div><div class="-bdrs:40">...</div><div class="-bdrs:50">...</div><div class="-bdrs:99">...</div>SHADOW
Section titled “SHADOW”| トークン値 | 変数 | クラス |
|---|---|---|
50 | --bxsh-50 | -bxsh:50 |
40 | --bxsh-40 | -bxsh:40 |
30 | --bxsh-30 | -bxsh:30 |
20 | --bxsh-20 | -bxsh:20 |
10 | --bxsh-10 | -bxsh:10 |
--bxsh-{token}の値の中身は、次の変数で構成されます。
| 構成変数 | 初期値 |
|---|---|
--_sh_c | hsl(var(--_sh_hsl) / var(--_sh_a)) |
--_sh_hsl | 220 4% 8% |
--_sh_a | 5% |
--_sh_sz-[0~5] | … |
--_sh_i | (空白) |
<div class="-bxsh:10">...</div><div class="-bxsh:20">...</div><div class="-bxsh:30">...</div><div class="-bxsh:40">...</div><div class="-bxsh:50">...</div>--_sh_iにinsetを指定することで、内向きshadowに変更できます。
(当ドキュメントサイトでは、ダークモード時にinsetになっています。)
TYPO.FF
Section titled “TYPO.FF”font-family 用のトークンです。
| トークン | 変数 | クラス |
|---|---|---|
base | --ff-base | -ff:base |
accent | --ff-accent | -ff:accent |
mono | --ff-mono | -ff:mono |
base: English text, 漢字ひらがな
accent: English text, 漢字ひらがな
mono: English text, 漢字ひらがな
<p class="-ff:base -fz:xl">Lorem ipsum ...</p><p class="-ff:accent -fz:xl">Lorem ipsum ...</p><p class="-ff:mono -fz:xl">Lorem ipsum ...</p>TYPO.FW
Section titled “TYPO.FW”font-weight 用のトークンです。
| トークン | 変数 | クラス | 初期値 |
|---|---|---|---|
light | --fw-light | -fw:light | 300 |
normal | --fw-normal | -fw:normal | 400 |
bold | --fw-bold | -fw:bold | 700 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<p class="-fw:light">Lorem ipsum ...</p><p class="-fw:normal">Lorem ipsum ...</p><p class="-fw:bold">Lorem ipsum ...</p>TYPO.FZ
Section titled “TYPO.FZ”font-size 用のトークンです。
| トークン | 変数 | クラス | 初期値 |
|---|---|---|---|
2xs | --fz-2xs | -fz:2xs | calc(1em * 8 / 11) |
xs | --fz-xs | -fz:xs | calc(1em * 8 / 10) |
s | --fz-s | -fz:s | calc(1em * 8 / 9) |
m | --fz-m | -fz:m | 1em |
l | --fz-l | -fz:l | calc(1em * 8 / 7) |
xl | --fz-xl | -fz:xl | calc(1em * 8 / 6) |
2xl | --fz-2xl | -fz:2xl | calc(1em * 8 / 5) |
3xl | --fz-3xl | -fz:3xl | calc(1em * 8 / 4) |
4xl | --fz-4xl | -fz:4xl | calc(1em * 8 / 3) |
5xl | --fz-5xl | -fz:5xl | calc(1em * 8 / 2) |
2xs
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
xs
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
s
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
m
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
l
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
2xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
3xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
4xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
5xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
<p class='-fz:2xs'>Lorem ipsum ...</p><p class='-fz:xs'>Lorem ipsum ...</p><p class='-fz:s'>Lorem ipsum ...</p><p class='-fz:m'>Lorem ipsum ...</p><p class='-fz:l'>Lorem ipsum ...</p><p class='-fz:xl'>Lorem ipsum ...</p><p class='-fz:2xl'>Lorem ipsum ...</p><p class='-fz:3xl'>Lorem ipsum ...</p><p class='-fz:4xl'>Lorem ipsum ...</p>スケーリングについて
Section titled “スケーリングについて”Lism では、フォントサイズのスケーリングには数学的に美しいとされるスケーリング理論に基づいて定義することを推奨しています。
参考: 音楽、数学、タイポグラフィ
デフォルトでは、分子8の調和数列ベースに設定しています。
:root{ --_fzmol: 8; --fz-4xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 5)); --fz-3xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 4)); --fz-2xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 3)); --fz-xl: calc(1em * var(--_fzmol) / (var(--_fzmol) - 2)); --fz-l: calc(1em * var(--_fzmol) / (var(--_fzmol) - 1)); --fz-m: 1em; --fz-s: calc(1em * var(--_fzmol) / (var(--_fzmol) + 1)); --fz-xs: calc(1em * var(--_fzmol) / (var(--_fzmol) + 2)); --fz-2xs: calc(1em * var(--_fzmol) / (var(--_fzmol) + 3));}:rootで指定している --_fzmol を上書きすることで、スケーリングの基準（分子）を変更できます。
分子は 7~9 あたりで選ぶのがおすすめです。
--_fzmolの違い
Section titled “--_fzmolの違い”:root{--_fzmol:7}2xs
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
xs
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
s
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
m
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
l
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
2xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
3xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
4xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
5xl
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
TYPO.LH
Section titled “TYPO.LH”line-height 用のトークンです。
| トークン | 変数 | クラス | 初期値 |
|---|---|---|---|
base | --lh-base | -lh:base | 1.75 |
xs | --lh-xs | -lh:xs | calc({base} - 0.25) |
s | --lh-s | -lh:s | calc({base} - 0.125) |
l | --lh-l | -lh:l | calc({base} + 0.125) |
xl | --lh-xl | -lh:xl | calc({base} + 0.25) |
base値は 日本語では 1.625, 1.75, 1.875 あたりがおすすめです。（英語なら 1.5, 1.625 あたりがおすすめ）
xs: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
s: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
base: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
l: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
xl: Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
<p class="-lh:xs">Lorem ipsum ...</p><p class="-lh:s">Lorem ipsum ...</p><p class="-lh:base">Lorem ipsum ...</p><p class="-lh:l">Lorem ipsum ...</p><p class="-lh:xl">Lorem ipsum ...</p>TYPO.LTS
Section titled “TYPO.LTS”letter-spacing 用のトークンです。
| トークン | 変数 | クラス | 初期値 |
|---|---|---|---|
base | --lts-base | -lts:base | normal |
s | --lts-s | -lts:s | -0.05em |
l | --lts-l | -lts:l | 0.05em |
s: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
base: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
l: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<p class="-lts:s">Lorem ipsum ...</p><p class="-lts:base">Lorem ipsum ...</p><p class="-lts:l">Lorem ipsum ...</p>OPACITY
Section titled “OPACITY”| トークン値 | 変数 | クラス | 初期値 |
|---|---|---|---|
low | --op-low | -op:low | 0.25 |
mid | --op-mid | -op:mid | 0.5 |
high | --op-high | -op:high | 0.75 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.
<p class="-op:low">Lorem ipsum ...</p><p class="-op:mid">Lorem ipsum ...</p><p class="-op:high">Lorem ipsum ...</p>コンテンツサイズ用のトークンです。
| トークン値 | 変数 |
|---|---|
xs | --size-xs |
s | --size-s |
m | --size-m |
l | --size-l |
.is--container 等で使用されています。
トークンの命名規則について
Section titled “トークンの命名規則について”- xs, s, m(root), l, xl などによるサイズ表記
- 基本となる中心値があって、それに対して小さいか？大きいか？というのを表すトークン。
:rootやbodyにセットされている値に戻すためのものはbase。そうでないが基本的な中心値となるものはmで表現。- sm, md, lg ではない理由は、ブレイクポイント表記と被らないようにするため。
- 0, (5,) 10, 20, 30,… などの数値による段階表記
- 基本となる値がなく、0スタートで段階的なトークン値を持つものを表すトークン。
- 0,1,2,3… という単純な繰り上げではなく数値に間隔を持たせているのは、ユーザーが既存トークンの間に新しいトークンを追加できるようにするため。
- それ以外のセマンティックトークン
- サイズ表記や段階表記では表現できないものを表すトークン。
カラートークンのバリエーション名について
Section titled “カラートークンのバリエーション名について”base-2, text-2などは、よくある表現としては secondary, weak, subtle などがありますが、これといった正解があるわけではなく、命名するのが非常に難しいトークンです。
名前を決めてしまうと、ユーザーによっては意味合いとして明確なズレが発生する可能性もあります。
そのため、単純に数値を後ろにつけることによって意味付けをなくし、バリエーションを表すだけにしました。
トークンを追加したい時も、名前に悩む必要はなくbase-3,accent-2のように増やしていけます。