refactor(material/theming): normalize config in all typography mixins

for non-mdc components

This is split off of angular#21778 which covers MDC conmponents as well

src/dev-app/theme.scss

@@ -15,52 +15,40 @@
 
 // Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// **Be sure that you only ever include this mixin once!**
-@include mat-core();
-@include angular-material-mdc-typography(mat-mdc-typography-config());
-@include mat-popover-edit-typography(mat-typography-config());
-
-// Include base styles for strong focus indicators.
-.demo-strong-focus {
-  @include mat-strong-focus-indicators();
-  @include mat-mdc-strong-focus-indicators();
-}
-
-// Define the default theme (same as the example above).
+// Define the default (light) theme.
 $candy-app-primary: mat-palette($mat-indigo);
 $candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
 $candy-app-theme: mat-light-theme((
-  color: (
-    primary: $candy-app-primary,
-    accent: $candy-app-accent
-  )
+    // Define the default colors for our app.
+    color: (
+        primary: $candy-app-primary,
+        accent: $candy-app-accent
+    ),
+    // Define the default typography for our app.
+    typography: mat-mdc-typography-config(),
+    // Define the default density level for our app.
+    density: 0,
 ));
 
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// **Be sure that you only ever include this mixin once!**
+@include mat-core($candy-app-theme);
+
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
 @include angular-material-mdc-theme($candy-app-theme);
 @include mat-column-resize-theme($candy-app-theme);
 @include mat-popover-edit-theme($candy-app-theme);
-
 // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
 @include mat-mdc-slider-theme($candy-app-theme);
 
-// Define an alternate dark theme.
-$dark-primary: mat-palette($mat-blue-grey);
-$dark-accent: mat-palette($mat-amber, A200, A100, A400);
-$dark-warn: mat-palette($mat-deep-orange);
-$dark-theme: mat-dark-theme((
-  color: (
-    primary: $dark-primary,
-    accent: $dark-accent,
-    warn: $dark-warn
-  )
-));
-
-// Include the default theme for focus indicators.
 .demo-strong-focus {
+  // Include base styles for strong focus indicators.
+  @include mat-strong-focus-indicators();
+  @include mat-mdc-strong-focus-indicators();
+
+  // Include the default theme for focus indicators.
   @include mat-strong-focus-indicators-theme($candy-app-theme);
   @include mat-mdc-strong-focus-indicators-theme($candy-app-theme);
 }
@@ -70,17 +58,25 @@ $dark-theme: mat-dark-theme((
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
 .demo-unicorn-dark-theme {
-  @include angular-material-color($dark-theme);
-  @include angular-material-mdc-color($dark-theme);
-  @include mat-column-resize-color($dark-theme);
-  @include mat-popover-edit-color($dark-theme);
-  @include mat-mdc-slider-color($dark-theme);
-}
+  // Create the color palettes used in our dark theme.
+  $dark-primary: mat-palette($mat-blue-grey);
+  $dark-accent: mat-palette($mat-amber, A200, A100, A400);
+  $dark-warn: mat-palette($mat-deep-orange);
+  $dark-colors: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
-// Include the dark theme for focus indicators.
-.demo-unicorn-dark-theme.demo-strong-focus {
-  @include mat-strong-focus-indicators-color($dark-theme);
-  @include mat-mdc-strong-focus-indicators-color($dark-theme);
+  // Include the dark theme color styles.
+  @include angular-material-color($dark-colors);
+  @include angular-material-mdc-color($dark-colors);
+  @include mat-column-resize-color($dark-colors);
+  @include mat-popover-edit-color($dark-colors);
+  // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
+  @include mat-mdc-slider-color($dark-colors);
+
+  // Include the dark theme colors for focus indicators.
+  .demo-strong-focus {
+    @include mat-strong-focus-indicators-color($dark-colors);
+    @include mat-mdc-strong-focus-indicators-color($dark-colors);
+  }
 }
 
 // Create classes for all density scales which are supported by all MDC-based components.

src/material/badge/_badge-theme.scss

@@ -3,6 +3,7 @@
 // no style sheet support for directives.
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../../cdk/a11y/a11y';
 
@@ -188,7 +189,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 }
 
 @mixin mat-badge-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-badge-content {
     font-weight: $mat-badge-font-weight;
     font-size: $mat-badge-font-size;

src/material/bottom-sheet/_bottom-sheet-theme.scss

@@ -1,4 +1,5 @@
 @import '../core/style/private';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
@@ -16,7 +17,7 @@
 }
 
 @mixin mat-bottom-sheet-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-bottom-sheet-container {
     @include mat-typography-level-to-styles($config, body-1);
   }

src/material/button-toggle/_button-toggle-theme.scss

@@ -2,6 +2,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import '../core/density/private/compatibility';
 @import './button-toggle-variables';
@@ -85,7 +86,7 @@
 }
 
 @mixin mat-button-toggle-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-button-toggle {
     font-family: mat-font-family($config);
   }

src/material/button/_button-theme.scss

@@ -1,5 +1,6 @@
 @import '../core/theming/theming';
 @import '../core/style/private';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 $_mat-button-ripple-opacity: 0.1;
@@ -161,7 +162,7 @@ $_mat-button-ripple-opacity: 0.1;
 }
 
 @mixin mat-button-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
   .mat-flat-button, .mat-fab, .mat-mini-fab {
     font: {

src/material/card/_card-theme.scss

@@ -1,6 +1,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/private';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -26,7 +27,7 @@
 }
 
 @mixin mat-card-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-card {
     font-family: mat-font-family($config);
   }

src/material/checkbox/_checkbox-theme.scss

@@ -1,4 +1,5 @@
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -96,7 +97,7 @@
 }
 
 @mixin mat-checkbox-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-checkbox {
     font-family: mat-font-family($config);
   }

