fix: properly render CSS

quid · Dec 5, 2018 · 05f2920 · 05f2920
1 parent c43457d
commit 05f2920
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 23 deletions.
diff --git a/packages/theme/README.md b/packages/theme/README.md
@@ -41,8 +41,8 @@ const Button = styled.button`
 
 ### `textStyles`
 
-This utility will provide a set of CSS class names to style a text
-according to the Quid UI guidelines.
+This utility will provide a set of CSS-in-JS compatible rules
+to style a text according to the Quid UI guidelines.
 
 The available styles are:
 

diff --git a/packages/theme/src/textStyles.js b/packages/theme/src/textStyles.js
@@ -2,24 +2,13 @@
 import { css } from '@emotion/core';
 import wf from './withFallback';
 
-const primaryFontFamily = [
-  'Asap',
-  'Lucida Grande',
-  'Tahoma',
-  'Verdana',
-  'Arial',
-  'sans-serif',
-];
+const primaryFontFamily = css`
+  font-family: Asap, Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
+`;
 
-const secondaryFontFamily = [
-  'Georgia',
-  'Gudea',
-  'Lucida Grande',
-  'Tahoma',
-  'Verdana',
-  'Arial',
-  'sans-serif',
-];
+const secondaryFontFamily = css`
+  font-family: Georgia, Gudea, Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
+`;
 
 const styles = {
   xlarge: css`
@@ -31,13 +20,13 @@ const styles = {
     line-height: 1.27;
   `,
   title: css`
-    font-family: ${secondaryFontFamily.join(' ')};
     font-size: 15px;
     line-height: 1.6;
+    ${secondaryFontFamily}
   `,
   body: css`
-    font-family: ${secondaryFontFamily.join(' ')};
     line-height: 1.54;
+    ${secondaryFontFamily}
   `,
   normal: css`
     font-size: 13px;
@@ -64,12 +53,15 @@ const styles = {
 };
 
 const baseStyle = css`
-  font-family: ${primaryFontFamily.join(' ')};
   letter-spacing: 0.08em;
+  ${primaryFontFamily}
   ${styles.normal}
 `;
 
 const textStyles = (...ss: Array<string>) =>
-  [baseStyle].concat(ss.map(s => styles[s])).join(' ');
+  css`
+    ${baseStyle};
+    ${ss.map(s => styles[s])}
+  `;
 
 export default textStyles;