feat(motion): add Pine-internal motion token scaffold#740
Merged
Conversation
github-actions
Bot
added
the
package: core
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
QuintonJason
force-pushed
the
docs/foundations
branch
from
2c2fb97 to
18559ac
Compare
QuintonJason
force-pushed
the
feat/motion-tokens
branch
from
ba5b9f3 to
03769df
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 03769df. Configure here.
QuintonJason
force-pushed
the
docs/foundations
branch
from
18559ac to
a767e2d
Compare
QuintonJason
force-pushed
the
feat/motion-tokens
branch
from
03769df to
0a4a595
Compare
Add libs/core/src/global/styles/_motion.scss exposing duration and
easing CSS custom properties (--pine-motion-duration-{fast,base,slow}
and --pine-motion-easing-{out,in,in-out}). Wired into app.scss so the
tokens land in the global stylesheet alongside fonts.
Durations collapse to 0ms under prefers-reduced-motion so consumer
components inherit the override without per-component media queries.
Update the Guides/Motion doc to remove the no-tokens disclaimer,
document the new tokens with usage tables, and call out the upstream
follow-up to consolidate into @kajabi-ui/styles.
Address review feedback on the motion-tokens PR: - Strengthen the namespace contract comment in _motion.scss to make clear Pine is claiming the upstream-canonical names and that the file is to be removed when @kajabi-ui/styles publishes motion. - Migrate pds-modal __backdrop transition from raw 0.2s ease to var(--pine-motion-duration-base) var(--pine-motion-easing-out) so the new tokens have at least one production consumer. - Document the reduced-motion limitation (override applies to duration only; JS-driven animations need their own matchMedia check).
QuintonJason
force-pushed
the
feat/motion-tokens
branch
from
0a4a595 to
a12e17c
Compare
QuintonJason
added a commit
that referenced
this pull request
Jun 1, 2026
* feat(motion): add Pine-internal motion token scaffold
Add libs/core/src/global/styles/_motion.scss exposing duration and
easing CSS custom properties (--pine-motion-duration-{fast,base,slow}
and --pine-motion-easing-{out,in,in-out}). Wired into app.scss so the
tokens land in the global stylesheet alongside fonts.
Durations collapse to 0ms under prefers-reduced-motion so consumer
components inherit the override without per-component media queries.
Update the Guides/Motion doc to remove the no-tokens disclaimer,
document the new tokens with usage tables, and call out the upstream
follow-up to consolidate into @kajabi-ui/styles.
* feat(motion): strengthen contract comment, migrate pds-modal backdrop
Address review feedback on the motion-tokens PR:
- Strengthen the namespace contract comment in _motion.scss to make
clear Pine is claiming the upstream-canonical names and that the
file is to be removed when @kajabi-ui/styles publishes motion.
- Migrate pds-modal __backdrop transition from raw 0.2s ease to
var(--pine-motion-duration-base) var(--pine-motion-easing-out) so
the new tokens have at least one production consumer.
- Document the reduced-motion limitation (override applies to
duration only; JS-driven animations need their own matchMedia check).
* style(pds-modal): use ease-in on backdrop exit, ease-out on enter
QuintonJason
added a commit
that referenced
this pull request
Jun 2, 2026
… docs (#736) * docs(foundations): add motion, RTL, status, and Code Connect coverage docs Land four cross-cutting documents that close several gaps in the Pine design-system maturity map: - Guides/Motion — principles and implementation hints for component animation; flags the absence of dedicated motion tokens. - Guides/RTL and localization — assumptions teams should make today plus an audit checklist with every Pine component. - Resources/Component status — central Stable/Beta/Deprecated table covering all 35 Pine components. - libs/figma/CODE_CONNECT_COVERAGE.md — tracks which Pine components have a matching Code Connect mapping. Also cross-link the new Component status and RTL pages from the Support docs page. * fix: use logical CSS for RTL layout gaps and simplify RTL guide Replace physical left/right with inset-inline properties in combobox, input, table sticky cells, tooltip arrows, and scroll shadows. Make table scroll-shadow visibility respect RTL scroll positions. Remove the per-component audit checklist from the RTL guide. * docs: defer Storybook RTL toolbar copy to PR 739 * fix(pds-table): address RTL scroll and tooltip arrow feedback Add shared scroll utils with cross-browser RTL scrollLeft detection. Use them for table shadows and fixed-column has-scrolled state. Revert tooltip arrow positioning to physical left/right to match Floating UI placement classes. * fix(pds-table): correct RTL scroll offset and shadow gradients Fix swapped default/reverse RTL scrollLeft normalization, add scrollable content to the browser probe, use valid gradient directions with RTL overrides, and expand scroll utility tests. * feat(storybook): add LTR/RTL preview toggle and audit pointer (#739) * feat(storybook): add LTR/RTL preview toggle and audit pointer Add a Direction global type with an LTR/RTL toolbar control. The withDirection decorator applies dir on documentElement and body for the active story (and the parent docs frame), matching the consumer contract for RTL surfaces. Update the RTL and localization guide with a How to audit section pointing teams at the toggle. The audit checklist stays intentionally unchecked; rows should be marked off in the PR that proves behavior. * fix(storybook): use direction icon for RTL toolbar * fix(storybook): scope RTL dir to preview iframe only * fix(storybook): use valid transfer icon for direction toolbar * docs(storybook): update RTL guide cross-reference in preview * feat(motion): add Pine-internal motion token scaffold (#740) * feat(motion): add Pine-internal motion token scaffold Add libs/core/src/global/styles/_motion.scss exposing duration and easing CSS custom properties (--pine-motion-duration-{fast,base,slow} and --pine-motion-easing-{out,in,in-out}). Wired into app.scss so the tokens land in the global stylesheet alongside fonts. Durations collapse to 0ms under prefers-reduced-motion so consumer components inherit the override without per-component media queries. Update the Guides/Motion doc to remove the no-tokens disclaimer, document the new tokens with usage tables, and call out the upstream follow-up to consolidate into @kajabi-ui/styles. * feat(motion): strengthen contract comment, migrate pds-modal backdrop Address review feedback on the motion-tokens PR: - Strengthen the namespace contract comment in _motion.scss to make clear Pine is claiming the upstream-canonical names and that the file is to be removed when @kajabi-ui/styles publishes motion. - Migrate pds-modal __backdrop transition from raw 0.2s ease to var(--pine-motion-duration-base) var(--pine-motion-easing-out) so the new tokens have at least one production consumer. - Document the reduced-motion limitation (override applies to duration only; JS-driven animations need their own matchMedia check). * style(pds-modal): use ease-in on backdrop exit, ease-out on enter * fix(pds-table): flip fixed-column shadow offset in RTL * fix: address RTL review feedback for form controls and tooltip Correct checkbox checkmark mirroring, switch knob positioning, filter popover anchor placement, input addon select radii, select disabled icon dimming, and tooltip html-content arrow alignment under dir=rtl. * fix: resolve select radius and filter RTL direction bot feedback Drop the border-radius shorthand that reset per-corner overrides on pds-select, and detect RTL via computed direction on the filter host instead of documentElement.dir only. * fix(pds-filter): use trigger right edge for RTL overflow check Popover anchors at inline-start (trigger right in RTL), so inline-end overflow must measure from triggerRect.right not left.
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
2 participants
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.
Description
Closes the gap that
Guides/Motionexplicitly flags ("Pine does not yet expose a dedicated motion token scale"). This PR ships a small Pine-internal motion token set so component SCSS has a named vocabulary for transitions instead of magic numbers.What's new
libs/core/src/global/styles/_motion.scss— CSS custom properties at:root:--pine-motion-duration-fast(120ms),-base(200ms),-slow(300ms)--pine-motion-easing-out,-in,-in-outcurvesprefers-reduced-motion: reducecollapses the durations to0msso consumer components inherit the override automatically.libs/core/src/global/styles/app.scss—@use 'motion';so the tokens load alongside the existing font setup.libs/core/src/stories/guides/motion.docs.mdx— replaces the "no tokens yet" disclaimer with a documented Tokens section (durations + easing tables, reduced-motion note, and a Roadmap callout about the upstream consolidation).Why Pine-internal
The ADR for externalized tokens (#1 in #733) routes design tokens through
@kajabi-ui/styles. Motion tokens are not there yet. This PR is the scaffold: same CSS variable names that will become canonical when the upstream package adds motion. Component SCSS that adoptsvar(--pine-motion-...)today swaps source-of-truth without a rename when upstream ships.What's not in this PR
var(--pine-motion-...)across pds-modal / pds-popover / pds-tooltip / pds-accordion / pds-dropdown-menu is the follow-up.transition: ... <ms>literals.Dependency note
Based on
docs/foundations(#736) because theGuides/Motiondoc that this updates is introduced there. Merge that first, then rebase this onmain.Closes a Level-3 "Motion guidelines" gap on the maturity scorecard (the guide existed but its central recommendation — use tokens — was unactionable).
Fixes #(no-issue)
Type of change
How Has This Been Tested?
Verified Stylelint passes on the new
_motion.scss.Confirmed the
@useimport resolves cleanly (the existingfontsmodule follows the same pattern).Verified the prefers-reduced-motion media query collapses durations to
0ms(browser devtools).unit tests
e2e tests
accessibility tests (prefers-reduced-motion is honored at the token level)
tested manually
other:
Test Configuration:
Checklist:
Follow-ups
pds-modal,pds-popover,pds-tooltip,pds-accordion,pds-dropdown-menuSCSS to use the new tokens.pine-design-system/prefer-motion-tokensStylelint rule alongside the existing color rules.ds-tokensmaintainers on consolidating motion into@kajabi-ui/styles(ADR-0001 supersession path).cc @Kajabi/dss-devs
Note
Low Risk
Non-breaking CSS token additions and a single modal transition swap; no auth, data, or API surface changes.
Overview
Introduces Pine-internal motion tokens (
--pine-motion-duration-*,--pine-motion-easing-*) in_motion.scss, loaded globally viaapp.scss, with duration tokens zeroed underprefers-reduced-motion: reduce.Guides/Motion is updated from “no tokens yet” to document the token tables, reduced-motion behavior, and upstream consolidation roadmap.
pds-modalbackdrop open/close transitions now use the tokens (ease-in on exit, ease-out when.open) instead of hardcoded0.2s ease.Reviewed by Cursor Bugbot for commit de76005. Bugbot is set up for automated code reviews on this repo. Configure here.