Tokens & taxonomy

Sorb speaks the open DTCG token format and resolves it into the exact values your app renders — then binds each value to the right CSS property by type, so there are no hand-authored mappings to maintain.

DTCG in, CSS variables out

Sorb reads your tokens in the DTCG format — the open standard that Style Dictionary and the DTCG community toolchain already speak. Your token file works outside Sorb too; Sorb doesn't lock it in.

At runtime, resolved tokens reach your app as CSS custom properties:

color: var(--button-primary-bg-default, #f26722);

Change the variable's value and the component re-skins — no component edit, no rebuild.

Resolution

sorb dev reads your DTCG sources and resolves aliases, modes, and references into a flat map of concrete values, written to .sorb/resolved.json. Each entry carries what the bridge and plugin need:

{
  "id": "button.primary.bg.default",
  "cssVar": "--button-primary-bg-default",
  "value": "#f26722",
  "tier": "component",
  "type": "color"
}

.sorb/resolved.json is produced by the live bridge, not hand-maintained — it's the values your app actually renders.

Tiers

Sorb organizes tokens into three tiers, matching the common design-token taxonomy:

| Tier | Example | Role | |---|---|---| | Primitive | color.orange.500 | Raw values — the palette. | | Semantic | color.action.primary | Meaning — what a value is for. | | Component | button.primary.bg.default | Where a value is used. |

When the plugin syncs Variables from code, it creates or updates three matching Figma Variable collections (Primitives, Semantic, Component).

Binding by type

Sorb matches each token to the CSS property it belongs on, by type and affinity:

| Token type | Binds to | |---|---| | color (fill) | background | | color (stroke) | border | | color (text) | text color | | dimension (radius) | corner radius |

This is automatic — you don't write or maintain figma.connect()-style prop mappings. Fills go to backgrounds, strokes to borders, text colors to text, radii to corners.

Value validation

Values are validated by type before they're applied: hex / rgb / hsl for colors; px / rem / em / % / vh / vw / pt for dimensions; true / false for booleans. An invalid value is rejected (never written), so a typo can't reach your running app.

React SDK — how SorbProvider delivers the CSS variables.
The bridge — where resolution happens.