Add a couple of multi-purpose variants

[JohnBernardsson]

Would be nice to have a couple more variants with maybe some "agnostic" naming (secondary/tertiary? - dumb ideas but to throw in something) so users can customize them and use them however they deem necessary. I have seen similar flexibility options in other Design Systems like Material.

Example: One could be used as a "secondary" or "accent" color for the company brand (so they don't depend on only 1 color brand), and then other can be used as some "information" variant.

This also somewhat relates to existing discussion: #1690

[claviska]

We currently have five variants for buttons, callouts, etc. as well as corresponding appearances for each. Custom variants can be added through the use of classes, as shown here: https://codepen.io/omnifides/pen/yyeqEyQ

We suggest using classes to piggyback on existing variants for a few reasons:

1. It's easier to start with a baseline style and modify it then to rewrite all the styles from scratch
2. It creates a clean separation between the library's styles and your customizations, making it easier to maintain
3. It's doesn't break type safety in tooling

If there's a request for a specific, general purpose variant, we can consider that but as soon as we add "secondary" someone will want "tertiary". In all likeliness, these should be custom variants.

[JohnBernardsson]

@claviska sorry, I didn't see this comment earlier...

I guess doing some customizations with classes could work... But I am wondering how can we maintain parity with UX team on Figma. Is this something they can add too to the Figma Kit? (Never used figma more than to see mocks, sorry if this is a dumb question).

Our main problem would be that non-creator UX team members would need to be able to create mockups with these custom variants, and non-creator devs should be able to use them as per the mockup. I guess if the Figma part is possible we should be fine...