Badge variants

[ninarojc1]

Badge https://vanillaframework.io/docs/patterns/badge

I used badges and I got a couple of comments that they are hard to read. Can we adjust them to improve the readability of the numbers?

We would also need more variants in color, like blue (link) and muted black.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-13927.

This message was autogenerated

[danielmutis]

The idea is valid. @mattea-turic to look at the accessibility of the component (font weight and spacing). App mafia will discuss the use of status labels v. badges.

[apollo13]

I'd also love to see more variants. Basically I'd love to use the color coding chips have for badges as well (https://vanillaframework.io/docs/patterns/chip#colour-coding). In my case I am using badges to show how many tasks of an ansible run are ok/failed/changed:

[dgtlntv]

Design system contribution meeting:

• Vertical spacing is addressed by a bug fix in #5569 horizontal padding we agree should be increased (0.375rem).
• In the design system contribution meeting we think that the font weight is ok like it is currently.
• In the design system contribution meeting we agree that we should have semantic colors for badges.

Tier: Global Priority: Medium

[jmuzina]

I am currently implementing semantic badge colors in Pragma here - if we need it in Vanilla we can use this as reference. https://github.com/canonical/pragma/pull/302

[jmuzina]

@ninarojc1 @dgtlntv Can I find the semantic-colored badge variants anywhere in Figma? It will help me document this component in SHI.

[jmuzina]

Implemented in Pragma (PR, Demo)