Function: toCssVars()

Call Signature

toCssVars(theme, options?): CssVarsResult

Defined in: roots/toCssVars.ts:546

Convert a theme (tokens or bundle) into CSS custom properties.

Overload 1 — ThemeTokensV2: returns a single CssVarsResult. Overload 2 — ThemeBundle: returns a BundleCssVarsResult with base + alternate blocks and optimized diff output.

Parameters

Parameter	Type
theme	ThemeTokensV2
options?	CssVarsOptions

Returns

CssVarsResult

Example

import { toCssVars } from '@ttoss/theme2/css';
import { createTheme } from '@ttoss/theme2';

const myBundle = createTheme();

// Single theme tokens
const css = toCssVars(myBundle.base).toCssString();

// Full bundle (base + dark alternate)
const bundleCss = toCssVars(myBundle, { themeId: 'default' }).toCssString();

Call Signature

toCssVars(bundle, options?): BundleCssVarsResult

Defined in: roots/toCssVars.ts:550

Convert a theme (tokens or bundle) into CSS custom properties.

Overload 1 — ThemeTokensV2: returns a single CssVarsResult. Overload 2 — ThemeBundle: returns a BundleCssVarsResult with base + alternate blocks and optimized diff output.

Parameters

Parameter	Type
bundle	ThemeBundle
options?	BundleCssVarsOptions

Returns

BundleCssVarsResult

Example

import { toCssVars } from '@ttoss/theme2/css';
import { createTheme } from '@ttoss/theme2';

const myBundle = createTheme();

// Single theme tokens
const css = toCssVars(myBundle.base).toCssString();

// Full bundle (base + dark alternate)
const bundleCss = toCssVars(myBundle, { themeId: 'default' }).toCssString();