feat(material/core): make mdc-based typography default (#25551)

src/material/_index.scss

@@ -9,8 +9,8 @@
   $amber-palette, $orange-palette, $deep-orange-palette, $brown-palette, $grey-palette,
   $gray-palette, $blue-grey-palette, $blue-gray-palette, $light-theme-background-palette,
   $dark-theme-background-palette, $light-theme-foreground-palette, $dark-theme-foreground-palette;
-@forward './core/typography/typography' show define-typography-level, define-typography-config,
-  typography-hierarchy;
+@forward './core/typography/typography' show define-typography-level,
+  define-legacy-typography-config, typography-hierarchy;
 @forward './core/typography/typography-utils' show typography-level,
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
 
@@ -51,7 +51,7 @@
 @forward './core/theming/all-theme' show all-component-themes;
 @forward './core/color/all-color' show all-component-colors;
 @forward './core/typography/all-typography' show all-component-typographies,
-  define-mdc-typography-config;
+  define-rem-typography-config, define-typography-config;
 @forward './legacy-core/theming/all-theme' show all-legacy-component-themes;
 @forward './legacy-core/color/all-color' show all-legacy-component-colors;
 @forward './legacy-core/typography/all-typography' show all-legacy-component-typographies;

src/material/core/theming/tests/test-theming-api.scss

@@ -66,7 +66,7 @@ $new-api-dark-theme-default-warn: theming.define-dark-theme((
 $light-theme-only-density: theming.define-light-theme((density: -2));
 $dark-theme-only-density: theming.define-dark-theme((density: -2));
 
-$typography-config: typography.define-typography-config();
+$typography-config: all-typography.define-typography-config();
 $light-theme-only-typography: theming.define-light-theme((typography: $typography-config));
 $dark-theme-only-typography: theming.define-dark-theme((typography: $typography-config));
 

src/material/core/typography/_all-typography.scss

@@ -1,4 +1,6 @@
 @use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
 @use '@material/typography' as mdc-typography;
 @use './typography';
 @use '../../autocomplete/autocomplete-theme';
@@ -45,10 +47,97 @@
 //   (where define-typography-config is defined) because putting it there would cause a circular
 //   dependency with mdc-helpers. We should refactor so these can live in the same place.
 
+// Converts a map containing rem values to a map containing px values.
+@function _rem-to-px($x, $px-per-rem: 16px) {
+  @if meta.type-of($x) == 'map' {
+    @each $key, $val in $x {
+      $x: map.merge($x, ($key: _rem-to-px($val)));
+    }
+    @return $x;
+  }
+  @if meta.type-of($x) == 'number' and math.unit($x) == 'rem' {
+    @return ($x / 1rem) * $px-per-rem;
+  }
+  @else {
+    @return $x;
+  }
+}
+
+/// Generates an Angular Material typography config based on values from the official Material
+/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
+/// the default values. The `mat-typography-level` function can be used to generate a custom
+/// typography level map which can be passed to this function to override one of the default levels.
+/// All default typography sizing generated by this function is in `rem` units.
+///
+/// @param {String} $font-family The font family to use for levels where it is not explicitly
+///     specified.
+/// @param {Map} $headline-1 The font settings for the headline-1 font level.
+/// @param {Map} $headline-2 The font settings for the headline-2 font level.
+/// @param {Map} $headline-3 The font settings for the headline-3 font level.
+/// @param {Map} $headline-4 The font settings for the headline-4 font level.
+/// @param {Map} $headline-5 The font settings for the headline-5 font level.
+/// @param {Map} $headline-6 The font settings for the headline-6 font level.
+/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
+/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
+/// @param {Map} $body-1 The font settings for the body-1 font level.
+/// @param {Map} $body-2 The font settings for the body-2 font level.
+/// @param {Map} $caption The font settings for the caption font level.
+/// @param {Map} $button The font settings for the button font level.
+/// @param {Map} $overline The font settings for the overline font level.
+/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
+@function define-rem-typography-config(
+  // TODO(mmalerba): rename this function to define-typography-config,
+  //  and create a predefined px based config for people that need it.
+  $font-family: mdc-typography.$font-family,
+  $headline-1:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline1)),
+  $headline-2:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline2)),
+  $headline-3:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline3)),
+  $headline-4:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline4)),
+  $headline-5:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline5)),
+  $headline-6:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline6)),
+  $subtitle-1:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle1)),
+  $subtitle-2:  _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle2)),
+  $body-1:      _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body1)),
+  $body-2:      _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body2)),
+  $caption:     _rem-to-px(mdc-helpers.typography-config-level-from-mdc(caption)),
+  $button:      _rem-to-px(mdc-helpers.typography-config-level-from-mdc(button)),
+  $overline:    _rem-to-px(mdc-helpers.typography-config-level-from-mdc(overline)),
+) {
+  // Declare an initial map with all of the levels.
+  $config: (
+      headline-1: $headline-1,
+      headline-2: $headline-2,
+      headline-3: $headline-3,
+      headline-4: $headline-4,
+      headline-5: $headline-5,
+      headline-6: $headline-6,
+      subtitle-1: $subtitle-1,
+      subtitle-2: $subtitle-2,
+      body-1:     $body-1,
+      body-2:     $body-2,
+      caption:    $caption,
+      button:     $button,
+      overline:   $overline,
+  );
+
+  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
+  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
+  @each $key, $level in $config {
+    @if map.get($level, font-family) == null {
+      $new-level: map.merge($level, (font-family: $font-family));
+      $config: map.merge($config, ($key: $new-level));
+    }
+  }
+
+  // Add the base font family to the config.
+  @return map.merge($config, (font-family: $font-family));
+}
+
 /// Generates an Angular Material typography config based on values from the official Material
 /// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
 /// the default values. The `mat-typography-level` function can be used to generate a custom
 /// typography level map which can be passed to this function to override one of the default levels.
