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

tay1orjones · dakahn · web-flow · commit df2b82f5c423 · 2022-05-03T15:31:12.000Z
* 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>
diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/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');
     }
   }
 
diff --git a/packages/components/src/globals/scss/_helper-mixins.scss b/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;
     }
diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/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');
     }
   }
 
diff --git a/packages/styles/scss/utilities/_high-contrast-mode.scss b/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;
     }

Original file line number	Diff line number	Diff line change
`@@ -252,15 +252,13 @@`
`252`	`252`	`}`
`253`	`253`	`}`
`254`	`254`
`255`		`-/// Windows HCM Mixin`
	`255`	`+/// High Contrast Mode mixin for Windows and macOS`
`256`	`256`	`/// @access public`
`257`	`257`	`/// @example @include high-contrast-mode;`
`258`	`258`	`/// @group global-helpers`
`259`	`259`	`/// We should set HCM styles at the end of each file to ensure they are not overridden`
`260`	`260`	`@mixin high-contrast-mode($type: '') {`
`261`		`- @media screen and (-ms-high-contrast: active),`
`262`		`- (forced-colors: active),`
`263`		`- (prefers-contrast) {`
	`261`	`+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {`
`264`	`262`	`@if ($type == 'icon-fill') {`
`265`	`263`	`fill: ButtonText;`
`266`	`264`	`}`