feat(password-input): support theming (#635)

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

Author: montezume

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,12 +1,13 @@
 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';
 
-export const component = () => (
+export const component = ({ themes }) => (
   <Suite>
     <Spec label="minimal">
       <PasswordInput
@@ -73,5 +74,14 @@ export const component = () => (
         hasWarning={true}
       />
     </Spec>
+    <ThemeProvider theme={themes.darkTheme}>
+      <Spec label="with custom (inverted) theme">
+        <PasswordInput
+          value={value}
+          onChange={() => {}}
+          horizontalConstraint="m"
+        />
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );