Polish focus and active styles, and do cleanups

[jasmussen]

This PR does three things:

1. It fixes a regression with the :active style for buttons. Now it works again:

2. It replaces in a whole SLEW of files, the use of 1px for border widths, to use an SCSS variable. This is a cleanup job suggested by @tofumatt, and shouldn't affect anything. I don't expect we'll ever actually want to change the value of the $border-width, but by using a SCSS variable, we can make complex SCSS math easier to understand. For example 832a6c1#diff-b40a015680110faaabe748b80f5b4cc9L32 no longer needs an HTML comment.

3. It redesigns input fields. This is what needs design feedback. Before they were square and ligth gray, now they are rounded and darker, which fixes Some input boundaries lack sufficient contrast #7053. I also changed the focus style to be bolder — this may feel heavier at first hand, but with the darker base input style I felt like this was the only way to give contrast between base and focus style. This also fixes any issues with showing input fields on gray backgrounds, as noted in Some input boundaries lack sufficient contrast #7053 (comment).

At first glance these new styles might feel a bit too heavy handed, but after a little while the reduced amount of color in the focus style actually comes across as simpler. Give it a little while to work on you.

[afercia]

3, the darker border for input fields is very welcomed from an accessibility perspective, pending design feedback. In #7053 / #8037 a different solution is explored (darkening only the bottom border), which honestly I personally don't like that much.

With regards to this PR, I have only one consideration so far: the comment
// Lightest gray that can be used for AAA contrast.

is a bit misleading for two reasons: it's AA level and 3:1 is the minimum contrast for non-text. So it should be changed to:
// Lightest gray that can be used for AA non-text contrast.

Worth reminding that for text contrast the minimum contrast ratio is 4.5:1 (with exceptions for large text) so the lightest gray that can be used is #6c7781.

[chrisvanpatten]

From a design perspective my only question is whether the border-radius should match for buttons and inputs, but overall the new design looks great. The darker border is actually kinda nice! 👍

[jasmussen]

Good catch Andrea, I'll revise the comment and add the other note as well.

From a design perspective my only question is whether the border-radius should match for buttons and inputs

This is a good catch. I'll noodle on this — the radius is the same as it is for the new buttons, but not for the old buttons. I'll see if I can unify all three somehow, or at least reduce to two.

[karmatosed]

I really like this and think it would be a benefit as is to get in. We can iterate from there. Thanks for working on this.

[tofumatt]

Looks great. There are a few little tweaks worth making before merge. Just a few commented-out lines that should be removed and a few cleanup requests if you can make them.

After that, please do 🚢

[tofumatt]

🔥

[tofumatt]

🔥

[tofumatt]

Comments should end with a period.

[tofumatt]

I know it was like that when you got here, but since we're changing it anyway, could we make this $radius-round-rectangle? roundrect is quite unfriendly.

[tofumatt]

That's a weird indentation and doesn't really quite explain this, but I think it's saying "This stacks the border on top of another border"?

I dunno, leave it if it's not clear, but since this line is already changing it'd be nice to tidy it up. 🤷‍♂️

[jasmussen]

Thanks for the reviews. Addressed feedback in 2f61bb5. Rebased and hoping the tests pass.

Noting though, that this input field change also affects checkboxes:

But I don't think that's a problem, quite the opposite actually.

[tofumatt]

Last night tests were failing a bunch (as were local installs using bin/install-wordpress.sh) because of a weird Docker permission thing. If CI is still failing on Installing WordPress... that's the same error... I guess we'll have to fix it up, but I have no idea what caused it... 😢

[jasmussen]

Also through in a micro fix for a double border:

Now:

[jasmussen]

Tests pass locally, though I'm on an old version of the dev environment where I can't run the e2e tests locally (I know, I'll get to it). Would appreciate if someone can verify whether Travis is making mistakes or whether a legit test is failing.

[tofumatt]

It's legit, sort of: #8418.

I'll see why the Docker container is messed up, but I'm not really sure why that's happening.

[jasmussen]

Rebased, squashed. Noting this causes a re-test. Hoping the tests pass now.

[jasmussen]

Merging as tests pass and this is approved, yay!

[ktmn]

Any particular reason for the 4px border radius? Everything else is 0px except buttons, I kind of preferred it that way.
For example when a select is surrounded by text the lack of border radius sort of makes it look more like a singular unit (although that's very subjective).

Side note: the dropdown arrow doesn't have the best spacing either and seems distorted (browser specific?).

I mean, maybe there's a case for it here:

so the inputs look similar to buttons, but they don't look worse without border radius either.

Also input[type=text] is has 31px height while select has 28px

[jasmussen]

@ktmn I agree the select box could use some love.

The answer is that yes, there's a reason. The reason is that it's so far the best input field design we've found that:

• Has sufficient contrast against a white background
• Looks like an input field, even when showing in otherwise square gray-bordered boxes

Gutenberg introduces a number of new design elements, and notably a number of accessibility improvements compared to WordPress core. We've tried a few other designs for input boxes that met these requirements, but so far the rounded version was the only one that passed the test for meeting all the requirements and notably feeling right in Gutenberg.

We could try reducing the border radius to 3px, perhaps. This is the same radius that stock buttons use.

[2one2]

I agree with @ktmn, having border radius on select, input, textarea fields just doesn't feel right.

And there are other issues, inconsistencies:

• select dropdown doesn't have border radius and can't be styled
• featured image button doesn't have border radius
• textarea ( post excerpt ) looks smaller in an already narrow space
• button was more distinct than other fields

[karmatosed]

A border radius even is small does have a softening effect I think is a positive impact visually. I am ok experimenting reducing, however I think overall it's a positive step.