Skip to main content

Function: toDTCG()

toDTCG(theme): DTCGTokenTree

Defined in: roots/toDTCG.ts:173

Root 3 — W3C Design Tokens (DTCG JSON).

Convert a ThemeTokens 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).

Semantic hit tokens (semantic.sizing.hit.*) include a $extensions field declaring their coarse-pointer override value, so non-CSS consumers can apply touch-target ergonomics without reading the CSS emitter source.

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

Parameters​

ParameterType
themeThemeTokens

Returns​

DTCGTokenTree

Example​

import { toDTCG } from '@ttoss/fsl-theme/dtcg';
import { createTheme } from '@ttoss/fsl-theme';

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));