UIDS-54 Initial commit of typography story (#55)

Author: rroppolo

.eslintrc

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

.github/workflows/gh-pages-deploy.yml

@@ -2,7 +2,7 @@
   on:
     push:
       branches:
-        - master
+        - feature/UIDS-54-typography-story
   jobs:
     gh-pages-deploy:
       name: Deploying to gh-pages

scss/baseline.scss

@@ -0,0 +1,8 @@
+@import './colors/palette';
+@import './typography';
+
+body {
+  font-family: $font-family;
+  font-size: $font-size-base;
+  color: $ux-gray-900;
+}

scss/global.scss

@@ -1,7 +1,3 @@
 @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;
-}
+@import './baseline';

scss/typography.scss

@@ -1,36 +1,121 @@
 $font-family: Lato, Arial, sans-serif;
-$font-weight-light: 200;
-$font-weight-normal: 300;
-$font-size-base: .875rem;
+//TODO Use font-weight variables in mixins https://github.com/user-interviews/ui-design-system/issues/57
+$font-weight-light: 300;
+$font-weight-normal: 400;
 $font-weight-bold: 700;
-$headings-font-weight: 400;
-$headings-font-weight-bold: 700;
+$font-size-base: 0.875rem;
 
-@mixin font-type-100() {
-  font-family: $font-family;
+@mixin font-type-10() {
+  font-size: .625rem;
+  font-weight: 400;
+  letter-spacing: 0.0625rem;
+  line-height: 0.875rem;
+  text-transform: uppercase;
+}
+
+@mixin font-type-20() {
   font-size: .75rem;
-  font-weight: $font-weight-normal;
+  font-weight: 400;
   line-height: 1rem;
 }
 
-@mixin font-type-200() {
-  font-family: $font-family;
-  font-size: $font-size-base;
-  font-weight: $font-weight-normal;
+@mixin font-type-30() {
+  font-size: 0.875rem;
+  font-weight: 400;
   line-height: 1.25rem;
 }
 
-@mixin font-type-300() {
-  font-family: $font-family;
+@mixin font-type-40() {
   // font-size:  $font-size-base; -- should base be changed to 1 rem?
   font-size: 1rem;
-  font-weight: $font-weight-normal;
-  line-height: 1.5rem;
+  font-weight: 400;
+  line-height: 1.375rem;
 }
 
-@mixin font-type-400() {
-  font-family: $font-family;
+@mixin font-type-50() {
   font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
+
+@mixin font-type-60() {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+}
+
+@mixin font-type-70() {
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 2rem;
+}
+
+@mixin font-type-10--bold() {
+  @include font-type-10;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-type-10--light() {
+  @include font-type-10;
+  font-weight: 300;
+}
+
+@mixin font-type-20--bold() {
+  @include font-type-20;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-type-20--light() {
+  @include font-type-20;
+  font-weight: 300;
+}
+
+@mixin font-type-30--bold() {
+  @include font-type-30;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-type-30--light() {
+  @include font-type-30;
+  font-weight: 300;
+}
+
+@mixin font-type-40--bold() {
+  @include font-type-40;
   font-weight: $font-weight-bold;
-  line-height: 1.75rem;
+}
+
+@mixin font-type-40--light() {
+  @include font-type-40;
+  font-weight: 300;
+}
+
+@mixin font-type-50--bold() {
+  @include font-type-50;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-type-50--light() {
+  @include font-type-50;
+  font-weight: 300;
+}
+
+@mixin font-type-60--bold() {
+  @include font-type-60;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-type-60--light() {
+  @include font-type-60;
+  font-weight: 300;
+}
+
+@mixin font-type-70--bold() {
+  @include font-type-70;
+  font-weight: $font-weight-bold;
+}
+
+@mixin font-type-70--light() {
+  @include font-type-70;
+  font-weight: 300;
 }