# 设计令牌导出

> 通过一个独立的零依赖入口，把 React 调色板导出为 CSS 变量、SCSS 变量、Tailwind 颜色、JSON 或 DTCG 设计令牌。

Source: https://chroma-panel.jscrate.dev/zh/react/utils/token-exports
Last updated: 2026-09-21

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

## 用法

```ts
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 格式的工具。