feat(multiline-text-input): support custom theming (#633)

Author: montezume

src/components/inputs/multiline-text-input/multiline-text-input.js

@@ -80,7 +80,7 @@ export class MultilineTextInput extends React.Component {
                 }}
                 disabled={this.props.isDisabled}
                 placeholder={this.props.placeholder}
-                css={getTextareaStyles(this.props)}
+                css={theme => getTextareaStyles(this.props, theme)}
                 readOnly={this.props.isReadOnly}
                 autoFocus={this.props.isAutofocussed}
                 /* ARIA */

src/components/inputs/multiline-text-input/multiline-text-input.styles.js

@@ -9,9 +9,9 @@ const sizeInputLineHeight = '22px';
 // * a disabled-field currently does not display warning/error-states so it takes precedence
 // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
 // how you can interact with the field is controlled separately by the props, this only influences visuals
-const getTextareaStyles = props => {
+const getTextareaStyles = (props, theme) => {
   const baseStyles = [
-    getInputStyles(props),
+    getInputStyles(props, theme),
     css`
       padding: ${vars.spacing4} ${vars.spacing8};
       line-height: ${sizeInputLineHeight};

src/components/inputs/multiline-text-input/multiline-text-input.visualroute.js

@@ -1,12 +1,21 @@
 import React from 'react';
 import { MultilineTextInput } from 'ui-kit';
+import { ThemeProvider } from 'emotion-theming';
 import { Suite, Spec } from '../../../../test/percy';
 
 const value =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
 
 export const routePath = '/multiline-text-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">
@@ -91,5 +100,14 @@ export const component = () => (
         isDisabled={true}
       />
     </Spec>
+    <ThemeProvider theme={darkTheme}>
+      <Spec inverted label="with custom (inverted) theme">
+        <MultilineTextInput
+          value={value}
+          onChange={() => {}}
+          horizontalConstraint="m"
+        />
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );