-
Notifications
You must be signed in to change notification settings - Fork 4.7k
(JS) Color Values: Rename brand to theme. Add fallback values. #24059
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
Conversation
| className, | ||
| currentInput, | ||
| color: colorProp = color( 'ui.brand' ), | ||
| color: colorProp = color( 'ui.theme' ), |
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.
Is there any reason why not all use cases have fallbacks like this one?
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 value is (eventually) passed into the styled generated component, which has a fallback:
https://github.com/WordPress/gutenberg/pull/24059/files#diff-bc2454ef211a3ab799a3f1c4dfe936c1R36
This workflow isn't ideal 🤦♀️ . I'm looking into an automated solution now.
I have something in mind 🤞
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.
Agreed that automating would be good or at least a lint rule. But I'm willing to include this fix quickly if you think it's ready as is?
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.
It is ready as is 👍
|
Size Change: +74 B (0%) Total Size: 1.15 MB
ℹ️ View Unchanged
|
youknowriad
left a comment
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.
Let's get the fix in and explore automation.
|
Automatic CSS |
This PR is a follow up to #23936
It fixes an IE11 regression for CSS variable support. It also renames the color
ui.brandusage toui.theme, which is feels more appropriate for this project.How has this been tested?
npm run devTypes of changes
At the moment, we have to manually add fallbacks for any CSS
var()usage (for CSS-in-JS generated styles). The Sass workflow offers automatic fallback generation thanks to it's PostCSS process. I recognize this isn't a great solution (especially at scale).We'll need to look into a more automated solution for CSS variable fallbacks (as well as other features like RTL handling).
Checklist: