Adding typography mixins and settings. Need to include image examples

app/styleguide/button/_button.scss

@@ -15,7 +15,8 @@ $disabled-btn-bg-color: #EAEAEA;
 $disabled-btn-text-color: #A8A8A8;
 
 .paper-button {
-  font-family: $feature-font-family;
+  @include typo-button();
+
   background: $default-btn-bg-color;
   color: $default-btn-text-color;
   border-radius: 2px;
@@ -25,8 +26,6 @@ $disabled-btn-text-color: #A8A8A8;
   position: relative;
   display: block;
 	outline-color: $default-btn-outline-color;
-	text-transform: uppercase;
-	font-size: 0.8em;
 	min-width: 124px;
 }
 

app/styleguide/palette/demo.scss

@@ -1,5 +1,6 @@
 @import "../styleguide_demo_bp";
 @import 'palette';
+@import "../typography/typography";
 
 @mixin colorGroups($palette) {
   .color-50 {
@@ -136,11 +137,11 @@
 }
 
 .palette-group div {
+  @include typo-caption();
+
   max-width: 300px;
   padding: 15px;
   color: white;
-  font-weight: 300;
-  font-size: 14px;
 }
 
 .palette-group div.dark-text, .heading.dark-text div.palette-name {

app/styleguide/typography/_typography.scss

@@ -1,8 +1,161 @@
-$feature-font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
-$stock-font-family: 'Helvetica', 'Arial', sans-serif;
+//$feature-font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+//$stock-font-family: 'Helvetica', 'Arial', sans-serif;
+
+@mixin typo-display-4($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 112px;
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -0.04em;
+
+  @if $colorContrast {
+    opacity: 0.54;
+  }
+}
+
+@mixin typo-display-3($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 56px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: -0.02em;
+
+  @if $colorContrast {
+    opacity: 0.54;
+  }
+}
+
+@mixin typo-display-2($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 45px;
+  font-weight: 400;
+  line-height: 48px;
+
+  @if $colorContrast {
+    opacity: 0.54;
+  }
+}
+
+@mixin typo-display-1($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 34px;
+  font-weight: 400;
+  line-height: 40px;
+
+  @if $colorContrast {
+    opacity: 0.54;
+  }
+}
+
+@mixin typo-headline($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  -moz-osx-font-smoothing: grayscale;
+
+  @if $colorContrast {
+    opacity: 0.87;
+  }
+}
+
+@mixin typo-title($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.02em;
+
+  @if $colorContrast {
+    opacity: 0.87;
+  }
+}
+
+@mixin typo-subhead($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.04em;
+
+  @if $colorContrast {
+    opacity: 0.87;
+  }
+}
+
+@mixin typo-subhead-2($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: 0.04em;
+
+  @if $colorContrast {
+    opacity: 0.87;
+  }
+}
+
+@mixin typo-body-2($colorContrast:false) {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0.04em;
+
+  @if $colorContrast {
+    opacity: 0.87;
+  }
+}
+
+@mixin typo-body-1($colorContrast:false) {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.04em;
+
+  @if $colorContrast {
+    opacity: 0.87;
+  }
+}
+
+@mixin typo-caption($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0.08em;
+
+  @if $colorContrast {
+    opacity: 0.54;
+  }
+}
+
+@mixin typo-menu($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.04em;
+
+  @if $colorContrast {
+    opacity: 0.87;
+  }
+}
+
+@mixin typo-button($colorContrast:false) {
+  font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 1;
+  letter-spacing: 0.04em;
+
+  @if $colorContrast {
+    opacity: 0.87;
+  }
+}
 
 html, body {
-	font-family: $feature-font-family;
+	font-family: 'RobotoDraft', 'Helvetica', 'Arial', sans-serif;
 	font-size: 14px;
 	font-weight: 400;
 	line-height: 20px;
@@ -13,121 +166,92 @@ h1, h2, h3, h4, h5, h6, p {
 	padding: 0;
 }
 
+/**
+ * Styles for HTML elements
+ */
+
+h1 {
+  @include typo-display-3();
+}
+
+h2 {
+  @include typo-display-2();
+}
+
+h3 {
+  @include typo-display-1();
+}
+
+h4 {
+  @include typo-headline();
+}
+
+h5 {
+  @include typo-title();
+}
+
+h6 {
+  @include typo-subhead();
+}
+
 p {
-	margin: 0 0 16px 0;
+  @include typo-body-1();
+
+  margin: 0 0 16px 0;
 }
 
 a {
-	font-weight: bold;
+  font-weight: bold;
 }
 
-@mixin typo-display-4() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 112px;
-	font-weight: 300;
-	opacity: 0.54;
-	line-height: 1;
-	letter-spacing: -0.04em;
+/**
+ * Class Name Styles
+ */
+
+.display-4 {
+  @include typo-display-4();
 }
 
-@mixin typo-display-3() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 56px;
-	font-weight: 400;
-	opacity: 0.54;
-	line-height: 1;
-	letter-spacing: -0.02em;
+.display-3 {
+  @include typo-display-3();
 }
 
-@mixin typo-display-2() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 45px;
-	font-weight: 400;
-	opacity: 0.54;
-	line-height: 48px;
+.display-2 {
+  @include typo-display-2();
 }
 
-@mixin typo-display-1() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 34px;
-	font-weight: 400;
-	opacity: 0.54;
-	line-height: 40px;
+.display-1 {
+  @include typo-display-1();
 }
 
-@mixin typo-headline() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 24px;
-	font-weight: 400;
-	opacity: 0.87;
-	line-height: 32px;
-	-moz-osx-font-smoothing: grayscale;
+.headline {
+  @include typo-headline();
 }
 
-@mixin typo-title() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 20px;
-	font-weight: 500;
-	opacity: 0.87;
-	line-height: 1;
-	letter-spacing: 0.02em;
+.title {
+  @include typo-title();
 }
 
-@mixin typo-subhead() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 16px;
-	font-weight: 400;
-	opacity: 0.87;
-	line-height: 24px;
-	letter-spacing: 0.04em;
+.subhead {
+  @include typo-subhead();
 }
 
-@mixin typo-subhead-2() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 16px;
-	font-weight: 400;
-	opacity: 0.87;
-	line-height: 24px;
-	letter-spacing: 0.04em;
+.body-2 {
+  @include typo-body-2();
 }
 
-@mixin typo-subhead-2() {
-	font-family: 'Roboto', sans-serif;
-	line-height: 28px;
+.body-1 {
+  @include typo-body-1();
 }
 
-@mixin typo-body-2() {
-	font-size: 14px;
-	font-weight: 500;
-	opacity: 0.87;
-	line-height: 24px;
-	letter-spacing: 0.04em;
+.caption {
+  @include typo-caption();
 }
 
-@mixin typo-caption() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 12px;
-	font-weight: 400;
-	opacity: 0.54;
-	line-height: 1;
-	letter-spacing: 0.08em;
+.menu {
+  @include typo-menu();
 }
 
-@mixin typo-menu() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 14px;
-	font-weight: 500;
-	opacity: 0.87;
-	line-height: 1;
-	letter-spacing: 0.04em;
-}
-
-@mixin typo-button() {
-	font-family: 'Roboto', sans-serif;
-	font-size: 14px;
-	font-weight: 500;
-	text-transform: uppercase;
-	opacity: 0.87;
-	line-height: 1;
-	letter-spacing: 0.04em;
+.button {
+  @include typo-button();
 }

app/styleguide/typography/demo.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Typography</title>
+
+    <link rel="stylesheet" href="demo.css">
+
+    <link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
+
+  </head>
+  <body>
+
+
+  <h2>Typography</h2>
+
+  <h3>Scale &amp; Basic Styles</h3>
+  <table>
+    <tr>
+      <th>Display 4</th>
+      <td class='display-4'>Light 112px</td>
+    </tr>
+    <tr>
+      <th>Display 3</th>
+      <td class='display-3'>Regular 56px</td>
+    </tr>
+    <tr>
+      <th>Display 2</th>
+      <td class='display-2'>Regular 45px</td>
+    </tr>
+    <tr>
+      <th>Display 1</th>
+      <td class='display-1'>Regular 34px</td>
+    </tr>
+    <tr>
+      <th>Headline</th>
+      <td class='headline'>Regular 24px</td>
+    </tr>
+    <tr>
+      <th>Title</th>
+      <td class='title'>Medium 20px</td>
+    </tr>
+    <tr>
+      <th>Subhead</th>
+      <td class='subhead'>Regular 16px (Device), Regular 15px (Desktop)</td>
+    </tr>
+    <tr>
+      <th>Body 2</th>
+      <td class='body-2'>Medium 14px (Device), Medium 13px (Desktop)</td>
+    </tr>
+    <tr>
+      <th>Body 1</th>
+      <td class='body-1'>Regular 14px (Device), Regular 13px (Desktop)</td>
+    </tr>
+    <tr>
+      <th>Caption</th>
+      <td class='caption'>Regular 12px</td>
+    </tr>
+    <tr>
+      <th>Menu</th>
+      <td class='menu'>Medium 14px (Device), Medium 13px (Desktop)</td>
+    </tr>
+    <tr>
+      <th>Button</th>
+      <td class='button'>Medium (All Caps) 14px</td>
+    </tr>
+  </table>
+
+  <h1>&lt;h1&gt;</h1>
+  <h2>&lt;h2&gt;</h2>
+  <h3>&lt;h3&gt;</h3>
+  <h4>&lt;h4&gt;</h4>
+  <h5>&lt;h5&gt;</h5>
+  <h6>&lt;h6&gt;</h6>
+
+  <p>&lt;p&gt;</p>
+
+  <p class="body-2">&lt;p class="body-2"&gt;</p>
+
+  <p class="caption">&lt;p class="caption"&gt;</p>
+
+  <p class="menu">&lt;p class="menu"&gt;</p>
+
+  <p class="button">&lt;p class="button"&gt;</p>
+  </body>
+</html>

app/styleguide/typography/demo.scss

@@ -0,0 +1,9 @@
+@import "../styleguide_demo_bp";
+@import 'typography';
+
+table th {
+  padding-right: 80px;
+
+  @include typo-body-1();
+  text-align: left;
+}