Repository navigation
Conversation
…Motion values Under Reduce Motion the layer entrance now takes the values and media queries the motion foundation's policy uses: under a coarse pointer an opacity-only fade of 200 ms on easeInOut that no theme value lengthens (design:reduced-motion DR2, DR4), under any other pointer no animation (DR3). The queries are spelled as that policy spells them (literal keys, which the StyleX build orders as written), and the values become its shared constants once those are on main. The Chromium contract checks the curve too: ease-in-out, which fails on the theme-timed fade on main. Its mouse case asserts that its context is a fine pointer before it checks anything.
vjeux
requested review from
cixzhang,
imdreamrunner and
josephfarina
as code owners
October 25, 2026 03:51
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
the
needs:design-review
github-actions
Bot
requested review from
cvkxx,
ernestt,
kentonquatman and
rubyycheung
October 25, 2026 03:51
|
AI review status for this pull request.
|
meta-cla
Bot
added
the
CLA Signed
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
There was a problem hiding this comment.
Thanks: the layer's Reduce Motion touch fade works as described, an opacity-only 200 ms fade under a finger, with mouse and no-preference entrances unchanged. Approval waits on one owner decision: design:reduced-motion DR2 only bounds this fade at 200 ms and names no curve, so a fixed 200 ms on easeInOut whatever the theme (the policy proposed in #8056) needs an engineering owner to provide or identify the governing spec. An engineering owner records that decision by commenting /approve-spec f23d41c0cf2f88ef38b81e60f5bd0992d191fa62 on this pull request (the author may do so if they are an engineering owner), or by stating the curve and duration in DR2.
- If the curve stays, let the contract's
ease-in-outcheck also acceptcubic-bezier(0.42, 0, 0.58, 1): Chromium reports the curve as written, and only the production Storybook build turns it intoease-in-out.
[Automated review]
Comment on lines
+103
to
+106
| animationTimingFunction: { | ||
| default: easeVars['--ease-standard'], | ||
| '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': | ||
| 'cubic-bezier(0.42, 0, 0.58, 1)', |
There was a problem hiding this comment.
This curve is the open question for an owner: design:reduced-motion DR2 bounds the touch cross-fade at 200 ms, opacity only, and names no curve, while main's layer fade uses the theme's --ease-standard. Whether core's reduced-motion touch cross-fade is a fixed 200 ms on easeInOut whatever the theme (the policy proposed in #8056) needs an engineering owner's decision.
Comment on lines
+127
to
+129
| // The motion foundation's cross-fade: Core Animation's easeInOut, | ||
| // cubic-bezier(0.42, 0, 0.58, 1), which the engine names ease-in-out. | ||
| expect(entrance.easing).toBe('ease-in-out'); |
There was a problem hiding this comment.
Chromium reports this value as cubic-bezier(0.42, 0, 0.58, 1) (computed on a Storybook dev server, and the core package's dist/astryx.css ships it that way); it reads ease-in-out here only because the production Storybook build rewrites it. If the curve stays, accept both spellings and say the build, not the engine, renames it. The same applies at line 153.
Contributor
PR Analysis Report📚 Storybook Preview🧪 Sandbox PreviewComponent Size
Sizes are gzip. Import counts the JavaScript the import loads eagerly; CSS counts the package stylesheet rules referenced by the modules it can load from its own package, lazily loaded ones included. Bundle Size SummaryGzip figures measure each package's entry file, not the code an import pulls in.
Accessibility AuditStatus: No accessibility violations detected. Visual Regression48 of 502 shot(s) changed. A change here is a question, not a failure: check whether the after is the
and 28 more. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
vjeux
marked this pull request as draft
October 29, 2026 22:35
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follows #8322 (merged), as its review agreed: the layer's touch cross-fade takes the motion foundation's own Reduce Motion values.
User impact
With Reduce Motion on, a layer that opens under a finger fades in over the theme's fast duration and curve (#8322), capped at 200 ms. The motion foundation's policy, which every other touch presentation follows, fades over exactly 200 ms on easeInOut. A layer and a touch presentation opened side by side fade on different clocks.
Evidence
iOS 26.2 Safari with Reduce Motion on, a tap on the Tooltip's term (a grey dot marks the finger); after this change:
Problem and solution fit
layerAnimations.stylex.tstimed the cross-fade with the theme's fast duration and easing. The animator's Reduce Motion policy (design:reduced-motion) uses a fixed 200 ms easeInOut under a coarse pointer and no animation under any other pointer. The layer now uses the same values and spells its media queries as that policy does:(prefers-reduced-motion: reduce) and (pointer: coarse)and(prefers-reduced-motion: reduce) and (not (pointer: coarse)). The keys stay literal, since the StyleX build orders an imported at-rule key differently; the values become the foundation's shared constants once those are on main.Expected behavior and authority
design:reduced-motion(current): on a coarse pointer an opacity-only cross-fade in 200 ms or less that no theme value lengthens (DR2, DR4); on other pointers an instant change (DR3).Smallest restoration
Two media conditions and their values in
layerAnimations.stylex.ts; the contract checks the easing, and its mouse case asserts a fine pointer in its context first.Scope
Testing
pnpm exec playwright test packages/core/src/Layer/__tests__/LayerReducedMotion.a11y.chromium.spec.ts --project chromiumafterpnpm storybook:build: 8/8. The four cross-fade cases fail on main's build (theme-timed curve).pnpm vitest run packages/core/src/Layer: 210 pass.