Merge pull request #199 from sebgroup/feat/adjustable-line-height

feat(typography): allow override of line heights

src/_typography.scss

@@ -73,20 +73,17 @@ $seb-font-path: $vanilla-font-basepath;
     @include media('>mobile') {
       font-size: map-get(map-get($use_heading, 'mobile'), 'size');
       font-weight: map-get(map-get($use_heading, 'mobile'), 'weight');
-      line-height: map-get(map-get($use_heading, 'mobile'), 'size') +
-        vanilla-px-to-rem(8);
+      line-height: map-get(map-get($use_heading, 'mobile'), 'lineHeight');
     }
     @include media('>tablet') {
       font-size: map-get(map-get($use_heading, 'tablet'), 'size');
       font-weight: map-get(map-get($use_heading, 'tablet'), 'weight');
-      line-height: map-get(map-get($use_heading, 'tablet'), 'size') +
-        vanilla-px-to-rem(8);
+      line-height: map-get(map-get($use_heading, 'tablet'), 'lineHeight');
     }
     @include media('>desktop') {
       font-size: map-get(map-get($use_heading, 'desktop'), 'size');
       font-weight: map-get(map-get($use_heading, 'desktop'), 'weight');
-      line-height: map-get(map-get($use_heading, 'desktop'), 'size') +
-        vanilla-px-to-rem(8);
+      line-height: map-get(map-get($use_heading, 'desktop'), 'lineHeight');
     }
   }
 }

src/_variables.scss

@@ -36,135 +36,162 @@ $vanilla-breakpoints: (
 $vanilla-font-settings-h-display: (
   desktop: (
     size: vanilla-px-to-rem(96),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(96 + 8)
   ),
   tablet: (
     size: vanilla-px-to-rem(64),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(64 + 8)
   ),
   mobile: (
     size: vanilla-px-to-rem(48),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(48 + 8)
   )
 ) !default;
 // / Headline H1 font sizes
 $vanilla-font-settings-h1: (
   desktop: (
     size: vanilla-px-to-rem(48),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(48 + 8)
   ),
   tablet: (
     size: vanilla-px-to-rem(40),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(40 + 8)
   ),
   mobile: (
     size: vanilla-px-to-rem(32),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(32 + 8)
   )
 ) !default;
 // / Headline H2 font sizes
 $vanilla-font-settings-h2: (
   desktop: (
     size: vanilla-px-to-rem(32),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(32 + 8)
   ),
   tablet: (
     size: vanilla-px-to-rem(24),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(24 + 8)
   ),
   mobile: (
     size: vanilla-px-to-rem(24),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(24 + 8)
   )
 ) !default;
 // / Headline H3 font sizes
 $vanilla-font-settings-h3: (
   desktop: (
     size: vanilla-px-to-rem(24),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(24 + 8)
   ),
   tablet: (
     size: vanilla-px-to-rem(20),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(22 + 8)
   ),
   mobile: (
     size: vanilla-px-to-rem(20),
-    weight: 600
+    weight: 600,
+    lineHeight: vanilla-px-to-rem(20 + 8)
   )
 ) !default;
 // / Headline H4 font sizes
 $vanilla-font-settings-h4: (
   desktop: (
     size: vanilla-px-to-rem(20),
-    weight: 500
+    weight: 500,
+    lineHeight: vanilla-px-to-rem(20 + 8)
   ),
   tablet: (
     size: vanilla-px-to-rem(20),
-    weight: 500
+    weight: 500,
+    lineHeight: vanilla-px-to-rem(20 + 8)
   ),
   mobile: (
     size: vanilla-px-to-rem(20),
-    weight: 500
+    weight: 500,
+    lineHeight: vanilla-px-to-rem(20 + 8)
   )
 ) !default;
 // / Headline H5 font sizes
 $vanilla-font-settings-h5: (
   desktop: (
     size: vanilla-px-to-rem(16),
-    weight: 500
+    weight: 500,
+    lineHeight: vanilla-px-to-rem(16 + 8)
   ),
   tablet: (
     size: vanilla-px-to-rem(16),
-    weight: 500
+    weight: 500,
+    lineHeight: vanilla-px-to-rem(16 + 8)
   ),
   mobile: (
     size: vanilla-px-to-rem(16),
-    weight: 500
+    weight: 500,
+    lineHeight: vanilla-px-to-rem(16 + 8)
   )
 ) !default;
 // / Headline H6 font sizes
 $vanilla-font-settings-h6: (
   desktop: (
     size: vanilla-px-to-rem(14),
-    weight: 400
+    weight: 400,
+    lineHeight: vanilla-px-to-rem(14 + 8)
   ),
   tablet: (
     size: vanilla-px-to-rem(14),
-    weight: 400
+    weight: 400,
+    lineHeight: vanilla-px-to-rem(14 + 8)
   ),
   mobile: (
     size: vanilla-px-to-rem(14),
-    weight: 400
+    weight: 400,
+    lineHeight: vanilla-px-to-rem(14 + 8)
   )
 ) !default;
 // / Body Regular (Base) font size
 $vanilla-font-settings-body: (
   desktop: (
     size: vanilla-px-to-rem(16),
-    weight: 400
+    weight: 400,
+    lineHeight: vanilla-px-to-rem(16 + 8)
   ),
   tablet: (
     size: vanilla-px-to-rem(16),
-    weight: 400
+    weight: 400,
+    lineHeight: vanilla-px-to-rem(16 + 8)
   ),
   mobile: (
     size: vanilla-px-to-rem(16),
-    weight: 400
+    weight: 400,
+    lineHeight: vanilla-px-to-rem(16 + 8)
   )
 ) !default;
 // / Body Small font size
 $vanilla-font-settings-body-small: (
   desktop: (
     size: vanilla-px-to-rem(14),
-    weight: 400
+    weight: 400,
+    lineHeight: vanilla-px-to-rem(14 + 8)
   ),
   tablet: (
     size: vanilla-px-to-rem(14),
-    weight: 400
+    weight: 400,
+    lineHeight: vanilla-px-to-rem(14 + 8)
   ),
   mobile: (
     size: vanilla-px-to-rem(14),
-    weight: 400
+    weight: 400,
+    lineHeight: vanilla-px-to-rem(14 + 8)
   )
 ) !default;