@ adobe/ spectrum-design-data (中文(简体) )
光谱设计符号 级联格式 ——"克能克"的真相来源
页:1 @adobe/spectrum-tokens。 。 。 .
级联格式是什么?
每个 .tokens.json 文件输入 tokens/ 是 JSON 系列符合规格的符号
对象。 每个符号都带有结构化 name 有分类字段的对象
(单位:千美元)component, (中文(简体) ), property, (中文(简体) ), state, (中文(简体) ), colorFamily, (中文(简体) ), scaleIndex(例如)改为
一个平平的kebab-case字符串。 格式定义于
packages/design-data-spec。 。 。 .
// tokens/color-palette.tokens.json (excerpt)
[
{
"name": { "property": "color", "colorFamily": "blue", "scaleIndex": 100 },
"$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/token-types/color.json",
"value": "#E9F4FF",
"uuid": "…"
}
]
与 @adobe/spectrum-tokens
packages/tokens/src/ (样式消耗的遗留平面对象格式)
词典和下游工具) 生成 从这个包裹。 别
编辑 packages/tokens/src/ 直接——修改将被覆盖.
在此编辑符后再生成遗产包 :
moon run design-data:legacy-output
文件夹
8个文件,4 166个级联标志(来自2 460个遗留条目):
| 文件 | 说明 |
|---|---|
color-palette.json | 全球颜色尺度( 粗, 红色,...) |
color-component.json | 组件范围色符 |
color-aliases.json | 语义色彩别名 |
semantic-color-palette.json | 语义/文字调色板 |
typography.json | 字体大小、重量、家庭 |
layout.json | 全球间隔和大小 |
layout-component.json | 组件范围布局符 |
icons.json | 图标大小符号 |
命名对象质量
95%的令牌带有结构化名称对象:
- 23% 从侧车名元数据丰富(
colorFamily, (中文(简体) ),scaleIndex, (中文(简体) ),variant, (...) (中文(简体) ) - 71% 从遗留的密钥中分解出来
component+ 键property+ 键state(中文(简体) ) - 6% 薄( 全部遗留密钥存储于
property——被跟踪为SPEC-017技术债务
月球任务
| 任务 | 命令 | 目的 |
|---|---|---|
validate | moon run design-data:validate | 根据光谱规则验证级联文件 |
legacy-output | moon run design-data:legacy-output | 重新生成 packages/tokens/src/ |
roundtrip-verify | moon run design-data:roundtrip-verify | CI 守护: 如果级联和遗产存在差异则失败 |
regenerate-from-legacy | moon run design-data:regenerate-from-legacy | 遗留的再同步级联(一次性/出逃舱口) |
使用级联格式
import colorPalette from "@adobe/spectrum-design-data/tokens/color-palette";
// colorPalette is an array of cascade token objects