导出调色板和设计令牌

chroma-panel/export 入口可以把命名颜色映射转换为 CSS、SCSS、Tailwind、JSON 或 DTCG 设计令牌。它既不导入 React，也不导入选择器。

用法

import {
  toCssVariables,
  toDesignTokens,
  toScssVariables,
  toTailwindColors,
} from "chroma-panel/export";
 
const palette = {
  primary: "oklch(62% 0.2 255)",
  "surface-raised": "#ffffff",
};
 
toCssVariables(palette, { prefix: "brand" });
toScssVariables(palette);
toTailwindColors(palette);
toDesignTokens(palette);

toCssVariables 可以指定选择器、前缀和输出的色彩空间。名称会统一转换成安全的小写令牌名。toDesignTokens 返回包含 $type: "color" 和 $value 的对象，适用于遵循 Design Tokens Community Group 格式的工具。

设计令牌导出

用法