Button edge-case refinements

[aaronshekey]

A number of button changes here, mostly focused on little edge-case polish.

Changes on the right.

1. Focused states are important. I think we should maintain the focused border regardless of hover states.
   
2. Selected buttons should still have a hover state since you can still interact with them.
   
3. Primary button removes text shadow in favor of a darker color for improved readability.
   
4. Green is slightly darker site-wide. Improves readability by removing some of the fluorescence.
   
5. Primary button focus states have been adjusted slightly to account for the darker green.
   
6. Focused buttons within the button groups are now the highest in the z-order as opposed to being overlapped by the button to the right.
   

[mdo]

Not stoked about the last two changes. I'm in favor of darkening the text shadow, but not reversing the direction. The text color change on the disabled state also feels off—maybe a little muddy?

[aaronshekey]

I can revert the shadow direction, but did so to match the light source of all the gradients throughout Primer. Do you just not like it visually or is there some rationale to having the shadow cast opposite the light source?

Darkened the disabled primary button. Is this any better or should I drop it?

[mdo]

The intent of the text-shadow is to illicit an embossed effect of sorts. The text isn't sitting on top of the button, it's inset. Still not a fan of the disabled primary button change :).

[aaronshekey]

@mdo Okie dokie. I've reverted those last two points and updated the screengrabs. I disagree that they should be embossed, but hey, it's your huge mistake, not mine 😉

[mdo]

Originally I had no text-shadow on them, but that looked off a bit. I wouldn't be opposed to seeing the colors change so we can nuke the text-shadow entirely though—we don't have one on any of our other buttons I think.

[aaronshekey]

I wouldn't be opposed to seeing the colors change

Try these new colors out. I think it improves readability without losing the soul of the original green. It only loses a little fluorescence is all.

[jasonlong]

Most of these are 👌 by me.

I'm not sure how I feel about darkening the primary buttons though. Most of our brand colors are pretty vibrant and this one feels pretty heavy.

[bleikamp]

Definitely like most of these changes.

I agree with @jasonlong's point, and I think my only big hang up would be the changes to the primary button color. Maybe it's something we'd use for a few days and wouldn't notice again, but it definitely feels a little out of place in the screenshots.

I would be open to adjusting our colors at some point, as I think the green, red, and orange in particular are pretty bright. But maybe that's a conversation for another PR? It seems like we could get this merged pretty quickly if we moved that conversation to another PR.

[fabianperez]

👎 on the green. Everything else looks good.

[aaronshekey]

Perhaps if we flatten the green buttons by getting rid of the top gradient highlight. I love the green as a large swatch, but when it's applied to thin type and buttons with white text, it really lacks contrast.

I think this is a really good example of that.

I think the other stuff is shippable. I just worry that the focus state for buttons might get a little obnoxious in practice. I'll sit with it for a bit.

[bleikamp]

Perhaps if we flatten the green buttons by getting rid of the top gradient highlight

I'd like to avoid going totally flat, but I perhaps a more subtle gradient? Affordance still seems important, and one flat button seems a little off, too.

[jasonlong]

Agreed that we should tackle any brand color and UI element tweaks separately. I think we can definitely make some improvements, but there are a lot of use cases to consider.