From 0e34ae90cd3c12e9be192878e6cfbfa9f61ad7d7 Mon Sep 17 00:00:00 2001
From: Tobias Ahlin <211284+tobiasahlin@users.noreply.github.com>
Date: Tue, 4 May 2021 13:58:12 +0200
Subject: [PATCH] Make sure letter spacing and font weight is only set once per
 utility class (rely on inherited values)

---
 src/marketing/support/variables.scss |  4 ++++
 src/marketing/type/typography.scss   | 31 ++++++++++++++++++----------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss
index e6b32359..22b593ce 100644
--- a/src/marketing/support/variables.scss
+++ b/src/marketing/support/variables.scss
@@ -5,6 +5,10 @@ $font-mktg: $body-font !default;
 $mktg-font-feature-settings: 'ss02' on, 'ss01' on !default;
 $mktg-header-spacing-large: -0.03em !default;
 $mktg-header-spacing-default: -0.01em !default;
+$mktg-header-spacing-threshold: 48px !default;
+$mktg-header-weight-large: 800 !default;
+$mktg-header-weight-default: 600 !default;
+$mktg-header-weight-threshold: 24px !default;
 
 // Header size steps
 $mktg-h-size-0:  96px !default;
diff --git a/src/marketing/type/typography.scss b/src/marketing/type/typography.scss
index 3e6edfaf..da6979b4 100644
--- a/src/marketing/type/typography.scss
+++ b/src/marketing/type/typography.scss
@@ -15,27 +15,36 @@
 @each $header, $sizes in $mktg-headers {
   .h#{$header}-mktg {
     $pairing: map-get($mktg-header-pairings, nth($sizes, 1));
+    $pairing-md: map-get($mktg-header-pairings, nth($sizes, 2));
+    $pairing-lg: map-get($mktg-header-pairings, nth($sizes, 3));
+
     font-size: map-get($pairing, "size") !important;
     line-height: map-get($pairing, "lh") !important;
-    @if (map-get($pairing, "size") >= 24px) { font-weight: 800 !important; }
+    @if (map-get($pairing, "size") >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
 
     @if (nth($sizes, 1) != nth($sizes, 2)) {
       @include breakpoint(md) {
-        $pairing: map-get($mktg-header-pairings, nth($sizes, 2));
-        font-size: map-get($pairing, "size") !important;
-        line-height: map-get($pairing, "lh") !important;
-        @if (map-get($pairing, "size") >= 48px) { letter-spacing: $mktg-header-spacing-large; }
-        @if (map-get($pairing, "size") >= 24px) { font-weight: 800 !important; }
+        font-size: map-get($pairing-md, "size") !important;
+        line-height: map-get($pairing-md, "lh") !important;
+        @if (map-get($pairing-md, "size") >= $mktg-header-spacing-threshold and map-get($pairing, "size") < $mktg-header-spacing-threshold) {
+          letter-spacing: $mktg-header-spacing-large;
+        }
+        @if (map-get($pairing-md, "size") >= $mktg-header-weight-threshold and map-get($pairing, "size") < $mktg-header-weight-threshold) {
+          font-weight: $mktg-header-weight-large !important;
+        }
       }
     }
 
     @if (nth($sizes, 2) != nth($sizes, 3)) {
       @include breakpoint(lg) {
-        $pairing: map-get($mktg-header-pairings, nth($sizes, 3));
-        font-size: map-get($pairing, "size") !important;
-        line-height: map-get($pairing, "lh") !important;
-        @if (map-get($pairing, "size") >= 48px) { letter-spacing: $mktg-header-spacing-large; }
-        @if (map-get($pairing, "size") >= 24px) { font-weight: 800 !important; }
+        font-size: map-get($pairing-lg, "size") !important;
+        line-height: map-get($pairing-lg, "lh") !important;
+        @if (map-get($pairing-lg, "size") >= $mktg-header-spacing-threshold and map-get($pairing-md, "size") < $mktg-header-spacing-threshold) {
+          letter-spacing: $mktg-header-spacing-large;
+        }
+        @if (map-get($pairing-lg, "size") >= $mktg-header-weight-threshold and map-get($pairing-md, "size") < $mktg-header-weight-threshold) {
+          font-weight: $mktg-header-weight-large !important;
+        }
       }
     }
   }