Add styles for small, toggle and tertiary buttons

[adamwoodnz]

Closes #111

Adds 3 style variations:

• Toggle (See Developer design, states are based on Design Library small button)
• Tertiary (naming based on Gutenberg storybook)
• Small (default with reduced padding, also see Design Library small button)

I've made Tertiary and Toggle small by definition, based on their semantics and usage in the Developer designs, and to avoid the complexity in supporting both large and small. We can add these variations if need be later.

Screenshots

States

State
Static
Hover
Focus
Active
Active Focus

Developer

How to test the changes in this Pull Request:

1. Test it with https://github.com/WordPress/wporg-developer/pull/292, the filters and version selector use all these styles
2. Create buttons in the editor and apply the style variations

[jasmussen]

Looks good.

• I wonder if the hover on the toggle could be the same as on tertiary. Not blocking, and happy to defer to @fcoveram when he's back from AFK.
• I don't know that we need to increase the inner white halo on the active state on the small and default. I also wonder if the black for active may not be a bit overwhelming for at least toggle, and tertiary styles.

Small pet peeve, is it too late to rename "Tertiary" to "Text"? The former suggests a hierarchy where none exists. If we can't, that's fine.

[ryelle]

I second the suggestion to rename "tertiary" to "text," that describes the button better too.

Perhaps a question for design, will we need small/toggle/tertiary variations on dark backgrounds? Or small outline buttons? Large text buttons?

Since variations can't combine, we'd need to create potentially 16 individual variations: [default, outline, text, toggle] * [small, normal] * [on dark, on light] … and this picker already feels like a lot 😅

If we might need more, maybe we could have toggles or something, like the isSmall prop on the GB button.

We can't go back on the "Default/Filled on dark" "Outline/Outline on dark" split, because those are already in use on production… but even just helper class that can be manually applied might help.

[jasmussen]

Perhaps a question for design, will we need small/toggle/tertiary variations on dark backgrounds? Or small outline buttons? Large text buttons?

I don't think so. At the moment, the Theme Directory is dark, but it's not using the toggles:

[adamwoodnz]

even just helper class that can be manually applied might help

Yeah I did consider whether this needed to be something exposed in the editor. If we go with the is-small helper class, should the Toggle and Text variations be defined large by default as well then?

[adamwoodnz]

should the Toggle and Text variations be defined large by default as well then?

I think so, otherwise the size difference would be unexpected. I've made this change now, so there are less variations:

Frontend: