feat(localized-multiline-text-input): support theming

Author: montezume

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

@@ -1,11 +1,20 @@
 import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
 import {
   LocalizedMultilineTextInput,
   ErrorMessage,
   WarningMessage,
 } from 'ui-kit';
 import { Suite, Spec } from '../../../../test/percy';
 
+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)',
+};
+
 const lorem =
   '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.';
 
@@ -155,5 +164,14 @@ export const component = () => (
         hasWarning={true}
       />
     </Spec>
+    <ThemeProvider theme={darkTheme}>
+      <Spec label="with custom theme" inverted>
+        <LocalizedMultilineTextInput
+          value={value}
+          onChange={() => {}}
+          selectedLanguage="en"
+        />
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );

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

@@ -90,7 +90,10 @@ export default class TranslationInput extends React.Component {
             display: flex;
           `}
         >
-          <label htmlFor={this.props.id} css={getLanguageLabelStyles}>
+          <label
+            htmlFor={this.props.id}
+            css={theme => getLanguageLabelStyles(this.props, theme)}
+          >
             {/* FIXME: add proper tone for disabled when tones are refactored */}
             <Text.Detail tone="secondary">
               {this.props.language.toUpperCase()}
@@ -111,7 +114,7 @@ export default class TranslationInput 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/localized-multiline-text-input/translation-input.styles.js

@@ -1,5 +1,6 @@
 import { css } from '@emotion/core';
 import vars from '../../../../materials/custom-properties';
+import designTokens from '../../../../materials/design-tokens';
 import { getInputStyles } from '../styles';
 
 /* we need this line-height to achieve 32px height when the component has only one row */
@@ -9,9 +10,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`
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
@@ -31,20 +32,34 @@ const getTextareaStyles = props => {
   return baseStyles;
 };
 
-const getLanguageLabelStyles = () => css`
-  /* avoid wrapping label onto new lines */
-  flex: 1 0 auto;
-  color: ${vars.fontColorDisabled};
-  line-height: calc(${vars.sizeHeightInput} - 2 * ${vars.borderRadius1});
-  background-color: ${vars.backgroundColorInputDisabled};
-  border-top-left-radius: ${vars.borderRadiusInput};
-  border-bottom-left-radius: ${vars.borderRadiusInput};
-  border: 1px ${vars.borderColorInputDisabled} solid;
-  padding: 0 ${vars.spacing8};
-  transition: ${vars.transitionStandard};
-  border-right: 0;
-  box-shadow: none;
-  appearance: none;
-`;
+const getLanguageLabelStyles = (props, theme) => {
+  const overwrittenVars = {
+    ...vars,
+    ...theme,
+  };
+
+  return css`
+    /* avoid wrapping label onto new lines */
+    flex: 1 0 auto;
+    color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
+    line-height: calc(${vars.sizeHeightInput} - 2 * ${vars.borderRadius1});
+    background-color: ${overwrittenVars[
+      designTokens.backgroundColorForInputWhenDisabled
+    ]};
+    border-top-left-radius: ${overwrittenVars[
+      designTokens.borderRadiusForInput
+    ]};
+    border-bottom-left-radius: ${overwrittenVars[
+      designTokens.borderRadiusForInput
+    ]};
+    border: 1px ${overwrittenVars[designTokens.borderColorForInputWhenDisabled]}
+      solid;
+    padding: 0 ${vars.spacing8};
+    transition: ${vars.transitionStandard};
+    border-right: 0;
+    box-shadow: none;
+    appearance: none;
+  `;
+};
 
 export { getTextareaStyles, getLanguageLabelStyles };