Style Dictionary中处理基础色与色阶的命名技巧

在Style Dictionary项目中，开发者经常需要处理颜色体系的设计，特别是基础色与色阶(如100、200等)的命名问题。本文介绍两种有效的解决方案，帮助开发者优雅地组织颜色变量。

问题背景

当我们需要定义一个基础黑色及其色阶时，很自然地会想到使用嵌套结构：

{
  "color": {
    "black": {
      "value": "#000000",
      "100": { "value": "#1A1A1A" }
    }
  }
}

期望输出：

:root {
  --prefix-color-black: #000000;
  --prefix-color-black-100: #1A1A1A;
}

然而，Style Dictionary默认会将black识别为独立token，从而忽略其嵌套属性。

解决方案一：平铺式命名

最直接的解决方案是将所有色阶平铺在同一个层级：

{
  "color": {
    "black": { "value": "#000000", "type": "color" },
    "black-100": { "value": "#1A1A1A", "type": "color" }
  }
}

这种方法简单明了，但可能缺乏层级结构的直观性。

解决方案二：使用特殊字符保留层级

更优雅的方式是利用特殊字符_作为占位符：

{
  "color": {
    "black": {
      "_": { "value": "#000000" },
      "100": { "value": "#1A1A1A" }
    }
  }
}

Style Dictionary会将_视为分隔符，在转换时自动处理为：

• color-black（基础色）
• color-black-100（色阶）

技术原理

这种解决方案之所以有效，是因为：

1. Style Dictionary将特殊字符视为分隔符
2. 在转换过程中会自动处理这些分隔符
3. 最终生成的变量名仍然保持语义清晰

实际应用建议

1. 一致性：在整个项目中统一使用同一种命名方案
2. 文档化：在项目文档中明确说明命名规范
3. 自动化检查：可以配置lint规则确保命名一致性

这种技巧不仅适用于颜色系统，也可以应用于其他需要层级结构的token设计场景。