Update WP-admin Buttons

[hugobaeta]

Following the work done on ticket #31234, the buttons needed some updating as well to comply to the new default color scheme.

Used the opportunity to evolve the style of the buttons ever so slightly to match everything else better (removal of the 1px light inset box-shadow on the top, for example).

Here's a comparisson:

Tracking label: #a11y-color

[hugobaeta]

Patch with updated CSS

[helen]

Not sure I can tell if they're illustrated above - focus, hover, and active states?

[hugobaeta]

For clarification, on the comparison image I posted, the top row is normal state, the bottom row is hover state.

[paulwilde]

These changes should also apply to .wp-slider .ui-slider-handle for consistency. This is the slider used on the Revision screen.

[hugobaeta]

Replying to paulwilde:

These changes should also apply to .wp-slider .ui-slider-handle for consistency. This is the slider used on the Revision screen.

I focused on the buttons here, not other interaction elements. Would you like to make a patch for that slider?

[afercia]

Please consider color contrast ratio should be at least 4.5:1. In the accessibility team we discussed a while ago the contrast issue, noticed there are several other places in the admin that need some love (most notably: primary buttons, TinyMCE buttons, login screen links and "orange" things) but decided to postpone for now. So it's not a priority at the moment but since you're working on primary buttons, maybe it would be a nice opportunity :)

[hugobaeta]

Replying to afercia:

Please consider color contrast ratio should be at least 4.5:1. In the accessibility team we discussed a while ago the contrast issue, noticed there are several other places in the admin that need some love (most notably: primary buttons, TinyMCE buttons, login screen links and "orange" things) but decided to postpone for now. So it's not a priority at the moment but since you're working on primary buttons, maybe it would be a nice opportunity :)

My proposed change is already an improvement in contrast.

The current primary buttons (blue) in the admin have a contrast ratio of 2.97.
The ones I propose have a contrast ratio of 3.04

They are not the recommended ratio... I know. But if this already feels like a big change, imagine if we went all out? The easy solution here is to reverse the styles: Hover (the bottom one) becomes the normal state of the button. That one has a contrast ratio (my version) of 5.25.

what do y'all think?
cc/ @melchoyce @helen

[melchoyce]

I like how subtle the changes are on the default button states — losing the shine makes them feel fresher without making them feel like entirely different buttons. I think they'll go better with some of the more recently refreshed screens in the admin. The hover on the primary button feels really drastic, though. The brightening + darker borders works well on the secondary buttons, but the full-dark on the primary almost makes it feel more like a pushed state in a way the old primary hover didn't. Maybe the primary button background should also get a little brighter on hover.

[joedolson]

From an accessibility perspective, I can understand if it would be too much of a UI change right now to make the contrast meet WCAG requirements. Is it possible to add a slight text shadow on the button text to compensate? Having a dark delimiter around the text can improve readability, by creating an outline with a higher contrast that demarks the text for low-contrast readers. If the contrast between the shadow and the background & the shadow and the text meets WCAG guidelines, that can make the text considerably more readable.

[Kelderic]

I'd like to echo melchoyce that the darkened button seems more like a pressed state than a hover state. When I was with a marketing company a few years ago we did user testing on hover states, and a high majority of users felt brighter signified a potential to interact while darker signified and active interacting element; clicked in the case of a button.

[hugobaeta]

Replying to Kelderic:

I'd like to echo @melchoyce that the darkened button seems more like a pressed state than a hover state. When I was with a marketing company a few years ago we did user testing on hover states, and a high majority of users felt brighter signified a potential to interact while darker signified and active interacting element; clicked in the case of a button.

I agree with you both, I usually go lighter on hover too. But I was trying to not change the interaction patters, only the actual colors of the buttons. If you notice, the current ones in admin have a dark hover (you can see them in the screenshot above).

I'll do a new pass, taking in all feedback in this thread, soon ;)

[melchoyce]

Replying to hugobaeta:

But I was trying to not change the interaction patters, only the actual colors of the buttons. If you notice, the current ones in admin have a dark hover (you can see them in the screenshot above).

