Function: toDTCG()

toDTCG(theme): DTCGTokenTree

Defined in: roots/toDTCG.ts:188

Root 3 — W3C Design Tokens (DTCG JSON).

Convert a ThemeTokens into a structured token tree following the W3C Design Tokens Community Group format (2025.10). Every leaf has a $value; $type is inferred from the token path and omitted for opaque tokens with no valid DTCG scalar type ($type is optional per spec).

Profile: this emits fully-resolved scalar tokens — $values are concrete (no {alias} refs) and composite shapes (typography, shadow, border, transition) are emitted as their individual scalar leaves, not as DTCG composite objects. This is a conformant DTCG profile; richer alias-preserving / composite output is a deferred enhancement (see CONTRIBUTING.md ADR-013).

The semantic hit token (semantic.sizing.hit) includes a $extensions field declaring its 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

Parameter	Type
theme	ThemeTokens

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