chore(project): port HCM mixin changes from v11 to v10 (#11330)

* fix(utilities): broaden HCM mixin to include macos query (#10935)

* fix(utilities): broaden HCM mixin to include macos query

* fix(Utilites): update hcm media query

* fix(Utilities): remove prefers-contrast query

* fix(RadioButton): update styling to use HCM mixin

* chore(project): port HCM mixin changes from v10 to v11

Co-authored-by: DAK <40970507+dakahn@users.noreply.github.com>

Author: tay1orjones

packages/components/src/components/radio-button/_radio-button.scss

@@ -98,16 +98,7 @@
       transform: scale(0.5);
 
       // Allow the selected button to be seen in Windows HCM for IE/Edge
-      @media screen and (-ms-high-contrast: active) {
-        // Utilize a system color variable to accommodate any user HCM theme
-        background-color: WindowText;
-      }
-
-      // Firefox only HCM solution
-      @media screen and (prefers-contrast) {
-        // Utilize a system color variable to accommodate any user HCM theme
-        border: 2px solid WindowText;
-      }
+      @include high-contrast-mode('icon-fill');
     }
   }
 

packages/components/src/globals/scss/_helper-mixins.scss

@@ -252,15 +252,13 @@
   }
 }
 
-/// Windows HCM Mixin
+/// High Contrast Mode mixin for Windows and macOS
 /// @access public
 /// @example @include high-contrast-mode;
 /// @group global-helpers
 /// We should set HCM styles at the end of each file to ensure they are not overridden
 @mixin high-contrast-mode($type: '') {
-  @media screen and (-ms-high-contrast: active),
-    (forced-colors: active),
-    (prefers-contrast) {
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
     @if ($type == 'icon-fill') {
       fill: ButtonText;
     }

packages/styles/scss/components/radio-button/_radio-button.scss

@@ -15,6 +15,7 @@
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/component-reset' as *;
 @use '../../utilities/visually-hidden' as *;
+@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/convert' as *;
 @use '../../config' as *;
@@ -109,16 +110,7 @@ $radio-border-width: 1px !default;
       transform: scale(0.5);
 
       // Allow the selected button to be seen in Windows HCM for IE/Edge
-      @media screen and (-ms-high-contrast: active) {
-        // Utilize a system color variable to accommodate any user HCM theme
-        background-color: WindowText;
-      }
-
-      // Firefox only HCM solution
-      @media screen and (prefers-contrast) {
-        // Utilize a system color variable to accommodate any user HCM theme
-        border: 2px solid WindowText;
-      }
+      @include high-contrast-mode('icon-fill');
     }
   }
 

packages/styles/scss/utilities/_high-contrast-mode.scss

@@ -5,15 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/// Windows HCM Mixin
+/// High Contrast Mode mixin for Windows and macOS
 /// @access public
 /// @example @include high-contrast-mode;
 /// @group utilities
 /// Set HCM styles at the end of each file to ensure they are not overwritten
 @mixin high-contrast-mode($type: '') {
-  @media screen and (-ms-high-contrast: active),
-    (forced-colors: active),
-    (prefers-contrast) {
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
     @if ($type == 'icon-fill') {
       fill: ButtonText;
     }