fix: bring component motion in line with animation standards#852
fix: bring component motion in line with animation standards#852ravisuhag wants to merge 1 commit into
Conversation
Consolidates hand-typed easing curves and durations into shared --rs-ease-*/--rs-duration-* tokens, and fixes a batch of motion issues across the library: removes the command palette's open/close animation (keyboard-driven, 100+ uses/day), rebuilds popover/menu/select/combobox entrances as interruptible origin-anchored transitions, fixes a toast transition that fought active swipe gestures, replaces `transition: all` with the interactive token in four components, syncs switch/checkbox/ radio color transitions with their movement, fixes an inverted reduced-motion override in the sidebar, moves the tabs indicator off layout properties onto `translate`, and adds missing entrance motion to checkbox/radio/empty-state.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe changes introduce shared motion tokens and apply them across interactive controls, overlays, popups, dialogs, drawers, progress indicators, tours, and feedback components. Checkbox and radio indicators remain mounted to support state transitions. Several popup animations now use opacity and transform transitions, while command popup animation styles and the legacy Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (1)
packages/raystack/components/sidebar/sidebar.module.css (1)
386-394: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace hardcoded
0.2s easewith shared motion tokens.The reduced-motion scoping is correct, but
0.2s easeshould use shared tokens (e.g.,var(--rs-duration-moderate) var(--rs-ease-out)) for consistency with the PR's tokenization objective and other components like tabs.♻️ Proposed fix
`@media` (prefers-reduced-motion: no-preference) { .root, .nav-item, .nav-text, .resizeHandle { - transition: width 0.2s ease; + transition: width var(--rs-duration-moderate) var(--rs-ease-out); } .nav-group-panel { transition: - width 0.2s ease, - height 0.2s ease; + width var(--rs-duration-moderate) var(--rs-ease-out), + height var(--rs-duration-moderate) var(--rs-ease-out); } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/raystack/components/sidebar/sidebar.module.css` around lines 386 - 394, Replace the hardcoded 0.2s ease values in .resizeHandle and .nav-group-panel with the shared motion duration and easing tokens, using the established --rs-duration-moderate and --rs-ease-out variables while preserving the existing width and height transition properties.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/raystack/components/checkbox/checkbox.module.css`:
- Line 23: Update the base .checkbox transition to use the shared
--rs-duration-fast and --rs-ease-out tokens, matching the existing .indicator
transition instead of hardcoded 150ms ease. Preserve the transitioned
background-color and border-color properties.
In `@packages/raystack/components/field/field.module.css`:
- Line 43: Move the --rs-transition-interactive declaration from the .input base
rule into an `@media` (prefers-reduced-motion: no-preference) block, matching the
existing pattern in button.module.css and text-area.module.css.
In `@packages/raystack/components/meter/meter.module.css`:
- Around line 89-93: Verify whether the meter animation should intentionally
change from 500ms to the 250ms var(--rs-duration-moderate) value. If 250ms is
not appropriate for meter indicators, preserve the prior duration or introduce a
dedicated token; if it is intentional, update the token documentation in
effects.css to include meter/progress indicators.
In `@packages/raystack/components/progress/progress.module.css`:
- Around line 89-93: Verify whether the duration reduction in the
.circularIndicatorCircle transition is intentional and matches the desired
progress UX. If not, restore the prior duration token; otherwise keep it aligned
with the meter transition token for consistency.
In `@packages/raystack/components/radio/radio.module.css`:
- Line 23: Update the base .radioitem transition to use the shared
--rs-duration-fast and --rs-ease-out motion tokens, matching the .indicator
transition instead of hardcoded 150ms ease values. Preserve the existing
background-color and border-color transition properties.
In `@packages/raystack/components/switch/switch.module.css`:
- Line 12: Update the switch transition declaration to replace the hardcoded
duration and easing with the shared motion tokens, using the existing token
pattern established by components such as tabs.
In `@packages/raystack/components/tour-beta/tour.module.css`:
- Around line 34-38: Update the spotlight transition declarations to use the
shared moderate duration token instead of hardcoded 300ms values, and replace
the easing with --rs-ease-in-out for all listed properties while preserving the
existing transition properties.
- Line 55: Update the positioner transition declaration to use the design-system
motion tokens: replace the hardcoded 350ms duration with --rs-duration-moderate
and use --rs-ease-in-out instead of --rs-ease-out, while preserving the
transform transition.
In `@packages/raystack/components/tour/tour.module.css`:
- Line 75: Update the positioner transition declaration in the tour stylesheet
to use the existing --rs-duration-moderate and --rs-ease-in-out motion tokens
instead of the hardcoded 350ms duration and --rs-ease-out timing function.
---
Nitpick comments:
In `@packages/raystack/components/sidebar/sidebar.module.css`:
- Around line 386-394: Replace the hardcoded 0.2s ease values in .resizeHandle
and .nav-group-panel with the shared motion duration and easing tokens, using
the established --rs-duration-moderate and --rs-ease-out variables while
preserving the existing width and height transition properties.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 93dcc675-407a-4fdd-9e61-c669f0cd31eb
📒 Files selected for processing (28)
packages/raystack/components/button/button.module.csspackages/raystack/components/checkbox/checkbox.module.csspackages/raystack/components/checkbox/checkbox.tsxpackages/raystack/components/combobox/combobox.module.csspackages/raystack/components/command/command.module.csspackages/raystack/components/dialog/dialog.module.csspackages/raystack/components/drawer/drawer.module.csspackages/raystack/components/empty-state/empty-state.module.csspackages/raystack/components/field/field.module.csspackages/raystack/components/menu/menu.module.csspackages/raystack/components/meter/meter.module.csspackages/raystack/components/popover/popover.module.csspackages/raystack/components/preview-card/preview-card.module.csspackages/raystack/components/progress/progress.module.csspackages/raystack/components/radio/radio.module.csspackages/raystack/components/radio/radio.tsxpackages/raystack/components/select/select.module.csspackages/raystack/components/sidebar/sidebar.module.csspackages/raystack/components/skeleton/skeleton.module.csspackages/raystack/components/switch/switch.module.csspackages/raystack/components/tabs/tabs.module.csspackages/raystack/components/text-area/text-area.module.csspackages/raystack/components/toast/toast.module.csspackages/raystack/components/tooltip/tooltip.module.csspackages/raystack/components/tour-beta/tour.module.csspackages/raystack/components/tour/tour.module.csspackages/raystack/styles/effects.csspackages/raystack/styles/typography.css
💤 Files with no reviewable changes (2)
- packages/raystack/styles/typography.css
- packages/raystack/components/command/command.module.css
| border: 1px solid var(--rs-color-border-base-secondary); | ||
| cursor: pointer; | ||
| flex-shrink: 0; | ||
| transition: background-color 150ms ease, border-color 150ms ease; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Use shared motion tokens instead of hardcoded values.
The base .checkbox transition uses 150ms ease while the .indicator (line 111) correctly uses var(--rs-duration-fast) var(--rs-ease-out). The ease keyword (cubic-bezier(0.25, 0.1, 0.25, 1)) is also a different curve from --rs-ease-out, so even if durations match, the easing will feel inconsistent between background/border and the indicator. This contradicts the PR objective of consolidating easing and duration into shared tokens.
♻️ Proposed fix
-.checkbox {
+.checkbox {
/* ... */
- transition: background-color 150ms ease, border-color 150ms ease;
+ transition:
+ background-color var(--rs-duration-fast) var(--rs-ease-out),
+ border-color var(--rs-duration-fast) var(--rs-ease-out);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| transition: background-color 150ms ease, border-color 150ms ease; | |
| transition: | |
| background-color var(--rs-duration-fast) var(--rs-ease-out), | |
| border-color var(--rs-duration-fast) var(--rs-ease-out); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/checkbox/checkbox.module.css` at line 23, Update
the base .checkbox transition to use the shared --rs-duration-fast and
--rs-ease-out tokens, matching the existing .indicator transition instead of
hardcoded 150ms ease. Preserve the transitioned background-color and
border-color properties.
| outline: none; | ||
| box-sizing: border-box; | ||
| transition: all 0.2s ease; | ||
| transition: var(--rs-transition-interactive); |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
Gate the .input transition behind prefers-reduced-motion: no-preference.
The transition is declared directly in .input without a reduced-motion guard, while button.module.css (line 211) and text-area.module.css (line 17) both wrap the same --rs-transition-interactive token inside @media (prefers-reduced-motion: no-preference). Users with reduced-motion preference will still see transitions on field inputs, breaking the standardization this PR aims to achieve.
♿ Proposed fix to wrap transition in reduced-motion media query
.input {
width: 100%;
padding: 0 var(--rs-space-3);
border-radius: var(--rs-radius-2);
border: 1px solid var(--rs-color-border-base-tertiary);
background: var(--rs-color-background-base-primary);
font-weight: var(--rs-font-weight-regular);
font-size: var(--rs-font-size-small);
line-height: var(--rs-line-height-small);
letter-spacing: var(--rs-letter-spacing-small);
outline: none;
box-sizing: border-box;
- transition: var(--rs-transition-interactive);
height: var(--rs-space-9);
}
+
+@media (prefers-reduced-motion: no-preference) {
+ .input {
+ transition: var(--rs-transition-interactive);
+ }
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| transition: var(--rs-transition-interactive); | |
| width: 100%; | |
| padding: 0 var(--rs-space-3); | |
| border-radius: var(--rs-radius-2); | |
| border: 1px solid var(--rs-color-border-base-tertiary); | |
| background: var(--rs-color-background-base-primary); | |
| font-weight: var(--rs-font-weight-regular); | |
| font-size: var(--rs-font-size-small); | |
| line-height: var(--rs-line-height-small); | |
| letter-spacing: var(--rs-letter-spacing-small); | |
| outline: none; | |
| box-sizing: border-box; | |
| height: var(--rs-space-9); | |
| } | |
| `@media` (prefers-reduced-motion: no-preference) { | |
| .input { | |
| transition: var(--rs-transition-interactive); | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/field/field.module.css` at line 43, Move the
--rs-transition-interactive declaration from the .input base rule into an `@media`
(prefers-reduced-motion: no-preference) block, matching the existing pattern in
button.module.css and text-area.module.css.
| transition: width var(--rs-duration-moderate) linear; | ||
| } | ||
|
|
||
| .circularIndicatorCircle { | ||
| transition: stroke-dashoffset 500ms; | ||
| transition: stroke-dashoffset var(--rs-duration-moderate) linear; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Verify the 500ms → 250ms duration reduction is intentional.
The previous hardcoded 500ms is replaced with var(--rs-duration-moderate) (250ms), halving the animation duration. This is a significant user-visible behavior change for meter indicators. Additionally, the token's documented scope in effects.css lists "tabs indicator, preview card, tour steps" but not meter/progress — consider updating that comment or introducing a dedicated token if 250ms feels too fast for data-viz indicators.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/meter/meter.module.css` around lines 89 - 93,
Verify whether the meter animation should intentionally change from 500ms to the
250ms var(--rs-duration-moderate) value. If 250ms is not appropriate for meter
indicators, preserve the prior duration or introduce a dedicated token; if it is
intentional, update the token documentation in effects.css to include
meter/progress indicators.
| transition: width var(--rs-duration-moderate) linear; | ||
| } | ||
|
|
||
| .circularIndicatorCircle { | ||
| transition: stroke-dashoffset 500ms; | ||
| transition: stroke-dashoffset var(--rs-duration-moderate) linear; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
Same 500ms → 250ms duration reduction as meter — verify intentional.
This file mirrors the meter changes exactly. The same concern about halving the animation duration applies here. Keeping meter and progress on the same token is good for consistency, but confirm the faster fill rate is the desired UX.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/progress/progress.module.css` around lines 89 -
93, Verify whether the duration reduction in the .circularIndicatorCircle
transition is intentional and matches the desired progress UX. If not, restore
the prior duration token; otherwise keep it aligned with the meter transition
token for consistency.
| justify-content: center; | ||
| cursor: pointer; | ||
| box-sizing: border-box; | ||
| transition: background-color 150ms ease, border-color 150ms ease; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Use shared motion tokens instead of hardcoded values.
Same issue as checkbox.module.css line 23 — the base .radioitem uses 150ms ease while .indicator (line 78) uses var(--rs-duration-fast) var(--rs-ease-out). Different easing curves (ease vs --rs-ease-out) will produce visually inconsistent transitions.
♻️ Proposed fix
.radioitem {
/* ... */
- transition: background-color 150ms ease, border-color 150ms ease;
+ transition:
+ background-color var(--rs-duration-fast) var(--rs-ease-out),
+ border-color var(--rs-duration-fast) var(--rs-ease-out);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| transition: background-color 150ms ease, border-color 150ms ease; | |
| transition: | |
| background-color var(--rs-duration-fast) var(--rs-ease-out), | |
| border-color var(--rs-duration-fast) var(--rs-ease-out); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/radio/radio.module.css` at line 23, Update the
base .radioitem transition to use the shared --rs-duration-fast and
--rs-ease-out motion tokens, matching the .indicator transition instead of
hardcoded 150ms ease values. Preserve the existing background-color and
border-color transition properties.
| cursor: pointer; | ||
| background: var(--rs-color-background-neutral-secondary); | ||
| border-radius: var(--rs-radius-full); | ||
| transition: background-color 200ms ease; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Use shared motion tokens instead of hardcoded values.
200ms ease should use shared motion tokens (e.g., var(--rs-duration-moderate) var(--rs-ease-out)) to align with the PR's tokenization objective and other components like tabs which already use var(--rs-duration-moderate).
♻️ Proposed fix
.switch {
/* ... */
- transition: background-color 200ms ease;
+ transition: background-color var(--rs-duration-moderate) var(--rs-ease-out);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| transition: background-color 200ms ease; | |
| transition: background-color var(--rs-duration-moderate) var(--rs-ease-out); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/switch/switch.module.css` at line 12, Update the
switch transition declaration to replace the hardcoded duration and easing with
the shared motion tokens, using the existing token pattern established by
components such as tabs.
| left 300ms var(--rs-ease-out), | ||
| top 300ms var(--rs-ease-out), | ||
| width 300ms var(--rs-ease-out), | ||
| height 300ms var(--rs-ease-out), | ||
| border-radius 300ms var(--rs-ease-out); |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the relevant files
git ls-files 'packages/raystack/components/tour-beta/tour.module.css' 'packages/**/effects.css' 'packages/**/motion*.css' | sed 's#^`#FILE` #'
# Show the relevant sections with line numbers
for f in packages/raystack/components/tour-beta/tour.module.css packages/**/effects.css; do
[ -f "$f" ] || continue
echo
echo "===== $f ====="
nl -ba "$f" | sed -n '1,220p'
done
# Search for the motion tokens and easing docs/usages
echo
echo "===== token search ====="
rg -n --no-heading --glob 'packages/**' --line-number --context 2 --fixed-strings \
'--rs-duration-moderate' '--rs-duration-slow' '--rs-ease-out' '--rs-ease-in-out' \
packages || trueRepository: raystack/apsara
Length of output: 364
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "===== tour.module.css ====="
sed -n '1,220p' packages/raystack/components/tour-beta/tour.module.css | cat -n
echo
echo "===== effects.css ====="
sed -n '1,260p' packages/raystack/styles/effects.css | cat -n
echo
echo "===== motion token search ====="
rg -n --no-heading --context 2 --fixed-strings \
'--rs-duration-moderate' \
'--rs-duration-slow' \
'--rs-ease-out' \
'--rs-ease-in-out' \
packages/raystack/styles packages/raystack/components/tour-beta || trueRepository: raystack/apsara
Length of output: 8927
Replace the hardcoded spotlight timing with motion tokens.
packages/raystack/components/tour-beta/tour.module.css:34-38 still uses 300ms, which doesn’t match a shared duration token (--rs-duration-moderate is 250ms, --rs-duration-slow is 400ms). Since the spotlight moves between targets, --rs-ease-in-out fits the motion guidance better than --rs-ease-out.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/tour-beta/tour.module.css` around lines 34 - 38,
Update the spotlight transition declarations to use the shared moderate duration
token instead of hardcoded 300ms values, and replace the easing with
--rs-ease-in-out for all listed properties while preserving the existing
transition properties.
| @media (prefers-reduced-motion: no-preference) { | ||
| .positioner:has(.popup:not([data-starting-style])) { | ||
| transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); | ||
| transition: transform 350ms var(--rs-ease-out); |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== tour.module.css excerpt ==\n'
nl -ba packages/raystack/components/tour-beta/tour.module.css | sed -n '40,70p'
printf '\n== effects.css locations ==\n'
rg -n --no-heading --context 2 --glob 'packages/**/effects.css' --glob '**/effects.css' '--rs-ease-(out|in-out)|350ms|transition:' .
printf '\n== motion token search ==\n'
rg -n --no-heading --context 2 --glob 'packages/**' '--rs-ease-(out|in-out)|--rs-duration|duration.*ms|transition:' packagesRepository: raystack/apsara
Length of output: 224
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
paths = [
Path("packages/raystack/components/tour-beta/tour.module.css"),
Path("packages/raystack/components/effects.css"),
]
for path in paths:
print(f"\n== {path} ==")
if not path.exists():
print("missing")
continue
lines = path.read_text().splitlines()
for i, line in enumerate(lines, 1):
if path.name == "tour.module.css" and 40 <= i <= 70:
print(f"{i:4d}: {line}")
if path.name == "effects.css" and ("--rs-ease-out" in line or "--rs-ease-in-out" in line or "motion" in line.lower() or "transition" in line.lower()):
start = max(1, i - 2)
end = min(len(lines), i + 2)
for j in range(start, end + 1):
print(f"{j:4d}: {lines[j-1]}")
print("---")
PY
printf '\n== token search ==\n'
grep -RIn --exclude-dir=node_modules --exclude-dir=.git -- '--rs-ease-out\|--rs-ease-in-out\|350ms\|duration' packages/raystack/components 2>/dev/null | head -n 200Repository: raystack/apsara
Length of output: 11889
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
# Find likely token definition files and any docs mentioning the easings/durations.
candidates = []
for p in Path("packages").rglob("*"):
if p.is_file() and p.suffix in {".css", ".md", ".mdx", ".ts", ".tsx"}:
text = p.read_text(errors="ignore")
if "--rs-ease-in-out" in text or "--rs-ease-out" in text or "--rs-duration-" in text:
candidates.append(p)
for p in sorted(candidates):
print(f"\n== {p} ==")
lines = p.read_text(errors="ignore").splitlines()
for i, line in enumerate(lines, 1):
if "--rs-ease-in-out" in line or "--rs-ease-out" in line or "--rs-duration-" in line:
start = max(1, i - 3)
end = min(len(lines), i + 3)
for j in range(start, end + 1):
print(f"{j:4d}: {lines[j-1]}")
print("---")
PYRepository: raystack/apsara
Length of output: 19210
Use motion tokens for the positioner transition 350ms is still a one-off duration; this step-to-step movement fits --rs-duration-moderate with --rs-ease-in-out better than a hardcoded value.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/tour-beta/tour.module.css` at line 55, Update
the positioner transition declaration to use the design-system motion tokens:
replace the hardcoded 350ms duration with --rs-duration-moderate and use
--rs-ease-in-out instead of --rs-ease-out, while preserving the transform
transition.
| @media (prefers-reduced-motion: no-preference) { | ||
| .positioner[data-transition="move"]:has(.popup:not([data-starting-style])) { | ||
| transition: transform 460ms cubic-bezier(0.33, 0.7, 0, 1); | ||
| transition: transform 350ms var(--rs-ease-out); |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the tour stylesheet and the motion token docs.
git ls-files 'packages/raystack/components/tour/*' 'packages/raystack/components/**/effects.css' 'packages/**/effects.css'
# Show the relevant tour lines with numbers.
sed -n '60,90p' packages/raystack/components/tour/tour.module.css
# Find the motion token definitions and any documentation around them.
for f in $(git ls-files 'packages/**/effects.css' 'packages/**/motion*.css' 'packages/**/tokens*.css' ); do
echo "===== $f ====="
sed -n '1,220p' "$f"
done
# Search for the exact duration/easing tokens used elsewhere in the repo.
rg -n --no-heading '350ms|--rs-ease-in-out|--rs-ease-out|elements moving on screen|entrances, exits, value changes' packagesRepository: raystack/apsara
Length of output: 11012
Use motion tokens for the positioner transition
transform 350ms var(--rs-ease-out) is still hardcoded. This fits better with --rs-duration-moderate and --rs-ease-in-out, which are the existing tokens for tour-step motion and elements moving on screen.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/raystack/components/tour/tour.module.css` at line 75, Update the
positioner transition declaration in the tour stylesheet to use the existing
--rs-duration-moderate and --rs-ease-in-out motion tokens instead of the
hardcoded 350ms duration and --rs-ease-out timing function.
1 participant
Summary
An animation audit across the component library found a set of motion issues, all now fixed:
--rs-ease-*/--rs-duration-*tokens (styles/effects.css)transition: allwith the interactive token in button/select/field/text-area (was animating unintended layout properties)prefers-reduced-motionoverride in the sidebar (reduced-motion users were getting more animation than everyone else)top/leftontotranslate(was triggering layout on every tab switch)Checkbox/radio also needed a
keepMountedaddition on their Base UI indicators so the exit fade can actually play (the indicator previously unmounted synchronously on uncheck, before any transition could run); the check icon's render logic was adjusted so it doesn't leave stray hidden markup in the DOM at rest.Test plan
pnpm build:apsarapassespnpm test:apsara— 1794 passed, 1 skipped; 7 test files fail on a pre-existing@base-uimodule-resolution issue unrelated to this change (confirmed by reproducing the same failure on unmodifiedmain)