From 4e8aa52d3222b572658d7b9f88518af9d0398bf3 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 23 Jan 2018 16:53:07 +0100
Subject: [PATCH] refactor(typography): add mixin for shorthand declaration and
 use shorthand for h5 and h6 (#9346)

* Moves our `font` declaration shorthand logic into the `mat-typography-font-shorthand` mixin to make it easier to use without passing in a typography config.
* Switches the `h5` and `h6` to use the shorthands.
---
 .../core/typography/_typography-utils.scss    | 26 ++++++++++++-------
 src/lib/core/typography/_typography.scss      | 22 ++++++++++------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/lib/core/typography/_typography-utils.scss b/src/lib/core/typography/_typography-utils.scss
index 47dc801c094..9ad5def4de3 100644
--- a/src/lib/core/typography/_typography-utils.scss
+++ b/src/lib/core/typography/_typography-utils.scss
@@ -29,13 +29,9 @@
   @return if($font-family == null, $font-family, unquote($font-family));
 }
 
-// Converts a typography level into CSS styles.
-@mixin mat-typography-level-to-styles($config, $level) {
-  $font-size: mat-font-size($config, $level);
-  $font-weight: mat-font-weight($config, $level);
-  $line-height: mat-line-height($config, $level);
-  $font-family: mat-font-family($config, $level);
-
+// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
+// the individual properties if a value that isn't allowed in the shorthand is passed in.
+@mixin mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
   // If any of the values are set to `inherit`, we can't use the shorthand
   // so we fall back to passing in the individual properties.
   @if ($font-size == inherit or
@@ -53,9 +49,19 @@
     font-family: $font-family;
   }
   @else {
-    // Otherwise use the shorthand `font` to represent a typography level, because it's the the
-    // least amount of bytes. Note that we need to use interpolation for `font-size/line-height`
-    // in order to prevent Sass from dividing the two values.
+    // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
+    // that we need to use interpolation for `font-size/line-height` in order to prevent
+    // Sass from dividing the two values.
     font: $font-weight #{$font-size}/#{$line-height} $font-family;
   }
 }
+
+// Converts a typography level into CSS styles.
+@mixin mat-typography-level-to-styles($config, $level) {
+  $font-size: mat-font-size($config, $level);
+  $font-weight: mat-font-weight($config, $level);
+  $line-height: mat-line-height($config, $level);
+  $font-family: mat-font-family($config, $level);
+
+  @include mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
+}
diff --git a/src/lib/core/typography/_typography.scss b/src/lib/core/typography/_typography.scss
index 1950fb441f9..0880c8d352c 100644
--- a/src/lib/core/typography/_typography.scss
+++ b/src/lib/core/typography/_typography.scss
@@ -91,18 +91,24 @@
   // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
   // and h6 at 0.67em.
   .mat-h5, #{$selector} h5 {
-    font-size: mat-font-size($config, body-1) * 0.83;
-    font-weight: mat-font-weight($config, body-1);
-    font-family: mat-font-family($config, body-1);
-    line-height: mat-line-height($config, body-1);
+    @include mat-typography-font-shorthand(
+      mat-font-size($config, body-1) * 0.83,
+      mat-font-weight($config, body-1),
+      mat-line-height($config, body-1),
+      mat-font-family($config, body-1)
+    );
+
     margin: 0 0 12px;
   }
 
   .mat-h6, #{$selector} h6 {
-    font-size: mat-font-size($config, body-1) * 0.67;
-    font-weight: mat-font-weight($config, body-1);
-    font-family: mat-font-family($config, body-1);
-    line-height: mat-line-height($config, body-1);
+    @include mat-typography-font-shorthand(
+      mat-font-size($config, body-1) * 0.67,
+      mat-font-weight($config, body-1),
+      mat-line-height($config, body-1),
+      mat-font-family($config, body-1)
+    );
+
     margin: 0 0 12px;
   }