feat: add focus-visible ring styles

src/recipes/iconButton.ts

@@ -23,6 +23,9 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
       transitionProperty: 'color, background-color, border-color',
       transitionDuration: 'normal',
       transitionTimingFunction: 'easeOut',
+      focusVisibleRing: 'outside',
+      focusRingWidth: '2px',
+      focusRingOffset: '0px',
       _disabled: {
         cursor: 'not-allowed',
         _hover: {
@@ -56,7 +59,14 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
         )
       },
       color: {
-        ...Object.fromEntries(colors.map((color) => [color, {}]))
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            {
+              focusRingColor: `{colors.${color}.6}`
+            }
+          ])
+        )
       },
       variant: {
         ...Object.fromEntries(iconButtonVariants.map((variant) => [variant, {}]))
@@ -92,6 +102,9 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
                 _hover: {
                   backgroundColor: `${color}.10`
                 },
+                _focusVisible: {
+                  backgroundColor: `${color}.10`
+                },
                 _active: {
                   backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`
                 },
@@ -118,6 +131,10 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
                   backgroundColor: `${color}.10`,
                   color: `${color}.foreground`
                 },
+                _focusVisible: {
+                  backgroundColor: `${color}.10`,
+                  color: `${color}.foreground`
+                },
                 _active: {
                   backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
                   color: `${color}.foreground`
@@ -145,6 +162,10 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
                   backgroundColor: `${color}.10`,
                   color: `${color}.foreground`
                 },
+                _focusVisible: {
+                  backgroundColor: `${color}.10`,
+                  color: `${color}.foreground`
+                },
                 _active: {
                   backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
                   color: `${color}.foreground`