From 6e853a1fba443d4b816dd78b3f486c90f40faa55 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Thu, 12 Dec 2019 16:15:04 +0900
Subject: [PATCH 1/2] Add responsive variants to line-height utilities

---
 src/utilities/typography.scss | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss
index bc5e3ab4c9..f790a71041 100644
--- a/src/utilities/typography.scss
+++ b/src/utilities/typography.scss
@@ -161,14 +161,19 @@
 // Close to commonly used line-heights. Most line-heights
 // combined with type size equate to whole pixels.
 // Will be improved with future typography scale updates.
-/* Set the line height to ultra condensed */
-.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
-/* Set the line height to condensed */
-.lh-condensed { line-height: $lh-condensed !important; }
-/* Set the line height to default */
-.lh-default { line-height: $lh-default !important; }
-/* Set the line height to zero */
-.lh-0 { line-height: 0 !important; }
+// Responsive line-height
+@each $breakpoint, $variant in $responsive-variants {
+  @include breakpoint($breakpoint) {
+    /* Set the line height to ultra condensed */
+    .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; }
+    /* Set the line height to condensed */
+    .lh#{$variant}-condensed { line-height: $lh-condensed !important; }
+    /* Set the line height to default */
+    .lh#{$variant}-default { line-height: $lh-default !important; }
+    /* Set the line height to zero */
+    .lh#{$variant}-0 { line-height: 0 !important; }
+  }
+}
 
 // Text alignments
 // Responsive text alignment

From 0ac38c22824c115246ac04c7a7fc5deae97b3eed Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Thu, 12 Dec 2019 16:15:27 +0900
Subject: [PATCH 2/2] Update typography.md

---
 docs/content/utilities/typography.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/content/utilities/typography.md b/docs/content/utilities/typography.md
index 1a7deff8db..2844cd03a0 100644
--- a/docs/content/utilities/typography.md
+++ b/docs/content/utilities/typography.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS.
 
- 
+
 
 Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop.
 
@@ -67,7 +67,8 @@ Lighter font-weight utilities are available in a limited range. Lighter font-wei
 ```
 
 ## Line height styles
-Change the line height density with these utilities.
+
+Change the line height density with these utilities. Responsive variants are also available (e.g. `.lh-sm-condensed`).
 
 ```html live
 <p class="lh-default">