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.
UI components across the editor (input fields, buttons, etc.) are currently a range of sizes, between 32px, 36px, and 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:
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.