Discussion: Badges - naming and variants.

[sturobson]

Currently the vf-badges followed the primary, secondary, tertiary naming conventions.

But we have moved to reduce this to a default grey and the (primary) blue.

There's been discussion about moving towards the same naming convention that the vf-banner is using with - warning, success, error etc.

I think you can have both - and here's a few existing design systems and CSS frameworks that do this:

https://getbootstrap.com/docs/4.3/components/badge/
https://baseweb.design/components/tag/
https://design.gccollab.ca/component/badges/
https://bulma.io/documentation/elements/tag/

and a system that differentiates them as two separate components:

https://atlassian.design/components/badge/examples
https://atlassian.design/components/lozenge/examples

My other thought in seeing this from @khawkins98

Do we want to leverage the colour systems tints and shades to match the vf-badge when it's inside a `vf-banner?