Make WordPress Core

Opened 10 years ago

Closed 9 years ago

Last modified 6 years ago

#31459 closed task (blessed) (fixed)

Update WP-admin Buttons

Reported by: hugobaeta's profile hugobaeta Owned by: hugobaeta's profile hugobaeta
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.2
Component: Administration Keywords: has-patch has-screenshots
Focuses: ui, accessibility, administration Cc:

Description (last modified by rianrietveld)

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:

http://cl.ly/image/2x351c0H3F1q/admin-buttons-old-new.png

Tracking label: #a11y-color

Attachments (8)

update-admin-buttons.diff (3.3 KB) - added by hugobaeta 10 years ago.
Patch with updated CSS
update-admin-buttons-review.diff (2.6 KB) - added by hugobaeta 9 years ago.
Revision of Buttons style update, with new colors for accessibility
update-admin-buttons-review-2.diff (7.6 KB) - added by hugobaeta 9 years ago.
Update buttons style, including tweaks for color schemes, and update to press this split button
update-admin-buttons-review-3.diff (7.7 KB) - added by hugobaeta 9 years ago.
Fixes text-shadow on Press This split button
update-admin-buttons-review-4.diff (8.5 KB) - added by hugobaeta 9 years ago.
- Lightened active text color
Screen Shot 2015-10-13 at 12.54.05.png (50.8 KB) - added by johnjamesjacoby 9 years ago.
WooCommerce - Pink button, white text, now with blue text-shadow
Screen Shot 2015-10-13 at 12.53.55.png (37.7 KB) - added by johnjamesjacoby 9 years ago.
Custom teal admin color scheme - Primary button, now with blue text shadow
Screen Shot 2015-10-13 at 13.13.11.png (348.9 KB) - added by johnjamesjacoby 9 years ago.
I'm embarrassingly unfamiliar with many of our admin color-sheme mixins, but rgba() seems to make this a bit more adaptable.

Download all attachments as: .zip

Change History (64)

@hugobaeta
10 years ago

Patch with updated CSS

#1 @helen
10 years ago

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

#2 @hugobaeta
10 years ago

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

#3 follow-up: @paulwilde
10 years ago

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

#4 @SergeyBiryukov
10 years ago

  • Milestone changed from Awaiting Review to 4.2

#5 in reply to: ↑ 3 @hugobaeta
10 years ago

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?

#6 @joedolson
10 years ago

  • Focuses accessibility removed

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


10 years ago

#8 @DrewAPicture
10 years ago

  • Keywords 4.2-beta added

#9 follow-up: @afercia
10 years ago

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 :)

#10 in reply to: ↑ 9 @hugobaeta
10 years ago

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

#11 @melchoyce
10 years ago

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.

#12 @joedolson
10 years ago

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.

#13 follow-up: @Kelderic
10 years ago

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.

#14 in reply to: ↑ 13 ; follow-ups: @hugobaeta
10 years ago

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 ;)

#15 in reply to: ↑ 14 @melchoyce
10 years ago

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 :)

#16 in reply to: ↑ 14 @afercia
10 years ago

  • Focuses accessibility added

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

#17 @DrewAPicture
10 years ago

  • Owner set to hugobaeta
  • Status changed from new to assigned

#18 @helen
10 years ago

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

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


10 years ago

#20 @DrewAPicture
10 years ago

  • Keywords 4.2-beta removed
  • Milestone changed from 4.2 to Future Release

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

#21 @hugobaeta
10 years ago

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

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

#22 follow-up: @paulwilde
10 years ago

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).

#23 in reply to: ↑ 22 @hugobaeta
10 years ago

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?

Last edited 10 years ago by hugobaeta (previous) (diff)

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


9 years ago

@hugobaeta
9 years ago

Revision of Buttons style update, with new colors for accessibility

#25 @hugobaeta
9 years ago

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).

https://cldup.com/yYIHvk8b7y.png

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?

Version 2, edited 9 years ago by hugobaeta (previous) (next) (diff)

#26 @afercia
9 years ago

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

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


9 years ago

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


9 years ago

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


9 years ago

#30 @rianrietveld
9 years ago

  • Description modified (diff)

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


9 years ago

#32 @helen
9 years ago

  • Milestone changed from Future Release to 4.4

Let's get this going.

@hugobaeta
9 years ago

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

@hugobaeta
9 years ago

Fixes text-shadow on Press This split button

#33 @hugobaeta
9 years ago

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:

https://cldup.com/1FpJHsuPp7.png

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


9 years ago

#35 @helen
9 years ago

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

#36 @afercia
9 years ago

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

@hugobaeta
9 years ago

  • Lightened active text color

#37 follow-up: @hugobaeta
9 years ago

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 ;)

Last edited 9 years ago by hugobaeta (previous) (diff)

#38 in reply to: ↑ 37 @afercia
9 years ago

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 :)

#39 @johnbillion
9 years ago

  • Keywords has-patch needs-screenshots added

Can some updated screenshots be added please?

#40 @hugobaeta
9 years ago

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

https://cldup.com/Vuyoh2w5Pe.gif

https://cldup.com/yLp8IzwIB4.gif

https://cldup.com/RQhdmMvaaE.gif

Funny enough, looking at these gifs in one place brings up some stuff:

  • hero-button has no outline on focus
  • Slipt-button in Press This is a pain, because it doesn't use any of the normal wp-admin button styles - it's a complete separate button, and the main notable different I spot here is the text weight being different
  • seeing the buttons zoomed in like this also makes me think about the inner box-shadow on :active... maybe it needs some blur to soften it a bit. Thoughts?
Last edited 9 years ago by hugobaeta (previous) (diff)

#41 @helen
9 years ago

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

In 34948:

Buttons: Update styles and colors.

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

#42 @johnjamesjacoby
9 years ago

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
9 years ago

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

@johnjamesjacoby
9 years ago

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

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


9 years ago

@johnjamesjacoby
9 years ago

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

#44 @johnjamesjacoby
9 years ago

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.

#45 @hugobaeta
9 years ago

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!

Last edited 9 years ago by hugobaeta (previous) (diff)

#46 follow-up: @ocean90
9 years ago

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 years ago

#48 @helen
9 years ago

In 35327:

wp_die(): Update colors and button styling.

see #34388, #31459.

#49 @helen
9 years ago

  • Keywords has-screenshots added; needs-screenshots removed
  • Resolution fixed deleted
  • Status changed from closed to reopened
  • Type changed from enhancement to task (blessed)

Reopening for 46.

#50 @helen
9 years ago

In 35422:

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

see #31459.

#51 @pento
9 years ago

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

#52 @pento
9 years ago

In 35448:

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

See #31459.

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


9 years ago

#54 in reply to: ↑ 46 @hugobaeta
9 years ago

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:

https://cldup.com/y6ZhU_8Lzw.png

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.

#55 @ocean90
9 years ago

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

In 35697:

Buttons: Update colors for disabled buttons.

Props hugobaeta.
Fixes #31459.

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


6 years ago

Note: See TracTickets for help on using tickets.