Design Tokens

I have generated the DTCG compliant token structure and the corresponding Terrazzo configuration to export these as CSS variables.

DTCG Token Definition

{
  "color": {
    "primitive": {
      "$type": "color",
      "blue-500": {
        "$value": {
          "colorSpace": "srgb",
          "components": [0.145, 0.388, 0.922],
          "hex": "#2563eb"
        },
        "$description": "Primary brand blue"
      }
    },
    "semantic": {
      "$type": "color",
      "button-bg-primary": {
        "$value": "{color.primitive.blue-500}",
        "$description": "Background color for primary action buttons"
      }
    }
  }
}

Terrazzo Configuration

import { defineConfig } from "@terrazzo/cli";
import pluginCSS from "@terrazzo/plugin-css";

export default defineConfig({
  tokens: ["./tokens.json"],
  outDir: "./dist/",
  plugins: [
    pluginCSS({
      filename: "tokens.css",
      variablePrefix: "ds"
    })
  ]
});

Next steps

1. Run npx terrazzo validate tokens.json to confirm the structure is sound.
2. Execute npx terrazzo build to generate the ./dist/tokens.css file.
3. Reference the CSS variables in your components using var(--ds-color-semantic-button-bg-primary).