Add header scale

Author: tobiasahlin

src/marketing/support/variables.scss

@@ -1,43 +1,58 @@
+// Typography
 $marketing-font-path: "/fonts/" !default;
 
 $font-mktg: $body-font !default;
+$mktg-header-spacing-large: -3% !default;
+$mktg-header-spacing-default: -1% !default;
 
-// Builds upon @primer/css/support/variables/typography.scss
-$h000-size-mktg: 96px !default;
-$h000-size-md-mktg: 72px !default;
-$h000-size-sm-mktg: 48px !default;
+$mktg-h0-size: 96px !default;
+$mktg-h0-lh: 100px !default;
+$mktg-h0-size-md: 72px !default;
+$mktg-h0-lh-md: 76px !default;
+$mktg-h0-size-sm: 48px !default;
+$mktg-h0-lh-sm: 52px !default;
 
-$h00-size-mktg: 96px !default;
-$h00-size-md-mktg: 48px !default;
-$h00-size-sm-mktg: 48px !default;
+$mktg-h1-size: 72px !default;
+$mktg-h1-lh: 76px !default;
+$mktg-h1-size-md: 56px !default;
+$mktg-h1-lh-md: 60px !default;
+$mktg-h1-size-sm: 40px !default;
+$mktg-h1-lh-sm: 44px !default;
 
-$h0-size-mktg: 96px !default;
-$h0-size-md-mktg: 48px !default;
-$h0-size-sm-mktg: 48px !default;
+$mktg-h2-size: 64px !default;
+$mktg-h2-lh: 68px !default;
+$mktg-h2-size-md: 48px !default;
+$mktg-h2-lh-md: 52px !default;
+$mktg-h2-size-sm: 32px !default;
+$mktg-h2-lh-sm: 36px !default;
 
-$h1-size-mktg: 96px !default;
-$h1-size-md-mktg: 48px !default;
-$h1-size-sm-mktg: 48px !default;
+$mktg-h3-size: 48px !default;
+$mktg-h3-lh: 52px !default;
+$mktg-h3-size-md: 40px !default;
+$mktg-h3-lh-md: 44px !default;
+$mktg-h3-size-sm: 28px !default;
+$mktg-h3-lh-sm: 32px !default;
 
-$h2-size-mktg: 96px !default;
-$h2-size-md-mktg: 48px !default;
-$h2-size-sm-mktg: 48px !default;
+$mktg-h4-size: 32px !default;
+$mktg-h4-lh: 36px !default;
+$mktg-h4-size-md: 28px !default;
+$mktg-h4-lh-md: 32px !default;
+$mktg-h4-size-sm: 24px !default;
+$mktg-h4-lh-sm: 28px !default;
 
-$h3-size-mktg: 96px !default;
-$h3-size-md-mktg: 48px !default;
-$h3-size-sm-mktg: 48px !default;
+$mktg-h5-size: 24px !default;
+$mktg-h5-lh: 28px !default;
+$mktg-h5-size-md: 24px !default;
+$mktg-h5-lh-md: 28px !default;
+$mktg-h5-size-sm: 20px !default;
+$mktg-h5-lh-sm: 24px !default;
 
-$h4-size-mktg: 96px !default;
-$h4-size-md-mktg: 48px !default;
-$h4-size-sm-mktg: 48px !default;
-
-$h5-size-mktg: 96px !default;
-$h5-size-md-mktg: 48px !default;
-$h5-size-sm-mktg: 48px !default;
-
-$h6-size-mktg: 96px !default;
-$h6-size-md-mktg: 48px !default;
-$h6-size-sm-mktg: 48px !default;
+$mktg-h6-size: 20px !default;
+$mktg-h6-lh: 24px !default;
+$mktg-h6-size-md: 20px !default;
+$mktg-h6-lh-md: 24px !default;
+$mktg-h6-size-sm: 16px !default;
+$mktg-h6-lh-sm: 20px !default;
 
 // Animations
 $transition-time: 0.4s !default;