Merge pull request #994 from primer/responsive-line-height

Responsive line-height utilities

Author: simurai

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">

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