fukuemon.dev のデザインシステムのトークン¶

この文書は、デザインシステムの文書の一部で、セマンティックトークン、テーマ、文字、レイアウトの使い方の規則を持つ。
値は書かない。
値は、DESIGN.md の「知りたいことごとの参照先」の表が指すコードから読む。
DADS の指針から外れる規則は、その規則の隣に、DADS が求めることと外れる理由を書く。

色¶

画面のコードは、テーマ変数のユーティリティ（bg-surface、text-primary、border-border-field など）で色を書く。
名前は、下の表の名前に、Tailwind の接頭辞（bg-、text-、border-）を付けたものになる。

• <状態>-surface の上の文字は、同じ状態の色か text にする。どちらの組も、コントラストのチェックが確認する。
• 状態の色相は DADS のとおり、エラーは赤、成功は緑にする。
  • 注意は、DADS の黄か橙ではなく錆にする。錆は橙に近い色相で、旧サイトの差し色である（ADR-0024）。
  • 主の色の緑と成功の緑が並ぶ画面では、成功を文と印でも伝える（STATE-NOT-COLOR-ONLY）。
• 訪問済みのリンクは、色で分けない。DADS は訪問済みのリンクの色を分けるが、旧サイトと同じく内部のリンクの色を 1 つに保つ（ADR-0024）。
• garden- で始まる 6 つのトークンは、テーマに依らず同じ値を指す。場面の色は時間帯で決まり、テーマに依らないためである。 霞の置き方と、テーマの色の名前への差し替えは トップの水墨の門と立体の庭の Design Doc の「ヘッダーと霞」 にある。
• HTTP の状態コードに当てる状態の色は、Design Doc の「HTTP の流れの色」の表にある。新しい色のトークンを作らない。
• コンソールのログレベルに当てる状態の色は、Design Doc の「コンソールのログレベルの色」の表にある。新しい色のトークンを作らない。

セマンティックトークンがプリミティブトークンを参照しない例外は、次の 2 つ。

• 挿絵の層の濃さ（--fd-art-*）は、色ではなく不透明度の値を直に持つ。挿絵は text と surface の色だけで塗り、濃さをこの値で決めるためである。コントラストのチェックは読まない。
• 見出しの明朝のウェイト（テーマ変数の --font-weight-semibold）は、600 を直に持つ。明朝は 600 の 1 つだけを読み込むためである（ADR-0075）。

ADR-0024: トークンを、fukuemon.dev の値のプリミティブトークン、セマンティックトークン、テーマ変数の 3 つの層にし、生成りの地と旧サイトの差し色で、角丸と影を使わない版面にする

テーマ¶

DADS はダークのテーマを持たない。
fukuemon.dev はダークを持つ。
訪問者が、本文とコードを長く読み、暗い部屋で読むこともあるためである。
ダークの値も fukuemon.dev が選ぶ。

• 画面とコンポーネントのコードに、テーマの条件（dark: の変種、prefers-color-scheme）を書かない。テーマはセマンティックトークンの参照先だけで替える。
• サイトにテーマの切り替えを置かない。data-theme の属性は Storybook だけが使う。

文字¶

