feat: add h5 and fix line-heights when using em

src/styles/imports/mixins/typography.css

@@ -13,25 +13,31 @@
 @define-mixin typography-h1 $unit {
     @mixin _heading;
     font-size: 6$(unit);
-    line-height: 8$(unit);
+    line-height: calc(8.00001em / 6);
 }
 
 @define-mixin typography-h2 $unit {
     @mixin _heading;
     font-size: 4$(unit);
-    line-height: 5.4$(unit);
+    line-height: calc(5.4em / 4);
 }
 
 @define-mixin typography-h3 $unit {
     @mixin _heading;
     font-size: 3$(unit);
-    line-height: 4$(unit);
+    line-height: calc(4.00001em / 3);
 }
 
 @define-mixin typography-h4 $unit {
     @mixin _heading;
     font-size: 2$(unit);
-    line-height: 3.2$(unit);
+    line-height: calc(3.2em / 2);
+}
+
+@define-mixin typography-h5 $unit {
+    @mixin _heading;
+    font-size: 1.8$(unit);
+    line-height: calc(2.60001em / 1.8);
 }
 
 /* ==========================================================================

stories/base/typography.css

@@ -16,11 +16,15 @@
     @mixin typography-h4 rem;
 }
 
-.body-1 {
+.h5 {
+    @mixin typography-h5 rem;
+}
+
+.body1 {
     @mixin typography-body-1 rem;
 }
 
-.body-2 {
+.body2 {
     @mixin typography-body-2 rem;
 }
 

stories/base/typography.js

@@ -35,6 +35,7 @@ You may use the typography CSS mixins like so:
         <div className={ styles.h2 }>h2 - Some cool title</div>
         <div className={ styles.h3 }>h3 - Some cool title</div>
         <div className={ styles.h4 }>h4 - Some cool title</div>
+        <div className={ styles.h5 }>h5 - Some cool title</div>
         <div className={ styles.body1 }>body-1 (default) - The quick brown-fox jumps over the lazy dog.</div>
         <div className={ styles.body2 }>body-2 - The quick brown-fox jumps over the lazy dog.</div>
         <div className={ styles.caption }>caption - The quick brown-fox jumps over the lazy dog.</div>