デザイントークン：1ファイルでサイト全体を統制する

サイトが1ページしかないうちは、適当な16進カラーを数個書いても問題ありません。ブログとゲームとツールが加わり、さらにライト／ダークの2テーマが揃うと、ハードコードが牙を剥き始めます。

出所はひとつだけ

$light: (
  'bg': #f5f1e8,
  'text': #14120f,
  'accent': #ff4a17,
  'ink-2': #1b2a6b,
);

@mixin palette($map) {
  @each $name, $value in $map {
    --c-#{$name}: #{$value};
  }
}

ルールは単純です。コンポーネントに16進カラーを書かない。 色を微調整したくなったらコンポーネントではなくトークンを直す。そうしないとダークテーマのどこか一箇所が必ず間違ったままになり、読者に指摘されるまで気づけません。

SCSS の map にしているのは、着せ替えで変わるのが色だけではないからです。角丸・線幅・影も一緒に動きますが、それらは変数1〜2個では表現できません。

着せ替えは2ファイルで終わる

このサイトは先日ビジュアル方針を変えました。やったことは次の2つだけです。

1. settings/_tokens.scss の2つのパレットを書き直す
2. tools/_mixins.scss の card-shell ミックスインを書き直す

コンポーネントとページは1行も触っていません。 新しい方針が求める直角・3px の描線・ぼかしゼロのハードオフセット影は、すべてトークンとミックスインの層にあります。

--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--border-width: 3px;
--shadow-ink: 4px 4px 0 var(--c-border);

肝は最後の行です。ぼかし半径が 0 なので、影は単なるオフセットの色面に退化します。版がずれたまま刷られたような見え方です。0 4px 16px rgba(0,0,0,.1) のような柔らかい影とは質感がまったく別物ですが、その差は変数1個の書き換えで得られます。

流動タイポグラフィ

clamp() を使えば、320px から 1280px までブレークポイントを並べずに滑らかに変化させられます。

--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--step-4: clamp(2.074rem, 1.82rem + 1.27vw, 2.74rem);

中央の式が要点です。ビューポート単位を少し混ぜると両端で傾きが変わり、小さい画面では速く、大きい画面では緩やかに動きます。これはまさに組版が求める挙動です。

色ではなく役割で名付ける

--c-orange ではなく --c-accent、--c-gray-600 ではなく --c-text-muted。名前が用途を語っていれば、配色を差し替えてもコンポーネントのコードは一切変わりません。

反例もあります。新しい方針は2色のインクで構成され、2色目は --c-ink-2 です。これは色ではなく役割（2枚目の版）を表す名前で、現在はインクブルー、ダークテーマではシアンになります。--c-blue と名付けていたら、半分の時間は嘘をつくことになっていました。

このトークン群は、いま性格のまったく異なる3種類のページを支えています。これがなければ、統一された見た目はとっくに諦めていたはずです。