feat: badge component

[olaf-k]

Continuation of #37 - migrated from fork branch

[github-advanced-security]

This pull request sets up GitHub code scanning for this repository. Once the scans have completed and the checks have passed, the analysis results for this pull request branch will appear on this overview. Once you merge this pull request, the 'Security' tab will show more code scanning analysis results (for example, for the default branch). Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results. For more information about GitHub code scanning, check out the documentation.

[R-Bower]

My main concerns with this component are the styles.

Size overrides

If you find yourself overriding the defaults in most of your variants, then that's probably an indicator that you should keep the styles isolated for each variant. Right now the sizes are tightly coupled to a single class with no clear benefit:

• Base size rules assume text-badge behavior (padding, border-radius, font)
• Icon/status/number badges use custom properties from base but override layout
• Icon badge needs --icon-radius and --icon-size
• Status badge needs --status-size
• Number badge needs --count-size

Isolated colors

Interesting that you chose to couple the styles but not the colors :)

There's some color overlap between variants:

• icon/text = identical ramp
• status/number = similar ramp (number has persistent black/white, but the rest looks the same)

There's a lot of potential for reuse here.

I took a stab at this, give this a once-over and lmk what you think:
#61

[R-Bower]

In the other badges, we are using emphasis for color. The design system uses emphasis for color as well. This is also true for other components. Let's keep it consistent.

[olaf-k]

the number badge mixes emphasis and variant styles, I don't mind one name or the other.

[olaf-k]

Interesting that you chose to couple the styles but not the colors :)

good point! thanks for the followup PR.