设计托肯斯
@earendil-works/design-tokens 提供共享和品牌专用的W3C DTCG令牌,由Terrazzo建造.
使用
npm install @earendil-works/design-tokens
导入一个品牌样式表 :
@import '@earendil-works/design-tokens/radius.css';
其他切入点: pi.css, (中文(简体) ), earendil.css, (中文(简体) ), lefos.css, (中文(简体) ), elanor.css。 。 。 .
轻语义颜色是默认的. 黑暗覆盖自动通过 prefers-color-scheme: dark。 。 。 .
要检查您的CSS 与符号,使用 样式林插件。它拒绝硬编码值和未知自定义属性,检查符合其 CSS 属性的符号,并要求在基础文件之外设置语义符号.
开发
从寄存器根运行命令 .
pnpm tokens:generate # Compile recipes into primitive tokens
pnpm tokens:check # Type-check tooling, check generation, validate tokens
pnpm tokens:check:contrast # Check semantic color contrast only
pnpm tokens:build # Build all brands
对于一个品牌,使用 pnpm tokens:build:radius, (中文(简体) ), pnpm tokens:build:pi, (中文(简体) ), pnpm tokens:build:earendil, (中文(简体) ), pnpm tokens:build:lefos,或 pnpm tokens:build:elanor。 。 。 .
编辑 食谱,而不是生成值。 共享环境 generation/config.json; 食谱路径在下面映射其输出 tokens/。 。 。 .
tokens:check 对照DTCG 2025.10,检查 Stale生成源,验证符和解码器,检查需要休息状态对比对等,并对每个品牌进行Terrazzo的交叉档案检查. 词根 pnpm check 包括这些检查.
使用销售商验证 DTCG 计划 离线 要刷新他们,跑 pnpm tokens:schemas:update,然后审查并落实各种计策和核对结果。 见 计划通知 和许可证.
产出
每个 dist/<brand>/ 包含:
tokens.css:原始语,模式独立语义,和浅语义颜色:root与color-scheme: light dark; 阴暗semantic.color.*覆盖在prefers-color-scheme: dark。 。 。 .tokens.catalog.json: CSS 自定义属性 已解析 CSS/DTCG 值和别名目标,每个修饰符在其默认上下文中,每个修饰符上下文的不同值(例如:contexts.colorScheme.dark),每个修改器的上下文,以及CSS如何将其打开,以及$extensions(包括印刷建筑). 导出为@earendil-works/design-tokens/<brand>.catalog.json用来倒地和建造工具.- 图形兼容 JSON 来自
terrazzo-plugin-figma-json。 。 。 .