diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss index c863ec907e87..ddb604499e8b 100644 --- a/packages/components/src/components/tooltip/_tooltip.scss +++ b/packages/components/src/components/tooltip/_tooltip.scss @@ -334,6 +334,13 @@ .#{$prefix}--tooltip__trigger svg { fill: $icon-02; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } .#{$prefix}--tooltip__trigger:not(.#{$prefix}--btn--icon-only) { @@ -376,6 +383,13 @@ background: $inverse-02; border-radius: rem(2px); + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + border: 1px solid transparent; + } + // @todo this can be deprecated in v11 since focus should always be on the content container not the tooltip &:focus { outline: 0; @@ -554,6 +568,13 @@ &:focus { svg { fill: $icon-02; + + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), + screen and (prefers-contrast) { + // `ButtonText` is a CSS2 system color to help improve colors in HCM + fill: ButtonText; + } } } } diff --git a/packages/components/src/globals/scss/_tooltip.scss b/packages/components/src/globals/scss/_tooltip.scss index f7e9444016cf..ea80ce1b6c6e 100644 --- a/packages/components/src/globals/scss/_tooltip.scss +++ b/packages/components/src/globals/scss/_tooltip.scss @@ -60,9 +60,8 @@ width: auto; } - // Windows HCM Fix - @media screen and (-ms-high-contrast: active) { - // `GrayText` is a CSS2 system color to help improve colors in HCM + // Windows, Firefox HCM Fix + @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { border: 1px solid transparent; } }