fix(material/checkbox): use GrayText for disabled colors in high contrast mode (#32066)

Uses `GrayText` for the color of the checkbox in high contrast mode, instead of reducing the opacity which can also make the checkbox harder to see.

Author: crisbeto

src/material/checkbox/BUILD.bazel

@@ -67,6 +67,7 @@ sass_binary(
     deps = [
         ":checkbox_common",
         ":m2",
+        "//src/cdk:sass_lib",
         "//src/material/core/style:layout_common",
         "//src/material/core/tokens:token_utils",
     ],

src/material/checkbox/_checkbox-common.scss

@@ -63,10 +63,6 @@ $_fallback-size: 40px;
   .mdc-checkbox--disabled {
     cursor: default;
     pointer-events: none;
-
-    @include cdk.high-contrast {
-      opacity: 0.5;
-    }
   }
 
   .mdc-checkbox__background {
@@ -107,12 +103,20 @@ $_fallback-size: 40px;
 
   .mdc-checkbox--disabled .mdc-checkbox__background {
     border-color: token-utils.slot(checkbox-disabled-unselected-icon-color, $fallbacks);
+
+    @include cdk.high-contrast {
+      border-color: GrayText;
+    }
   }
 
   .mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background,
   .mdc-checkbox__native-control:disabled:indeterminate ~ .mdc-checkbox__background {
     background-color: token-utils.slot(checkbox-disabled-selected-icon-color, $fallbacks);
     border-color: transparent;
+
+    @include cdk.high-contrast {
+      border-color: GrayText;
+    }
   }
 
   // stylelint-disable selector-combinator-space-before
@@ -149,6 +153,10 @@ $_fallback-size: 40px;
     .mdc-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background,
     .mdc-checkbox__background {
       border-color: token-utils.slot(checkbox-disabled-unselected-icon-color, $fallbacks);
+
+      @include cdk.high-contrast {
+        border-color: GrayText;
+      }
     }
 
     .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
@@ -183,7 +191,7 @@ $_fallback-size: 40px;
         color: token-utils.slot(checkbox-disabled-selected-checkmark-color, $fallbacks);
 
         @include cdk.high-contrast {
-          color: CanvasText;
+          color: GrayText;
         }
       }
     }
@@ -220,6 +228,10 @@ $_fallback-size: 40px;
     &, &.mat-mdc-checkbox-disabled-interactive {
       .mdc-checkbox__mixedmark {
         border-color: token-utils.slot(checkbox-disabled-selected-checkmark-color, $fallbacks);
+
+        @include cdk.high-contrast {
+          border-color: GrayText;
+        }
       }
     }
   }

src/material/checkbox/checkbox.scss

@@ -1,3 +1,4 @@
+@use '@angular/cdk';
 @use '../core/style/layout-common';
 @use './m3-checkbox';
 @use '../core/tokens/token-utils';
@@ -44,6 +45,10 @@ $fallbacks: m3-checkbox.get-tokens();
     label {
       cursor: default;
       color: token-utils.slot(checkbox-disabled-label-color, $fallbacks);
+
+      @include cdk.high-contrast {
+        color: GrayText;
+      }
     }
   }