-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Custom CSS variables #64433
Comments
Hi, |
Thanks, @carolinan. For example, in the editor, in the global styles section, being able to define a var called Global Border Radius with a value of Then, everywhere in the editor where a border radius can be set, it will be possible to use the global variable. This way, if, for example, a decision is made to change the design from This will also allow external CSS files to use the variable, making the design easier to maintain in this regard as well. Just like when a Primary color is changed, it is reflected on all places set to use it (including external CSS). Maybe the variable's type is better defined by a unit ( Please let me know if this is clearer. Thanks again. |
How is this different from the existing global styles system? |
@carolinan, using the current global styles it is possible to set global styles on a block level, but not on a cross-block level. If, for example, my design uses "soft corners" (that is, with a specific |
By using the "custom" setting in theme.json then adding that custom variable to the border radius of each block and element. If this is specific to borders please see #64041 |
Thanks, @carolinan. I've tried adding a custom setting, but it isn't reflected in the UI. So, if I understand correctly (correct me if I don't), what you mean is maintaining a custom code override for each relevant block. This feels like complicating things, rather than simplifying them. What I mean is making the custom variables available in the code. Meaning, the ability to choose a custom color or a preset color. I also went over the ticket you referred to and I'm now sure exactly what I mean. The tickets mention a scale (small, medium, large) rather than individual presets which aren't necessarily scale related. |
That it is not reflected in the UI is also already reported as a separate issue. |
Thanks, @carolinan.
Can you maybe refer to this ticket? Thanks again. |
I found it here :) #37752 |
Great. Thank you 🙏 |
Consider introducing custom CSS variables to be used across the editor and in external CSS files using the
var()
function.Similar to the global colors' functionality.
The text was updated successfully, but these errors were encountered: