Adapt the Customizer UI colors to the selected admin theme colors

[youknowriad]

Several UI elements in the customizer don't adapt properly to the selected admin scheme.
We should make use to use the $highlight-color for these UI elements.

[youknowriad]

Sidebar with colors adapted to the selected theme.

https://core.trac.wordpress.org/ticket/50547

[dlh]

This does seem like an inconsistency worth addressing. Perhaps some of the Customizer veterans out there can comment to clarify whether it was in some way intentional? Otherwise, this looks like it would be a great enhancement-slash-bugfix to try for in 5.6.

[youknowriad]

What about 5.5? We still have two days and I can take care of the commit. IMO, it was just an oversight.

[dlh]

I went with 5.6 only because the needs-design-feedback keyword had been added. If that feedback can be obtained in time, then I certainly wouldn't stand in the way of trying for 5.5 and then soliciting testing in beta.

[Joen]

This looks good to me, the patch looks very safe and straight-forward, and the code quality this brings benefits the ongoing convert-to-CSS-variable efforts. Definitely LGTM.

[youknowriad]

In 48371:

Customizer: Adapt the colors to the selected admin scheme colors.

Uses the $highlight-color variable to override the hardcoded colors used in the customizer UI.

Props dlh, joen.
Fixes #50547.

[kebbet]

Customizer media popup

[kebbet]

Just noted that colors are not adapted in the Media popup in the Customizer. The focus styles (both inputs and search field) and two links in the right sidebar has the ”old” color when using the new admin theme.

Find the popup when you set a site logo, site icon or an background image.

[dlh]

@kebbet The focus styles for those inputs don't seem to honor the color scheme outside of the Customizer, either, or am I missing something?

[kebbet]

@dlh Oh, it's a rabbit hole... It differs. Some more findings:

• In the normal media popup focus styles have the new darker color applied. (Going from main media library).
• When going to a media popup via the gallery block or the image block, the same applies as my first report.
• Search in (all) table listing views applies the color, but not the Media grid-view.
• Focus not applied to filter dropdown menues in table listing views.
• Focus not applied to any dropdown filter/menu.
• Button looking like links (like filter All | Admin | Editor etc in users-view) has old focus color.

[youknowriad]

I uploaded a patch that fixes the color of the "Delete permanently" link on the screenshot above (and all error/danger links on the Media modal properly).

That said, it seems like suggested above that there's a lot of places across WP-Admin where the default blue color bleeds. it seems unrelated to the initial patch for this issue. I'd propose to keep it as is for now and fix this with the move to CSS variables on Core styles like it's being explored separately.

[youknowriad]

In 48643:

Administration: Fix the red links on the Media Modal.

The custom link colors for admin scheme colors were overriding the danger color.

Props kebbet, dlh.
Fixes #50547.

[celloexpressions]

Replying to dlh:

This does seem like an inconsistency worth addressing. Perhaps some of the Customizer veterans out there can comment to clarify whether it was in some way intentional? Otherwise, this looks like it would be a great enhancement-slash-bugfix to try for in 5.6.

The customizer has not historically adopted wp-admin color schemes due to several issues with color schemes. Most notably, the color schemes offer inconsistent accessibility (color contrast), were difficult to keep updated (not being purely CSS and not typically being used in core development environments), and did not generally get updated to be used with any other new features in development between WordPress 3.9 - 4.9 when customize development was most active.

I'm not generally opposed to this change as long as the CSS team is committed to maintaining and improving the color schemes feature across wp-admin and the customizer.