Yeah — the current buttons are also a little wonky, I think it works a little better in them because they still have the highlight on top. Removing that in the new buttons adds to the indented look.

Looking forward to your next iteration :)

[afercia]

Replying to hugobaeta:

I usually go lighter on hover too.

That's the way it should always be IMHO, I'd just add "on hover/focus".

But I was trying to not change the interaction patters, only the actual colors of the buttons.

Don't bee too shy :)

If you notice, the current ones in admin have a dark hover

Yup and IMHO that's basically wrong, darker means "off", lighter means "on".

I'll do a new pass, taking in all feedback in this thread, soon ;)

Thanks very much @hugobaeta

[helen]

Can we just update the colors for 4.2 and look at further changes later, given that we're into beta?

[DrewAPicture]

Per the above-linked Slack discussion, we're going to punt this to a future release, and handle the button color changes in #31234.

[hugobaeta]

Did color updates to buttons (and other missing elements) on #31234

Will revisit this ticket, with all we discussed, for next release ;)

[paulwilde]

Will this be considered for 4.3? If so I'll create a patch for .wp-slider .ui-slider-handle (See ticket:31459#comment:3).

[hugobaeta]

Replying to paulwilde:

Will this be considered for 4.3? If so I'll create a patch for .wp-slider .ui-slider-handle (See ticket:31459#comment:3).

Yes! @michael-arestad showed interest in helping with this too. Should we keep this ticket and iterate on it here?

[hugobaeta]

Revision of Buttons style update, with new colors for accessibility

[hugobaeta]

Following up on the accessibility concerns, I did a lot of work on color contrasts and also pleasant aesthetics for the buttons refresh. I just uploaded a new patch that focuses on the primary buttons (didn't do major changes to secondary buttons, aside from the generic removal of the 1px highlight on them - I'd still like the shadows to be more solid).

(short video of this: ​https://cloudup.com/iTnemi76nAE )

In my proposal, the button background color doesn't reach a 4.5:1 ratio for WCAG AA compliance, but it's close (discussed this with @helen, and we both agreed that the compliant background blue was too dark and unpleasant). To solve this, I added a text-shadow to the white text, that bumps this up to a WCAG AA compliance. @afercia, can you please audit this too to be sure?

As discussed before, the revised states for the button make more sense now: Hover is slightly lighter.

The screenshot is just a quick representation, but this is a patch worth seeing live on the admin, so apply it and test it, please!

I ended up adding some more shades of blue to the Accent Colors section in my ​CodePen for all things color in core. I'll update the Design Handbook when I have a chance, but for now this serves us well for reference. Also, I might need to add darker variations to the Accent blues, let me know @afercia if the borders need to be darker :)

@michael-arestad, What do you think of the style update? Should we also add a subtle transition to them?

[afercia]

Thanks very much @hugobaeta. Would like to hear the Accessibility team opinion :)

[helen]

Let's get this going.

[hugobaeta]

Update buttons style, including tweaks for color schemes, and update to press this split button

[hugobaeta]

Fixes text-shadow on Press This split button

[hugobaeta]

Just added a new patch (sorry for the two uploads, forgot something on the first) )that optimizes the code for the buttons a little bit, cleans up a few of the changes I made before. I also tested and changed the .scss mixin for the color schemes so they reflect the new button styles and patterns (lighter button on hover, etc). Finally, per @helen request, I tweaked the Press This split button to match the new style, but I had to make a couple of changes to make it work. This needs some other set of eyes on it, I'm sure, but I think it's on the right track.

Some screenshots with examples:

[helen]

@hugobaeta: Have you had a chance to take a look at the tweaks yet? I'll copy them here just so we all have an easy reference:

• ease on the active text color (too light, looks disabled)
• increase shadow contrast (notice midnight scheme)
• Increase box-shadow on larger buttons
• remove translateY from split-button (Press This)

[afercia]

Adding a note here as reminder, would be great to do this in conjunction with #32915.

[hugobaeta]

• Lightened active text color

[hugobaeta]

Was trying to write a decent commit message, but apparently it didn't went through with the patch...

I did all the needed fixes:

• Lightened the active text color;
• increased the text-shadow contrast (for color schemes)
• Increased box-shadow on the hero-button
• removed translateY from the split-button (Press This)

