Constimport { cssVars, setSpacingCssVars, $ } from 'aberdeen';
// Optionally initialize spacing scale
setSpacingCssVars(); // Uses defaults: base=1, unit='rem'
// Define custom colors - style tag is automatically created
cssVars.primary = '#3b82f6';
cssVars.danger = '#ef4444';
// Use in elements with the $ prefix
$('button bg:$primary fg:white');
// Use spacing (if setSpacingCssVars() was called)
$('div mt:$3'); // Sets margin-top to var(--m3)
A reactive object containing CSS variable definitions.
Any property you assign to
cssVarsbecomes available as a CSS custom property throughout your application.Use setSpacingCssVars to optionally initialize
cssVars[1]throughcssVars[12]with an exponential spacing scale.When you reference a CSS variable in Aberdeen using the
$prefix (e.g.,$primary), it automatically resolves tovar(--primary). For numeric keys (which can't be used directly as CSS custom property names), Aberdeen prefixes them withm(e.g.,$3becomesvar(--m3)).When you add the first property to cssVars, Aberdeen automatically creates a reactive
<style>tag in<head>containing the:rootCSS custom property declarations. The style tag is automatically removed if cssVars becomes empty.