UI Components, settle on 40px and 32px "small" sizes.

[jasmussen]

UI components across the editor (input fields, buttons, etc.) are currently a range of sizes, between 32px, 36px, and 40px:

The inserter button is 32x32, the other buttons are 36x36	Buttons here are 36px, including the toggles

Toggle buttons in the block toolbar are 32x32	Inspector controls are standardizing on 40px

There's an opportunity here to standardize and make consistent the controls, so there's less guesswork as to which dimensions controls should have. We could do this:

• All controls (inputs, segmented controls, sliders, dropdowns, and buttons) are 40px by default.
• All toggles (block toolbar button, toggles in the inspector such as quick transforms, the active state inside a segmented control) are 32x32px.
• The Button component has a 32px small version, to be used when the button is used in context of toggles, such as the top toolbar.
• The 36px size is retired entirely.

Here's a grid of metrics to illustrate how this could work:

Both 32 and 40px are base8 friendly, which would simplify the grid system. And with a single default (40px for controls, 32 for toggles inside), there would be no guesswork as to which size to use. The 32px button size would be the exception to use, as noted, in the top toolbar for buttons.

[mirka]

I'm very happy to see this! We'll start working out the technical logistics in #46741.

[jasmussen]

I wonder if we can close this one as fixed?

[mirka]

Sure. Closing in favor of the following tracking issues, where there are just a few more things we're working on:

• Components: Logistics for transitioning to new sizes #46741
• Components: Deprecate 36px default size #65751

[jasmussen]

Thanks for all the work!