WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.36k stars 4.13k forks source link

Use CSS Variables for Colors in the Color Picker and Gutenberg Editor When Available, Instead of Hardcoded Color Values #64726

Open codersantosh opened 1 month ago

codersantosh commented 1 month ago

What Problem Does This Address?

The Gutenberg editor relies on hard-coded color values ​​in the color selection, which can make it difficult to stay consistent on a site, especially when a theme or global color scheme is updated, Colors changing in many places takes time for users and developers. Additionally, changes to variations don’t propagate, creating custom CSS for color modes doesn’t function as expected, and child theme JSON files fail to apply changes globally.

What Is Your Proposed Solution?

The proposed solution is to incorporate CSS variables for color values within the Gutenberg editor. Since variables are already created for custom, theme, and default colors in global styles, utilizing them can simplify the process. CSS variables would allow for seamless updates from variations, and child themes, including custom modes. This approach would simplify the management of color schemes, ensure consistency across the site, and reduce the need for manual adjustments.

variable code

afmarchetti commented 6 days ago

This is super helpfull and easy to implement please add this feature!