Motion

Durations follow --eun-duration-<step> and timing functions follow --eun-easing-<step>. Every component reads them for its hover, focus, open and close transitions, so changing one token retunes the whole design system at once.

Hover each bar to see its step.

Token	Value	Typical use
--eun-duration-xs	100ms	Tiny feedback (slider thumb press, tab indicator)
--eun-duration-s	150ms	Field borders, checkboxes, switches, tooltips
--eun-duration-m	200ms	Buttons, focus rings, listboxes, modal, swipes
--eun-duration-l	250ms	Drawer, sidebar, toolbar
--eun-duration-xl	300ms	Links, cards, collapse, toast, progress bar

Token	Value	Typical use
--eun-easing-default	ease	Most transitions
--eun-easing-out	ease-out	Focus rings, hover colors, swipes

Long decorative loops (loaders, skeleton shimmer, eun-animate, eun-sliding-card) keep their own durations, since they are not interface feedback.

Usage

.custom-panel {
  transition: transform var(--eun-duration-l) var(--eun-easing-out);
}

To make the whole interface snappier or calmer, override the tokens once on the root, after the theme stylesheet:

:root {
  --eun-duration-m: 160ms;
  --eun-duration-xl: 240ms;
  --eun-easing-default: cubic-bezier(0.2, 0, 0, 1);
}

Each component keeps its own duration custom property when it has one (--button-transition, --drawer-transition-duration, --field-listbox-transition-duration…). That property still wins for that component; the token is only its default value.

prefers-reduced-motion: reduce is still handled by each component, so you don't need to zero the tokens for it.