Skip to main content

Variable: vars

const vars: CssVarsMap<SemanticTokens>

Defined in: vars.ts:93

Static map of all semantic tokens as typed CSS var(--tt-*) references.

Every leaf value is a CSS Custom Property reference string — zero runtime overhead, full autocomplete, structural parity with SemanticTokens.

The var names are stable across themes and modes: only the values behind the CSS vars change when the theme or mode switches. Components reference the vars; CSS (generated by toCssVars) carries the values.

Usage with Ark UI / CSS-in-JS​

import { vars } from '@ttoss/fsl-theme/vars';

<Button style={{ background: vars.colors.action.primary.background.default }} />
// → background: 'var(--tt-colors-action-primary-background-default)'

Usage in CSS / CSS Modules​

.button {
  background: var(--tt-colors-action-primary-background-default);
  color: var(--tt-colors-action-primary-text-default);
}

(For plain CSS you can use the var names directly — vars is most valuable when you need TypeScript autocomplete in inline styles or CSS-in-JS.)

Usage in Tailwind plugins / PostCSS​

import { toCssVarName } from '@ttoss/fsl-theme/css';
// toCssVarName gives you the raw CSS property name without `var()`.

Limitations​

vars reflects the semantic token shape of the default theme. If your project extends SemanticTokens with custom token families (e.g. a dataviz palette, project-specific component tokens), those extra leaves won't appear on this export. The first-party dataviz extension ships its own mirror — datavizVars from @ttoss/fsl-theme/dataviz.

Typed extension recipe​

Build your own typed vars object using the public buildVarsMap helper together with CssVarsMap:

// my-theme.ts
import { createTheme, type SemanticTokens } from '@ttoss/fsl-theme';
import { buildVarsMap, type CssVarsMap } from '@ttoss/fsl-theme/vars';

// 1. Extend the semantic shape structurally.
type MySemanticTokens = SemanticTokens & {
  colors: SemanticTokens['colors'] & {
    brandX: { primary: { default: string } };
  };
};

const myTheme = createTheme({ ... });

// 2. Build a typed mirror of the extended shape.
export const myVars: CssVarsMap<MySemanticTokens> =
  buildVarsMap(myTheme.base) as CssVarsMap<MySemanticTokens>;

myVars.colors.brandX.primary.default;
// → 'var(--tt-colors-brandX-primary-default)'  (camelCase is preserved)

For one-off custom keys where the extra structure is trivial, use toCssVarName from '@ttoss/fsl-theme/css' to construct individual var references without declaring a full extended type.

See​

  • toCssVarName — for raw CSS property names (without var())
  • useResolvedTokens — for resolved raw values in non-CSS environments (React Native, canvas, PDF)