Colinear: Customizer colors affect post/page editor element styles on Atomic sites

[jp-imagines]

Quick summary

If you change any color in the Customizer (Appearance > Customize > Colors & Backgrounds), some new CSS takes effect in the editor which overrides the styles used for editor elements (including hover styles), which can make them difficult or impossible to read. This affects tabs (e.g. "Page/Post," "Block," "List View," "Outline," "Patterns," "Media") and settings headings (e.g. "Summary", "Styles," "Advanced").

Steps to reproduce

1. Activate the Colinear theme.
2. Open a post or page in the editor. Check that the various tabs and headings in the side panels (insert block, list view, settings, Jetpack settings, kebab menu) are all legible as black text on white backgrounds with appropriate hover effects.
3. Navigate to Appearance > Customize > Colors & Backgrounds. Change any of the four colors and save changes.
4. Navigate back to the post/page editor (or refresh the page). Compare the various editor elements' styles with what was seen in step 2.

What you expected to happen

Theme color styles should not affect editor elements.

What actually happened

The theme color styles add some additional inline CSS (custom-colors-editor-css-inline-css), which is loaded after the editor style CSS file, and therefore takes precedence. In many cases, this causes editor elements to become difficult or impossible to read when not hovered over (or when being hovered over), depending on the colors set.

Screenshot below is an example with only the "Links" color changed to a light pink. ("Block" tab in the right settings sidebar is being hovered over.)

Browser

No response

Context

Initial report in 8219316-zd-a8c. Similar to #6955 (Illustratr theme).

Platform (Simple, Atomic, or both?)

Atomic

Other notes

Only tested on Atomic so far.

Initial customer reported that this affected the help center window as well, though I haven't been able to replicate that yet. Asking them for more information or screenshots – if this affects the help center, I'd imagine that will affect the priority of this issue.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8219316-zen

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Could Not Replicate
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

Atomic
https://github.com/Automattic/themes/assets/14153300/e487caaa-c2ac-4360-ba37-eabb154e486f

📌 ACTIONS

• Triaged

[rambogenius]

A similar issue is also occurring on Atomic sites for the Penscratch 2 theme. The theme colors are affecting editor elements.

Screenshot:

The green color of the link comes from the theme. The editor's pink color is not applied.

• 8577442-zd-a8c