31ファイルを触らずに全色を変える

始める前に数える

最初にしたのは数えることでした。色トークンの使用は972か所、44あるコンポーネントファイルのうち31に散っていました。手で直すのは一日の作業ではなく、一日の作業に千回の小さな編集で出る間違いを足したものです。

名前はもう正しかった

ランプの名前は ground、surface、ink、sand、brand。色ではなく役割を表す名前なので、パレットが変わっても真であり続けます。動かすべきはその下の値だけでした。

そこで972のユーティリティには一切触れず、ランプの参照先をCSS変数に変えました。ルート要素のクラス一つでサイト全体のテーマが切り替わり、コンポーネントは一つも16進数を持ちません。

決め手になる細部

変数は16進数ではなくRGBチャンネルで書くこと。このコードベースでは透明度の修飾子が108回使われており、16進数の文字列からアルファを取り出すことはできません。

--fg: 237 237 237;

ink: "rgb(var(--fg) / <alpha-value>)"

値はブランド文書が示すものと同じです。表記だけが違い、その表記こそが透明度の構文を生かし続けます。

うまくいかなかったところ

イラストのキットには色が10個、直接書き込まれていました。変数に追従できないので、トークン化するまでは漆黒に近い地の上でクリーム色のままでした。最初に選んだ暗い値では物体が背景に沈みました。描かれた立体は、乗っている地面より明るくなければならない。これは変数が代わりにしてくれない判断です。