feat(badges): first batch of design updates for the badge component as part of SHINE

[mukunku]

Summary

This is for SPARK-59 and updates the Badge component styles based on the new designs.

This PR should only be merged after #2013 is merged as it was branched off of that branch.

Changes

The PR does the following:

• Updates styles for Default badges
• Removes the Badge counts section
• Adds a new Tag badges section
• Updates User badge designs
• Removes xs size and replaces it with lg

What is NOT in scope for this PR:

• Number count badges
• Icon badges
• Badge states
• Filled badges
• Cleaning up the Svelte API for the Badge component

Breaking Changes

• xs size was removed
• s-award-bling class was renamed to s-bling (used in some badge templates)

How to Test

Checkout the new styles in Stacks Docs and Stacks Svelte:

• Stacks Docs: https://deploy-preview-2051--stacks.netlify.app/product/components/badges/
• Stacks Svelte: https://deploy-preview-2051--stacks-svelte.netlify.app/?path=/docs/components-badge--docs

How to Review

I recommend excluding all .ico files in the GitHub file diff for a nice reviewing experience:

[CGuindon]

I think this all works! Any issues I'm seeing are not related to this PR/work (issues with colors). so I'm going to approve this and move on to the next!

[giamir]

@mukunku @dancormier Should we expose the Svelte component to consumers as part of this update?

If we are showing it in storybook we probably should exposing it in the index.ts as well I think.

[dancormier]

Thanks for taking this on @mukunku and thanks for the bling fixes ❤️ Since many variants are yet to be designed (I saw a banner in the Figma saying "Variants below will be done separately — need additional mock ups first"), I took this opportunity to remove them from the Less for now and do a refactor (see 4132cad).

I agree w/ @giamir that we should expose the Svelte component as well to consumers. It'll need a some updates (most notably, I think "award" can be merged into "variant") but I think the changes won't be too crazy. Let me know if you'd like help with that or if you want any opinions on the API.

[mukunku]

Hey @dancormier , can you kindly take a look at the PR again when you get the chance?

As discussed I made the following changes:

• Reverted your commits 🙃 (Happy to help with those changes as a follow-up 🙏🏼 )
• Fixed font-weight issue for rep badges (thanks for catching).
• Switched line-height from 126% to var(--lh-md) which is 128% it seems.
• Adjusted Badge Size examples section:
  

I also exposed the Badge Svelte component in index.ts as mentioned by Giamir.

[dancormier]

It's looking good @mukunku! I think this is in a good place to be merged. I have one tiny suggestion but otherwise it's good to go. Thanks for the great work and your patience ❤️

[dancormier]

Since the Svelte component is now exposed to consumers, we should add the svelte link and update the figma link here

[mukunku]

Thanks, Dan. I forgot about those: 3a6647d

I guess we'll update all the svelte links after v3 is live as they all point to the beta url at the moment?