Repository: zeit-ui/react (ts)

Issue:
Input autofill text color and background are both black in dark mode.
# Bug report 🐞
The input autofill text color is black as well as the background, in dark mode.

## Version & Environment


## Expection

## Actual results (or Errors)
<img width="387" alt="ss 2020-04-28 at 10 47 10 PM" src="https://user-images.githubusercontent.com/10662231/80556789-bd307c00-89a2-11ea-9e44-21fbadab7875.png">






Pull request:
fix(input): fix color of fill text
## PR Checklist

- [x] Fix linting errors
- [x] Label has been added


## Change information

fixed #150 


Patch:
diff --git a/components/input/input.tsx b/components/input/input.tsx
index 95b3d5b..a778713 100644
--- a/components/input/input.tsx
+++ b/components/input/input.tsx
@@ -201,6 +201,7 @@ const Input = React.forwardRef<HTMLInputElement, React.PropsWithChildren<InputPr
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px ${theme.palette.background} inset !important;
+          -webkit-text-fill-color: ${color} !important;
         }
       `}</style>
     </div>


Test patch:
diff --git a/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap b/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap
index 73f5015..d109744 100644
--- a/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap
+++ b/components/auto-complete/__tests__/__snapshots__/search.test.tsx.snap
@@ -155,6 +155,7 @@ initialize {
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       ",
                   "next": null,
@@ -268,6 +269,7 @@ initialize {
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       ",
                 "next": null,
@@ -568,6 +570,7 @@ initialize {
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       ",
                     "next": null,
@@ -681,6 +684,7 @@ initialize {
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       ",
                   "next": null,
@@ -977,6 +981,7 @@ initialize {
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       ",
                   "next": null,
@@ -1090,6 +1095,7 @@ initialize {
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       ",
                 "next": null,
@@ -1390,6 +1396,7 @@ initialize {
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       ",
                     "next": null,
@@ -1503,6 +1510,7 @@ initialize {
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       ",
                   "next": null,
diff --git a/components/input/__tests__/__snapshots__/index.test.tsx.snap b/components/input/__tests__/__snapshots__/index.test.tsx.snap
index fdb7af2..e075c0b 100644
--- a/components/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -98,6 +98,7 @@ exports[`Input should be work with icon 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" right-icon\\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"><span class=\\"input-icon\\"><span>test-icon</span><style>
         .input-icon {
@@ -196,6 +197,7 @@ exports[`Input should be work with icon 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div></div>"
 `;
@@ -311,6 +313,7 @@ exports[`Input should be work with label 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   right-label\\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div><span class=\\"right\\">label<style>
         span {
@@ -422,6 +425,7 @@ exports[`Input should be work with label 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div><div class=\\"with-label\\"><label><span>Block Label</span><style>
         label {
@@ -523,6 +527,7 @@ exports[`Input should be work with label 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div></div>"
 `;
@@ -610,6 +615,7 @@ exports[`Input should work with different sizes 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
@@ -693,6 +699,7 @@ exports[`Input should work with different sizes 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
@@ -776,6 +783,7 @@ exports[`Input should work with different sizes 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
@@ -859,6 +867,7 @@ exports[`Input should work with different sizes 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div></div>"
 `;
@@ -946,6 +955,7 @@ exports[`Input should work with different status 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
@@ -1029,6 +1039,7 @@ exports[`Input should work with different status 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div><div class=\\"with-label\\"><div class=\\"input-container \\"><div class=\\"input-wrapper   \\"><input type=\\"text\\" class=\\" \\" placeholder=\\"\\" autocomplete=\\"off\\" value=\\"\\"></div></div><style>
         .with-label {
@@ -1112,6 +1123,7 @@ exports[`Input should work with different status 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div></div>"
 `;
diff --git a/components/input/__tests__/__snapshots__/password.test.tsx.snap b/components/input/__tests__/__snapshots__/password.test.tsx.snap
index ba3c915..de0c169 100644
--- a/components/input/__tests__/__snapshots__/password.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/password.test.tsx.snap
@@ -98,6 +98,7 @@ exports[`InputPassword should render correctly 1`] = `
         input:-webkit-autofill:active,
         input:-webkit-autofill:focus {
           -webkit-box-shadow: 0 0 0 30px #fff inset !important;
+          -webkit-text-fill-color: #000 !important;
         }
       </style></div>"
 `;