feat(typography): Adds first draft of all type styles

packages/ray/lib/_typography.scss

@@ -1,93 +1,94 @@
-p {
-  margin: 0 0 34px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: bold;
+  margin: 0;
 }
 
-.h4 {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 26px;
-  margin-bottom: 5px;
+.h1 {
+  font-size: 4rem;
+  line-height: 96px;
+  margin-bottom: 1.5rem;
+}
 
-  @include tablet {
-    font-size: 20px;
-    line-height: 32px;
-  }
+.h2 {
+  font-size: 3rem;
+  line-height: 72px;
+  margin-bottom: 1rem;
 }
 
 .h3 {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 28px;
-  margin-bottom: 10px;
-
-  @include tablet {
-    font-size: 40px;
-    line-height: 56px;
-  }
+  font-size: 2.5rem;
+  line-height: 60px;
+  margin-bottom: 1rem;
 }
 
-.h2 {
-  font-size: 40px;
-  font-weight: 600;
+.h4 {
+  font-size: 2rem;
   line-height: 56px;
-  margin-bottom: 10px;
-
-  @include tablet {
-    font-size: 48px;
-    line-height: 72px;
-  }
+  margin-bottom: 1rem;
 }
 
-.h1 {
-  font-size: 48px;
-  font-weight: 600;
-  line-height: 72px;
-  margin-bottom: 20px;
+.h5 {
+  font-size: 1.5rem;
+  line-height: 40px;
+  margin-bottom: 0.5rem;
+}
 
-  @include tablet {
-    font-size: 56px;
-    line-height: 80px;
-  }
+.h6 {
+  font-size: 1.25rem;
+  line-height: 40px;
+  margin-bottom: 0.5rem;
 }
 
-.h0 {
-  font-size: 56px;
+p,
+.p1,
+.p2,
+.p3,
+.p4,
+.p5,
+.p6 {
   font-weight: 400;
-  line-height: 80px;
-  margin-bottom: 20px;
-
-  @include tablet {
-    font-size: 64px;
-    line-height: 96px;
-  }
+  margin: 0;
 }
 
 .p1 {
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 32px;
+  font-size: 2rem;
+  line-height: 48px;
 }
 
 .p2 {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 28px;
+  font-size: 1.5rem;
+  line-height: 40px;
 }
 
 .p3 {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1.25rem;
+  line-height: 32px;
 }
 
 .p4 {
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 1rem;
+  line-height: 28px;
+}
+
+.p5 {
+  font-size: 0.875rem;
+  line-height: 24px;
+}
+
+.p6 {
+  font-size: 0.75rem;
+  line-height: 12px;
 }
 
 .label {

packages/ray/stories/buttons.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import withPadding from './util/withPadding';
+
+storiesOf('Buttons', module)
+  .addWithJSX('primary', () => (
+    <button className="btn--primary">Hello World</button>
+  ))
+  .addWithJSX('secondary', () => (
+    <button className="btn--secondary">Hello World</button>
+  ));

packages/ray/stories/card.stories.js

@@ -5,7 +5,7 @@ storiesOf('Card', module).addWithJSX('All', () => (
   <div
     style={{
       padding: '1rem',
-      maxWidth: '600px'
+      maxWidth: '400px'
     }}
   >
     <div className="card">
@@ -15,14 +15,10 @@ storiesOf('Card', module).addWithJSX('All', () => (
       />
 
       <div className="card__content">
-        <h2 className="h3" style={{ marginTop: 0 }}>
-          Spacetravel guidelines
-        </h2>
-        <p className="copy2">
+        <h2 className="h5">Spacetravel guidelines</h2>
+        <p className="copy5">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
-          atque minima itaque sint! Doloremque odio quia saepe unde sunt neque
-          quam quibusdam in, nihil beatae, consequatur cumque? Cupiditate, quia
-          facilis.
+          atque minima itaque sint! Doloremque odio quia saepe.
         </p>
       </div>
     </div>

packages/ray/stories/forms.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import withPadding from './util/withPadding';
+
+storiesOf('Forms', module)
+  .addWithJSX('single field', () =>
+    withPadding(
+      <div className="field">
+        <input id="email" type="text" placeholder="arya.stark@winterfell.com" />
+        <label for="email">Email address</label>
+      </div>
+    )
+  )
+  .addWithJSX('example form', () =>
+    withPadding(
+      <React.Fragment>
+        <h2 className="h3">Sign up</h2>
+        <p className="p3" style={{ marginBottom: '1.5rem' }}>
+          You have the opportunity to try new things, but also to make mistakes
+          and fail without the pressure of being judged.
+        </p>
+        <div className="field">
+          <input id="name" type="text" placeholder="Arya Stark" />
+          <label for="name">Name</label>
+        </div>
+        <div className="field">
+          <input
+            id="email"
+            type="text"
+            placeholder="arya.stark@winterfell.com"
+          />
+          <label for="email">Email address</label>
+        </div>
+        <div className="field">
+          <input
+            id="password"
+            type="password"
+            placeholder="the.north.remembers"
+          />
+          <label for="password">Password</label>
+        </div>
+
+        <button className="btn--primary">Submit</button>
+      </React.Fragment>
+    )
+  );

packages/ray/stories/page/page.stories.js → packages/ray/stories/page.stories.js

@@ -1,11 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import './styles.scss';
-
-const Image = props => {
-  return <img {...props} style={{ width: '100%' }} />;
-};
+import './styles/styles.scss';
 
 storiesOf('Page', module).addWithJSX('example', () => (
   <div className="container" style={{ padding: '4rem 0', minHeight: '100vh' }}>