Update the button styles in Pitch style variation

[madhusudhand]

Fill and outline buttons are having different sizes in Pitch style variation.

Expectation:

Outline button size (padding) should match with fill button.

[mikachan]

I believe this is because we can't yet style the outline button via theme.json.

I think the only way to make these consistent would be to remove the custom padding from styles.elements.button.spacing.padding.

@richtabor @beafialho what do you think we should do here?

[beafialho]

I believe this is because we can't yet style the outline button via theme.json.

What's keeping us from doing that?

[mikachan]

This variation is adding additional padding to buttons:

"padding": {
	"top": "min(1.25rem, 3vw)",
	"right": "min(2.25rem, 5vw)",
	"bottom": "min(1.25rem, 3vw)",
	"left": "min(2.25rem, 5vw)"
}

I think this works really well overall, however it isn't applied to the outline style of buttons, so it causes the issue in @madhusudhand's screenshot. I don't think we're setting button padding anywhere else, so I think that's why it's the first time we've seen this.

[mikachan]

... I completely misread your question, sorry 🙈

What's keeping us from doing that?

We can't yet style the outline buttons using theme.json. There's an open issue here: WordPress/gutenberg#42794, however, I'm not sure how likely it is that Gutenberg is going to support this any time soon.

[beafialho]

Thank you @mikachan! We could add that issue to #30, but if it doesn't happen soon, my suggestion is to align the padding of the filled button with the outlined button. However, I'd like to hear @richtabor 's thoughts.

[madhusudhand]

@beafialho @mikachan Found a work around to fix the issue, created #237