Make WordPress Core

Opened 11 years ago

Closed 8 years ago

#26533 closed defect (bug) (maybelater)

Main navigation and admin bar menu icon colors are inconsistent

Reported by: kovshenin's profile kovshenin Owned by:
Milestone: Priority: normal
Severity: normal 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 11 years ago.

Download all attachments as: .zip

Change History (9)

#1 @SergeyBiryukov
11 years ago

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

#2 @melchoyce
11 years 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. :)

#3 in reply to: ↑ description @SergeyBiryukov
11 years 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?

#4 @SergeyBiryukov
11 years ago

  • Keywords reporter-feedback ui-feedback added

#5 @kovshenin
11 years 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.

#6 @chriscct7
9 years ago

  • Priority changed from low to normal
  • Severity changed from minor to normal

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


8 years ago

#8 @melchoyce
8 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from new to closed

No movement in three years, so I'm going to close this. If someone wants to tackle it, we can re-open.

Note: See TracTickets for help on using tickets.