Skip to content

Search the guides, deployment pages, and API reference.

fromDTCG

import { fromDTCG } from "@pitlane/theme/dtcg";
function fromDTCG(document): DTCGThemeInit;

Converts a W3C DTCG 2025.10 document into the schema tree and bare token tree "@pitlane/theme"!createTheme accepts.

A token resolves its type in DTCG order: its own $type, the resolved type of a whole-value {reference}, then the nearest ancestor group's $type. $description, $deprecated, and $extensions are intentionally discarded until schema factories gain a metadata options bag. Typography tokens are not supported because one typography value would need several custom properties.

Runtime JSON cannot preserve literal paths, so using this init with "@pitlane/theme"!createTheme produces an unbranded accessor. Generate TypeScript from the result for the typed path.

Parameters

document

DTCGDocument

A DTCG document using $value, $type, and dotted references

Returns

DTCGThemeInit

A runtime ThemeInit-shaped schema and token tree

Throws

ThemeError for malformed groups, unsupported typography, unknown types, unresolvable references, cycles, or malformed structured DTCG values

Example

import { createTheme } from "@pitlane/theme";
import { fromDTCG } from "@pitlane/theme/dtcg";
let imported = fromDTCG({
color: {
$type: "color",
white: { $value: "#fff" },
page: { $value: "{color.white}" },
},
});
let theme = createTheme(imported);