From a409bdb2b397f1b8a017ab6ca2ec892604381e39 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 28 Jul 2021 15:30:45 +0530
Subject: [PATCH] fix: outline across platforms

---
 src/styles/addOutlineWidth/index.js | 3 +++
 web/index.html                      | 9 +++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/styles/addOutlineWidth/index.js b/src/styles/addOutlineWidth/index.js
index 96868ba9d94..566a1ef34df 100644
--- a/src/styles/addOutlineWidth/index.js
+++ b/src/styles/addOutlineWidth/index.js
@@ -3,6 +3,8 @@
  * can be added to the object
  */
 
+import themeDefault from '../themes/default';
+
 /**
  * Adds the addOutlineWidth property to an object to be used when styling
  *
@@ -14,6 +16,7 @@ function withOutlineWidth(obj, val) {
     return {
         ...obj,
         outlineWidth: val,
+        boxShadow: `0px 0px 0px ${val}px ${themeDefault.borderFocus}`,
     };
 }
 
diff --git a/web/index.html b/web/index.html
index 1c55f9bffbc..a96e576510c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -32,8 +32,13 @@
             -webkit-user-select: none !important;
             -webkit-touch-callout: none !important;
         }
-        *:focus, *:focus-visible, [data-focusvisible-polyfill] {
-            outline: 1px solid #0185ff;
+        :focus-visible {
+            outline: 0;
+            box-shadow: 0px 0px 0px 1px #0185ff;
+        }
+        :focus[data-focusvisible-polyfill] {
+            outline: 0;
+            box-shadow: 0px 0px 0px 1px #0185ff;
         }
     </style>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">