Button "Invisible" loses accent `color` when using a `leadingVisual`

[maximedegreve]

Description

Button variant "invisible" loses accent color when using a leadingVisual.

https://github.com/primer/react/assets/980622/46ca0aa4-459e-4e16-8138-946879a46bf2

In Figma the component doesn't lose the accent color but the icon doesn't have the accent color applied when added.

Steps to reproduce

Go to Storybook

Version

Latest

Browser

Safari

[mohanadkandil]

Hey, I can work on this, could you please assign it to me ?

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[TylerJDev]

Was taking a look at this issue, and I'm a bit unsure of what the expected color should be 🤔 I took a look at the most recent version of PRC (pre-release), and I see that the default color for "invisible" without the leading visual has changed from the screenshot. I think this was part of https://github.com/primer/react/pull/4940, so I'm not sure if this is the expectation or not for invisible. If it is, then I think we can close this issue.

@langermank, you might have more context than I do 🙇

Screen capture of "invisible" variant in Storybook

[langermank]

@TylerJDev thanks for tagging me! Yes, the original design for the invisible variant was never intended to retain the accent blue color if visuals were present. Therefore, it was only ever blue if no visuals were present.

We recently made a change to make the invisible button the default text color in all scenarios. We found that in most cases the blue color was being overridden by consumers, and it was difficult to use the variant with an inconsistent text color.

As far as I'm concerned there are no current color bugs with Button 😀