ADR-0024: トークンを、fukuemon.dev の値のプリミティブトークン、セマンティックトークン、テーマ変数の 3 つの層にし、生成りの地と旧サイトの差し色にする¶
Status¶
承認
Context¶
fukuemon.dev のデザインシステムのトークンの持ち方と、値の元を決める必要がある。
- 記事の画面とコードを動かす画面を、同じトークンで組む。
- 訪問者は、ライトとダークのどちらのテーマでも、本文、コード、HTTP の流れの表示を読める。
- スタイリングの基盤は Tailwind CSS にする。
- 運営者は、今のデザインの和の感じを残すと決めた。今のデザインの個性は、版画風の挿絵、明朝の書体、緑と青と錆の差し色、角丸と影を使わない版面である。
- DADS の値をそのまま使うと、地は白、中立の色は冷たい灰になり、和の感じが出なかった。DADS 2.1.0 の中立の色は、白、黒、
solid-gray、opacity-grayだけである。 - 運営者は、和の感じの 3 つの案から、旧サイトに寄せる案を選んだ。DADS は、アクセシビリティ、タイポグラフィ、配色、レイアウトの指標と参考に留める。
- DADS は、状態の色相（成功は緑、エラーは赤、注意は黄か橙）を変えないとしている。
- 出典: DADS の色
Decision¶
トークンを 3 つの層に分け、packages/ui/src/tokens/ に置く。値は fukuemon.dev が決める。
フォーカスの表示の判断は、ADR-0061 にある。
- プリミティブトークンは、fukuemon.dev の値を持つ。
- 地と罫と差し色は、旧サイトの
packages/design-system/styles/tokens.cssの値を使う。生成りの地、墨の文字、温かい灰の罫、くすんだ緑、藍、錆である。 - 書体の太さ、文字の大きさ、行高は、DADS の
@digital-go-jp/design-tokens2.1.0 の値を使う。ファイルの冒頭に、出典の URL と MIT License の表示を残す。- コードを動かす画面の詰めたペインの、13px の等幅の行高だけは、DADS に無い値を使う。値は ADR-0062 が決める。
- 名前は
--fd-primitive-で始める。
- 地と罫と差し色は、旧サイトの
- セマンティックトークンは、役割の名前を
--fd-color-で始め、プリミティブトークンを参照する。 - テーマ変数は、Tailwind CSS の
@theme inlineに置き、Tailwind のデフォルトの色、文字の大きさ、角丸、影、ブレークポイントを消す。セマンティックトークンを通らない書き方を、画面のコードで書けなくするためである。- スタイリングは Tailwind CSS v4 のまま書く。
- テーマ変数にないクラスと、任意の値のクラス（
bg-[#fff]など）を、lint のエラーにする。テーマ変数にないクラスは CSS を出さないだけでビルドが通り、任意の値のクラスはテーマ変数を通らずに CSS を出すためである。
- ライトとダークは、セマンティックトークンの参照先を
@media (prefers-color-scheme: dark)で替えて作る。プリミティブトークンとテーマ変数のファイルは、テーマごとに分けない。- 画面とコンポーネントのコードに、テーマの条件を書かない。
- どちらのテーマの組み合わせも、コントラストのチェックで確認する。
- 差し色の役割は次のとおりにする。
- くすんだ緑は、主の色と内部のリンクにする。訪問済みのリンクは、色で分けない。
- 藍は、外部のリンクと情報にする。
- 錆は、目次の現在地と注意にする。
- エラーは赤、成功は緑の色相のまま、生成りの地の上で 4.5:1 以上になる値を選ぶ。
Considered Options¶
| 選択肢 | 強み | 弱み |
|---|---|---|
| 採用: 地と罫と差し色を旧サイトの値にする（案 A） | 今のサイトの和の感じを、地、差し色、版面の全てで残せる | 状態の色、コードの色、区別の色を、生成りの地に合わせて選び直す。DADS のコンポーネントの見た目から、角と影と入力欄の形が外れる |
| 地と罫と差し色を旧サイトの値にし、角丸と影は DADS の値を使う（案 B） | 角丸と影を DADS に合わせたまま、色で和の感じを出せる | 角丸と影のある箱が、罫線で区切る旧サイトの版面と合わない |
| 地と罫だけを旧サイトの値にし、差し色、角丸、影は DADS の値を使う（案 C） | DADS から外れる値が最も少ない | 差し色が DADS の緑と青のままで、和の感じが地にしか出ない |
| DADS の値をコピーして持つ | DADS の色、文字、余白の考え方にそのまま沿う。buddy と同じ値になる | 地が白、灰が冷たい色になり、和の感じが出ない |
@digital-go-jp/design-tokens を依存のパッケージから読む |
DADS の修正をバージョンを上げて取り込める | 使わない値も全て読む。fukuemon.dev の値を持てない |
| テーマごとにプリミティブトークンのファイルを分ける | テーマごとの値を 1 つのファイルで読める | 同じ階調を 2 回書く。コントラストのチェックの元が増える |
Consequences¶
Positive¶
- 画面のコードは、テーマを意識せずにテーマ変数のユーティリティだけを書ける。
- 今のサイトの地、差し色、罫線の版面が、新しいコンポーネントにも出る。
Negative¶
- ダークの組み合わせと、状態、コード、区別の色は、DADS の指針に頼れず、コントラストのチェックで確認する。
- テーマ変数にないクラスと任意の値を見つける lint を持つ。テーマ変数を足したときは、lint が新しいクラスを受け付けることを確認する。