UIDS-54 Initial commit of typography story

Author: Rachel Roppolo

.eslintrc

@@ -12,7 +12,8 @@
     {
       "files": [
         "src/**/*.{js,jsx}",
-        "spec/**/*.{js,jsx}"
+        "spec/**/*.{js,jsx}",
+        "stories/**/*.{js,jsx}"
       ],
       "env": {
         "browser": true

scss/global.scss

@@ -1,7 +1,2 @@
 @import url('https://fonts.googleapis.com/css?family=Lato:300,300italic,400,700:latin');
 @import './theme';
-
-body {
-  font-family: $font-family;
-  font-size: $font-size-base;
-}

scss/typography.scss

@@ -1,3 +1,5 @@
+@import './colors/palette';
+
 $font-family: Lato, Arial, sans-serif;
 $font-weight-light: 200;
 $font-weight-normal: 300;
@@ -7,30 +9,69 @@ $headings-font-weight: 400;
 $headings-font-weight-bold: 700;
 
 @mixin font-type-100() {
-  font-family: $font-family;
   font-size: .75rem;
   font-weight: $font-weight-normal;
   line-height: 1rem;
 }
 
 @mixin font-type-200() {
-  font-family: $font-family;
   font-size: $font-size-base;
   font-weight: $font-weight-normal;
   line-height: 1.25rem;
 }
 
 @mixin font-type-300() {
-  font-family: $font-family;
   // font-size:  $font-size-base; -- should base be changed to 1 rem?
   font-size: 1rem;
   font-weight: $font-weight-normal;
   line-height: 1.5rem;
 }
 
 @mixin font-type-400() {
-  font-family: $font-family;
   font-size: 1.125rem;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-normal;
+  line-height: 1.75rem;
+}
+
+@mixin font-type-500() {
+  font-size: 1.25rem;
+  font-weight: $font-weight-normal;
+  line-height: 1.75rem;
+}
+
+@mixin font-type-600() {
+  font-size: 1.5rem;
+  font-weight: $font-weight-normal;
   line-height: 1.75rem;
 }
+
+@mixin font-type-200--bold() {
+  @include font-type-200;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-type-300--bold() {
+  @include font-type-300;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-type-400--bold() {
+  @include font-type-400;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-type-500--bold() {
+  @include font-type-500;
+  font-weight: $headings-font-weight;
+}
+
+@mixin font-type-600--bold() {
+  @include font-type-600;
+  font-weight: $headings-font-weight;
+}
+
+body {
+  font-family: $font-family;
+  font-size: $font-size-base;
+  color: $ux-gray-900;
+}