fix: outline across platforms

Author: parasharrajat

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}`,
     };
 }
 

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">