Function: toDTCG()

toDTCG(theme): DTCGTokenTree

Defined in: roots/toDTCG.ts:97

Root 3 — W3C Design Tokens (DTCG JSON).

Convert a ThemeTokensV2 into a structured token tree following the W3C Design Tokens Community Group format. Every leaf node has $value (fully resolved) and $type (inferred from the token path).

This is the interchange format for design tools (Tokens Studio, Figma, Style Dictionary, Specify, Supernova) and CI/CD token pipelines.

Parameters

Parameter	Type
theme	ThemeTokensV2

Returns

DTCGTokenTree

Example

import { toDTCG } from '@ttoss/theme2/dtcg';
import { createTheme } from '@ttoss/theme2';

const myBundle = createTheme();
const tokens = toDTCG(myBundle.base);
// tokens.core.colors.brand['500'] === { $value: '#0469E3', $type: 'color' }

// Write to file (build script / token pipeline)
await fs.writeFile('tokens.json', JSON.stringify(tokens, null, 2));