---
title: "fromDTCG"
description: "Converts a W3C DTCG 2025.10 document into the schema tree and bare token tree [\"@pitlane/theme\"!createTheme](https://pitlane.tools/package/theme/function/createTheme.md) accepts."
url: "https://pitlane.tools/package/theme/dtcg/function/fromDTCG"
---

# fromDTCG

```ts
import { fromDTCG } from "@pitlane/theme/dtcg";
```

```ts
function fromDTCG(document): DTCGThemeInit;
```

Converts a W3C DTCG 2025.10 document into the schema tree and bare token tree ["@pitlane/theme"!createTheme](https://pitlane.tools/package/theme/function/createTheme.md) 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](https://pitlane.tools/package/theme/function/createTheme.md) produces an unbranded accessor. Generate TypeScript from the result for the typed path.

## Parameters

### document

[`DTCGDocument`](https://pitlane.tools/package/theme/dtcg/type/DTCGDocument.md)

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

## Returns

[`DTCGThemeInit`](https://pitlane.tools/package/theme/dtcg/interface/DTCGThemeInit.md)

A runtime [ThemeInit](https://pitlane.tools/package/theme/interface/ThemeInit.md)-shaped schema and token tree

## Throws

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

## Example

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