fix(material/form-field): use correct color for form fields in high contrast mode (#24422)

Fixes that we weren't using the correct colors for disabled form field in high contrast mode on Windows.

Author: crisbeto

src/material-experimental/mdc-form-field/_form-field-high-contrast.scss

@@ -4,11 +4,20 @@
   $focus-indicator-width: 3px;
   $focus-indicator-style: dashed;
 
-  // The outline of the `fill` appearance is achieved through a background color
-  // which won't be visible in high contrast mode. Add an outline to replace it.
-  .mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
-    @include a11y.high-contrast(active, off) {
-      outline: solid 1px;
+  .mat-form-field-appearance-fill {
+    // The outline of the `fill` appearance is achieved through a background color
+    // which won't be visible in high contrast mode. Add an outline to replace it.
+    .mat-mdc-text-field-wrapper {
+      @include a11y.high-contrast(active, off) {
+        outline: solid 1px;
+      }
+    }
+
+    // Use GreyText for the disabled outline color which will account for the user's configuration.
+    &.mat-form-field-disabled .mat-mdc-text-field-wrapper {
+      @include a11y.high-contrast(active, off) {
+        outline-color: GrayText;
+      }
     }
   }
 

src/material-experimental/mdc-select/select.scss

@@ -77,6 +77,10 @@ $scale: 0.75 !default;
       // On Chromium browsers the `currentColor` blends in with the
       // background for SVGs so we have to fall back to `CanvasText`.
       fill: CanvasText;
+
+      .mat-mdc-select-disabled & {
+        fill: GrayText;
+      }
     }
   }
 }

src/material/form-field/form-field-fill.scss

@@ -32,6 +32,12 @@ $fill-subscript-padding: math.div($fill-side-padding, $fill-subscript-font-scale
     }
   }
 
+  &.mat-form-field-disabled .mat-form-field-flex {
+    @include a11y.high-contrast(active, off) {
+      outline-color: GrayText;
+    }
+  }
+
   &.mat-focused .mat-form-field-flex {
     @include a11y.high-contrast(active, off) {
       outline: dashed 3px;

src/material/form-field/form-field-legacy.scss

@@ -63,6 +63,7 @@ $legacy-underline-height: 1px !default;
     @include a11y.high-contrast(active, off) {
       border-top-style: dotted;
       border-top-width: 2px;
+      border-top-color: GrayText;
     }
   }
 

src/material/form-field/form-field-outline.scss

@@ -138,6 +138,12 @@ $outline-subscript-padding: math.div($outline-side-padding, $outline-subscript-f
     padding: 0 $outline-subscript-padding;
   }
 
+  &.mat-form-field-disabled .mat-form-field-outline {
+    @include a11y.high-contrast(active, off) {
+      color: GrayText;
+    }
+  }
+
   &._mat-animation-noopable {
     &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-outline,
     .mat-form-field-outline,

src/material/form-field/form-field.scss

@@ -112,6 +112,12 @@ $default-infix-width: 180px !default;
     left: auto;
     right: 0;
   }
+
+  .mat-form-field-disabled & {
+    @include a11y.high-contrast(active, off) {
+      color: GrayText;
+    }
+  }
 }
 
 .mat-form-field-empty.mat-form-field-label,