From 619bfecddee30b0abf57e51fc04f586d590ddfbe Mon Sep 17 00:00:00 2001
From: Brian D <briandu@microsoft.com>
Date: Wed, 3 Jun 2020 16:15:42 -0700
Subject: [PATCH 1/2] adds border to all states of toggle control

---
 CHANGELOG.md                             |  4 ++++
 lib/components/Toggle/Toggle.module.scss | 16 +++++++++++++++-
 package.json                             |  2 +-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 61b0eb8..7627201 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 8.0.7
+### Changed
+- Added border for all states of toggle control for visibility in high contrast mode
+
 ## 8.0.6
 ### Changed
 - Added box-shadow to search bar to be accessible on light mastheads.
diff --git a/lib/components/Toggle/Toggle.module.scss b/lib/components/Toggle/Toggle.module.scss
index f6e4dd2..c4bfbe4 100644
--- a/lib/components/Toggle/Toggle.module.scss
+++ b/lib/components/Toggle/Toggle.module.scss
@@ -10,6 +10,15 @@ $toggle-switch-border-radius: 5px;
 
 $line-height: 3.5*$grid-size;
 
+:root {
+--color-foreground-inactive: grey;
+--color-foreground-default: grey;
+--color-accent: lightGrey;
+--color-accent-foreground: darkBlue;
+
+--color-accent-hover: grey;
+}
+
 .toggle {
     @include md-box(inline-block, relative);
     vertical-align: middle;
@@ -28,6 +37,7 @@ $line-height: 3.5*$grid-size;
 
         .toggle-switch {
             background-color: var(--color-foreground-default);
+            border: 1px solid var(--color-foreground-default);
         }
     }
 
@@ -49,6 +59,7 @@ $line-height: 3.5*$grid-size;
         .toggle-switch {
             left: 25px;
             background-color: var(--color-accent-foreground);
+            border: 1px solid var(--color-accent-foreground);
 
             @include rtl {
                 left: unset;
@@ -64,6 +75,7 @@ $line-height: 3.5*$grid-size;
 
             .toggle-switch {
                 background-color: var(--color-state-disabled);
+                border: 1px solid var(--color-state-disabled);
             }
         }
     }
@@ -76,6 +88,7 @@ $line-height: 3.5*$grid-size;
 
         .toggle-switch {
             background-color: var(--color-foreground-disabled);
+            border: 1px solid var(--color-foreground-disabled);
         }
 
         .toggle-label {
@@ -114,6 +127,7 @@ $line-height: 3.5*$grid-size;
     height: 2.5*$grid-size;
     border-radius: $toggle-switch-border-radius;
     background-color: var(--color-foreground-inactive);
+    border: 1px solid var(--color-foreground-inactive);
     transition: $toggle-switch-transition;
 
     pointer-events: none;
@@ -131,4 +145,4 @@ $line-height: 3.5*$grid-size;
     font-size: var(--font-size-default);
 
     vertical-align: middle;
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 5fb95c1..22cb9d9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "8.0.6",
+    "version": "8.0.7",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",

From edcb78b3aa903594fbad14102008cbfb760ccfe4 Mon Sep 17 00:00:00 2001
From: Brian D <briandu@microsoft.com>
Date: Wed, 3 Jun 2020 16:17:31 -0700
Subject: [PATCH 2/2] removes placeholder color vars

---
 lib/components/Toggle/Toggle.module.scss | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/lib/components/Toggle/Toggle.module.scss b/lib/components/Toggle/Toggle.module.scss
index c4bfbe4..364b27c 100644
--- a/lib/components/Toggle/Toggle.module.scss
+++ b/lib/components/Toggle/Toggle.module.scss
@@ -10,15 +10,6 @@ $toggle-switch-border-radius: 5px;
 
 $line-height: 3.5*$grid-size;
 
-:root {
---color-foreground-inactive: grey;
---color-foreground-default: grey;
---color-accent: lightGrey;
---color-accent-foreground: darkBlue;
-
---color-accent-hover: grey;
-}
-
 .toggle {
     @include md-box(inline-block, relative);
     vertical-align: middle;