R1.01.2primitive-semantic layering设计
语义令牌与原始值令牌需分层
别名: 原始值令牌 · 语义令牌 · token alias · 两层令牌
概念解释
令牌要分成两层才能既改得动颜料、又不改调用点的合同。原始值令牌(primitive token)给材料起名:某一档蓝、某一档间距。语义令牌(semantic token)给角色起名:主行动、画布底、危险字色,并通过别名指向原始值。调用点只应绑定角色,不应绑定材料。
这是别名指针的分层,不是把每个组件再开一套私有令牌。按钮自己的「填充 / 描边」映射属于组件内部的第三层,不在这里处理。
机制
原始值回答「仓库里有哪些材料」,语义层回答「这个角色此刻用哪块材料」。产品代码如果直接写 blue.600,品牌一换蓝,所有碰巧用了这档蓝的地方——主按钮、链接、图表第 3 系列——会一起被拖走。语义层把「主行动」和「图表系列」分成两个别名,即使它们今天碰巧指向同一档蓝,明天也可以分开。
别名是真正的产品:语义名稳定,原始值可替换。少了这一层,改颜色就变成全局查找替换;多层却把语义做成原始值的一一改名,则只增加查找成本,没有隔离能力。组件级令牌再往下,是把某一个组件的内部零件接到语义层,服务的是单组件,不拿来给别的组件复用。
边界
体量很小、全产品只有一套表面色的工具,两层可能暂时折叠,但一旦出现「同一材料、两种角色」,折叠会立刻反噬。语义名如果只是把 blue.600 改写成 color.blue.600,没有角色信息,分层是假的。打印稿、邮件 HTML 等无法在运行时解析别名的管道,需要在构建期把语义层展平,不能假设运行时还有一层间接。
怎么落地
- 把令牌源拆成原始值文件与语义文件;语义文件只允许写别名,不允许写死十六进制或像素。
- 组件和页面样式只引用语义名;原始值名字不得出现在调用点。
- 做一次「换主色」演练:只改语义别名指向的原始值,不改组件。
- 验证:在语义文件里把主行动改指向另一档色,构建后主按钮变、图表系列不变。两边一起变,说明调用点绑的是材料而不是角色。