feat: allow theming for text (#671)

* feat: allow theming for text

Author: montezume

src/components/label/label.visualroute.js

@@ -18,9 +18,11 @@ export const component = ({ themes }) => (
         Hello
       </Label>
     </Spec>
-    <ThemeProvider theme={themes.darkTheme}>
-      <Spec label="when inverted">
-        <Label tone="inverted">Hello</Label>
+    <ThemeProvider theme={{ ...themes.darkTheme, colorSurface: 'purple' }}>
+      <Spec label="when inverted" omitPropsList={true}>
+        <ThemeProvider theme={themes.darkTheme}>
+          <Label tone="inverted">Hello</Label>
+        </ThemeProvider>
       </Spec>
     </ThemeProvider>
   </Suite>

src/components/typography/text/text.js

@@ -30,7 +30,7 @@ const Headline = props => {
   const HeadlineElement = props.elementType;
   return (
     <HeadlineElement
-      css={headlineStyles(props)}
+      css={theme => headlineStyles(props, theme)}
       title={props.title}
       {...filterDataAttributes(props)}
     >
@@ -57,7 +57,7 @@ const Subheadline = props => {
   return (
     <SubheadlineElement
       title={props.title}
-      css={subheadlineStyles(props)}
+      css={theme => subheadlineStyles(props, theme)}
       {...filterDataAttributes(props)}
     >
       {props.intlMessage ? (
@@ -87,7 +87,11 @@ Subheadline.propTypes = {
 };
 
 const Wrap = props => (
-  <div css={wrapStyles()} title={props.title} {...filterDataAttributes(props)}>
+  <div
+    css={theme => wrapStyles(props, theme)}
+    title={props.title}
+    {...filterDataAttributes(props)}
+  >
     {props.intlMessage ? (
       <FormattedMessage {...props.intlMessage} />
     ) : (
@@ -106,7 +110,7 @@ Wrap.propTypes = {
 const Body = props =>
   props.isInline ? (
     <span
-      css={bodyStyles(props)}
+      css={theme => bodyStyles(props, theme)}
       title={props.title}
       {...filterDataAttributes(props)}
     >
@@ -118,7 +122,7 @@ const Body = props =>
     </span>
   ) : (
     <p
-      css={bodyStyles(props)}
+      css={theme => bodyStyles(props, theme)}
       title={props.title}
       {...filterDataAttributes(props)}
     >
@@ -151,7 +155,7 @@ Body.propTypes = {
 
 const Detail = props => (
   <small
-    css={detailStyles(props)}
+    css={theme => detailStyles(props, theme)}
     title={props.title}
     {...filterDataAttributes(props)}
     className={props.className}

src/components/typography/text/text.styles.js

@@ -1,10 +1,17 @@
 import { css } from '@emotion/core';
 import vars from '../../../../materials/custom-properties';
 
-const baseStyles = `
-  font-family: ${vars.fontFamilyDefault};
-  color: ${vars.colorSolid};
+const getBaseStyles = (props, theme) => {
+  const overwrittenVars = {
+    ...vars,
+    ...theme,
+  };
+
+  return `
+   font-family: ${vars.fontFamilyDefault};
+   color: ${overwrittenVars.colorSolid};
 `;
+};
 
 const truncate = `
   white-space: nowrap;
@@ -24,22 +31,26 @@ const inline = `
   display: inline-block;
 `;
 
-const getTone = tone => {
+const getTone = (tone, theme) => {
+  const overwrittenVars = {
+    ...vars,
+    ...theme,
+  };
   switch (tone) {
     case 'information':
-      return `color: ${vars.colorInfo};`;
+      return `color: ${overwrittenVars.colorInfo};`;
     case 'secondary':
-      return `color: ${vars.colorNeutral60};`;
+      return `color: ${overwrittenVars.colorNeutral60};`;
     case 'positive':
-      return `color: ${vars.colorPrimary25};`;
+      return `color: ${overwrittenVars.colorPrimary25};`;
     case 'primary':
-      return `color: ${vars.colorPrimary};`;
+      return `color: ${overwrittenVars.colorPrimary};`;
     case 'negative':
-      return `color: ${vars.colorError};`;
+      return `color: ${overwrittenVars.colorError};`;
     case 'inverted':
-      return `color: ${vars.colorSurface};`;
+      return `color: ${overwrittenVars.colorSurface};`;
     case 'warning':
-      return `color: ${vars.colorWarning};`;
+      return `color: ${overwrittenVars.colorWarning};`;
     default:
       return ``;
   }
@@ -62,47 +73,47 @@ const getElementFontSize = elementType => {
   }
 };
 
-export const bodyStyles = props => css`
-  ${baseStyles}
+export const bodyStyles = (props, theme) => css`
+  ${getBaseStyles(props, theme)}
   margin: 0;
   font-size: 1rem;
   ${props.isBold && bold}
   ${props.isItalic && italic}
-  ${props.tone && getTone(props.tone)}
+  ${props.tone && getTone(props.tone, theme)}
   ${props.truncate && truncate}
 `;
 
-export const headlineStyles = props => css`
-  ${baseStyles}
+export const headlineStyles = (props, theme) => css`
+  ${getBaseStyles(props, theme)}
   margin: 0;
   font-size: ${getElementFontSize(props.elementType)};
   font-weight: 300;
   ${props.truncate && truncate}
 `;
 
-export const subheadlineStyles = props => css`
-  ${baseStyles}
+export const subheadlineStyles = (props, theme) => css`
+${getBaseStyles(props, theme)}
   margin: 0;
   font-size: ${getElementFontSize(props.elementType)};
   font-weight: normal;
   ${props.truncate && truncate}
   ${props.isBold && bold}
-  ${props.tone && getTone(props.tone)}
+  ${props.tone && getTone(props.tone, theme)}
 `;
 
-export const wrapStyles = () => css`
-  ${baseStyles}
+export const wrapStyles = (props, theme) => css`
+  ${getBaseStyles(props, theme)}
   font-size: 1rem;
   white-space: pre-wrap;
 `;
 
-export const detailStyles = props => css`
-  ${baseStyles}
+export const detailStyles = (props, theme) => css`
+  ${getBaseStyles(props, theme)}
   display: block;
   font-size: 0.9231rem;
   ${props.isInline && inline}
   ${props.isBold && bold}
   ${props.isItalic && italic}
-  ${props.tone && getTone(props.tone)}
+  ${props.tone && getTone(props.tone, theme)}
   ${props.truncate && truncate}
 `;

src/components/typography/text/text.visualroute.js

@@ -202,5 +202,22 @@ export const component = ({ themes }) => (
     <Spec label="Detail (intl message)">
       <Text.Detail intlMessage={intlMessage} />
     </Spec>
+    <ThemeProvider theme={themes.darkTheme}>
+      <Spec label="Headline (dark theme)">
+        <Text.Headline elementType="h1">Dark theme</Text.Headline>
+      </Spec>
+      <Spec label="Subheadline (dark theme)">
+        <Text.Subheadline elementType="h4">Dark theme</Text.Subheadline>
+      </Spec>
+      <Spec label="Body (dark theme)">
+        <Text.Body>Dark theme</Text.Body>
+      </Spec>
+      <Spec label="Detail (dark theme)">
+        <Text.Detail>Dark theme</Text.Detail>
+      </Spec>
+      <Spec label="Wrap (dark theme)">
+        <Text.Wrap>Dark theme</Text.Wrap>
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );