CSS Variables

Spacing

Five named sizes. The p, px, m, etc. style props resolve these tokens automatically.

/* Override globally or scope to a section */
:root          { --dv-spacing-md: 0.875rem; }
.compact-ui    { --dv-spacing-md: 0.75rem;  }

Radius

Override --dv-radius-default to restyle border-radius across all components at once — or target individual sizes for fine control.

/* Square corners everywhere */
:root { --dv-radius-default: 0; }

Typography

Font sizes

Five sizes aligned with the spacing scale. Used by the fz style prop.

Line heights

Font families

Heading scale

Each level exposes -font-size, -font-weight, and -line-height tokens consumed by the Title component.

Shadows

Decorative named shadows — same in light and dark mode. For depth-based shadows tied to component layer, see Elevation.

Elevation

Six depth levels (0–5) that adapt between light and dark mode. See Elevation for the full visual reference.

Z-index scale

Seven named layers. Override a single token to resolve stacking conflicts — no need to dig into component internals.

/* Shift the entire popover/modal layer up to avoid a third-party conflict */
:root {
  --dv-z-modal:   1300;
  --dv-z-popover: 1400;
  --dv-z-tooltip: 1500;
}

Surface layers

Six tinted backgrounds that reinforce depth in dark mode without relying on shadow contrast. See Elevation for the visual reference.

Semantic colors

High-level color aliases for body, text, borders, and surfaces. These switch automatically between light and dark mode. Override them to retheme the entire UI without touching individual palette values.

State colors

Semantic aliases for validation and feedback states. They resolve to named-color filled tokens so they automatically adopt the correct shade for light/dark mode.

/* Remap state colors to any named palette */
:root {
  --dv-color-error:   var(--dv-color-crimson-filled);
  --dv-color-success: var(--dv-color-teal-filled);
}

Focus ring

A single token controls keyboard focus outlines across all interactive components. Override it to restyle focus states everywhere at once.

/* Solid 2px focus ring instead of the default glow */
:root {
  --dv-focus-ring: 0 0 0 2px var(--dv-color-primary-filled);
}

Primary color

The primary color is an alias layer — 9 tokens that point at whatever named color you designate as your brand color. Defaults to blue. Override all 9 to switch the accent color of every component at once.

/* Switch primary color to violet */
:root {
  --dv-color-primary-filled:        var(--dv-color-violet-filled);
  --dv-color-primary-filled-hover:  var(--dv-color-violet-filled-hover);
  --dv-color-primary-filled-color:  var(--dv-color-violet-filled-color);
  --dv-color-primary-light:         var(--dv-color-violet-light);
  --dv-color-primary-light-hover:   var(--dv-color-violet-light-hover);
  --dv-color-primary-light-color:   var(--dv-color-violet-light-color);
  --dv-color-primary-outline:       var(--dv-color-violet-outline);
  --dv-color-primary-outline-hover: var(--dv-color-violet-outline-hover);
  --dv-color-primary-outline-color: var(--dv-color-violet-outline-color);
}

Named color variants

Every named color in the palette also gets three variant token sets — filled, light, and outline — used by the color prop on Button, Badge, Alert, and similar components. See Color Palette and Colors for visual references.

Available {name} values: red · crimson · pink · grape · violet · indigo · blue · cyan · teal · green · lime · yellow · orange · gray · dark · white · black · primary

Raw palette shades (--dv-color-{name}-{0–9}) are documented on the Color Palette page.

Motion

Duration and easing tokens consumed by all component transitions and animations. See Motion for interactive previews.

AppShell

AspectRatio

BackgroundImage

Badge

Blockquote

Burger

Checkbox

Code

ColorSwatch

Drawer

Fieldset

Flex

Indicator

Input (shared)

Kbd

List

Loader

Mark

NavLink

NativeSelect

Overlay

Pagination

Pill

Progress

Radio

Rating

RingProgress

ScrollArea

SegmentedControl

SimpleGrid

Skeleton

Slider

Stepper

Switch

Table

ThemeIcon

Timeline

Tooltip

Transition