src/material/chips/_chips-theme.scss

@@ -1,6 +1,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 $mat-chip-remove-font-size: 18px;
@@ -87,7 +88,7 @@ $mat-chip-remove-font-size: 18px;
 }
 
 @mixin mat-chips-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-chip {
     font-size: mat-font-size($config, body-2);
     font-weight: mat-font-weight($config, body-2);

src/material/core/option/_optgroup-theme.scss

@@ -1,5 +1,6 @@
 @import '../theming/palette';
 @import '../theming/theming';
+@import '../typography/typography';
 @import '../typography/typography-utils';
 
 @mixin mat-optgroup-color($config-or-theme) {
@@ -16,7 +17,7 @@
 }
 
 @mixin mat-optgroup-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-optgroup-label {
     @include mat-typography-level-to-styles($config, body-2);
   }

src/material/core/option/_option-theme.scss

@@ -1,5 +1,6 @@
 @import '../theming/palette';
 @import '../theming/theming';
+@import '../typography/typography';
 @import '../typography/typography-utils';
 
 @mixin mat-option-color($config-or-theme) {
@@ -47,7 +48,7 @@
 }
 
 @mixin mat-option-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-option {
     font: {
       family: mat-font-family($config);

src/material/core/typography/_typography.scss

@@ -83,22 +83,35 @@
 // produces a normalized typography config for the 2014 Material Design typography system.
 // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
 // 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// Components using this function should be migrated to normalize to the 2018 style config instead.
+// New components should not use this function.
 @function mat-private-typography-to-2014-config($config) {
-  @if mat-private-typography-is-2018-config($config) {
-    @return mat-typography-config(
-        $display-4: map-get($config, headline-1),
-        $display-3: map-get($config, headline-2),
-        $display-2: map-get($config, headline-3),
-        $display-1: map-get($config, headline-4),
-        $headline: map-get($config, headline-5),
-        $title: map-get($config, headline-6),
-        $subheading-2: map-get($config, subtitle-1),
-        $subheading-1: map-get($config, subtitle-2),
-        $body-2: map-get($config, body-1),
-        $body-1: map-get($config, body-2),
-        $button: map-get($config, button),
-        $caption: map-get($config, caption),
+  @if $config == null {
+    @return null;
+  }
+  @if not mat-private-typography-is-2014-config($config) {
+    $args: (
+        display-4: map-get($config, headline-1),
+        display-3: map-get($config, headline-2),
+        display-2: map-get($config, headline-3),
+        display-1: map-get($config, headline-4),
+        headline: map-get($config, headline-5),
+        title: map-get($config, headline-6),
+        subheading-2: map-get($config, subtitle-1),
+        subheading-1: map-get($config, subtitle-2),
+        body-2: map-get($config, body-1),
+        body-1: map-get($config, body-2),
+        button: map-get($config, button),
+        caption: map-get($config, caption),
     );
+    $non-null-args: ();
+    @each $key, $value in $args {
+      @if $value != null {
+        $non-null-args: map-merge($non-null-args, ($key: $value));
+      }
+    }
+    @return mat-typography-config($non-null-args...);
   }
   @return $config;
 }
@@ -108,6 +121,9 @@
 // 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
 // 2018 - https://material.io/design/typography/the-type-system.html#type-scale
 @function mat-private-typography-to-2018-config($config) {
+  @if $config == null {
+    @return null;
+  }
   @if mat-private-typography-is-2014-config($config) {
     @return (
         headline-1: map-get($config, display-4),
@@ -122,14 +138,19 @@
         body-2: map-get($config, body-1),
         button: map-get($config, button),
         caption: map-get($config, caption),
+        overline: if(map-get($config, overline), map-get($config, overline),
+            mat-typography-level(12px, 32px, 500)
+        )
     );
   }
   @return $config;
 }
 
 // Adds the base typography styles, based on a config.
 /* stylelint-disable-next-line material/theme-mixin-api */
-@mixin mat-base-typography($config, $selector: '.mat-typography') {
+@mixin mat-base-typography($config-or-theme, $selector: '.mat-typography') {
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
+
   .mat-h1, .mat-headline, #{$selector} h1 {
     @include mat-typography-level-to-styles($config, headline);
     margin: 0 0 16px;

src/material/datepicker/_datepicker-theme.scss

@@ -1,6 +1,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -179,7 +180,7 @@ $mat-calendar-weekday-table-font-size: 11px !default;
 }
 
 @mixin mat-datepicker-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-calendar {
     font-family: mat-font-family($config);
   }

src/material/dialog/_dialog-theme.scss

@@ -1,6 +1,7 @@
 @import '../core/style/private';
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 
 
@@ -17,7 +18,7 @@
 }
 
 @mixin mat-dialog-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-dialog-title {
     @include mat-typography-level-to-styles($config, title);
   }

src/material/expansion/_expansion-theme.scss

@@ -2,6 +2,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/style/private';
+@import '../core/typography/typography';
 @import '../core/typography/typography-utils';
 @import './expansion-variables';
 @import './expansion-mixins';
@@ -54,7 +55,7 @@
 }
 
 @mixin mat-expansion-panel-typography($config-or-theme) {
-  $config: mat-get-typography-config($config-or-theme);
+  $config: mat-private-typography-to-2014-config(mat-get-typography-config($config-or-theme));
   .mat-expansion-panel-header {
     font: {
       family: mat-font-family($config, subheading-1);