Skip to main content

Function: buildVarsMap()

buildVarsMap(theme): CssVarsMap<ThemeTokens["semantic"]>

Defined in: roots/toVars.ts:61

Build a deeply-nested CSS var-reference map from a theme's semantic layer.

Walks theme.semantic recursively and replaces every leaf value with the corresponding var(--tt-*) CSS custom property reference. The resulting object has the exact same shape as theme.semantic but with string leaves.

Keys starting with $ are skipped (deprecation metadata).

Parameters

ParameterType
themeThemeTokens

Returns

CssVarsMap<ThemeTokens["semantic"]>

Example

import { buildVarsMap } from './roots/toVars';
import { baseTheme } from './baseTheme';

const vars = buildVarsMap(baseTheme);
vars.colors.action.primary.background.default
// → 'var(--tt-action-primary-background-default)'