Buttons: focus style review

[afercia]

The focus style for standard buttons in the admin is slightly "heavier" than the style applied to other form elements. This is particularly noticeable when there are adjacent buttons and form elements, see for example the first part of the screenshot below:

The second part is just an example of how pairing the form elements and buttons focus style could be visually more appealing. I'm not saying that should be done exactly like in the example and this would need some accessibility consideration and review by the accessibility team but maybe worth considering for 4.4 :) Design proposal and patches welcome.

[melchoyce]

The second part is just an example of how pairing the form elements and buttons focus style could be visually more appealing. I'm not saying that should be done exactly like in the example and this would need some accessibility consideration and review by the accessibility team but maybe worth considering for 4.4 :) Design proposal and patches welcome.

From a design perspective, I actually really like what you have here. Feels much more even.

[joedolson]

I agree with this; I can't see any advantage to having different focus states for these for any reason, and it's definitely seems cleaner to have everything better balanced.

[afercia]

Noticed (for the first time) that border-radius on the buttons seems to affect the rendering of box-shadows, at least in Chrome. Applying on the buttons the same exact border color and box-shadow value of the inputs won't result in the same, identical box-shadow. As soon as border-radius is removed, box-shadows are identical. So we may need to tweak the value a bit. Could someone confirm this? Thanks!

[afercia]

Proposed patch is a first pass. Box shadows are slightly adjusted to make them match as much as possible the form elements ones because, as pointed out, looks like border-radius on buttons affects the way browsers paint box-shadows. At least on Windows. The effect could slightly vary depending on platforms and browsers, would need some visual testing.

[helen]

Let's look at this in conjunction with #31459, but we should do it either way.

[helen]

Button updates = destruction of this patch. Let's refresh and get some screenshots of what it looks like with the updated button styles.

[afercia]

Refreshed patch. I've used the new box-shadow color rgba( 0, 115, 170, .8 ) but now when the buttons are close to other form elements (e.g. a select or an input field) their box shadow has different colors. Wondering if they should match. Even setting the exact same value, the box-shadow border-radius slightly changes the rendered colors. It would need some rgba value fine tuning.
Screenshots:

New buttons style, focused before and after the patch:

Button with the .active class, i.e. the one that looks "pressed":

Not sure I like the "pressed" state, it just looks misaligned to me :) I can understand this while clicking the button but not so much in a persistent pressed state.

[hugobaeta]

Finally took a serious look into this, and you did a phenomenal job at making them consistent @afercia. I'd love to try making them solid instead of a glow, but that's for another ticket I'm sure. I'd love to see this in 4.4 as it is an iterative step in consistency. :)

[helen]

In 35421:

Buttons: More consistent focus styling.

props afercia.
fixes #32915.