Chroma Panel

Search documentation

Find a page or section

Token exports

View as Markdown

Turn a named color map into the format your design system uses.

The chroma-panel/export entry turns a named color map into CSS, SCSS, Tailwind, JSON, or DTCG design tokens. It does not import React or the picker.

Usage

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 accepts a selector, prefix and output color space. Names are normalized into safe lowercase token names. toDesignTokens returns objects with $type: "color" and $value, suitable for tools that follow the Design Tokens Community Group shape.