fix(button): adjust badge variant

[giamir]

SPARK-115

This PR updates the badge variant of the buttons to reflect the colors and style in this figma file.

You can check how all the different combinations looks like in storybook:
https://deploy-preview-2145--stacks-svelte.netlify.app/?path=/story/components-button--badges

I used my best judgment for the disabled state since there was no guidance in the figma.

I moved the visual test fix in this separate PR to keep the diff smaller for this one:
#2147

[changeset-bot]

🦋 Changeset detected

Latest commit: aa2e517

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	aa2e517
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/6978a21759b4e1000883c0c4
😎 Deploy Preview	https://deploy-preview-2145--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	aa2e517
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/6978a217c51c010008ab5ffb
😎 Deploy Preview	https://deploy-preview-2145--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.

[CGuindon]

"I used my best judgment for the disabled state since there was no guidance in the figma."

Figma had the disabled states... did I miss something?

[CGuindon]

LGTM other than the disabled states. I have them in the figma (scroll to the right to see all modes).

I'm not sure if it's worth doing this ticket at the same time or only doing the disabled badges when we tackle that ticket.

[dancormier]

Thanks for these badge tweaks @giamir. Looks pretty good overall, but I noticed a few minor issues:

Badge font size and padding adjustments

I noticed that the font size for the badge stays the same (fs-caption) for all button sizes but it should be set to fs-fine for xs and sm variants. Making this change will probably also require minor adjustments to the badge padding within those variants.

I also noticed a slight difference in the height of the badge in the lg button (~21px in Stacks vs 24px in Figma).

I think something like this gets us pretty close to the mocks:

.s-btn {
…
+  --_bu-badge-fs: var(--fs-caption);
…
  &&__xs,
  &&__sm {
…
+        --_bu-badge-fs: var(--fs-fine);
+        --_bu-badge-py: var(--su1);
+        --_bu-badge-px: calc(var(--su4) - var(--su1)); // 3px
}
…
  &&__lg {
…
+        --_bu-badge-py: calc(var(--su2) + var(--su1)); // 3px

  }
…
    & &--badge {
…
+        font-size: var(--_bu-badge-fs);
…
}

TODO can be removed

On line 235 of button.less, the comment // TODO SHINE fine-tune badge styles is still there but can be removed.

---

Note: I noticed that the selected state background colors have been swapped vertically. I created a ticket to capture correcting this issue.