UIDS-54 Revisions based on initial review meeting

Author: Rachel Roppolo

.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/typography.scss

@@ -1,73 +1,123 @@
 @import './colors/palette';
 
 $font-family: Lato, Arial, sans-serif;
-$font-weight-light: 200;
-$font-weight-normal: 300;
-$font-size-base: .875rem;
+$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() {
+@mixin font-type-10() {
+  font-size: .625rem;
+  font-weight: $font-weight-normal;
+  line-height: 1rem;
+  text-transform: uppercase;
+}
+
+@mixin font-type-20() {
   font-size: .75rem;
   font-weight: $font-weight-normal;
   line-height: 1rem;
 }
 
-@mixin font-type-200() {
-  font-size: $font-size-base;
+@mixin font-type-30() {
+  font-size: 0.875rem;
   font-weight: $font-weight-normal;
   line-height: 1.25rem;
 }
 
-@mixin font-type-300() {
+@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;
 }
 
-@mixin font-type-400() {
+@mixin font-type-50() {
   font-size: 1.125rem;
   font-weight: $font-weight-normal;
   line-height: 1.75rem;
 }
 
-@mixin font-type-500() {
+@mixin font-type-60() {
   font-size: 1.25rem;
   font-weight: $font-weight-normal;
   line-height: 1.75rem;
 }
 
-@mixin font-type-600() {
+@mixin font-type-70() {
   font-size: 1.5rem;
   font-weight: $font-weight-normal;
   line-height: 1.75rem;
 }
 
-@mixin font-type-200--bold() {
-  @include font-type-200;
+@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: $font-weight-light;
+}
+
+@mixin font-type-20--bold() {
+  @include font-type-20;
   font-weight: $font-weight-bold;
 }
 
-@mixin font-type-300--bold() {
-  @include font-type-300;
+@mixin font-type-20--light() {
+  @include font-type-20;
+  font-weight: $font-weight-light;
+}
+
+@mixin font-type-30--bold() {
+  @include font-type-30;
   font-weight: $font-weight-bold;
 }
 
-@mixin font-type-400--bold() {
-  @include font-type-400;
+@mixin font-type-30--light() {
+  @include font-type-30;
+  font-weight: $font-weight-light;
+}
+
+@mixin font-type-40--bold() {
+  @include font-type-40;
   font-weight: $font-weight-bold;
 }
 
-@mixin font-type-500--bold() {
-  @include font-type-500;
-  font-weight: $headings-font-weight;
+@mixin font-type-40--light() {
+  @include font-type-40;
+  font-weight: $font-weight-light;
+}
+
+@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: $font-weight-light;
+}
+
+@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: $font-weight-light;
+}
+
+@mixin font-type-70--bold() {
+  @include font-type-70;
+  font-weight: $font-weight-bold;
 }
 
-@mixin font-type-600--bold() {
-  @include font-type-600;
-  font-weight: $headings-font-weight;
+@mixin font-type-70--light() {
+  @include font-type-70;
+  font-weight: $font-weight-light;
 }
 
 body {