fix: input and icon button focus

Author: mayank-96

src/theme/components/icon-button.ts

@@ -2,12 +2,17 @@ import { mode } from './../tools';
 
 const baseStyle = (props: any) => {
   const { colorScheme } = props;
+  const colors = props.theme.colors;
   const focusRing = mode(
     {
-      boxShadow: `${colorScheme[400]} 0px 0px 0px 2px`,
+      outlineWidth: '2px',
+      outlineColor: `${colors[colorScheme][600]}`,
+      outlineStyle: 'solid',
     },
     {
-      boxShadow: `${colorScheme[500]} 0px 0px 0px 2px`,
+      outlineWidth: '2px',
+      outlineColor: `${colors[colorScheme][500]}`,
+      outlineStyle: 'solid',
     }
   )(props);
 
@@ -30,9 +35,7 @@ const baseStyle = (props: any) => {
       borderColor: `${colorScheme}.400`,
     },
     _focusVisible: {
-      borderWidth: 2,
       _web: {
-        outlineWidth: '0',
         style: { ...focusRing },
       },
     },

src/theme/components/input.ts

@@ -1,22 +1,19 @@
-import { transparentize } from '../tools';
-
-const baseStyle = () => {
-  // const { primary } = props.theme.colors;
-  // Todo: Resolve boxShadow Color or Provide some alternatiove prop for user to change focusRing color
-  // // Todo: Update to support similar focusRing on iOS , Android and Web
-  // const focusRing =
-  //   Platform.OS === 'web'
-  //     ? {
-  //         boxShadow:
-  //           props.variant !== 'underlined'
-  //             ? `${primary[400]} 0px 0px 0px 1px`
-  //             : `${primary[400]} 0px 1px 0px 0px`,
-  //         zIndex: 1,
-  //       }
-  //     : {
-  //         // boxShadow: `${useToken('colors', ['primary.400'])} 0px 0px 0px 1px`,
-  //       };
+import { transparentize, mode } from '../tools';
 
+const baseStyle = (props: any) => {
+  const { primary } = props.theme.colors;
+  const focusRing = mode(
+    {
+      outlineWidth: '1px',
+      outlineColor: `${primary[600]}`,
+      outlineStyle: 'solid',
+    },
+    {
+      outlineWidth: '1px',
+      outlineColor: `${primary[500]}`,
+      outlineStyle: 'solid',
+    }
+  )(props);
   return {
     fontFamily: 'body',
     py: '2',
@@ -73,11 +70,7 @@ const baseStyle = () => {
         // justifyContent: 'space-between',
         overflow: 'hidden',
         _focus: {
-          style: {
-            outlineWidth: '1px',
-            outlineColor: 'primary.600',
-            outlineStyle: 'solid',
-          },
+          style: { ...focusRing },
         },
       },
     },
@@ -112,11 +105,7 @@ const baseStyle = () => {
         // justifyContent: 'space-between',
         overflow: 'hidden',
         _focus: {
-          style: {
-            outlineWidth: '3px',
-            outlineColor: 'primary.500',
-            outlineStyle: 'solid',
-          },
+          style: { ...focusRing },
         },
       },
     },