cssVars

const cssVars: Record<string, string>

Defined in: aberdeen.ts:2095

A reactive object containing CSS variable definitions.

Any property you assign to cssVars becomes available as a CSS custom property throughout your application.

Use setSpacingCssVars to optionally initialize cssVars[1] through cssVars[12] with an exponential spacing scale.

When you reference a CSS variable in Aberdeen using the $ prefix (e.g., $primary), it automatically resolves to var(--primary). For numeric keys (which can’t be used directly as CSS custom property names), Aberdeen prefixes them with m (e.g., $3 becomes var(--m3)).

When you add the first property to cssVars, Aberdeen automatically creates a reactive <style> tag in <head> containing the :root CSS custom property declarations. The style tag is automatically removed if cssVars becomes empty.

Example

import A from 'aberdeen';

// Optionally initialize spacing scale
A.setSpacingCssVars(); // Uses defaults: base=1, unit='rem'

// Define custom colors - style tag is automatically created
A.cssVars.primary = '#3b82f6';
A.cssVars.danger = '#ef4444';

// Use in elements with the $ prefix
A('button bg:$primary fg:white #I'm a primary button');

// Use spacing (if setSpacingCssVars() was called)
A('hr mt:$3'); // Sets margin-top to var(--m3)