Skip to content

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

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

robinlopez merged 4 commits into
mainfrom
feat/FSHSP-253

Conversation

@robinlopez

@robinlopez robinlopez commented Oct 21, 2026 •

Copy link
Copy Markdown
Collaborator

Jira: FSHSP-253. Port of the Angular starter's FSHSP-252 (4sh/starter-angular#181), same token names and values. 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, cubicBezier and dimension values get their CSS form; a unitless duration or a curve whose x leaves [0, 1] fails the build; numbers rounded to 6 significant digits; a mode mapped to null is not emitted.
  • Figma sync: transition/* typed TIMING / EASING under the same names (curves now read cubic-bezier(), same curve); new motion.json with modes Standard / Reduced.
  • Recipes in the kit: control-transition takes toggle for properties that move and hover for the rest; motion-transition reads toggle; presets, utils.overlay-motion and useUiMotion classes read overlay-in / overlay-out; speed-dial reads stagger. Each recipe falls back to the primitive used before, so --transition-* and --ui-control-transition-* overrides still apply.
  • Reduced motion: Reduced emitted under (prefers-reduced-motion: reduce) instead of the 0.01ms !important rules: presets become 80ms fades, movement shortens, colour changes keep their duration. data-motion="off" unchanged.
  • Tooling: pnpm motion:check in docs:config:check, with the 3 loop exceptions (skeleton, spinner, progress-bar).
  • Docs: Foundations / Motion, collections tables, AGENTS.md, docs/DECISIONS.md, and in docs/DUAL-ENGINE.md the invariant "same motion primitive and recipe names in both stacks".

Parity checked against the Angular branch: generated _tokens-motion.scss and _tokens-transitions.scss are identical, motion:check passes.

@robinlopez
robinlopez merged commit e9492b2 into main Oct 21, 2026
2 checks passed
@robinlopez
robinlopez deleted the feat/FSHSP-253 branch October 21, 2026 15:56
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