不改 31 个文件，把所有颜色换掉

先数，再动手

我们做的第一件事是数。颜色 token 用了 972 处，分布在 44 个组件文件中的 31 个。手改不是一天的活，而是一天的活加上你在上千次小改动中犯的每一个错。

名字本来就是对的

那些色阶叫 ground、surface、ink、sand 和 brand。这些名字描述的是角色而不是颜色，所以换了调色板之后它们依然成立。要动的只是底下的值。

于是我们一个 utility 都没碰，把色阶重新指向 CSS 变量。现在根元素上的一个 class 就能给整站换主题，没有任何组件握着十六进制值。

决定成败的细节

变量要写成 RGB 通道，不要写十六进制。这套代码里透明度修饰符出现了 108 次，而它没法从一串十六进制里切出 alpha：

--fg: 237 237 237;

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

数值和品牌文档印出来的完全一样。不同的只是写法——而正是写法让透明度语法继续能用。

这招不管用的地方

插画套件里有十个颜色是写死的。它们跟不了变量，所以在近黑的底色上一直是奶油色，直到也变成 token。我们最初选的暗色值让物体沉进了背景：画出来的实体必须比它所站的地面更亮，而这是变量不会替你做的判断。