• 記事の題と見出しは、font-heading と font-semibold を text-heading-* に重ね、Zen Old Mincho の 600 で描く。DADS の見出しはゴシックの 700 だが、運営者が今のサイトの和の感じを残すと決めたためである（ADR-0075）。大きさと行高は DADS のスタイルのまま使う。
• 本文はシステムフォント（font-sans）で描く。DADS の本文の書体は Noto Sans JP だが、本文の Web フォントの取得をなくすためである（ADR-0075）。
• 等幅は Noto Sans Mono で描き、等幅の和文は BIZ UDGothic で受ける。
• プリミティブトークンは、書体では本文の font-family だけを持つ。テーマ変数の font-heading と font-mono は、見出しと等幅の Web フォントの名前を直に持つ（ADR-0075）。
• 14px の文字は、text-caption と text-code-dense だけにする。text-code-dense は本文でない 14px の文字である（TEXT-MIN-SIZE）。
• 名前に dense が付くスタイルは 14px 以上で行高を詰め、compact が付くスタイルは 14px より小さい例外にする。
• 12px と 13px の文字は、コードを動かす画面のコンポーネントだけに使う（text-compact、text-label-compact、text-body-compact、text-code-compact）。14px より小さい文字を使わない原則（TEXT-MIN-SIZE）の例外で、DevTools のコンソールに近い密度で行を並べ、隣の 13px の題とタブに文字の大きさをそろえるためである（ADR-0062、ADR-0067）。
  • ADR-0062: コードを動かす画面だけ、文字を 12px と 13px まで、押せる領域を 24×24 CSS px まで小さくする
  • ADR-0067: コードを動かす画面の詰めたペインの文字のトークンを 4 つにし、13px の等幅の行高に DADS に無い値を使う

ADR-0075: 本文をシステムフォントで描き、Web フォントを記事の題と見出しの明朝と等幅だけにする

レイアウト、区切り、重なり、動き¶

• 余白の段は、DADS が値を決めず使う側に任せているので、Tailwind のデフォルトの段を使う。
  • 出典: DADS の余白
• ブレークポイントは、DADS の設定の例の 1 つ（48rem）だけを置く。
• 影のユーティリティは、shadow-raised の 1 つだけを書ける。角丸のユーティリティは、rounded-control と、コードを動かす画面だけで使う rounded-pane、rounded-sheet、rounded-control-compact を書ける。DADS のコンポーネントは、コンポーネントごとに角丸と影の値を持つが、罫線で区切る版面と合わないためである（ADR-0028、ADR-0073）。
  • rounded-control は、操作できる要素と重なる面だけに付ける。Tabs のタブ、下罫だけの検索の欄、メニューの項目、Notice、StatusBadge、Table、コードブロック、トップの庭の中の文へ移るボタンには付けない。
  • shadow-raised は、重なる面だけに付ける。ボタンと入力欄には付けない。
• 動きの時間と緩急は、表のユーティリティだけで書く。テーマ変数で止められない時間の値（duration-[…] の任意値）を書かない（MOTION-TOKEN）。
• 動きを付ける操作、長さ、付けない所は、Design Doc の「動き」 にある。フォーカスの表示、入力した文字、誤りの文には、動きを付けない。
• 筆の線の形は、テーマ変数のファイルの --fd-mask-brush（:root に置く SVG）にあり、stroke-brush と brush-hover だけが読む。
• 動きを減らす設定での止め方は、テーマ変数のファイル（src/tokens/theme.css）の末尾の 1 か所にある（MOTION-REDUCE）。罫と筆の線を引く動きは、止めると全長の線が最初から出る。Button の読み込み中の印は、濃い 3 つの点で止まる。scroll-fade-end の右端の薄い色は、途中の濃さを出さず、右端まで送ったときに一度に消える。

ADR-0028: 操作できる要素と重なる面の角を 2px で丸め、重なる面にずらした影を付け、罫を引く動きを筆の線にする

ハイコントラスト¶

forced-colors: active で消える枠と塗りを、システムの色で引くユーティリティである。通常の表示には何も変わらない。 足す規則は DESIGN.md の「ハイコントラスト」にある。

• 選択とオンの色は、変数 --fd-forced-on と --fd-forced-on-text が持つ。この 2 つはセマンティックトークンではなく、:root に置く forced-colors: active 専用の変数である。値は SelectedItem と SelectedItemText で、使えないブラウザでは Highlight と HighlightText になる。
• ブラウザは、システムの色以外の値を置き換える。通常の色の指定（bg-primary など）に勝つよう、forced-* の宣言は !important にしている。
• loading-dots は、ユーティリティの中で点を CanvasText で塗る。forced-* を足す必要はない。
• forced-frame は 1px の枠を足す。absolute の子を持つ要素では、子の位置を 1px 戻す。Switch のつまみは forced-colors:left-px で戻している。