feat: Change selectedOptionColorPalette values pulled from the theme
#364
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
|
|
|
Open in Stackblitz • chakra-react-select-demo commit: |
📊 Package size report -0.55%↓
Unchanged files
🤖 This report was automatically generated by pkg-size-action |
csandman
commented
Mar 25, 2025
Comment on lines
+10
to
+20
| { value: "gray", label: "Gray" }, | ||
| { value: "red", label: "Red" }, | ||
| { value: "pink", label: "Pink" }, | ||
| { value: "purple", label: "Purple" }, | ||
| { value: "cyan", label: "Cyan" }, | ||
| { value: "blue", label: "Blue" }, | ||
| { value: "teal", label: "Teal" }, | ||
| { value: "green", label: "Green" }, | ||
| { value: "yellow", label: "Yellow" }, | ||
| { value: "orange", label: "Orange" }, | ||
| { value: "brand", label: "Brand" }, |
There was a problem hiding this comment.
I added the remaining default color palettes from the "Design Tokens" > "Colors" section of the docs: https://www.chakra-ui.com/docs/theming/colors
As well as one custom palette, brand.
csandman
changed the title
selectedOptionColorPalette selected valuesselectedOptionColorPalette values pulled from the theme
jonahallibone
approved these changes
Mar 25, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR changes the values that the
selectedOptionColorPaletteprop pulls from the theme from specific numeric color values to semantic tokens. Specifically, it is now usingcolorPalette.solidfor the background color andcolorPalette.contrastfor the text color. This change does somewhat change the styling for the selected option, but it falls more in line with how the chakra theming system works.This was originally inspired by some thoughts I had around this comment (with my original response). This doesn't actually remove the default value of
bluefor theselectedOptionColorPaletteas suggested, but it does provide a more correct path towards doing so if that's what I end up deciding to do with it. Thanks for bringing it up @saalto-it!This change also allows for the removal of the
useColorModeValueanduseColorModehooks which were essentially copied in from the Chakra template files. Removing the reliance on those styling approaches definitely makes the new approach feel much closer to the way the color tokens were intended to be used.One other change I implemented along with this is adding a new example for demonstrating all of the built-in
selectetOptionColorPaletteoptions that are available. This was done by updating thecolorOptionsarray to include all of the built-in Chakra color palettes. As a bonus, I also added a custom color palette to the demo's theme to give an example for how that can be done. Here's a quick demo of all of the new styles in light and dark mode:Screen.Recording.2025-03-24.at.10.17.02.PM.mov