Build-Time Tokens with Style Dictionary

If you already run a token pipeline, Livry can just be its source. Fetch the DTCG document in CI, generate what your platforms need, and ship the output — your app has no runtime dependency on Livry at all. Theme integration required: a pair whose library is Build-time tokens (Style Dictionary). It builds tokens.dtcg.json, tokens.json and tokens.flat.json.

Which file

Use tokens.dtcg.json, not tokens.json.tokens.dtcg.json keeps aliases as written — {color.brand}. Style Dictionary and every other DTCG tool resolve references themselves, and that is where their whole reference-graph feature set lives: outputs that preserve the relationship, per-platform reference resolution, warnings about broken links.tokens.json has every alias already flattened to a value. Feeding it to a DTCG tool throws away the relationships it was built to use.

1. Fetch in CI

# Before the build.
mkdir -p tokens
curl --fail --silent --show-error \
  "https://cdn.livry.dev/{environmentID}/{themeID}/{variantID}/7/tokens.dtcg.json" \
  -o tokens/theme.tokens.json

Pin the version. /7/ rather than /latest/: a build should not change because somebody published while it was running, and two builds of the same commit should produce the same bytes.Bump the number as a deliberate commit, like any other dependency.

--fail matters — without it curl writes the error body to your tokens file and the build continues with garbage.

2. Configure Style Dictionary

// style-dictionary.config.mjs — Style Dictionary reads DTCG ($value, $type) natively.
export default {
  source: ["tokens/theme.tokens.json"],
  platforms: {
    css: {
      transformGroup: "css",
      buildPath: "dist/",
      files: [{ destination: "tokens.css", format: "css/variables" }],
    },
    js: {
      transformGroup: "js",
      buildPath: "dist/",
      files: [{ destination: "tokens.js", format: "javascript/es6" }],
    },
  },
};

npx style-dictionary build --config style-dictionary.config.mjs

Many brands

A build-time pipeline generates one output per brand, so loop:

for VARIANT in northwind contoso fabrikam; do
  curl --fail --silent --show-error \
    "https://cdn.livry.dev/$ENV/$THEME/$VARIANT/$VERSION/tokens.dtcg.json" \
    -o "tokens/$VARIANT.tokens.json"
done

import StyleDictionary from "style-dictionary";

const brands = ["northwind", "contoso", "fabrikam"];

for (const brand of brands) {
  await new StyleDictionary({
    source: [`tokens/${brand}.tokens.json`],
    platforms: {
      css: {
        transformGroup: "css",
        buildPath: `dist/${brand}/`,
        files: [{ destination: "tokens.css", format: "css/variables" }],
      },
    },
  }).buildAllPlatforms();
}

This is the trade-off. A build-time pipeline means a new brand needs a build and a deploy — you have given up the runtime brand switch that makes Livry’s stylesheet integration instant.If you onboard brands frequently, consider using tokens.css at runtime and keeping the build-time pipeline only for the platforms that genuinely need generated output — native apps, email templates, design-tool sync.

A Theme can hold both integrations at once and build both file sets.

Discovering brands and versions

Rather than hard-coding the list, ask the API:

VARIANTS=$(curl --fail --silent \
  "https://api.livry.dev/public/v1/environments/$ENV/themes/$THEME/variants" \
  -H "Authorization: Bearer $LIVRY_TOKEN" | jq -r '.items[].id')

The Theme’s servingUrls.version is the newest published version, so “pin to whatever is newest at build time, and record it” is a few lines.

The API is not yet reachable with a machine credential — see Authentication. Until it is, a CI integration means a user-backed token, which is not something to put in a shared pipeline. Hard-coding the list is the honest recommendation today.

Other DTCG tools

Anything that reads the DTCG format works the same way — fetch tokens.dtcg.json and point the tool at it. $extends and $ref are the two places to be careful, because Livry preserves them without applying them; if your tool emits either, Livry will store it faithfully and ignore it. See Tokens.

Get started

Theming

Integration guides

Teams and access

Serving

Account and billing

Help

Build-Time Tokens with Style Dictionary

Which file

1. Fetch in CI

2. Configure Style Dictionary

Many brands

Discovering brands and versions

Other DTCG tools

​Which file

​1. Fetch in CI

​2. Configure Style Dictionary

​Many brands

​Discovering brands and versions

​Other DTCG tools

Which file

1. Fetch in CI

2. Configure Style Dictionary

Many brands

Discovering brands and versions

Other DTCG tools