feat(dom): add forced-colors-mode mixin

BREAKING_CHANGE: ie-high-contrast-mode has been removed in favor of forced-colors-mode
PiperOrigin-RevId: 378027927

packages/mdc-checkbox/_checkbox.scss

@@ -28,6 +28,7 @@
 @use '@material/animation/functions' as functions2;
 @use '@material/animation/variables' as animation-variables;
 @use '@material/density/functions' as density-functions;
+@use '@material/dom/dom';
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/ripple/ripple';
 @use '@material/ripple/ripple-theme';
@@ -77,7 +78,7 @@
     }
   }
 
-  @media screen and (-ms-high-contrast: active) {
+  @include dom.forced-colors-mode {
     @include checkbox-theme.disabled-container-colors(
       $unmarked-stroke-color: GrayText,
       $unmarked-fill-color: transparent,

packages/mdc-chips/_chip.scss

@@ -418,7 +418,7 @@
 @mixin _high-contrast-mode($query: feature-targeting.all()) {
   $feat-structure: feature-targeting.create-target($query, structure);
 
-  @include dom.ie-high-contrast-mode {
+  @include dom.forced-colors-mode {
     @include chip-theme.outline-color(
       (
         disabled: GrayText,

packages/mdc-dialog/_mixins.scss

@@ -150,8 +150,8 @@
         text-align: right;
       }
 
-      @include dom.ie-high-contrast-mode {
-        // Colored outline is used for IE11 HCM instead of transparent border
+      @include dom.forced-colors-mode {
+        // Colored outline is used for HCM instead of transparent border
         // below to prevent scrolling content overflow.
         outline: 2px solid windowText;
       }

packages/mdc-dom/_dom.scss

@@ -67,12 +67,15 @@
   }
 }
 
+/// Selects for `forced-colors` high contrast mode.
 ///
-/// Selects for high-contrast mode. Currently this only detects high-contrast
-/// mode in IE and Edge.
+/// While in `forced-colors` mode, only system colors should be used.
 ///
-@mixin ie-high-contrast-mode {
-  @media screen and (-ms-high-contrast: active) {
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
+/// @content styles to emit in `forced-colors` mode
+@mixin forced-colors-mode {
+  @media screen and (forced-colors: active), (-ms-high-contrast: active) {
     @content;
   }
 }

packages/mdc-dom/_mixins.scss

@@ -19,4 +19,4 @@
 // THE SOFTWARE.
 
 /// @deprecated Import '_dom.scss' instead.
-@forward './dom' show transparent-border, visually-hidden, ie-high-contrast-mode;
+@forward './dom' show transparent-border, visually-hidden, forced-colors-mode;

packages/mdc-list/_evolution-mixins.scss

@@ -1185,7 +1185,7 @@
   $feat-structure: feature-targeting.create-target($query, structure);
   $feat-color: feature-targeting.create-target($query, color);
 
-  @include dom-mixins.ie-high-contrast-mode {
+  @include dom-mixins.forced-colors-mode {
     .mdc-list-divider::after {
       @include feature-targeting.targets($feat-structure) {
         content: '';

packages/mdc-radio/_radio.scss

@@ -250,7 +250,7 @@ $ripple-target: radio-theme.$ripple-target;
     );
     @include radio-theme.density(radio-theme.$density-scale, $query: $query);
 
-    @include dom.ie-high-contrast-mode {
+    @include dom.forced-colors-mode {
       @include radio-theme.disabled-unchecked-stroke-color(
         GrayText,
         $query: $query

packages/mdc-select/_select.scss

@@ -93,7 +93,7 @@
     );
 
     // High-contrast mode support
-    @include dom-mixins.ie-high-contrast-mode() {
+    @include dom-mixins.forced-colors-mode() {
       $gray-text: (
         disabled: GrayText,
       );

packages/mdc-switch/styles.scss

@@ -33,7 +33,7 @@
   @include switch-theme.theme(switch-theme.$light-theme);
 }
 
-@include dom.ie-high-contrast-mode {
+@include dom.forced-colors-mode {
   .mdc-switch {
     @include switch-theme.theme(switch-theme.$forced-colors-theme);
   }

packages/mdc-textfield/_mixins.scss

@@ -29,6 +29,7 @@
 @use 'sass:meta';
 @use '@material/animation/animation';
 @use '@material/density/functions' as density-functions;
+@use '@material/dom/dom';
 @use '@material/floating-label/mixins' as floating-label-mixins;
 @use '@material/floating-label/variables' as floating-label-variables;
 @use '@material/line-ripple/mixins' as line-ripple-mixins;
@@ -1633,7 +1634,7 @@
     $query: $query
   );
 
-  @media screen and (-ms-high-contrast: active) {
+  @include dom.forced-colors-mode {
     @include placeholder-color_(GrayText, $query: $query);
     @include label-ink-color_(GrayText, $query: $query);
     @include helper-text-mixins.helper-text-color_(GrayText, $query: $query);