feat(activity-indicator): update to new visual language

[giamir]

SPARK-62

Figma

Here is what changed:

• Stacks Classic: Updated the activity indicator component to the new visual language (default 16x16). Introduced .s-activity-indicator__sm variant (10x10). (docs)
• Stacks Svelte: Added new ActivityIndicator component. (storybook)

Note 1: please ignore for now the activity indicator on the avatar not being rendered correctly. It will be sorted in the avatar PR that is coming right after this one.

Note 2: Topbar screenshots are failing because they are using activity indicators which have changed slightly (10x10 instead of 12x12)

[changeset-bot]

🦋 Changeset detected

Latest commit: cfd00d4

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	cfd00d4
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/690398ddbf07e3000915b355
😎 Deploy Preview	https://deploy-preview-2027--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	cfd00d4
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/690398dd0c520c0008cb6882
😎 Deploy Preview	https://deploy-preview-2027--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.

[dancormier]

Everything looks good here except the whole vertical text alignment issue you mentioned. I made a suggestion to use inline-flex which will give us a better balance (not perfect but hopefully acceptable). Looks like this is what some other libraries (MUI, Ant Design) handle it as well.

[CGuindon]

Ok don't hate me but... seeing this in the browser vs figma (using a different system font as well) makes them look extra small. I think we re-used the old component that was in Figma and updated the colors but that didn't match the sizing that was in stacks. Looking from old to new it does look to tight/small.

I've bump up the sizing on the dot for both:

• large size with characters would be 16x16 (roughly the same size as current)
• small size would be 10x10 (in between what we have today and what I had originally proposed)

Both updated in Figma as well.

[giamir]

Ok don't hate me but... seeing this in the browser vs figma (using a different system font as well) makes them look extra small. I think we re-used the old component that was in Figma and updated the colors but that didn't match the sizing that was in stacks. Looking from old to new it does look to tight/small.

I've bump up the sizing on the dot for both:

large size with characters would be 16x16 (roughly the same size as current)
small size would be 10x10 (in between what we have today and what I had originally proposed)
Both updated in Figma as well.

@CGuindon I have applied your requested changes here. Can you give it another review? Thanks
7c4c81b

Docs
Storybook

[dancormier]

Looks good! I think it looks much nicer at 16px. I locally merged in the design system typography changes and all the sizes stayed consistent while seeing the font size jump a pixel.

Screenshots

Pre-type changes

Post-type changes

[CGuindon]

The only thing that stands out for me is the different padding I'm seeing in the types. It looks like the icon with a numbered activity indicator has more padding than without an icon?

The one on the left is correct (less padding on the sides).

[giamir]

@dancormier Merging this as agreed in our conversation early. If you have a minute feel free to play around with the indicator on the notification icon. Thanks a lot ❤️