Motion draft v0.2.0

Durations and easing curves, the state transitions of controls, and how motion gives way when people ask for less of it.

Motion holds two durations and one easing curve, the design system's additions (packages/tokens/src/additions/): the Figma library has none. Components read them directly for one use: the transition of a control between its states. Every transition is a color change, never a movement, and every component switches it off when people ask for reduced motion.

Tokens

Semantic tokens owned by the foundation (tokens in packages/components/specs/foundations/motion.spec.json). They live in packages/tokens/src/semantic/ (recreated from the Figma library) or tokens/additions/semantic/ (added by the design system), with their other values in tokens/modes/, tokens/additions/modes/ and tokens/platforms/.

Token	Type	Value	Resolved	CSS
`duration.fast`	duration	`{"value":150,"unit":"ms"}`	`150ms`	`--duration-fast`
`duration.normal`	duration	`{"value":250,"unit":"ms"}`	`250ms`	`--duration-normal`
`easing.standard`	cubicBezier	`[0.2,0,0,1]`	`cubic-bezier(0.2, 0, 0, 1)`	`--easing-standard`

Components following it

Derived from the component tokens aliasing the foundation's tokens.

Component	Component tokens aliasing the foundation
Accordion	`accordion.trigger.transition.duration` → `{duration.fast}` `accordion.trigger.transition.easing` → `{easing.standard}` `accordion.indicator.transition.duration` → `{duration.fast}` `accordion.indicator.transition.easing` → `{easing.standard}`
Breadcrumb	`breadcrumb.link.transition.duration` → `{duration.fast}` `breadcrumb.link.transition.easing` → `{easing.standard}`
Button	`button.container.transition.duration` → `{duration.fast}` `button.container.transition.easing` → `{easing.standard}`
Checkbox group	`checkbox-group.control.transition.duration` → `{duration.fast}` `checkbox-group.control.transition.easing` → `{easing.standard}`
Checkbox	`checkbox.control.transition.duration` → `{duration.fast}` `checkbox.control.transition.easing` → `{easing.standard}`
Dropdown	`dropdown.item.transition.duration` → `{duration.fast}` `dropdown.item.transition.easing` → `{easing.standard}`
Icon button	`icon-button.container.transition.duration` → `{duration.fast}` `icon-button.container.transition.easing` → `{easing.standard}`
Number field	`number-field.control.transition.duration` → `{duration.fast}` `number-field.control.transition.easing` → `{easing.standard}`
Pagination	`pagination.link.transition.duration` → `{duration.fast}` `pagination.link.transition.easing` → `{easing.standard}`
Progress bar	`progress-bar.indicator.transition.duration` → `{duration.normal}` `progress-bar.indicator.transition.easing` → `{easing.standard}`
Radio group	`radio-group.control.transition.duration` → `{duration.fast}` `radio-group.control.transition.easing` → `{easing.standard}`
Search field	`search-field.control.transition.duration` → `{duration.fast}` `search-field.control.transition.easing` → `{easing.standard}`
Select	`select.control.transition.duration` → `{duration.fast}` `select.control.transition.easing` → `{easing.standard}`
Skeleton	`skeleton.container.animation.duration` → `{duration.normal}` `skeleton.container.animation.easing` → `{easing.standard}`
Slider	`slider.control.transition.duration` → `{duration.fast}` `slider.control.transition.easing` → `{easing.standard}`
Spinner	`spinner.ring.animation.duration` → `{duration.normal}` `spinner.ring.animation.easing` → `{easing.standard}`
Switch	`switch.control.transition.duration` → `{duration.fast}` `switch.control.transition.easing` → `{easing.standard}`
Text field	`text-field.control.transition.duration` → `{duration.fast}` `text-field.control.transition.easing` → `{easing.standard}`
Textarea	`textarea.control.transition.duration` → `{duration.fast}` `textarea.control.transition.easing` → `{easing.standard}`