feat(password-input): support theming for password input

src/components/inputs/password-input/password-input.js

@@ -18,7 +18,7 @@ const PasswordInput = props => (
       disabled={props.isDisabled}
       placeholder={props.placeholder}
       autoComplete={props.autoComplete}
-      css={getInputStyles(props)}
+      css={theme => getInputStyles(props, theme)}
       readOnly={props.isReadOnly}
       autoFocus={props.isAutofocussed}
       {...filterDataAttributes(props)}

src/components/inputs/password-input/password-input.visualroute.js

@@ -1,11 +1,20 @@
 import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
 import { PasswordInput } from 'ui-kit';
 import { Suite, Spec } from '../../../../test/percy';
 
 const value = 'hello world how are you?';
 
 export const routePath = '/password-input';
 
+const darkTheme = {
+  colorSurface: 'black',
+  colorSolid: 'white',
+  colorNeutral60: 'rgba(255,255,255,0.60)',
+  colorNeutral: 'rgba(255,255,255,0.60)',
+  colorAccent98: 'rgba(0,0,0,0.98)',
+};
+
 export const component = () => (
   <Suite>
     <Spec label="minimal">
@@ -73,5 +82,14 @@ export const component = () => (
         hasWarning={true}
       />
     </Spec>
+    <ThemeProvider theme={darkTheme}>
+      <Spec label="with custom (inverted) theme" inverted>
+        <PasswordInput
+          value={value}
+          onChange={() => {}}
+          horizontalConstraint="m"
+        />
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );