Repository: FormidableLabs/spectacle
Pull request #771 (2019-11-11 20:42:40)

Update Demo Deck, fix some layout bugs
- Update Demo Deck
- Fix some layout bugs in Slide and Table

<img width="922" alt="Screen Shot 2019-11-11 at 2 35 54 PM" src="https://user-images.githubusercontent.com/1738349/68619640-7a7cf500-0491-11ea-85e5-917150e323d3.png">
<img width="925" alt="Screen Shot 2019-11-11 at 2 36 01 PM" src="https://user-images.githubusercontent.com/1738349/68619641-7a7cf500-0491-11ea-8bc3-3b4ee405c1a0.png">



Patch:
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 3dc2265..8bdd866 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -14,8 +14,7 @@ Have you read Formidable's Code of Conduct? By filing an Issue, you are expected
 **Feel free to delete this section if you have checked off all of the following.**
 
 - [ ] I've searched open [issues](https://www.github.com/FormidableLabs/spectacle/issues) to make sure I'm not opening a duplicate issue
-- [ ] This issue not specific to `spectacle-boilerplate` (those issues should be opened [here](https://github.com/FormidableLabs/spectacle-boilerplate/issues/new)).
-- [ ] I have read through the [docs](https://formidable.com/open-source/spectacle/docs/) before asking a question
+- [ ] I have read through the [docs](TODO) before asking a question
 - [ ] I am using the latest version of Spectacle
 
 ### Describe Your Environment
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index be23bb1..9173490 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -12,7 +12,7 @@ Fixes # (issue)
 
 #### Type of Change
 
-Please delete options that are not relevant.
+Please delete options that are not relevant (including this descriptive text).
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
@@ -21,16 +21,19 @@ Please delete options that are not relevant.
 
 ### How Has This Been Tested?
 
-Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.
 
 ### Checklist: (Feel free to delete this section upon completion)
 
-- [ ] My code follows the style guidelines of this project (I have run `yarn prettier-fix && yarn lint`)
+<!--
 - [ ] I have added tests that prove my fix is effective or that my feature works
 - [ ] New and existing unit tests pass locally with my changes (I have run `yarn test`)
+- [ ] I have updated type definitions in `index.d.ts` for any breaking API changes
+-->
+
+- [ ] My code follows the style guidelines of this project (I have run `yarn run check`)
 - [ ] I have performed a self-review of my own code
 - [ ] I have commented my code, particularly in hard-to-understand areas
 - [ ] I have made corresponding changes to the documentation
 - [ ] My changes generate no new warnings
 - [ ] Any dependent changes have been merged and published in downstream modules
-- [ ] I have updated type definitions in `index.d.ts` for any breaking API changes
diff --git a/.travis.yml b/.travis.yml
index eec77ca..2b556e2 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,7 +11,7 @@ sudo: false
 branches:
   only:
     - master
-    # TODO: Remove after we release the rewrite.
+    # TODO(REWRITE): Remove after we release the rewrite.
     - task/rewrite
 
 install:
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1daced7..790334b 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,8 @@
 # Contributing
 
-Thanks for contributing!
+Thank you for contributing!
+
+Spectacle is actively maintained by @carlos-kelly and @kale-stew from within @FormidableLabs.
 
 ## Development
 
@@ -46,7 +48,7 @@ $ open examples/one-page.html
 
 ### Testing
 
-@TODO
+TODO
 
 ### Linting and Formatting
 
@@ -64,16 +66,16 @@ $ yarn prettier-check
 $ yarn prettier-fix
 ```
 
-Note that there is duplication for JS code in `prettier` doing the same style changes. But both should be harmonious and run together.
+Note that there is duplication for JS code in `prettier` doing the same style changes, but both should be harmonious and run together.
 
 ### Before submitting a PR
 
 Thanks for taking the time to help us make Spectacle even better! Before you go ahead and submit a PR, make sure that you have done the following:
 
+- Run all checks using `yarn run check`.
 - Check that both the core library and _all_ examples build: `yarn build && yarn build-examples`.
-- Run all checks using `yarn run check`
 - Update the [type definitions](./index.d.ts) for anything that modifies the Spectacle API, like breaking changes or new features.
-- Everything else included in our [pull request checklist](https://github.com/FormidableLabs/spectacle/blob/master/.github/PULL_REQUEST_TEMPLATE.md#checklist-feel-free-to-delete-this-section-upon-completion)
+- Everything else included in our [pull request checklist](.github/PULL_REQUEST_TEMPLATE.md).
 
 ### Releasing a new version to NPM
 
diff --git a/README.md b/README.md
index d16a990..ed9ee50 100644
--- a/README.md
+++ b/README.md
@@ -1,47 +1,82 @@
 # Spectacle
 
-ReactJS based Presentation Library
+<!-- TODO BADGES -->
+
+✨ A ReactJS based Presentation Library ✨
+
+Looking for a quick preview of what you can do with Spectacle? Check out our Live Demo deck [here](https://spectacle.formidable.com).
+
+Have a question about Spectacle? Submit an issue in this repository using the "Question" template.
+
+<!--
+## Table of Contents
+TODO - automate this
+-->
 
 ## Getting Started
 
-@TODO
+First, you'll have to decide how you want to use Spectacle. There are a couple of different ways to build your presentation.
+
+1. Using [**MDX**](https://mdxjs.com/)
+
+   - Steps
+   - To
+   - Start
+   - With an
+   - MDX Presentation
+
+2. Using [**Classic JSX**](https://reactjs.org/docs/introducing-jsx.html)
+
+   - Steps
+   - To
+   - Start
+   - With a
+   - JSX Presentation
 
 ## Development
 
-@TODO
+```sh
+yarn add spectacle
+```
+
+### Basic Concepts
+
+#### Layouts
+
+#### Themes
+
+### API
 
 ## Build & Deployment
 
-@TODO
+<!-- TODO will we have an out-of-the-box solution for deployment? -->
+
+```sh
+yarn run build
+```
 
 ## Presenting
 
-@TODO
+Spectacle comes with a built-in Presenter view. It shows you a slide lookahead, your current slide and related notes, and the current time.
+
+![Screenshot of Spectacle's Presenter view with a clock](TODO)
 
-## Controls
+You also have the option of a stopwatch to count the elapsed time.
 
-| Key Combination | Function                       |
-| --------------- | ------------------------------ |
-| Right Arrow     | Next Slide                     |
-| Left Arrow      | Previous Slide                 |
-| Space           | Next Slide                     |
-| Shift+Space     | Previous Slide                 |
-| Alt/Option + O  | Toggle Overview Mode           |
-| Alt/Option + P  | Toggle Presenter Mode          |
-| Alt/Option + T  | Toggle Timer in Presenter Mode |
-| Alt/Option + A  | Toggle autoplay (if enabled)   |
-| Alt/Option + F  | Toggle Fullscreen Mode         |
+![Screenshot of Spectacle's Presenter view with a stopwatch](TODO)
 
-## Basic Concepts
+To present,
 
-### Layouts
+1. Run `yarn start`
+2. Navigate to [localhost:3000/#](https://localhost:3000/#) to view your presentation
+3. Open a second browser window and navigate to [localhost:3000/#/0?presenter](http://localhost:3000/#/0?presenter) to view your presentation with notes and a clock. Add [?presenter&timer](http://localhost:3000/#/0?presenter&timer) to switch from a clock a timer.
 
-@TODO
+## FAQ
 
-### Themes
+Can I write my presentation in TypeScript?
 
-@TODO
+Can I easily create templates?
 
-## FAQ
+Can I export my slides for use elsewhere?
 
-@TODO
+What is the preferred way to deploy a Spectacle presentation?
diff --git a/examples/js/index.html b/examples/js/index.html
index 7714a1d..ade60fc 100644
--- a/examples/js/index.html
+++ b/examples/js/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>
diff --git a/examples/js/index.js b/examples/js/index.js
index cf55076..9c6c293 100644
--- a/examples/js/index.js
+++ b/examples/js/index.js
@@ -12,15 +12,15 @@ import {
   Heading,
   ListItem,
   OrderedList,
-  Quote,
   Text,
-  UnorderedList,
   Grid,
   Notes,
   FullScreen,
   Progress,
-  Markdown
+  Markdown,
+  CodeSpan
 } from '../../src/';
+import SpectacleLogo from '../../src/components/logo';
 
 const formidableLogo = require('./formidable.png');
 const cppCodeBlock = `#include <iostream>
@@ -70,8 +70,19 @@ int main()
   return 0;
 }`;
 
+const customTheme = {
+  fonts: {
+    header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
+    text: '"Open Sans Condensed", Helvetica, Arial, sans-serif'
+  },
+  space: {
+    headerMargin: '0'
+  }
+};
+
 const TestJs = () => (
   <Deck
+    theme={customTheme}
     template={() => (
       <FlexBox
         justifyContent="space-between"
@@ -89,21 +100,18 @@ const TestJs = () => (
     )}
   >
     <Slide>
-      <Heading>Spectacle</Heading>
-      <Text>Hello There 🤗</Text>
-      <Quote>This is a Formidaquote!</Quote>
-      <OrderedList>
-        <Appear elementNum={0}>
-          <ListItem>This is an</ListItem>
-        </Appear>
-        <Appear elementNum={1}>
-          <ListItem>ordered list</ListItem>
-        </Appear>
-      </OrderedList>
-      <UnorderedList>
-        <ListItem>This is an</ListItem>
-        <ListItem>unordered list</ListItem>
-      </UnorderedList>
+      <FlexBox height="100%">
+        <SpectacleLogo size={500} />
+      </FlexBox>
+    </Slide>
+    <Slide>
+      <FlexBox height="100%" flexDirection="column">
+        <Heading fontSize="150px">SPECTACLE</Heading>
+        <Heading fontSize="h2">A ReactJS Presentation Library</Heading>
+        <Heading color="primary" fontSize="h3">
+          Where you can write your decks in JSX, Markdown, or MDX!
+        </Heading>
+      </FlexBox>
       <Notes>
         <p>
           Notes are shown in presenter mode. Open up
@@ -112,36 +120,31 @@ const TestJs = () => (
       </Notes>
     </Slide>
     <Slide>
-      <Heading>Hi There</Heading>
+      <Heading>Code Blocks</Heading>
       <CodePane fontSize={18} language="cpp" autoFillHeight>
         {cppCodeBlock}
       </CodePane>
-      <Text>Lots of pointers!</Text>
-      <Notes>
-        <p>
-          This is a code pane! It can support multiple programming languages.
-        </p>
-      </Notes>
+      <Text>
+        Code Blocks now auto size and scroll when there is an overflow of
+        content! They also auto-wrap longer lines.
+      </Text>
     </Slide>
     <Slide>
-      <Text fontSize="subHeader">Slide 3!</Text>
-      <Appear elementNum={0}>
-        <Text>{`Hey, just one "animated" slide element here`}</Text>
-      </Appear>
-    </Slide>
-    <Slide>
-      <Text>{`I'm a static slide element that should always show`}</Text>
-      <Text>{`This means that we don't need a SlideElementWrapper`}</Text>
-      <Appear elementNum={0}>
-        <Text> ZERO Slide 4 x 3! </Text>
-      </Appear>
-      <Appear elementNum={1}>
-        <Text> ONE Slide 4 x 3! </Text>
-      </Appear>
-      <Appear elementNum={2}>
-        <Text> TWO Slide 4 x 3! </Text>
-      </Appear>
-      <Text>{`I'm also a static non-animated "slide element"!`}</Text>
+      <Heading>Animated Elements</Heading>
+      <OrderedList>
+        <Appear elementNum={0}>
+          <ListItem>Elements can animate in!</ListItem>
+        </Appear>
+        <Appear elementNum={2}>
+          <ListItem>
+            Just identify the order with the prop{' '}
+            <CodeSpan>elementNum</CodeSpan>!
+          </ListItem>
+        </Appear>
+        <Appear elementNum={1}>
+          <ListItem>Out of order</ListItem>
+        </Appear>
+      </OrderedList>
     </Slide>
     <Slide>
       <FlexBox>
@@ -158,7 +161,7 @@ const TestJs = () => (
           <Text>Double-size Grid Item</Text>
         </Box>
       </Grid>
-      <Heading>Lots of Formidables!</Heading>
+      <Heading>Create Grids in Spectacle</Heading>
       <Grid
         gridTemplateColumns="1fr 1fr 1fr"
         gridTemplateRows="1fr 1fr 1fr"
@@ -178,9 +181,9 @@ const TestJs = () => (
     <Slide>
       <Markdown>
         {`
-          # hello there
+          # Layout Tables in Markdown
 
-          | hi              | Supported | Versions |
+          | Browser         | Supported | Versions |
           |-----------------|-----------|----------|
           | Chrome          | Yes       | Last 2   |
           | Firefox         | Yes       | Last 2   |
@@ -190,28 +193,31 @@ const TestJs = () => (
         `}
       </Markdown>
     </Slide>
-    <Slide>
-      <Markdown>
-        {`
-          ### Paying for too much Lambda memory?
-          - Yes you are!
-
-          \`\`\`js
-          fields @timestamp, res.duration
-          | filter res.duration > 0
-          | sort @timestamp desc
-          | limit 20
-          | stats min(res.duration), avg(res.duration), max(res.duration) by bin(30m)
-          \`\`\`
-        `}
-      </Markdown>
-    </Slide>
     <Markdown containsSlides>
       {`
-        ### First MD generated Slide
+        ### Even write multiple slides in Markdown
+        > Wonderfully formatted quotes
+        
+        1. Even create
+        2. Lists in Markdown
+        
+        - Or Unordered Lists
+        - Too!
         Notes: These are notes
         ---
-        ### Second MD Generated Slide
+        ### This slide was also generated in Markdown!
+        
+        \`\`\`jsx
+        const evenCooler = "is that you can do code in Markdown";
+        // You can even specify the syntax type! 
+        \`\`\`
+        
+        ### A slide can have multiple code blocks too.
+        
+        \`\`\`c
+        char[] someString = "Popular languages like C too!";
+        \`\`\`
+        
         Notes: These are more notes
       `}
     </Markdown>
diff --git a/examples/one-page.html b/examples/one-page.html
index 93f89a9..ad409c2 100644
--- a/examples/one-page.html
+++ b/examples/one-page.html
@@ -22,14 +22,15 @@
         Appear,
         CodePane,
         FlexBox,
+        FullScreen,
+        CodeSpan,
+        Progress,
         Box,
         Image,
         Heading,
         ListItem,
         OrderedList,
-        Quote,
         Text,
-        UnorderedList,
         Grid,
         Notes,
         Markdown
@@ -46,14 +47,15 @@
         std::cout << answer << std::endl;
         return 0;
       }`.replace(/      /gm, '');
+      const customTheme = {
+        space: {
+          headerMargin: '0'
+        }
+      };
       const deck = html`
         <${Deck}
-          theme=${{
-            colors: {
-              secondary: 'hotpink'
-            }
-          }}
-          template=${({ numberOfSlides, slideNumber }) =>
+          theme=${customTheme}
+          template=${() =>
             html`
               <${FlexBox}
                 justifyContent="space-between"
@@ -61,40 +63,26 @@
                 bottom=${0}
                 width=${1}
               >
-                <${Text} fontSize=${12}>
-                  Slide ${slideNumber} of ${numberOfSlides}
+                <${Box} padding="0 1em">
+                  <${FullScreen} />
                 <//>
-                <${Box} padding=${10}>
-                  <${Image} src=${formidableLogo} width=${100} />
+                <${Box} padding="1em">
+                  <${Progress} />
                 <//>
               <//>
             `}
         >
           <${Slide}>
-            <${Heading}>Spectacle<//>
-            <${Text}>Hello There 🤗<//>
-            <${Quote}>This is a Formidaquote!<//>
-            <${OrderedList}>
-              <${Appear} elementNum=${0}>
-                <${ListItem}>This is an<//>
-              <//>
-              <${Appear} elementNum=${1}>
-                <${ListItem}>ordered list<//>
-              <//>
-            <//>
-            <${UnorderedList}>
-              <${ListItem}>This is an<//>
-              <${ListItem}>unordered list<//>
-            <//>
-            <${Notes}>
-              <p>
-                Notes are shown in presenter mode. Open up
-                localhost:3000/?presenterMode=true to see them.
+            <${FlexBox} height="100%" flexDirection="column">
+              <${Heading} fontSize="150px">SPECTACLE</Heading>
+              <${Heading} fontSize="h2">A ReactJS Presentation Library</Heading>
+              <${Heading} color="primary" fontSize="h3">
+                Where you can write your decks in JSX, Markdown, or MDX!
               <//>
             <//>
           <//>
           <${Slide}>
-            <${CodePane} fontSize=${18} language="cpp">
+            <${CodePane} autoFillHeight fontSize=${18} language="cpp">
               ${cppCodeBlock}
             <//>
             <${Notes}>
@@ -105,24 +93,20 @@
             <//>
           <//>
           <${Slide}>
-            <${Text} fontSize="subHeader">Slide 3!<//>
-            <${Appear} elementNum=${0}>
-              <${Text}>Hey, just one "animated" slide element here<//>
-            <//>
-          <//>
-          <${Slide}>
-            <${Text}>I'm a static slide element that should always show<//>
-            <${Text}>This means that we don't need a SlideElementWrapper<//>
-            <${Appear} elementNum=${0}>
-              <${Text}> ZERO Slide 4 x 3! <//>
-            <//>
-            <${Appear} elementNum=${1}>
-              <${Text}> ONE Slide 4 x 3! <//>
-            <//>
-            <${Appear} elementNum=${2}>
-              <${Text}> TWO Slide 4 x 3! <//>
+            <${Heading}>Animated Elements<//>
+            <${OrderedList}>
+              <${Appear} elementNum=${0}>
+                <${ListItem}>Elements can animate in!<//>
+              <//>
+              <${Appear} elementNum=${2}>
+                <${ListItem}>
+                  Just identify the order with the prop <${CodeSpan}>elementNum<//>!
+                <//>
+              <//>
+              <${Appear} elementNum=${1}>
+                <${ListItem}>Out of order<//>
+              <//>
             <//>
-            <${Text}>I'm also a static non-animated "slide element"!<//>
           <//>
           <${Slide}>
             <${FlexBox}>
@@ -162,9 +146,9 @@
           <${Slide}>
             <${Markdown}>
               ${`
-                # hello there
+                # Layout Tables in Markdown
 
-                | hi              | Supported | Versions |
+                | Browser         | Supported | Versions |
                 |-----------------|-----------|----------|
                 | Chrome          | Yes       | Last 2   |
                 | Firefox         | Yes       | Last 2   |
@@ -174,31 +158,30 @@
               `}
             <//>
           <//>
-          <${Slide}>
-            <${Markdown}>
-              ${`
-                ### Paying for too much Lambda memory?
-                - Yes you are!
-
-                \`\`\`js
-                fields @timestamp, res.duration
-                | filter res.duration > 0
-                | sort @timestamp desc
-                | limit 20
-                | stats min(res.duration), avg(res.duration), max(res.duration) by bin(30m)
-                \`\`\`
-              `}
-            <//>
-          <//>
           <${Markdown} containsSlides>
             ${`
-              ### First MD Generated Slide
-              - A list item
-              - Another
+              ### Even write multiple slides in Markdown
+              > Wonderfully formatted quotes
+
+              1. Even create
+              2. Lists in Markdown
+
+              - Or Unordered Lists
+              - Too!
+              Notes: These are notes
               ---
-              ### Second MD Generated Slide
-              1. An ordered list item
-              2. Second
+              ### This slide was also generated in Markdown!
+
+              \`\`\`jsx
+              const evenCooler = "is that you can do code in Markdown";
+              // You can even specify the syntax type!
+              \`\`\`
+
+              ### A slide can have multiple code blocks too.
+
+              \`\`\`c
+              char[] someString = "Popular languages like C too!";
+              \`\`\`
             `}
           <//>
         <//>
@@ -206,4 +189,4 @@
       ReactDOM.render(deck, document.getElementById('root'));
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/package.json b/package.json
index a18d830..1885d46 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "check": "yarn lint && yarn prettier-check && yarn test",
     "check-ci": "yarn run check"
   },
-  "author": "",
+  "author": "Formidable Labs <hello@formidable.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/src/components/slide.js b/src/components/slide.js
index 3a388ed..6567120 100644
--- a/src/components/slide.js
+++ b/src/components/slide.js
@@ -11,6 +11,7 @@ const SlideContainer = styled('div')`
   width: ${({ theme }) => theme.size.width || 1366}px;
   height: ${({ theme }) => theme.size.height || 768}px;
   overflow: hidden;
+  display: flex;
   @media print {
     page-break-before: always;
     height: 100vh;
@@ -20,6 +21,8 @@ const SlideContainer = styled('div')`
 const SlideWrapper = styled('div')`
   ${color};
   ${space};
+  flex: 1;
+  display: flex;
 `;
 const TemplateWrapper = styled('div')`
   position: absolute;
@@ -30,6 +33,9 @@ const TemplateWrapper = styled('div')`
   pointer-events: none;
   z-index: -1;
 `;
+const InnerSlideRef = styled('div')`
+  flex: 1;
+`;
 
 /**
  * Slide component wraps anything going in a slide and maintains
@@ -132,7 +138,7 @@ const Slide = props => {
         color={textColor}
       >
         <SlideContext.Provider value={value}>
-          <div ref={contentRef}>{children}</div>
+          <InnerSlideRef ref={contentRef}>{children}</InnerSlideRef>
         </SlideContext.Provider>
       </SlideWrapper>
     </SlideContainer>
diff --git a/src/components/table.js b/src/components/table.js
index 210f727..989b66c 100644
--- a/src/components/table.js
+++ b/src/components/table.js
@@ -60,7 +60,8 @@ TableBody.defaultProps = {
   fontFamily: 'text',
   fontSize: 'text',
   textAlign: 'left',
-  margin: 'listMargin'
+  margin: 'listMargin',
+  width: 1
 };
 
 const TableRow = styled('tr')(
diff --git a/src/components/typography.js b/src/components/typography.js
index a9814e2..0af4507 100644
--- a/src/components/typography.js
+++ b/src/components/typography.js
@@ -26,7 +26,7 @@ const CodeSpan = styled('code')(
 );
 CodeSpan.defaultProps = {
   fontFamily: 'monospace',
-  fontSize: 'monospace'
+  fontSize: 'text'
 };
 
 const Link = styled('a')(
diff --git a/src/theme/default-theme.js b/src/theme/default-theme.js
index 3c4f861..c3e52e2 100644
--- a/src/theme/default-theme.js
+++ b/src/theme/default-theme.js
@@ -6,7 +6,7 @@ export default {
   },
   colors: {
     primary: '#ebe5da',
-    secondary: '#f04d21',
+    secondary: '#fc6986',
     tertiary: '#1e2852',
     quaternary: '#ffc951',
     quinary: '#8bddfd'
@@ -17,11 +17,10 @@ export default {
     monospace: '"Consolas", "Menlo", monospace'
   },
   fontSizes: {
-    h1: '52px',
-    h2: '44px',
-    h3: '40px',
-    h4: '32px',
-    text: '26px',
+    h1: '72px',
+    h2: '64px',
+    h3: '56px',
+    text: '44px',
     monospace: '20px'
   },
   space: {


Test patch:
diff --git a/src/components/__snapshots__/table.test.js.snap b/src/components/__snapshots__/table.test.js.snap
index 0d29b27..ee83680 100644
--- a/src/components/__snapshots__/table.test.js.snap
+++ b/src/components/__snapshots__/table.test.js.snap
@@ -26,7 +26,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
         "componentStyle": ComponentStyle {
           "componentId": "sc-bdVaJa",
           "isStatic": false,
-          "lastClassName": "daBKtD",
+          "lastClassName": "durzFL",
           "rules": Array [
             [Function],
           ],
@@ -46,7 +46,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
     textAlign="left"
   >
     <table
-      className="sc-bdVaJa daBKtD"
+      className="sc-bdVaJa durzFL"
       color="primary"
       fontFamily="text"
       fontSize="text"
@@ -57,6 +57,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
         fontSize="text"
         margin="listMargin"
         textAlign="left"
+        width={1}
       >
         <StyledComponent
           color="primary"
@@ -71,12 +72,13 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                 "fontSize": "text",
                 "margin": "listMargin",
                 "textAlign": "left",
+                "width": 1,
               },
               "attrs": Array [],
               "componentStyle": ComponentStyle {
                 "componentId": "sc-htpNat",
                 "isStatic": false,
-                "lastClassName": "kAldGz",
+                "lastClassName": "fpnqwt",
                 "rules": Array [
                   [Function],
                 ],
@@ -94,12 +96,14 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
           forwardedRef={null}
           margin="listMargin"
           textAlign="left"
+          width={1}
         >
           <tbody
-            className="sc-htpNat kAldGz"
+            className="sc-htpNat fpnqwt"
             color="primary"
             fontFamily="text"
             fontSize="text"
+            width={1}
           >
             <styled.tr
               color="primary"
@@ -126,7 +130,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                     "componentStyle": ComponentStyle {
                       "componentId": "sc-bxivhb",
                       "isStatic": false,
-                      "lastClassName": "diWnNz",
+                      "lastClassName": "gctdLg",
                       "rules": Array [
                         [Function],
                       ],
@@ -146,7 +150,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                 textAlign="left"
               >
                 <tr
-                  className="sc-bxivhb diWnNz"
+                  className="sc-bxivhb gctdLg"
                   color="primary"
                   fontFamily="text"
                   fontSize="text"
@@ -176,7 +180,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                           "componentStyle": ComponentStyle {
                             "componentId": "sc-ifAKCX",
                             "isStatic": false,
-                            "lastClassName": "iVQBSZ",
+                            "lastClassName": "liwbNs",
                             "rules": Array [
                               [Function],
                             ],
@@ -196,7 +200,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                       textAlign="left"
                     >
                       <td
-                        className="sc-ifAKCX iVQBSZ"
+                        className="sc-ifAKCX liwbNs"
                         color="primary"
                         fontFamily="text"
                         fontSize="text"
@@ -230,7 +234,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                           "componentStyle": ComponentStyle {
                             "componentId": "sc-ifAKCX",
                             "isStatic": false,
-                            "lastClassName": "iVQBSZ",
+                            "lastClassName": "liwbNs",
                             "rules": Array [
                               [Function],
                             ],
@@ -250,7 +254,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                       textAlign="left"
                     >
                       <td
-                        className="sc-ifAKCX iVQBSZ"
+                        className="sc-ifAKCX liwbNs"
                         color="primary"
                         fontFamily="text"
                         fontSize="text"
@@ -287,7 +291,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                     "componentStyle": ComponentStyle {
                       "componentId": "sc-bxivhb",
                       "isStatic": false,
-                      "lastClassName": "diWnNz",
+                      "lastClassName": "gctdLg",
                       "rules": Array [
                         [Function],
                       ],
@@ -307,7 +311,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                 textAlign="left"
               >
                 <tr
-                  className="sc-bxivhb diWnNz"
+                  className="sc-bxivhb gctdLg"
                   color="primary"
                   fontFamily="text"
                   fontSize="text"
@@ -337,7 +341,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                           "componentStyle": ComponentStyle {
                             "componentId": "sc-ifAKCX",
                             "isStatic": false,
-                            "lastClassName": "iVQBSZ",
+                            "lastClassName": "liwbNs",
                             "rules": Array [
                               [Function],
                             ],
@@ -357,7 +361,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                       textAlign="left"
                     >
                       <td
-                        className="sc-ifAKCX iVQBSZ"
+                        className="sc-ifAKCX liwbNs"
                         color="primary"
                         fontFamily="text"
                         fontSize="text"
@@ -391,7 +395,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                           "componentStyle": ComponentStyle {
                             "componentId": "sc-ifAKCX",
                             "isStatic": false,
-                            "lastClassName": "iVQBSZ",
+                            "lastClassName": "liwbNs",
                             "rules": Array [
                               [Function],
                             ],
@@ -411,7 +415,7 @@ exports[`<Table /> should render a <table> with a <tr> for each row and a <td> w
                       textAlign="left"
                     >
                       <td
-                        className="sc-ifAKCX iVQBSZ"
+                        className="sc-ifAKCX liwbNs"
                         color="primary"
                         fontFamily="text"
                         fontSize="text"
@@ -457,7 +461,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
         "componentStyle": ComponentStyle {
           "componentId": "sc-bdVaJa",
           "isStatic": false,
-          "lastClassName": "daBKtD",
+          "lastClassName": "durzFL",
           "rules": Array [
             [Function],
           ],
@@ -477,7 +481,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
     textAlign="left"
   >
     <table
-      className="sc-bdVaJa daBKtD"
+      className="sc-bdVaJa durzFL"
       color="primary"
       fontFamily="text"
       fontSize="text"
@@ -510,7 +514,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
               "componentStyle": ComponentStyle {
                 "componentId": "sc-bwzfXH",
                 "isStatic": false,
-                "lastClassName": "kolAaC",
+                "lastClassName": "hTrYkn",
                 "rules": Array [
                   [Function],
                 ],
@@ -530,7 +534,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
           textAlign="left"
         >
           <thead
-            className="sc-bwzfXH kolAaC"
+            className="sc-bwzfXH hTrYkn"
             color="primary"
             fontFamily="text"
             fontSize="text"
@@ -561,7 +565,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
                     "componentStyle": ComponentStyle {
                       "componentId": "sc-bxivhb",
                       "isStatic": false,
-                      "lastClassName": "diWnNz",
+                      "lastClassName": "gctdLg",
                       "rules": Array [
                         [Function],
                       ],
@@ -581,7 +585,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
                 textAlign="left"
               >
                 <tr
-                  className="sc-bxivhb diWnNz"
+                  className="sc-bxivhb gctdLg"
                   color="primary"
                   fontFamily="text"
                   fontSize="text"
@@ -611,7 +615,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
                           "componentStyle": ComponentStyle {
                             "componentId": "sc-ifAKCX",
                             "isStatic": false,
-                            "lastClassName": "iVQBSZ",
+                            "lastClassName": "liwbNs",
                             "rules": Array [
                               [Function],
                             ],
@@ -631,7 +635,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
                       textAlign="left"
                     >
                       <td
-                        className="sc-ifAKCX iVQBSZ"
+                        className="sc-ifAKCX liwbNs"
                         color="primary"
                         fontFamily="text"
                         fontSize="text"
@@ -665,7 +669,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
                           "componentStyle": ComponentStyle {
                             "componentId": "sc-ifAKCX",
                             "isStatic": false,
-                            "lastClassName": "iVQBSZ",
+                            "lastClassName": "liwbNs",
                             "rules": Array [
                               [Function],
                             ],
@@ -685,7 +689,7 @@ exports[`<Table /> should render a <table> with bold text for the header row 1`]
                       textAlign="left"
                     >
                       <td
-                        className="sc-ifAKCX iVQBSZ"
+                        className="sc-ifAKCX liwbNs"
                         color="primary"
                         fontFamily="text"
                         fontSize="text"
diff --git a/src/components/__snapshots__/typography.test.js.snap b/src/components/__snapshots__/typography.test.js.snap
index dfc8a89..8b61875 100644
--- a/src/components/__snapshots__/typography.test.js.snap
+++ b/src/components/__snapshots__/typography.test.js.snap
@@ -3,23 +3,23 @@
 exports[`<CodeSpan /> should render a <code> with text 1`] = `
 <styled.code
   fontFamily="monospace"
-  fontSize="monospace"
+  fontSize="text"
 >
   <StyledComponent
     fontFamily="monospace"
-    fontSize="monospace"
+    fontSize="text"
     forwardedComponent={
       Object {
         "$$typeof": Symbol(react.forward_ref),
         "_foldedDefaultProps": Object {
           "fontFamily": "monospace",
-          "fontSize": "monospace",
+          "fontSize": "text",
         },
         "attrs": Array [],
         "componentStyle": ComponentStyle {
           "componentId": "sc-bwzfXH",
           "isStatic": false,
-          "lastClassName": "llQNOW",
+          "lastClassName": "vCJVt",
           "rules": Array [
             [Function],
           ],
@@ -37,9 +37,9 @@ exports[`<CodeSpan /> should render a <code> with text 1`] = `
     forwardedRef={null}
   >
     <code
-      className="sc-bwzfXH llQNOW"
+      className="sc-bwzfXH vCJVt"
       fontFamily="monospace"
-      fontSize="monospace"
+      fontSize="text"
     >
       Code!
     </code>
@@ -78,7 +78,7 @@ exports[`<Heading /> should render a <Text /> component with h1 size 1`] = `
         "componentStyle": ComponentStyle {
           "componentId": "sc-bxivhb",
           "isStatic": false,
-          "lastClassName": "bkTcph",
+          "lastClassName": "fgPWOS",
           "rules": Array [
             [Function],
           ],
@@ -101,7 +101,7 @@ exports[`<Heading /> should render a <Text /> component with h1 size 1`] = `
     textAlign="center"
   >
     <div
-      className="sc-bdVaJa sc-bxivhb bkTcph"
+      className="sc-bdVaJa sc-bxivhb fgPWOS"
       color="secondary"
       fontFamily="header"
       fontSize="h1"
@@ -143,7 +143,7 @@ exports[`<Link /> should render an <a> with text 1`] = `
         "componentStyle": ComponentStyle {
           "componentId": "sc-htpNat",
           "isStatic": false,
-          "lastClassName": "ljENQF",
+          "lastClassName": "gtuVZb",
           "rules": Array [
             [Function],
           ],
@@ -165,7 +165,7 @@ exports[`<Link /> should render an <a> with text 1`] = `
     textDecoration="underline"
   >
     <a
-      className="sc-htpNat ljENQF"
+      className="sc-htpNat gtuVZb"
       color="quaternary"
       fontFamily="text"
       fontSize="text"
@@ -203,7 +203,7 @@ exports[`<OrderedList /> should render an <ol> with <li> children 1`] = `
         "componentStyle": ComponentStyle {
           "componentId": "sc-EHOje",
           "isStatic": false,
-          "lastClassName": "gQKsor",
+          "lastClassName": "cTJUpw",
           "rules": Array [
             [Function],
           ],
@@ -223,7 +223,7 @@ exports[`<OrderedList /> should render an <ol> with <li> children 1`] = `
     textAlign="left"
   >
     <ol
-      className="sc-EHOje gQKsor"
+      className="sc-EHOje cTJUpw"
       color="primary"
       fontFamily="text"
       fontSize="text"
@@ -342,7 +342,7 @@ exports[`<Quote /> should render a <Text /> component with a left border 1`] = `
         "componentStyle": ComponentStyle {
           "componentId": "sc-ifAKCX",
           "isStatic": false,
-          "lastClassName": "dVkzML",
+          "lastClassName": "Rvdjo",
           "rules": Array [
             [Function],
             "
@@ -375,7 +375,7 @@ exports[`<Quote /> should render a <Text /> component with a left border 1`] = `
     textAlign="left"
   >
     <div
-      className="sc-bdVaJa sc-ifAKCX dVkzML"
+      className="sc-bdVaJa sc-ifAKCX Rvdjo"
       color="primary"
       fontFamily="text"
       fontSize="text"
@@ -415,7 +415,7 @@ exports[`<Text /> should render a <div> with text 1`] = `
         "componentStyle": ComponentStyle {
           "componentId": "sc-bdVaJa",
           "isStatic": false,
-          "lastClassName": "gMVSNU",
+          "lastClassName": "jyYFKr",
           "rules": Array [
             [Function],
           ],
@@ -436,7 +436,7 @@ exports[`<Text /> should render a <div> with text 1`] = `
     textAlign="left"
   >
     <div
-      className="sc-bdVaJa gMVSNU"
+      className="sc-bdVaJa jyYFKr"
       color="primary"
       fontFamily="text"
       fontSize="text"
@@ -473,7 +473,7 @@ exports[`<UnorderedList /> should render a <ul> with <li> children 1`] = `
         "componentStyle": ComponentStyle {
           "componentId": "sc-bZQynM",
           "isStatic": false,
-          "lastClassName": "hzGuvh",
+          "lastClassName": "gKyNJo",
           "rules": Array [
             [Function],
           ],
@@ -493,7 +493,7 @@ exports[`<UnorderedList /> should render a <ul> with <li> children 1`] = `
     textAlign="left"
   >
     <ul
-      className="sc-bZQynM hzGuvh"
+      className="sc-bZQynM gKyNJo"
       color="primary"
       fontFamily="text"
       fontSize="text"