Skip to content

FSHSP-252 feat(motion): motion tokens in three layers, recipes read by the kit, reduced motion by mode - #181

Merged
robinlopez merged 4 commits into
mainfrom
feat/FSHSP-252
Oct 21, 2026
Merged

robinlopez merged 4 commits into
mainfrom
feat/FSHSP-252

Conversation

@robinlopez

@robinlopez robinlopez commented Oct 21, 2026 •

Copy link
Copy Markdown
Collaborator

Jira: FSHSP-252. React parity: FSHSP-253. Figma variables: FSHSP-254.

Motion becomes a token, like colour: --transition-* stay the primitives (no rename, nothing deprecated), a new motion collection holds recipes by usage that alias them, and the kit reads the recipes. Timing is unchanged outside reduced motion.

  • Typed tokens (scripts/tokens.build.mjs): DTCG duration ("80ms", { value, unit }), cubicBezier ([x1, y1, x2, y2] → cubic-bezier()) and dimension objects get their CSS form; a unitless duration or a curve whose x leaves [0, 1] fails the build. Numbers are rounded to 6 significant digits (Figma stores 0.96 as 0.9599999785423279). A mode mapped to null in tokens.config.json is not emitted.
  • Figma sync: transition/* retyped STRING → TIMING / EASING under the same names; curves now read cubic-bezier(0.42, 0, 0.58, 1) instead of ease-in-out (same curve). New motion.json: hover, toggle, overlay/in|out, disclosure/*, dialog/*, notify/*, stagger, slide, zoom, modes Standard / Reduced.
  • Recipes in the kit (_ui-config.scss, utils, base/_motion.scss): control-transition takes toggle for properties that move (transform, top, width…) and hover for the rest; motion-transition reads toggle; presets read overlay-in / overlay-out; speed-dial reads stagger. Each recipe falls back to the primitive the kit used before, so overrides of --transition-* and --ui-control-transition-* still apply. No mixin signature changes (copy mode safe).
  • Reduced motion: the Reduced mode is emitted under (prefers-reduced-motion: reduce) and replaces the presets' 0.01ms !important: slides and zooms become 80ms fades, movement shortens, colour changes keep their duration. data-motion="off" unchanged.
  • Tooling: pnpm motion:check (in docs:config:check) rejects hand-written durations, curves or var(--transition-*) in component SCSS; 3 justified exceptions (skeleton, spinner, progress-bar loops, waiting for a loop recipe).

Checks: kit tests (27 files), script tests (17), schematics (99), lint, docs:config:check. Verified in static Storybook with Playwright: toggle thumb and colours at 0.18s at rest; --motion-hover-duration only moves colours, --motion-toggle-duration only the thumb; reduced motion turns presets into 80ms fades; data-motion="off" still cuts everything.

Token Flow must stay in linked mode: in resolver mode it rewrites scripts/tokens.build.mjs.

@robinlopez
robinlopez merged commit 65c5ee2 into main Oct 21, 2026
4 checks passed
@robinlopez
robinlopez deleted the feat/FSHSP-252 branch October 27, 2026 09:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant