chore(bling): update to SHINE styling

[dancormier]

SPARK-58

---

https://deploy-preview-2013--stacks.netlify.app/product/components/bling/

TODO

• Component styles are updated in Stacks Classic
  • Add default style
  • Add filled modifier
  • Add size modifiers (sm, lg, default)
  • Add activity variant
  • Add rep variant
• Add breaking changes to the v2 → v3 migration guide (see SPARK-60)
• Rename to bling
  • Component uses s-bling class
  • Documentation refers to component as Bling
• Update documentation with new modifier/variant examples
• Update documentation with copy to describe newly-updated component
• Update Svelte component
  • Update name to Bling
  • Add filled bool prop
  • Add size string prop
  • Add activity, rep, null (default) to type prop
  • Remove children snippet prop
  • Update markup to match updated markup
  • Update examples to reflect above changes
• Add changeset

Follow up

We'll need to follow up on this PR once a few other changes have been made to the system:

• The activity variant will need to be changed to pink colors once added
• Visual regression images will need to be regenerated once color palettes are updated

The docs

I have not put too much consideration into the docs. @CGuindon if you have an idea of how these should be updated, let me know and I'll add those changes.

Update Mon Nov 10, 2025: I've updated the docs per the Figma as suggested.

[changeset-bot]

🦋 Changeset detected

Latest commit: cb7f683

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	cb7f683
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/69151b5fd1c4050009919fb7
😎 Deploy Preview	https://deploy-preview-2013--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	cb7f683
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/69151b5f61ad7800085900ee
😎 Deploy Preview	https://deploy-preview-2013--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[giamir]

This component looks great @dancormier. ❤️🎉

I was lurking around and I wonder if we should add in the acceptance criteria of our stories also the documentation of breaking changes. I know that there is a ticket in the backlog to create a migration doc (v2 to v3). Maybe it would make sense to fill up that document as we go so that our memory is fresh on the breaking changes we made from the point of view of the consumers.

Also, a friendly reminder to add the changesets for this PR. I think this is the first time we’ll have two changesets for two different libraries in the same PR. In any case, npx changeset should guide us through creating these slightly more complex changesets. 🙂

[CGuindon]

Docs: I have text in the figma under each style and on the left side for the "header + intro" text.

[CGuindon]

I guess the order of this component changes in the list as well with the new name — "Bling" should go under "Banners"

[CGuindon]

All of the badge shapes should fit in a 10x10 "box" but I've tweaked the sizing a bit for each to make them visually more balanced when next to each other.

• s-bling__bronze should be 8x8 square (inside the 10x10 box frame)

• s-bling__silver s-bling__gold both look like they're the correct 9x9 size inside that box ✅

[giamir]

Looks good @dancormier. I have only left a couple of minor NIT comments.

I noticed that the following components depending on Bling are now somewhat broken:

• Badge
• Topbar
• UserCard
• Table

I guess this is on purpose and we will take care of them on follow up tickets. Correct?

Thanks for taking care of this one. ❤️

[dancormier]

I noticed that the following components depending on Bling are now somewhat broken:

* Badge

* Topbar

* UserCard

* Table

I guess this is on purpose and we will take care of them on follow up tickets. Correct?

@giamir Updates to consuming components' styles should usually be left for when those components are being updated to SHINE styles, but I think we should generally update any markup when there are breaking changes like there are here with bling.

I've updated the bling markup in those other components' docs pages and any relevant tests to match the expected markup. I've also updated the migration guide to mention the markup changes. If nothing else, these doc updates just make things look much nicer while we wait to update the other components 🙂

Screenshots

Thanks for taking care of this one. ❤️

My pleasure and thank you for the review!

[giamir]

Looks good Dan. Thanks for the updates. The only thing missing is the link to the svelte component (svelte badge) in the Bling doc page (in the frontmatter svelte: ...). Apart from that looks good to be merged from my end. 🙂

[CGuindon]

In the Svelte component the rep bling is using black-400 — both rep and default bling dots use black-600. The difference is only if the fill is showing, the background color of the square box is lighter/darker but the dots are 600 in both cases. (Classic looks fine)

[dancormier]

In the Svelte component the rep bling is using black-400 — both rep and default bling dots use black-600. The difference is only if the fill is showing, the background color of the square box is lighter/darker but the dots are 600 in both cases. (Classic looks fine)

Whoops! Good catch @CGuindon. I've updated the rep bling to use black-600 and I've also updated the Svelte docs to omit the examples of the non-filled rep and activity variants (though a consumer could still technically use them.

Screenshot