Added BlockQuote, updated fonts

src/components/BlockQuote/README.md

@@ -0,0 +1,5 @@
+```js
+<BlockQuote>
+  vx is collection of reusable low-level visualization components.
+</BlockQuote>
+```

src/components/BlockQuote/index.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+import withTheme from '../ThemeContext/withTheme';
+
+const BlockQuote = styled('blockquote')({
+  padding: '8px 16px',
+  lineHeight: 1.8,
+  color: '#777777',
+  borderLeft: '2px solid #EFEFEF'
+}, ({ theme }) => ({
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize
+}));
+
+BlockQuote.propTypes = {
+  theme: PropTypes.object.isRequired
+};
+
+export default withTheme(BlockQuote);

src/components/Button/index.js

@@ -30,9 +30,11 @@ const Button = styled('button')({
     backgroundColor: color
   });
 
-  styles.push({ fontFamily: bold ? theme.titleFontFamily : theme.fontFamily });
-
-  styles.push({ fontWeight: bold ? 800 : 700 });
+  styles.push({
+    fontFamily: bold ? theme.titleFontFamily : theme.fontFamily,
+    fontSize: theme.fontSize,
+    fontWeight: bold ? 800 : 700
+  });
 
   if (bold) styles.push({
     lineHeight: 1.8,

src/components/Card/CardContent/index.js

@@ -5,7 +5,8 @@ import withTheme from '../../ThemeContext/withTheme';
 const CardContent = styled('div')({
   lineHeight: 1.8
 }, ({ theme }) => ({
-  fontFamily: theme.fontFamily
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize
 }));
 
 CardContent.propTypes = {

src/components/Card/CardTitle/index.js

@@ -4,10 +4,11 @@ import withTheme from '../../ThemeContext/withTheme';
 
 const CardTitle = styled('h3')({
   marginTop: 0,
-  marginBottom: 12
+  marginBottom: 8
 }, ({ theme }) => ({
   color: theme.primaryColor,
-  fontFamily: theme.fontFamily
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize * 1.1
 }));
 
 CardTitle.propTypes = {

src/components/Card/index.js

@@ -10,7 +10,8 @@ const Card = styled('article')({
   color: black,
   backgroundColor: cardGrey
 }, ({ theme }) => ({
-  fontFamily: theme.fontFamily
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize
 }));
 
 Card.propTypes = {

src/components/Link/index.js

@@ -16,7 +16,8 @@ const generateLink = (Component) => {
     }
   }, ({ theme }) => ({
     color: theme.primaryColor,
-    fontFamily: theme.fontFamily
+    fontFamily: theme.fontFamily,
+    fontSize: theme.fontSize
   }));
 
   Styled.propTypes = {

src/components/ThemeContext/VxThemeProvider/FontProvider/README.md

@@ -0,0 +1,5 @@
+```js
+<FontProvider>
+  The correct font is available here!
+</FontProvider>
+```

src/components/ThemeContext/VxThemeProvider/FontProvider/index.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import styled from 'react-emotion';
+import withTheme from '../../withTheme';
+
+const FontProvider = styled('div')(({ theme }) => ({
+  fontFamily: theme.fontFamily,
+  fontSize: theme.fontSize
+}));
+
+FontProvider.propTypes = {
+  theme: PropTypes.object.isRequired
+};
+
+export default withTheme(FontProvider);

src/components/ThemeContext/VxThemeProvider/README.md

@@ -3,6 +3,6 @@
   This component sets the ThemeContext which is used by other components. Its use is not obligatory, but if you do use it, use it at the top level of your app.
   <br />
   <br />
-  It also sets the <Code>font-family</Code>, thus rendering <Code>font.css</Code> useless.
+  It also sets the <Code>font-family</Code> and <Code>font-size</Code>, thus rendering <Code>font.css</Code> useless.
 </VxThemeProvider>
 ```

src/components/ThemeContext/VxThemeProvider/index.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ThemeContext, { defaultTheme } from '../index';
-import { defaultFontFamily } from '../../../styles';
+import FontProvider from './FontProvider';
 
-const fontStyle = { fontFamily: defaultFontFamily };
-
-const VxThemeProvider = ({ theme, ...props }) => (
-  <div style={fontStyle}>
-    <ThemeContext.Provider
-      value={{ ...defaultTheme, ...theme }}
-      {...props}
-    />
-  </div>
+const VxThemeProvider = ({ theme, children, ...props }) => (
+  <ThemeContext.Provider
+    value={{ ...defaultTheme, ...theme }}
+    {...props}
+  >
+    <FontProvider>
+      {children}
+    </FontProvider>
+  </ThemeContext.Provider>
 );
 
 VxThemeProvider.propTypes = {
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  children: PropTypes.node
 };
 
 export default VxThemeProvider;

src/components/ThemeContext/index.js

@@ -6,6 +6,7 @@ export const defaultTheme = {
   primaryColor: red,
   secondaryColor: darkGrey,
   fontFamily: defaultFontFamily,
+  fontSize: 18,
   titleFontFamily
 };
 

src/font.css

@@ -1,3 +1,4 @@
 body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ font-size: 18px;
 }