From 74e6a4bf03e35d288153cd24d039be3d943d70d7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Thu, 26 Dec 2019 17:39:02 +0200
Subject: [PATCH] fix(checkbox): outline not visible when checked in high
 contrast mode

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.
---
 src/material/checkbox/_checkbox-theme.scss | 20 --------------------
 src/material/checkbox/checkbox.scss        | 19 +++++++++++++++++++
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
index f31b5eb1566c..16afb64a90e6 100644
--- a/src/material/checkbox/_checkbox-theme.scss
+++ b/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`
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index 208e27b5dce2..b7a7f9671663 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/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 {