fix(button,select): match transition timing and remove theme-change flicker

[Shreyag02]

Description

Fixes the visible flicker on Button and Select Trigger when switching themes.

Two mismatches and one structural issue were causing it:

1. Easing mismatch — Button used transition: all 0.2s ease-in-out while Select Trigger used all 0.2s ease, so their colors interpolated at different rates during a theme flip. Button now uses ease, matching Select Trigger and the --rs-transition-interactive token convention.
2. Reduced-motion asymmetry — Button's transition was gated behind @media (prefers-reduced-motion: no-preference) but Select Trigger's was not, so with OS-level Reduce Motion enabled the Button snapped while the Trigger faded. Select Trigger's transition is now gated identically.
3. Theme-change flash — even with matched transitions, components that transition color properties fade for 200ms against the instantly-switching page background (most visible on outline/ghost variants, whose background is the same variable as the page background). CSS cannot distinguish theme-driven variable changes from hover-driven ones, so the docs app now passes disableTransitionOnChange to both the next-themes and Apsara theme providers — transitions are suppressed only for the frame the theme attribute flips; hover/press animations are unaffected.

Out of scope carving out --rs-duration-* / --rs-easing-* tokens and migrating the remaining ad-hoc transitions (text area, field, filter-chip).

Note for consumers: product apps using Apsara's ThemeProvider directly should also pass disableTransitionOnChange to get the same fix; defaulting it to true in the library is a follow-up decision.

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactor (no functional changes, no bug fixes just code improvements)
• Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
• Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
• Test (adding missing tests or correcting existing tests)
• Improvement (Improvements to existing code)
• Other (please specify)

How Has This Been Tested?

• Rebuilt @raystack/apsara and ran the docs app locally
• Toggled light/dark theme on the Button docs page (Variant section) and Select docs page — the outline/ghost flash on theme change is gone
• Verified hover/press transitions on Button and Select Trigger still animate normally
• Audited all transition declarations across packages/raystack/components/**/*.module.css to confirm Button and Select Trigger are now byte-identical in transition behavior.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (.mdx files)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

N/A

Related Issues

N/A

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Jun 7, 2026 3:07pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0ae6102d-5c51-46fd-bef7-4827d654b8e4

📥 Commits

Reviewing files that changed from the base of the PR and between f5bf867 and 2af4599.

📒 Files selected for processing (4)

• apps/www/src/app/layout.tsx
• apps/www/src/components/theme.tsx
• packages/raystack/components/button/button.module.css
• packages/raystack/components/select/select.module.css

---

📝 Walkthrough

Walkthrough

This PR configures theme transition behavior and refines component CSS to respect user motion preferences. The app-level theme providers now disable transitions during theme changes via the disableTransitionOnChange prop added to both NextThemeProvider and ApsaraThemeProvider. Supporting CSS changes move the select component's transition definition into a prefers-reduced-motion: no-preference media query, and the button component's transition timing is adjusted from ease-in-out to ease.

Suggested reviewers

• rsbh
• paanSinghCoder

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the main changes: fixing transition timing mismatches and removing theme-change flicker on Button and Select components.
Description check	✅ Passed	The description is comprehensive and directly related to the changeset, detailing the three root causes of the flicker bug, the fixes applied, testing performed, and scope boundaries.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}