WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 3 months ago

Last modified 3 months ago

#50547 closed enhancement (fixed)

Adapt the Customizer UI colors to the selected admin theme colors

Reported by: youknowriad Owned by: youknowriad
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Customize Keywords:
Focuses: ui, css Cc:

Description

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.

Attachments (3)

Capture d’écran 2020-07-03 à 11.02.07 AM.png (96.9 KB) - added by youknowriad 4 months ago.
Sidebar with colors adapted to the selected theme.
50547-customizer-media.png (21.2 KB) - added by kebbet 3 months ago.
Customizer media popup
fix-danger-colors-media-modal.diff (768 bytes) - added by youknowriad 3 months ago.

Download all attachments as: .zip

Change History (22)

@youknowriad
4 months ago

Sidebar with colors adapted to the selected theme.

This ticket was mentioned in PR #384 on WordPress/wordpress-develop by youknowriad.


4 months ago

  • Keywords has-patch added

#2 @youknowriad
4 months ago

  • Component changed from General to Customize
  • Focuses ui css added

#3 follow-up: @dlh
4 months ago

  • Milestone changed from Awaiting Review to 5.6

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.

#4 @youknowriad
4 months ago

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

#5 @dlh
4 months ago

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.

This ticket was mentioned in Slack in #design by estelaris. View the logs.


4 months ago

#7 @Joen
4 months ago

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.

#8 @youknowriad
4 months ago

  • Milestone changed from 5.6 to 5.5

#9 @youknowriad
4 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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
3 months ago

Customizer media popup

#10 @kebbet
3 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#11 @kebbet
3 months ago

  • Keywords needs-patch added; has-patch removed

#12 @dlh
3 months ago

@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?

#13 @kebbet
3 months ago

@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.
Last edited 3 months ago by kebbet (previous) (diff)

#14 @youknowriad
3 months ago

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.

#15 @youknowriad
3 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


3 months ago

#17 @davidbaumwald
3 months ago

  • Keywords needs-design-feedback needs-patch removed

This ticket was mentioned in Slack in #core by dlh. View the logs.


3 months ago

#19 in reply to: ↑ 3 @celloexpressions
3 months ago

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.

Note: See TracTickets for help on using tickets.