Color naming conflict for theme variables

[colorful-tones]

Description

As I was running through testing of FSE Program Testing Call #11: Site Editing Safari I noticed an odd behavior with Global Styles custom colors.

I'm running WP 5.8.2-RC1-51987 using Beta Tester plugin, and using Gutenberg 11.9 RC3 with TT1 Blocks theme.

Here are the steps to recreate:

1. Choose Appearance > Styles and choose Colors
2. Under 'Palette' click on the '0 colors' to create a new custom palette
3. Use + (plus) icon to add a new color
4. Choose any color in the picker and type 'green' in the field. As soon as you complete 'green' the background of the page changes. There seems to be a CSS Custom Property name that is being overwritten.

While technically, this may make sense and may even be the intended outcome. However, from a user perceptive it is not ideal and the behavior is unexpected.

This likely would involve more mature APIs for colors, and still being discussed in: Default Colors, Theme Colors, and Custom Colors #29568. Also, it would be ideal to do some validation or checking to make sure color naming does not conflict.

Step-by-step reproduction instructions

(noted above)

Screenshots, screen recording, code snippet

Styles-color-naming-override.mp4

Environment info

• WP 5.8.2-RC1-51987 using Beta Tester plugin, and using Gutenberg 11.9 RC3 with TT1 Blocks theme.
• Chrome 95.0.4638.69
• macOS 11.6

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[oandregal]

Thanks for reporting.

This should be resolved by #36674 which added a custom- prefix to any user-provided color to fix this use case, so there's no conflicts with theme or default colors.