+/// All default typography sizing generated by this function is in `px` units.
 ///
 /// @param {String} $font-family The font family to use for levels where it is not explicitly
 ///     specified.
@@ -66,7 +155,7 @@
 /// @param {Map} $button The font settings for the button font level.
 /// @param {Map} $overline The font settings for the overline font level.
 /// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
-@function define-mdc-typography-config(
+@function define-typography-config(
   // TODO(mmalerba): rename this function to define-typography-config,
   //  and create a predefined px based config for people that need it.
   $font-family: mdc-typography.$font-family,
@@ -139,7 +228,7 @@
 
   // If no actual color configuration has been specified, create a default one.
   @if not $config {
-    $config: typography.define-typography-config();
+    $config: define-typography-config();
   }
 
   // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only

src/material/core/typography/_typography-deprecated.scss

@@ -33,7 +33,7 @@
   $button:        typography.define-typography-level(14px, 14px, 500),
   $input:         typography.define-typography-level(inherit, 1.125, 400)
 ) {
-  @return typography.define-typography-config($font-family, $display-4, $display-3, $display-2,
-    $display-1, $headline, $title, $subheading-2, $subheading-1, $body-2,
+  @return typography.define-legacy-typography-config($font-family, $display-4, $display-3,
+    $display-2, $display-1, $headline, $title, $subheading-2, $subheading-1, $body-2,
     $body-1, $caption, $button, $input);
 }

src/material/core/typography/_typography.scss

@@ -46,7 +46,7 @@
 /// @param {Map} $button Configuration for the "button" typographic level.
 /// @param {Map} $input Configuration for the "input" typographic level.
 /// @returns {Map} A typography config for the application.
-@function define-typography-config(
+@function define-legacy-typography-config(
   $font-family:   'Roboto, "Helvetica Neue", sans-serif',
   $display-4:     define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
   $display-3:     define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
@@ -136,7 +136,7 @@
         $non-null-args: map.merge($non-null-args, ($key: $value));
       }
     }
-    @return define-typography-config($non-null-args...);
+    @return define-legacy-typography-config($non-null-args...);
   }
   @return $config;
 }

src/material/legacy-core/typography/_all-typography.scss

@@ -32,7 +32,7 @@
 
   // If no actual color configuration has been specified, create a default one.
   @if not $config {
-    $config: typography.define-typography-config();
+    $config: typography.define-legacy-typography-config();
   }
 
   // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only