Core

Utility functions for applying and generating scoped CSS variables for theming.

`generateSemanticColorCSSVariables`

Generates scoped CSS variable declarations for a color theme.

generateSemanticColorCSSVariables(theme: Theme): string

Parameters

theme: Theme — An object mapping semantic color keys to CSS values.

Returns

A string of CSS custom properties in the format --color-<key>: <value>;.

Example

generateSemanticColorCSSVariables({ primary: "#000", secondary: "#fff" });
// => "--color-primary: #000; --color-secondary: #fff;"

`applySemanticColorThemeToRoot`

Applies a color theme directly to the <html> element using CSS custom properties.

applySemanticColorThemeToRoot(theme: Theme): void

Parameters

theme: Theme — Color theme variables.

Example

applySemanticColorThemeToRoot({ primary: "#000", secondary: "#fff" });
// Sets --color-primary and --color-secondary on <html>

`applyThemeToRoot`

Applies a scoped or unscoped theme to the root of the document.

applyThemeToRoot(scope: string | null | undefined, theme: Theme): void

Parameters

scope: string | null | undefined — Optional prefix used for the CSS variables (e.g., color, typography). If null or undefined, variables are unscoped.
theme: Theme — Key-value pairs of CSS variables.

Example

applyThemeToRoot("color", { primary: "#000", secondary: "#fff" });
// Sets --color-primary and --color-secondary on <html>
 
applyThemeToRoot(null, { primary: "#000", secondary: "#fff" });
// Sets --primary and --secondary on <html>

`generateCSSVariables`

Converts a theme object into scoped or unscoped CSS variable declarations.

generateCSSVariables(scope: string | null | undefined, theme: Theme): string

Parameters

scope: string | null | undefined — Optional namespace for the variables. If null or undefined, variables are generated without a scope.
theme: Theme — CSS variable mappings.

Returns

A string of scoped or unscoped CSS variables.

Example

generateCSSVariables("color", { primary: "#000", secondary: "#fff" });
// => "--color-primary: #000; --color-secondary: #fff;"
 
generateCSSVariables(null, { primary: "#000", secondary: "#fff" });
// => "--primary: #000; --secondary: #fff;"

`wrapInRoot`

Wraps multiple CSS variables in a :root block.

wrapInRoot(cssVars: string[]): string

Parameters

cssVars: string[] — An array of CSS variable declarations.

Returns

A single CSS string wrapped in :root.

Example

wrapInRoot(["--primary: #000;", "--secondary: #fff;"]);
// => ":root { --primary: #000; --secondary: #fff; }"

Core

On this page