Change the outline button hover background color

[sourav926]

Admin panel's new outline button hover background color is hardly understandable.

It can be background: #016087; color: #fff;

[sourav926]

Before and after of implementation

[mapk]

Thanks @sourav926! The design style you're proposing looks similar to the current primary button style. Take a look at the two styles below:

I'd refrain from making all the buttons assume the primary styling. I know there is work to refine the secondary button styling to work better.

[sourav926]

Replying to mapk:

1. Primary and Secondary both buttons should look different in Normal state.
2. On the Hover state, a secondary button can look like the Primary button or a darker gray color.
3. The main point is, "on hover" design of secondary button is not user-friendly.

[afercia]

@sourav926 thanks for your report. Worth noting the new secondary buttons style is a design choice that was discussed and implemented in #34904 see https://core.trac.wordpress.org/ticket/34904#comment:73 and following comments.

Actually, the color contrast or the new button style is greater than the previous one and that's one of the reasons for the change. One more reason is the new style is now consistent with the block editor buttons style (see screenshot below).

Same goes for the hover style: it's now consistent with the one used by the block editor buttons. I guess this is hardly going to change, as it's a deliberate design choice.

Regarding accessibility concerns, the hover state is indicated by the cursor change in the first place thus I wouldn't be greatly concerned.

Worth also considering on touch devices the hover state doesn't exist and it's generally less and less important on all devices.

For these reasons, I'd lean towards closing this ticket unless the design team feels some change is necessary.

[afercia]

This ticket was discussed during today's accessibility bug-scrub. While some tend to think the hover style is way less important today than in the past, a quick improvement could be using the same background color change that was used on WordPress 5.2 together with a darker border. If a patch comes in in the very next days, this could be considered for 5.3.1.

[melchoyce]

I agree the contrast could get bumped up a bit on hover — it is pretty subtle now — but I'm struggling with finding an appropriate increase. I think I might want to wait for @kjellr to return from sabbatical before making any changes.

The color schemes have the same problem, though, and the greys are easy to darken. Attaching a patch to do so.

[audrasjb]

Thanks for the patch @melchoyce but I tested it and it doesn't seems to fix anything.
/wp-admin/css/colors SCSS files are not meant to handle default WP Admin colors but only alternate color schemes.

I think we rather need to edit /wp-includes/css/buttons.css file.

In this file, we don't have access to SCSS variables and functions, we need to use hexadecimal colors.
I tried to replace the current #016087 value with #00405C and it works fine (screenshots coming), but I'm not sure we really want to add another new shade of blue.
Are we ok to replace the current #016087 with a darker blue for the whole admin?
If so, I can make a new patch.

Cheers,
Jb

[audrasjb]

Before - hover color value = 016087

[audrasjb]

Proposal - hover color value = 00405C

[audrasjb]

Current - hover color value = 016087

[audrasjb]

Proposed color - hover color value = 016087 - - it's very dark!

[audrasjb]

In the last screenshot above, the darker color applied everywhere in WP Admin to replace #016087… it's a big change! A way darker!
Not sure we want to do that in a point release. I'd suggest to continue this discussion in the next major milestone.

Feel free to move it back to WP 5.3.1 if you think we could get a quick decision on this ticket :-)

[audrasjb]

The color schemes have the same problem, though, and the greys are easy to darken. Attaching a patch to do so.

Ah sorry I missed that comment @melchoyce. You patch was for alternative color schemes! 🙉
In any way, I'd propose to handle both default and alternates in the next major.

[nrqsnchz]

hey @audrasjb!

I feel that the darkening on the primary button is a bit too much, but I do think that the darkening of secondary buttons feels good.

[karmatosed]

As this now has design feedback, removing the keyword.

[audrasjb]

Moving to Future release as we are getting close to 5.4 beta 1 :)

[joedolson]

With the updated WordPress color palette, this is probably worth re-addressing.

I feel that we don't have to change the button background color in order to achieve the goal: we need the state change to be more apparent, and we could also accomplish that by using a different button outline color in the :hover state.

If the :hover color on primary buttons shifted down a couple notches (Perhaps #02163a from ​https://codepen.io/ryelle/full/WNGVEjw), we'd have a more obvious hover state without an aggressive design change.

[audrasjb]

As per today's bug scrub, I'm removing the early keyword as we don't really need this early in the release cycle.