Skip to content

feat: add motion tokens (spring, easing, duration)#4922

Open
adrcotfas wants to merge 1 commit into@adrcotfas/refactor/tokens_typographyfrom
@adrcotfas/refactor/tokens_motion
Open

feat: add motion tokens (spring, easing, duration)#4922
adrcotfas wants to merge 1 commit into@adrcotfas/refactor/tokens_typographyfrom
@adrcotfas/refactor/tokens_motion

Conversation

@adrcotfas
Copy link
Copy Markdown
Collaborator

@adrcotfas adrcotfas commented May 5, 2026

Motivation

Adds theme.motion with two preset schemes (expressiveMotion default, standardMotion), M3 easing curves, and duration constants verified against the material.io spec. Includes toRawSpring() helper to convert the spec damping ratio to the raw coefficient expected by Animated.spring and Reanimated. Deprecates animation.defaultAnimationDuration in favour of theme.motion.duration.*. No component consumes the tokens yet.

Related issue

See https://www.notion.so/callstack/React-Native-Paper-Foundation-for-MD3-Expressive-34c5d027c0f880edba3df107cd35946f?source=copy_link

Merge order:

Test plan

  • yarn typescript -- no new type errors
  • yarn test -- all tests pass

@callstack-bot
Copy link
Copy Markdown

callstack-bot commented May 5, 2026

Hey @adrcotfas, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 5, 2026

The mobile version of example app from this branch is ready! You can see it here.

@adrcotfas adrcotfas force-pushed the @adrcotfas/refactor/tokens_typography branch from 919f3be to 8ce4e46 Compare May 5, 2026 12:50
Adds theme.motion with two preset schemes (expressiveMotion default, standardMotion), M3 easing curves, and duration constants verified against the material.io spec. Includes toRawSpring() helper to convert the spec damping ratio to the raw coefficient expected by Animated.spring and Reanimated. Deprecates animation.defaultAnimationDuration in favour of theme.motion.duration.*. No component consumes the tokens yet.
Copy link
Copy Markdown
Member

@satya164 satya164 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No components are using this, so I assume it'll be a follow-up.

Comment thread src/theme/types/theme.ts
Comment on lines +18 to 19
/** @deprecated Use `theme.motion.duration.*` instead. Will be removed in a future version. */
defaultAnimationDuration?: number;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drop deprecated values from theme.

Comment thread src/index.tsx
expressiveMotion,
standardMotion,
toRawSpring,
} from './theme/tokens/sys/motion';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove these exports. Keep the public API surface small.

Comment on lines +52 to +54
legacy: [0.4, 0, 0.2, 1],
legacyAccelerate: [0.4, 0, 1, 1],
legacyDecelerate: [0, 0, 0.2, 1],
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to expose these? If these are legacy, then probably nothing on paper will use them, nor should consumers use them, so they're essentially dead tokens.

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.

3 participants