Shared Pages: Use design system colors for Button, Switch and Text components #2099
Conversation
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
✅ Deploy Preview for content-scope-scripts ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Temporary Branch UpdateThe temporary branch has been updated with the latest changes. Below are the details:
Please use the above install command to update to the latest version. |
Contributor
[Beta] Generated file diffTime updated: Mon, 15 Dec 2025 09:45:34 GMT Apple
File has changed Integration
File has changed Windows
File has changed |
noisysocks
force-pushed
the
randerson/shared-components-styling
branch
from
a501f01 to
efb45b5
Compare
noisysocks
requested review from
a team,
mgurgel and
shakyShane
as code owners
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
noisysocks
force-pushed
the
randerson/shared-components-styling
branch
from
6c3ce5f to
87c7711
Compare
noisysocks
force-pushed
the
randerson/shared-components-styling
branch
from
de1953f to
628009f
Compare
noisysocks
force-pushed
the
randerson/shared-components-styling
branch
from
5270f40 to
a640b29
Compare
Co-authored-by: randerson <[email protected]>
Co-authored-by: randerson <[email protected]>
|
Cursor Agent can help with this pull request. Just |
shakyShane
approved these changes
Dec 15, 2025
github-merge-queue
bot
removed this pull request from the merge queue due to a conflict with the base branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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.
Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209121419454298/task/1210127348056275
Description
Updates the Button, Switch and Text shared components to use
--dstheme variables. These variables adjust according to thedata-theme-variantset by the user, making the components look different depending on the user’s theme variant.Since these components are shared we can’t assume that theme variables always exist and so we always fallback to
default-lightordefault-dark.On Windows, Button and Switch both have a custom design, so I updated all color variables here to use the themed variables.
On macOS, Button and Switch are styled to look like they’re native controls, so I only updated the accent colors to use the themed variables.
Testing Steps
Look at these pages and pay attention to the buttons in the RMF banner and the switches in the Customize sidebar.
Test the hover, active, and disabled states.
Test different themeVariant params: default, coolGray, slateBlue, green, violet, rose, orange, desert.
Test light and dark mode (set &theme=dark).
Test that default variant (default) looks similar to how it did before.
Checklist
Please tick all that apply:
Note
Migrates Button, Switch, and Text styles to DS theme variables with platform-specific tokens, dark-mode fallbacks, and refined state handling.
special-pages/shared/components/Button/Button.module.css)--dstheme tokens across light/dark.:hover/:activeguards:not(:disabled), sets disabled cursor, and updates focus handling.special-pages/shared/components/Switch/Switch.module.css)--dsvariables (light/dark).special-pages/shared/components/Text/Text.module.css)Written by Cursor Bugbot for commit 053285f. This will update automatically on new commits. Configure here.