Token reference

vars is Luke UI's typed public token contract. Each path resolves to a stable --luke-* CSS variable. For example, vars.color.background.danger.solid.hover resolves to var(--luke-color-background-danger-solid-hover).

Use these variables when a component API or layout utility cannot express a custom element. Some values vary by theme identity or colour mode, while others remain fixed. The token paths stay the same across bundled and custom themes.

Use semantic variables

Choose the token whose name matches the element's role. A card might use surface.floating, radius.surface, and depth.resting. A warning message might use the warning role's subtle background and foreground.

Choosing a scale

Token families use different naming models. Spacing uses value-based keys such as sp16 and sp24. Radius and depth use semantic roles. Use the public variable instead of copying its resolved CSS value.

Spacing

Spacing provides one scale for gap, padding, and margin. Each key matches its pixel value, so sp16 is 16px.

Read Layout for breakpoint keys and how spacing values cascade.

Radius

Radius provides five semantic roles. Choose the role that matches the element being rounded, such as control for an input or surface for a card.

When one rounded surface sits inside another, derive the outer radius from the inner radius and the space between them, usually the wrapper's padding. This keeps their corners concentric.

import { deriveConcentricRadius, vars } from '@luke-ui/react/theme';

const wrapperRadius = deriveConcentricRadius(vars.radius.control, vars.space.sp8);

Depth

Depth describes how a surface sits above or within the interface.

Pair each depth role with the matching surface role. For example, a menu can use surface.floating with depth.floating, while a dialog can use surface.overlay with depth.overlay.

Components already apply depth to their own states. Use these variables only for custom surfaces.

Motion

Motion provides three durations. Each duration is named for the role the movement plays.

• feedback covers an in-place state change, such as hover, focus, or selection.
• enter covers an element or an overlay that enters the interface.
• exit covers an element or an overlay that leaves the interface.

Pair easing.standard with feedback and with entry. Pair easing.exit with a dismissal.

Browse the tokens

The explorer lists every public token in the contract. Samples use the active identity and colour mode.

Continue learning