feat(typography): add letter-spacing configuration to typography configs.

Author: josephperrott

src/lib/core/typography/_typography-utils.scss

@@ -18,6 +18,11 @@
   @return _mat-get-type-value($config, $level, font-weight);
 }
 
+// Gets the letter spacing for a level inside a typography config.
+@function mat-letter-spacing($config, $level) {
+  @return _mat-get-type-value($config, $level, letter-spacing);
+}
+
 // Gets the font-family from a typography config and removes the quotes around it.
 @function mat-font-family($config, $level: null) {
   $font-family: map-get($config, font-family);
@@ -31,7 +36,8 @@
 
 // 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) {
+@mixin mat-typography-font-shorthand(
+  $font-size, $font-weight, $line-height, $font-family, $letter-spacing) {
   // 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
@@ -54,6 +60,8 @@
     // Sass from dividing the two values.
     font: $font-weight #{$font-size}/#{$line-height} $font-family;
   }
+  // Set the letter spacing regardless of method for setting font values.
+  letter-spacing: $letter-spacing;
 }
 
 // Converts a typography level into CSS styles.
@@ -62,6 +70,8 @@
   $font-weight: mat-font-weight($config, $level);
   $line-height: mat-line-height($config, $level);
   $font-family: mat-font-family($config, $level);
+  $letter-spacing: mat-letter-spacing($config, $level);
 
-  @include mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
+  @include mat-typography-font-shorthand(
+    $font-size, $font-weight, $line-height, $font-family, $letter-spacing);
 }

src/lib/core/typography/_typography.scss

@@ -5,13 +5,15 @@
   $font-size,
   $line-height: $font-size,
   $font-weight: 400,
-  $font-family: null) {
+  $font-family: null,
+  $letter-spacing: null) {
 
   @return (
     font-size: $font-size,
     line-height: $line-height,
     font-weight: $font-weight,
-    font-family: $font-family
+    font-family: $font-family,
+    letter-spacing: $letter-spacing
   );
 }