feat(localized-text-input): support custom theming, use design tokens (#630)

* feat: support custom themes for localized-text-input

* chore: omit props list for spec

Author: montezume

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

@@ -73,7 +73,10 @@ class LocalizedInput 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()}
@@ -89,7 +92,7 @@ class LocalizedInput extends React.Component {
           onFocus={this.props.onFocus}
           disabled={this.props.isDisabled}
           placeholder={this.props.placeholder}
-          css={getLocalizedInputStyles(this.props)}
+          css={theme => getLocalizedInputStyles(this.props, theme)}
           readOnly={this.props.isReadOnly}
           autoFocus={this.props.isAutofocussed}
           /* ARIA */

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

@@ -1,13 +1,14 @@
 import { css } from '@emotion/core';
 import vars from '../../../../materials/custom-properties';
+import designTokens from '../../../../materials/design-tokens';
 import { getInputStyles } from '../styles';
 
 // NOTE: order is important here
 // * 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 getLocalizedInputStyles = props => [
-  getInputStyles(props),
+const getLocalizedInputStyles = (props, theme) => [
+  getInputStyles(props, theme),
   css`
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -16,22 +17,36 @@ const getLocalizedInputStyles = props => [
   `,
 ];
 
-const getLanguageLabelStyles = () => css`
-  /* avoid wrapping label onto new lines */
-  flex: 1 0 auto;
-  box-sizing: border-box;
-  color: ${vars.fontColorDisabled};
-  height: ${vars.sizeHeightInput};
-  line-height: ${vars.sizeHeightInput};
-  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;
+    box-sizing: border-box;
+    color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
+    height: ${vars.sizeHeightInput};
+    line-height: ${vars.sizeHeightInput};
+    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 { getLocalizedInputStyles, getLanguageLabelStyles };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LocalizedTextInput, ErrorMessage } from 'ui-kit';
+import { ThemeProvider } from 'emotion-theming';
 import { Suite, Spec } from '../../../../test/percy';
 
 const value = {
@@ -8,6 +9,14 @@ const value = {
   es: 'hola mundo',
 };
 
+const theme = {
+  colorSurface: 'black',
+  colorSolid: 'white',
+  colorNeutral60: 'rgba(0,0,0,0.60)',
+  colorNeutral: 'rgba(0,0,0,0.60)',
+  colorAccent98: 'rgba(0,0,0,0.98)',
+};
+
 export const routePath = '/localized-text-input';
 
 export const component = () => (
@@ -102,5 +111,15 @@ export const component = () => (
         hasError={true}
       />
     </Spec>
+    <Spec label="with a custom (dark) theme" omitPropsList={true}>
+      <ThemeProvider theme={theme}>
+        <LocalizedTextInput
+          value={value}
+          onChange={() => {}}
+          selectedLanguage="en"
+          horizontalConstraint="m"
+        />
+      </ThemeProvider>
+    </Spec>
   </Suite>
 );