Skip to content

Search the guides, deployment pages, and API reference.

toDTCG

import { toDTCG } from "@pitlane/theme/dtcg";
function toDTCG<T>(theme): DTCGExport;

Exports a compiled theme, a published theme component, or the init behind either one to W3C DTCG 2025.10 documents.

An export places $type on the lowest group whose complete descendant set has one expressible type; standard tokens below that group omit the redundant $type. Mixed groups put $type on their standard token leaves instead. Exact var(--token-name) values are converted back to {token.path} using the collector's variable-name map.

DTCG cannot represent all CSS values this package accepts. Inexpressible values are preserved in $extensions["tools.pitlane"] as { type, value, reason }, on an extension-only node with no $value; this keeps the standard document valid while preserving the original value for a caller that reports or handles the loss. inexpressible counts those nodes in the base document and every mode document.

DTCG descriptions, deprecation metadata, and unrelated extensions are not in the authoring format and cannot be recovered.

Type Parameters

T

T

Parameters

theme

| ThemeInit | ThemeComponent<T> | ThemeResult<T>

A ThemeResult, its ThemeComponent, or its init

Returns

DTCGExport

The base document, one partial document per mode, and the lossy-value count

Throws

ThemeError when the supplied init has an invalid token/schema structure

Example

import { createTheme } from "@pitlane/theme";
import { toDTCG } from "@pitlane/theme/dtcg";
import * as s from "@pitlane/theme/schema";
let theme = createTheme({
schema: { color: s.color() },
tokens: { color: { white: "#fff" } },
});
let { document, inexpressible } = toDTCG(theme);