WordPress.org

Make WordPress Core

Opened 18 months ago

Last modified 15 months ago

#26533 new defect (bug)

Main navigation and admin bar menu icon colors are inconsistent

Reported by: kovshenin Owned by:
Milestone: Awaiting Review Priority: low
Severity: minor Version: 3.8
Component: Administration Keywords: ui-feedback
Focuses: ui Cc:

Description

I was playing around with SVG icons in plugins and their focus colors, which works like a charm with svg-painter.js. One thing I noticed though, is an inconsistent focus icon color for the admin bar and main navigation in all color schemes but the default.

For example, the icon focus color for Midnight is #fff which is used for the main navigation and any SVG icons, but Core uses #e14d43 (highlight color) for the admin bar default icons, so if a plugin puts an SVG into the admin bar, it is colored white, not red on focus.

To clarify, with the current icon color definitions, Midnight should look like this, and not like this.

Attachments (1)

Screen Shot 2014-02-19 at 4.20.35 PM.png (76.4 KB) - added by melchoyce 15 months ago.

Download all attachments as: .zip

Change History (6)

comment:1 @SergeyBiryukov18 months ago

  • Component changed from General to Administration
  • Keywords ui-focus added

comment:2 @melchoyce15 months ago

Was about to say that it looked like this had been fixed, and then realized I read the ticket wrong. Sorry about that. Carry on. :)

comment:3 in reply to: ↑ description @SergeyBiryukov15 months ago

Replying to kovshenin:

To clarify, with the current icon color definitions, Midnight should look like this, and not like this.

As far as I can see, all the default color schemes always display the icon and link text in the same color, so the latter screenshot looks much more clear and consistent to me.

Is the issue here that this only works for core icons? Could you share a piece of code to reproduce the issue for a plugin icon?

comment:4 @SergeyBiryukov15 months ago

  • Keywords reporter-feedback ui-feedback added

comment:5 @kovshenin15 months ago

  • Keywords reporter-feedback removed

As far as I can see, all the default color schemes always display the icon and link text in the same color

Mostly or close, but not on hover. On hover:

  • Light uses gray for dashboard menu, blue for the admin tooblar
  • Coffee uses white/brown
  • Ectoplasm: white/green
  • Midnight: white/red
  • Ocean: white/green

Here's some sample code that creates a faux menu item with a W logo generated with SVG via the background-image property. If you test in on the default color scheme, or ones with consistent color behavior across admin toolbar and admin menu, everything looks fine.

But if you switch to one of the color schemes mentioned above, you'll see that the SVG painter will repaint the hover icon to the hover color used in the dashboard menu, not the toolbar. Hope this makes sense :)

I guess we should either change the color schemes to be consistent between the admin bar and the main menu, or introduce a new js property for the admin bar hover color, maybe make it optional for back-compat. I'm leaning towards the latter.

Note: See TracTickets for help on using tickets.