From f88b5f606cf8a6fc0b8b83d4f0601aa6bf026ba1 Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Thu, 25 Aug 2016 15:51:34 -0700
Subject: [PATCH 1/4] fixing high contrast issue

---
 src/components/Checkbox/Checkbox.scss | 62 +++++++++++++++------------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
index bc85a76ca8ca11..f1a452c6813408 100644
--- a/src/components/Checkbox/Checkbox.scss
+++ b/src/components/Checkbox/Checkbox.scss
@@ -11,6 +11,26 @@ $ms-checkbox-label-size: 20px;
 $ms-checkbox-transition-duration: 200ms;
 $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
 
+@mixin highContrast-borderColor($active-color, $bw-color, $size: 2px) {
+  @media screen and (-ms-high-contrast: active) {
+    border: $size solid $active-color;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    border: $size solid $bw-color;
+  }
+}
+
+@mixin highContrast-color($active-color, $bw-color) {
+  @media screen and (-ms-high-contrast: active) {
+    color: $active-color;
+  }
+
+  @media screen and (-ms-high-contrast: black-on-white) {
+    color: $bw-color;
+  }
+}
+
 .ms-Checkbox {
   box-sizing: border-box;
   color: $ms-color-neutralPrimary;
@@ -64,14 +84,6 @@ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
   line-height: $ms-checkbox-label-size;
   width: $ms-checkbox-label-size;
   text-align: center;
-
-  @media screen and (-ms-high-contrast: active) {
-    color: $ms-color-black;
-  }
-
-  @media screen and (-ms-high-contrast: black-on-white) {
-    color: $ms-color-white;
-  }
 }
 
 // The checkbox label
@@ -124,17 +136,20 @@ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
       border: 10px solid $ms-color-themePrimary;
       background-color: $ms-color-themePrimary;
 
-      @media screen and (-ms-high-contrast: active) {
-        border-color: $ms-color-contrastBlackSelected;
-      }
-
-      @media screen and (-ms-high-contrast: black-on-white) {
-        border-color: $ms-color-contrastWhiteSelected;
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
+        display: none;
       }
     }
 
     &::after {
       display: block;
+
+      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
+        height: 16px;
+        width: 16px;
+      }
+
+      @include highContrast-borderColor($ms-color-white, $ms-color-black);
     }
 
     &:hover,
@@ -161,26 +176,17 @@ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
       background-color: $ms-color-neutralTertiaryAlt;
       border-color: $ms-color-neutralTertiaryAlt;
       color: $ms-color-neutralTertiaryAlt;
+    }
 
-      @media screen and (-ms-high-contrast: active) {
-        border-color: $ms-color-contrastBlackDisabled;
-      }
-
-      @media screen and (-ms-high-contrast: black-on-white) {
-        border-color: $ms-color-contrastWhiteDisabled;
-      }
+    &::after {
+      @include highContrast-borderColor($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
+      @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
     }
 
     .ms-Label {
       color: $ms-color-neutralTertiary;
 
-      @media screen and (-ms-high-contrast: active) {
-        color: $ms-color-contrastBlackDisabled;
-      }
-
-      @media screen and (-ms-high-contrast: black-on-white) {
-        color: $ms-color-contrastWhiteDisabled;
-      }
+      @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
     }
   }
 

From b3c0c06eb603da88dd484895dd6f04021d374820 Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Thu, 25 Aug 2016 16:37:20 -0700
Subject: [PATCH 2/4] fixing in-focus border

---
 src/components/Checkbox/Checkbox.scss | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
index f1a452c6813408..4bf94eb51d6762 100644
--- a/src/components/Checkbox/Checkbox.scss
+++ b/src/components/Checkbox/Checkbox.scss
@@ -10,6 +10,7 @@
 $ms-checkbox-label-size: 20px;
 $ms-checkbox-transition-duration: 200ms;
 $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
