[Bug]: Icon color in ghost button is filled in wrong color when high contrast mode + dark theme

[s-onuma]

Package

carbon-components, carbon-components-react

Browser

Chrome

Package version

carbon-components v10.53.0, carbon-components-react v7.53.0

React version

v16.14.0

Description

In high contrast mode with dark theme (e.g. carbon-theme--g90), a ghost button with hasIconOnly is not filled in the correct color.

Expected:
Ghost button icon should be filled in the text color.

Actual:
Ghost button icon is filled in black while tertiary button is correctly filled in the text color.

It's because ghost button is overwritten by fill: ButtonText.

#10199 is relevant (or duplicate).

Reproduction/example

https://codesandbox.io/s/tearsheet-example-forked-hlzepj

Steps to reproduce

1. Enable high contrast mode in your OS.
   I take macOS Monterey for example. Open System Preference and tick "Increase contrast" in Accessibility > Display.
   

2. Open the codesandbox example and set Gray 90 for the theme.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

Just an FYI MacOS "Increase Contrast" isn't fully supported by browsers, thus the high contrast modes don't always apply properly. Do you still see this issue when using Windows High Contrast mode? In V11, there is an IconButton component that does not seem to have these same issues, are you able to update?

[tw15egan]

Updating to the latest versions of V10 seems to resolve this issue though: https://codesandbox.io/s/tearsheet-example-forked-ngc0l5?file=/src/Theme/ThemeDropdown.js

[tw15egan]

Closing as I'm unable to reproduce on the latest version of V10. The icon is showing as visible in MacOS "Increase Contrast" mode as well as Windows HCM in both light and dark themes.

[s-onuma]

The latest V10 worked for me as well. Thank you.