Reset / Clear buttons should have a consistent styling

[afercia]

Describe the bug Various user interface components display a "Reset" or "Clear" button. These buttons have at least 3 different styles. For better accessibility and UI consistency, they all should use the same styling.

To reproduce Steps to reproduce the behavior: 1 WordPress 5.5

2. observe for example the following button:
   • paragraph block -> sidebar -> typography -> font size Reset button
   • paragraph block -> sidebar -> color settings -> custom color Clear button
   • image block -> sidebar -> image dimensions -> Reset button

Expected behavior

• these buttons to have the same styling
• also, for accessibility, they need to be identified as user interface controls so they need a border: the image dimensions -> Reset button looks like text

Screenshots

Editor version (please complete the following information):

• WordPress version: 5.5 trunk
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? default

[afercia]

Additionally: the buttons font-size of 11px is really too small. This applies to all the is-small buttons and should be improved holistically.

[folletto]

Thanks for finding this out. It's definitely something we should look into, especially the alone "Reset" that doesn't feel even clickable.

[noahshrader]

Agreed. Thanks for catching these!

For the buttons referenced in the Typography and Color settings sections, those are both the "secondary" button variation, just in different states (the first is disabled; the second is resting). The difference is that the first one is given a custom height to match the vertical height of the inputs, which makes sense. Setting that to the default height of a small button (which is 6px shorter) looks imbalanced.

I played around with bringing that 30px height to the "Clear" buttons, but that's going to start extending the exception out which will lead to more inconsistencies. Maybe we do take another look at the small button styles.

With the "Reset" button, I quickly put together a couple of screenshots: one with the secondary button styles applied (which may or may not blend with the options to its left), and one with the tertiary button style. Also, brought it closer in proximity to the options it's resetting.

Option 1

Option 2

Additionally: the buttons font-size of 11px is really too small

@afercia Did you have any recommendations here?

[afercia]

For the button referenced in the first column, those are both the "secondary" button variation, just in different states (the first is disabled; the second is resting).

While disabled controls don't have contrast requirements, I'm not sure entirely removing the shape of a button when it's disabled makes things any better. Without the shape of a button, this control can't be even identified as a button. It looks like just text. I do realize this is part of a broader issue though, and should be discussed separately. See also #23890.