+$ms-checkbox-highContrast-iconBoxSize: 16px;
 
 @mixin highContrast-borderColor($active-color, $bw-color, $size: 2px) {
   @media screen and (-ms-high-contrast: active) {
@@ -41,6 +42,8 @@ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
   border: 1px solid transparent;
   position: relative;
 
+  @include highContrast-borderColor($ms-color-black, $ms-color-white, 1px);
+
   .ms-Label {
     font-size: $ms-font-size-m;
     @include padding(0, 0, 0, 26px);
@@ -145,8 +148,9 @@ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
       display: block;
 
       @media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
-        height: 16px;
-        width: 16px;
+        height: $ms-checkbox-highContrast-iconBoxSize;
+        width: $ms-checkbox-highContrast-iconBoxSize;
+        line-height: $ms-checkbox-highContrast-iconBoxSize;
       }
 
       @include highContrast-borderColor($ms-color-white, $ms-color-black);
@@ -208,5 +212,14 @@ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
 }
 
 .is-focusVisible .ms-Checkbox.is-inFocus {
-  border: 1px solid $ms-color-neutralPrimary;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    @include right(0px);
+    @include left(-8px);
+    border: 1px solid $focusedBorderColor;
+    @include highContrast-borderColor($ms-color-white, $ms-color-black, 1px);
+  }
 }

From f1987dcd55cd109576aeb6a384b5cd088293199d Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Thu, 25 Aug 2016 16:48:18 -0700
Subject: [PATCH 3/4] renaming

---
 src/components/Checkbox/Checkbox.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
index 4bf94eb51d6762..64e89def12a143 100644
--- a/src/components/Checkbox/Checkbox.scss
+++ b/src/components/Checkbox/Checkbox.scss
@@ -12,7 +12,7 @@ $ms-checkbox-transition-duration: 200ms;
 $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
 $ms-checkbox-highContrast-iconBoxSize: 16px;
 
-@mixin highContrast-borderColor($active-color, $bw-color, $size: 2px) {
+@mixin highContrast-border($active-color, $bw-color, $size: 2px) {
   @media screen and (-ms-high-contrast: active) {
     border: $size solid $active-color;
   }
@@ -42,7 +42,7 @@ $ms-checkbox-highContrast-iconBoxSize: 16px;
   border: 1px solid transparent;
   position: relative;
 
-  @include highContrast-borderColor($ms-color-black, $ms-color-white, 1px);
+  @include highContrast-border($ms-color-black, $ms-color-white, 1px);
 
   .ms-Label {
     font-size: $ms-font-size-m;
@@ -153,7 +153,7 @@ $ms-checkbox-highContrast-iconBoxSize: 16px;
         line-height: $ms-checkbox-highContrast-iconBoxSize;
       }
 
-      @include highContrast-borderColor($ms-color-white, $ms-color-black);
+      @include highContrast-border($ms-color-white, $ms-color-black);
     }
 
     &:hover,
@@ -183,7 +183,7 @@ $ms-checkbox-highContrast-iconBoxSize: 16px;
     }
 
     &::after {
-      @include highContrast-borderColor($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
+      @include highContrast-border($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
       @include highContrast-color($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
     }
 
@@ -220,6 +220,6 @@ $ms-checkbox-highContrast-iconBoxSize: 16px;
     @include right(0px);
     @include left(-8px);
     border: 1px solid $focusedBorderColor;
-    @include highContrast-borderColor($ms-color-white, $ms-color-black, 1px);
+    @include highContrast-border($ms-color-white, $ms-color-black, 1px);
   }
 }

From 1495806f7f6c98d4d16f74e9dce0127dcf9ac88f Mon Sep 17 00:00:00 2001
From: Aniket Handa <anihan@microsoft.com>
Date: Thu, 25 Aug 2016 17:57:57 -0700
Subject: [PATCH 4/4] centering

---
 src/components/Checkbox/Checkbox.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
index 64e89def12a143..8a4d9ce3baeb72 100644
--- a/src/components/Checkbox/Checkbox.scss
+++ b/src/components/Checkbox/Checkbox.scss
@@ -39,11 +39,8 @@ $ms-checkbox-highContrast-iconBoxSize: 16px;
   font-size: $ms-font-size-m;
   font-weight: $ms-font-weight-regular;
   min-height: 36px;
-  border: 1px solid transparent;
   position: relative;
 
-  @include highContrast-border($ms-color-black, $ms-color-white, 1px);
-
   .ms-Label {
     font-size: $ms-font-size-m;
     @include padding(0, 0, 0, 26px);
@@ -97,6 +94,7 @@ $ms-checkbox-highContrast-iconBoxSize: 16px;
   position: relative;
   vertical-align: top;
   user-select: none;
+  line-height: $ms-checkbox-label-size;
 
   &:hover {
     &::before {