Shadows

var-ui ships layered box-shadow tokens and a softer elevation scale. Each token stacks multiple shadows with a consistent top-left light source (vertical offset is 2× horizontal). Shadows tint from primary text color via color-mix, so they stay legible in both light and dark mode without separate dark overrides.

Box shadows

Compound box-shadow tokens from shadow.xs through shadow.xl. Each level layers multiple shadows with a consistent top-left light source. Tint is derived from primary text color, so shadows follow light and dark mode automatically.

xs --var-ui-shadow-xs

sm --var-ui-shadow-sm

md --var-ui-shadow-md

lg --var-ui-shadow-lg

xl --var-ui-shadow-xl

Elevation

Softer elevation steps under shadow.elevation for surfaces that need subtle depth without the stronger box-shadow scale.

elevation.low --var-ui-shadow-elevation-low

elevation.med --var-ui-shadow-elevation-med

elevation.high --var-ui-shadow-elevation-high

Using shadows

Import token refs from core:

import { designTokens } from '@var-ui/core';

designTokens.shadow.md.var; // var(--var-ui-shadow-md)
designTokens.shadow.elevation.low.var; // var(--var-ui-shadow-elevation-low)

Use them directly as box-shadow values in recipes or plain CSS:

.card {
  box-shadow: var(--var-ui-shadow-md);
}

.floating-panel {
  box-shadow: var(--var-ui-shadow-elevation-high);
}

Override shadows in a theme via createDesignTheme({ tokens: { shadow: … } }). Neo-brutalist presets (Rose, Amber) swap in hard offset shadows while keeping the same token names — see Themes for examples.