[Bug] Leading & Trailing Visual Colors for Button

[jesskuo4]

Describe your changes here.

• Changed the Leading and Trailing Visual Icon Colors for the Button Component to fg.muted
• Change ButtonCounter font size to 0 (12px)

Closes https://github.com/github/primer/issues/2373

Screenshots

Before	After

Please provide before/after screenshots for any visual changes

Merge checklist

• Added/updated tests
• Added/updated documentation
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 84af8ad

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

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

[github-actions]

Uh oh! @jesskuo4, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	102.76 KB (+0.02% 🔺)
dist/browser.umd.js	103.31 KB (+0.03% 🔺)

[github-actions]

Uh oh! @jesskuo4, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

Uh oh! @jesskuo4, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[jesskuo4]

Boom 🎉

Found two small things:

1️⃣ The icon button example is still not muted.

2️⃣ Then the counter is vertically not aligned centred.

Hi @maximedegreve! 👋 Thank you so much for pointing these two things out and waiting, I wanted to double check some things with my mentor, Katie, before responding:

Regarding num1 of this comment, I was thinking that it might be better to keep the icon button only to remain as fg.default since the current disabled icon button uses the fg.muted look. It might be good to consider keeping it this way so users can differentiate the status of the button. We also have an invisible variant, which has a muted color by default but when it becomes disabled, it will look more like this with a background (its broken right now in PRC). What are your thoughts?

Regarding num2, I tried correcting the issue. However, I shared with Katie and she mentioned how to solve the problem, we have to change how the the counter button is layered, which might cause other issues. She is currently looking into this and will get back to you!

Thank you!! 😄

[github-actions]

Uh oh! @jesskuo4, the image you shared is missing helpful alt text. Check #3447 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

Uh oh! @jesskuo4, the image you shared is missing helpful alt text. Check #3447 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

Uh oh! @jesskuo4, the image you shared is missing helpful alt text. Check #3447 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.