Token Resolution

CalibrateDS extracts Figma Variables and Styles, normalizes them, and generates CSS Custom Properties that power your component styling.

How it works

When you run ptb generate-tokens, the CLI traverses your DesignSystemModel and writes a CSS file for each token collection. Figma variable names are transformed into --ptb-* prefixed CSS custom properties using the collection and token name.

A Figma variable like colors / brand / 900 becomes:

:root {
  --ptb-colors-brand-900: #103D1A;
}

Spacing, radius, and typography tokens follow the same convention:

:root {
  --ptb-spacing-large: 24px;
  --ptb-radius-md: 8px;
}

Alias Tokens

If a Figma variable references another variable (an alias), PTB resolves the chain and emits a var() reference:

:root {
  --ptb-colors-primary: var(--ptb-colors-brand-900);
}

PTB detects circular alias chains and skips them, reporting the count in the token generation metrics.

Token Bindings in Component Context

When AI implements a component (or you build it manually), PTB passes tokenBindings in the ComponentContext. Instead of telling the AI to use a literal hex code like #103D1A, the context instructs the AI to use the semantic CSS variable:

fill: var(--ptb-colors-brand-900)

This ensures generated code is coupled to your design system's tokens — not hardcoded values that break when themes change.

Naming Convention

The naming.tokenCase option in ptb.config.json controls how the token name segment is cased within the --ptb-* prefix. The default is camelCase:

/* camelCase (default) */
--ptb-colorsBrand900

/* kebab-case */
--ptb-colors-brand-900

If a token is unresolved or missing from your Figma variables, ptb doctor tokens will flag it during health checks to prevent hardcoded values from slipping through.

Next Steps

Ready to fetch your data? Choose your workflow: Direct API or Plugin Export.