From faf2fab5d1ae0334c51f9ad2241aa1018dc83ce7 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Tue, 9 Nov 2021 12:02:02 +0200
Subject: [PATCH] refactor(checkbox): update focus state

---
 src/components/checkbox/checkbox.fluent.scss | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/checkbox/checkbox.fluent.scss b/src/components/checkbox/checkbox.fluent.scss
index 1f58229c4..436b0c8d2 100644
--- a/src/components/checkbox/checkbox.fluent.scss
+++ b/src/components/checkbox/checkbox.fluent.scss
@@ -11,7 +11,7 @@
         &::after {
             border: none;
             background: transparent;
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 700)};
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 500)};
         }
     }
 
@@ -20,8 +20,7 @@
         transform: scale(.8);
     }
 
-    igc-checkbox:hover,
-    igc-checkbox:focus-within {
+    igc-checkbox:hover {
         &::part(indicator) {
             opacity: 1;
             stroke: #{utils.color(gray, 700)};
@@ -34,6 +33,13 @@
         }
     }
 
+    igc-checkbox:hover,
+    igc-checkbox:focus-within {
+        &::part(control)::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 800)};
+        }
+    }
+
     igc-checkbox[indeterminate] {
         &::part(indicator) {
             display: none;
@@ -93,13 +99,11 @@
         }
     }
 
-    igc-checkbox[invalid]:hover::part(indicator),
-    igc-checkbox[invalid]:focus-within::part(indicator) {
+    igc-checkbox[invalid]:hover::part(indicator) {
         stroke: #{utils.color(error, 500, .54)};
     }
 
-    igc-checkbox[invalid]:hover::part(indicator checked),
-    igc-checkbox[invalid]:focus-within::part(indicator checked) {
+    igc-checkbox[invalid]:hover::part(indicator checked) {
         stroke: white;
     }