G2: Apply 12px grid to top toolbar more consistently

[jasmussen]

The G2 efforts in #18667 introduce a new 12px grid to which the user interface and elements align. A visual grid helps create rhythm and balance, and helps guide where elements should land as the UI expands. The block toolbar is designed on such a grid:

So as to not be overwhelming, the toggled state of buttons in the block toolbar are 32x32px:

This is optically well balanced.

The top toolbar is partially adhering to that grid at the moment. It's 60px tall (divisible by 12), icons are 24x24 and have 12px spacing between them, and the inserter is 32x32. The spacing to the left of the inserter is there to balance out the inserter next to the heavy dark area. But the spacing isn't totally right. Here's a suggestion to tweak that:

Another inconsistency is that button hit areas are 36x36, except the inserter which is balanced to match the block toolbar. This causes a small jump when focus travels:

Additionally, buttons on the right, including the toggled state for sidebar(s), are 36px:

So there is an opportunity to not just adjust the margins and paddings to align better to the grid, but to explore whether unifying on either 32px for all buttons, or 36px for all buttons, would make sense here.

[karmatosed]

Love it and I am very keen on anything that provides more consistency. I would lean towards 36 x 36 just because I think where we can exploring larger makes sense.

[mapk]

Oooh, grids in the top toolbar! ❤️ Thank you for this.

I wanted to note one discrepancy I've noticed. There are two areas where an icon button can live next to another icon button that has an active background color. These two scenarios seem to be treated differently.

Scenario 1 (left side)

Scenario 2 (right side)

Is there a way we can align these two better? The left side is visually more appealing with the added space in between.

As noted in #22110, the ellipses icon is optically smaller in size, but it still feels awkward to have the click area of it adjacent to the background color of the Settings icon.

[jasmussen]

Through various refactors, I would consider this one mostly addressed. I think there are opportunities to refine this further in implementation, but as a standalone ticket this seems to have mostly been adressed!