-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Components: Retire LIGHT_GRAY
color object
#43994
Conversation
Using the more meaningful `COLORS.ui.backgroundDisabled` in this case
Size Change: -45 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks great, thank you!
That is definitely something that we'd like to do as part of the work on theming. Ideally the component package would expose a few variables — in this specific case, something like "primary color" (or whatever name we find more appropriate). The package could use "blueberry blue" as the default value for that variable, but any consumer of the package would be able to override it (for example, Gutenberg could override it to whatever the admin color is). Having the package expose its own variables (instead of using gutenberg-specific variables) would help to decouple the package from the rest of the editor, and make it more reusable. How does that sound to y'all ? |
That sounds great! |
@jasmussen Do we want to update the default color scheme just for the components package? I looked into it and found that almost all I don't have a problem with either, just checking so we can take the correct approach! |
Thanks for following up. For now, mainly for the components package. |
Created #44116 to have a central place for theming conversations |
Closes #40392
What?
Replaces the following colors:
LIGHT_GRAY[ 800 ]
#b5bcc2
→GRAY[ 400 ]
#cccccc
LIGHT_GRAY[ 600 ]
#d7dade
→GRAY[ 300 ]
#dddddd
LIGHT_GRAY[ 400 ]
#e8eaeb
→GRAY[ 100 ]
#f0f0f0
LIGHT_GRAY[ 300 ]
#edeff0
→GRAY[ 100 ]
#f0f0f0
Affected components:
Why?
We want to consolidate our grays to the canonical gray scale in
@wordpress/base-styles
.How?
Replace with the closest colors in the main GRAY object.
Testing Instructions
npm run storybook:dev
Screenshots