Note, @afercia - I purposefully didn't touch the outline on the focus styles in these patches. I was thinking of leaving that for your ticket, since it's already open.

Also, another note, it's important to remember that controlling contrast in the color schemes is a complicated business, since it all depends of the colors people use there. @helen mentioned the lack of contrast on the Midnight scheme, but actually there are worst ones. The only way we could control that would be to use a Sass library to assess color contrast between text color and button background. Maybe ​something like this, but I know I've seen more evolved solutions, just need to research it better if that's the way we wanna go. Either way, I think this is out of scope to this ticket, and should be addressed elsewhere IMO ;)

[afercia]

Replying to hugobaeta:

Note, @afercia - I purposefully didn't touch the outline on the focus styles in these patches. I was thinking of leaving that for your ticket, since it's already open.

@hugobaeta thanks very much. Would appreciate your feedback on #32915 :)

[johnbillion]

Can some updated screenshots be added please?

[hugobaeta]

@johnbillion, not much has changed since last screenshot, but here are some animated gifs so the states can be seen:

[helen]

In 34948:

Buttons: Update styles and colors.

• Aligns with the color standards. See ​https://make.wordpress.org/design/handbook/foundations/colors/
• Creates a consistent interaction experience between states.
• Improves contrast and accessibility.

props hugobaeta, afercia, melchoyce, michael-arestad.
fixes #31459.

[johnjamesjacoby]

The text-shadow property added to .wp-core-ui .button-primary and friends in [34948] is causing some ugliness for plugins that introduce their own color schemes.

Screenshot's imminent.

[johnjamesjacoby]

WooCommerce - Pink button, white text, now with blue text-shadow

[johnjamesjacoby]

Custom teal admin color scheme - Primary button, now with blue text shadow

[johnjamesjacoby]

I'm embarrassingly unfamiliar with many of our admin color-sheme mixins, but rgba() seems to make this a bit more adaptable.

[johnjamesjacoby]

My 30 second attempt at improving this ended up being:

	text-shadow: 0 -1px 1px rgba(0, 0, 0, .23),
		1px 0 1px rgba(0, 0, 0, .23),
		0 1px 1px rgba(0, 0, 0, .23),
		-1px 0 1px rgba(0, 0, 0, .23);

...but I'm unsure how that translates to mixins or whether or not there's any history behind not using rgba() for weird little quirks like these.

[hugobaeta]

Hey @johnjamesjacoby - The text-shadow color is relative to the button color. If you check out the mixin in the color schemes Sass folder you can see how I did it. The color formula for the text shadow is basically darkening the button color by 15%, like so:

darken( $button-color, 15% )

This text shadow is a new thing, and is there to help with color contrast for accessibility. Doing a black text shadow with rgba would not bring the same color harmony as darkening the button color. The plugins that customize the admin can use the formula in the mixin to generate updated color schemes.

Hope this helps!

[ocean90]

@hugobaeta Should we update the blue color for disabled buttons? See ​https://wordpress.slack.com/archives/core/p1445007736000576.

[helen]

In 35327:

wp_die(): Update colors and button styling.

see #34388, #31459.

[helen]

Reopening for 46.

[helen]

In 35422:

Buttons: Screen Options/Help shouldn't have active styling.

see #31459.

[pento]

grunt precommit is adding a couple of extra lines to common.css after [35422].

[pento]

In 35448:

Buttons: Add some vendor prefixes missed in [35422].

See #31459.

[hugobaeta]

Replying to ocean90:

@hugobaeta Should we update the blue color for disabled buttons? See ​https://wordpress.slack.com/archives/core/p1445007736000576.

Definitely, I missed that. I'm not in a place where I can make a patch right now, but did a quick inspector tweaking and if someone could make a patch for it, that would be great:

The colors are:

color: #66C6E4 !important
background: #008EC2 !important;
border-color: #007CB2 !important;

The color schemes mixin seems to be making the right disabled version correctly for those, so no worries there.

[ocean90]

In 35697:

Buttons: Update colors for disabled buttons.

Props hugobaeta.
Fixes #31459.