fix(checkbox): outline not visible when checked in high contrast mode (…

…#18048)

Fixes checked checkboxes blending in with the background in high contrast mode. This is something that used to work, but might've regressed after we made `cdk-high-contrast` to generate a class selector which has a different specificity.

Also moves the checkbox high contrast styles into the main component styles so they don't have to be repeated for each theme.

(cherry picked from commit d9cf175)

src/material/checkbox/_checkbox-theme.scss

@@ -1,6 +1,5 @@
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
-@import '../../cdk/a11y/a11y';
 
 
 @mixin mat-checkbox-theme($theme) {
@@ -34,12 +33,6 @@
     // !important is needed here because a stroke must be set as an
     // attribute on the SVG in order for line animation to work properly.
     stroke: $checkbox-mark-color !important;
-
-    @include cdk-high-contrast(black-on-white) {
-      // Having the one above be !important ends up overriding the browser's automatic
-      // color inversion so we need to re-invert it ourselves for black-on-white.
-      stroke: #000 !important;
-    }
   }
 
   .mat-checkbox-mixedmark {
@@ -77,19 +70,6 @@
     .mat-checkbox-label {
       color: mat-color($foreground, secondary-text);
     }
-
-    @include cdk-high-contrast {
-      opacity: 0.5;
-    }
-  }
-
-  // This one is moved down here so it can target both
-  // the theme colors and the disabled state.
-  @include cdk-high-contrast {
-    .mat-checkbox-background {
-      // Needs to be removed because it hides the checkbox outline.
-      background: none;
-    }
   }
 
   // Switch this to a solid color since we're using `opacity`

src/material/checkbox/checkbox.scss

@@ -275,6 +275,15 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   ._mat-animation-noopable & {
     transition: none;
   }
+
+  // `.mat-checkbox` here is redundant, but we need it to increase the specificity so that
+  // these styles don't get overwritten by the `background-color` from the theme.
+  .mat-checkbox & {
+    @include cdk-high-contrast {
+      // Needs to be removed because it hides the checkbox outline.
+      background: none;
+    }
+  }
 }
 
 .mat-checkbox-persistent-ripple {
@@ -319,6 +328,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
     dasharray: $_mat-checkbox-mark-path-length;
     width: $_mat-checkbox-mark-stroke-size;
   }
+
+  @include cdk-high-contrast(black-on-white) {
+    // In the checkbox theme this `stroke` has !important which ends up overriding the browser's
+    // automatic color inversion so we need to re-invert it ourselves for black-on-white.
+    stroke: #000 !important;
+  }
 }
 
 .mat-checkbox-mixedmark {
@@ -393,6 +408,10 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 
 .mat-checkbox-disabled {
   cursor: default;
+
+  @include cdk-high-contrast {
+    opacity: 0.5;
+  }
 }
 
 .mat-checkbox-anim {