fix webkit input autofill styles

toolkit/theme/globalCss.ts

@@ -4,6 +4,18 @@ import addressEntity from './globals/address-entity';
 import recaptcha from './globals/recaptcha';
 import scrollbar from './globals/scrollbar';
 
+const webkitAutofillOverrides = {
+  WebkitTextFillColor: 'var(--chakra-colors-input-fg)',
+  '-webkit-box-shadow': '0 0 0px 1000px var(--chakra-colors-input-bg) inset',
+  transition: 'background-color 5000s ease-in-out 0s',
+};
+
+const webkitAutofillRules = {
+  '&:-webkit-autofill': webkitAutofillOverrides,
+  '&:-webkit-autofill:hover': webkitAutofillOverrides,
+  '&:-webkit-autofill:focus': webkitAutofillOverrides,
+};
+
 const globalCss: SystemConfig['globalCss'] = {
   body: {
     bg: 'global.body.bg',
@@ -29,6 +41,13 @@ const globalCss: SystemConfig['globalCss'] = {
       WebkitAppearance: 'none',
       margin: 0,
     },
+    ...webkitAutofillRules,
+  },
+  textarea: {
+    ...webkitAutofillRules,
+  },
+  select: {
+    ...webkitAutofillRules,
   },
   ...recaptcha,
   ...scrollbar,

toolkit/theme/recipes/input.recipe.ts

@@ -23,11 +23,6 @@ export const recipe = defineRecipe({
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
     },
-    _autofill: {
-      // TODO @tom2drum: fix webkit autofill color
-    //   FIXME: this is not working
-    //   WebkitTextFillColor: '{colors.input.fg}',
-    },
   },
 
   variants: {