Standardize inputs styling and consider to darken the border color

[afercia]

Comparing inputs (checkboxes, input, textarea, select) in the Gutenberg UI, they don't always use the same styling.

Checkboxes in the meta box area and in the sidebar:

In the meta box area, they have rounded corners and the border color is a very light #e2e4e7 ($light-gray-500). In rhe sidebar, they have square corners and the border color is a slightly darker #b4b9be

Not sure why all the input, select, and textarea elements in the meta box area should have rounded corners. From an a11y perspective that's a minor issue, I guess that's more of interest from a design perspective. I'd rather recommend to darken the borders as they very very light.

Textarea in the sidebar:

Inherits the border color from WordPress forms.css and the color is a gray #ddd. I guess there should be some consistency and all the inputs, textarea, selects, should always use the same border color. It would be great to use the same scss variable for all of them.

I wouldn't recommend to go for anything lighter than the colors currently used in WordPress. Worth also noting the border color should be even a bit darker, since in WordPress the actual contrast for form fields is helped by the fact the background is almost always gray.

Currently, the overall contrast of the form fields is lower than in WordPress. I'd hope for a contrast that is, at least, equivalent.

[karmatosed]

👍 to unify the color and the darker works.

[paulwilde]

See also #4963.