[ai] Add motion design tokens + fix reduced-motion rule#73
Draft
MaggieAppleton wants to merge 1 commit into
Draft
[ai] Add motion design tokens + fix reduced-motion rule#73MaggieAppleton wants to merge 1 commit into
MaggieAppleton wants to merge 1 commit into
Conversation
- Add --duration-* and --ease-* CSS custom properties to :root in global.css - Add src/utils/motion.ts with durations, easings, and prefersReducedMotion() - Replace 0.01ms !important reduced-motion override with transition: none; animation: none; Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
5 tasks
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
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
1 participant
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.
Implements
Closes #57
Parent plan
#56
What changed
--duration-instant/fast/base/slow/slowerand--ease-out/out-strong/in-out/hover/springCSS custom properties to:rootinsrc/global.css— the single source of truth for all future animation worksrc/utils/motion.tsexportingdurations,easings, andprefersReducedMotion()for use with the Motion library in JS animations0.01ms !importantreduced-motion override inglobal.csswith the skill-recommendedtransition: none; animation: none;(no!important), while retainingscroll-behavior: auto !importantHow to verify
:rootcomputed styles and confirm the 10 new--duration-*/--ease-*custom properties appearNotes
scroll-behavior: auto !importantis kept with!importantbecause it overrides thehtml { scroll-behavior: smooth }that many browsers inject via UA stylesheet or inline styles; the other two declarations don't need it.easingsinmotion.tsomitshoverbecause Motion library accepts string easings (e.g."ease") directly; only the bezier tuples are provided as arrays.