From 36c169a961b58f9200122bb0877645989dbf55df Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 30 May 2023 19:52:50 +0000
Subject: [PATCH 1/2] refactor(material/typography): Move
 define-typography-config under _typography.scss

This never should have been under _all-typography.scss to begin with.
_all-typography.scss depends on all of the component themes, which
prevents any of the component themes from using this function as it
would cause a circular dep. Instead, moving it under _typography.scss
where the legacy version lives makes much more sense.
---
 src/material/_index.scss                      |   8 +-
 .../core/mdc-helpers/_mdc-helpers.scss        |  41 ++---
 .../theming/prebuilt/deeppurple-amber.scss    |   3 +-
 .../core/theming/prebuilt/indigo-pink.scss    |   3 +-
 .../core/theming/prebuilt/pink-bluegrey.scss  |   3 +-
 .../core/theming/prebuilt/purple-green.scss   |   3 +-
 .../tests/test-css-variables-theme.scss       |   4 +-
 .../core/theming/tests/test-theming-api.scss  |   2 +-
 .../tests/test-typography-font-family.scss    |  13 +-
 src/material/core/tokens/_token-utils.scss    |   4 +-
 .../core/typography/_all-typography.scss      | 154 +----------------
 src/material/core/typography/_typography.scss | 162 ++++++++++++++++++
 .../theming/prebuilt/deeppurple-amber.scss    |   3 +-
 .../theming/prebuilt/indigo-pink.scss         |   3 +-
 .../theming/prebuilt/pink-bluegrey.scss       |   3 +-
 .../theming/prebuilt/purple-green.scss        |   3 +-
 16 files changed, 199 insertions(+), 213 deletions(-)

diff --git a/src/material/_index.scss b/src/material/_index.scss
index 5108fc31e24b..2634a22cc791 100644
--- a/src/material/_index.scss
+++ b/src/material/_index.scss
@@ -9,8 +9,9 @@
   $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-legacy-typography-config, legacy-typography-hierarchy, typography-hierarchy;
+@forward './core/typography/typography' show define-typography-level, define-rem-typography-config,
+  define-typography-config, typography-hierarchy, define-legacy-typography-config,
+  legacy-typography-hierarchy;
 @forward './core/typography/typography-utils' show typography-level,
   font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
 
@@ -48,8 +49,7 @@
 // Theme bundles
 @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-rem-typography-config, define-typography-config;
+@forward './core/typography/all-typography' show all-component-typographies;
 @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;
diff --git a/src/material/core/mdc-helpers/_mdc-helpers.scss b/src/material/core/mdc-helpers/_mdc-helpers.scss
index f09eba61cd2b..b4d99674658a 100644
--- a/src/material/core/mdc-helpers/_mdc-helpers.scss
+++ b/src/material/core/mdc-helpers/_mdc-helpers.scss
@@ -83,21 +83,6 @@ $mat-typography-mdc-level-mappings: (
   @return $mdc-config;
 }
 
-// Converts an MDC typography level config to an Angular Material one.
-@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
-  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
-
-  // Explicitly default the font family to null since we'll apply it globally
-  // through the `define-typgraphy-config`/`define-legacy-typography-config`.
-  @return typography.define-typography-level(
-    $font-family: $font-family,
-    $font-size: map.get($mdc-level-config, font-size),
-    $line-height: map.get($mdc-level-config, line-height),
-    $font-weight: map.get($mdc-level-config, font-weight),
-    $letter-spacing: map.get($mdc-level-config, letter-spacing)
-  );
-}
-
 // MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
 // This function falls back to determining the tone based on whether the theme is light or dark.
 @function variable-safe-contrast-tone($value, $is-dark) {
@@ -238,19 +223,19 @@ $mat-typography-mdc-level-mappings: (
   $font-family: mdc-typography.$font-family;
   @return (
     font-family: $font-family,
-    headline-1: typography-config-level-from-mdc(headline1, $font-family),
-    headline-2: typography-config-level-from-mdc(headline2, $font-family),
-    headline-3: typography-config-level-from-mdc(headline3, $font-family),
-    headline-4: typography-config-level-from-mdc(headline4, $font-family),
-    headline-5: typography-config-level-from-mdc(headline5, $font-family),
-    headline-6: typography-config-level-from-mdc(headline6, $font-family),
-    subtitle-1: typography-config-level-from-mdc(subtitle1, $font-family),
-    subtitle-2: typography-config-level-from-mdc(subtitle2, $font-family),
-    body-1: typography-config-level-from-mdc(body1, $font-family),
-    body-2: typography-config-level-from-mdc(body2, $font-family),
-    caption: typography-config-level-from-mdc(caption, $font-family),
-    button: typography-config-level-from-mdc(button, $font-family),
-    overline: typography-config-level-from-mdc(overline, $font-family),
+    headline-1: typography.typography-config-level-from-mdc(headline1, $font-family),
+    headline-2: typography.typography-config-level-from-mdc(headline2, $font-family),
+    headline-3: typography.typography-config-level-from-mdc(headline3, $font-family),
+    headline-4: typography.typography-config-level-from-mdc(headline4, $font-family),
+    headline-5: typography.typography-config-level-from-mdc(headline5, $font-family),
+    headline-6: typography.typography-config-level-from-mdc(headline6, $font-family),
+    subtitle-1: typography.typography-config-level-from-mdc(subtitle1, $font-family),
+    subtitle-2: typography.typography-config-level-from-mdc(subtitle2, $font-family),
+    body-1: typography.typography-config-level-from-mdc(body1, $font-family),
+    body-2: typography.typography-config-level-from-mdc(body2, $font-family),
+    caption: typography.typography-config-level-from-mdc(caption, $font-family),
+    button: typography.typography-config-level-from-mdc(button, $font-family),
+    overline: typography.typography-config-level-from-mdc(overline, $font-family),
   );
 }
 
diff --git a/src/material/core/theming/prebuilt/deeppurple-amber.scss b/src/material/core/theming/prebuilt/deeppurple-amber.scss
index 59b5db654060..039c5a65454f 100644
--- a/src/material/core/theming/prebuilt/deeppurple-amber.scss
+++ b/src/material/core/theming/prebuilt/deeppurple-amber.scss
@@ -2,7 +2,6 @@
 @use '../../core';
 @use '../palette';
 @use '../theming';
-@use '../../typography/all-typography';
 @use '../../typography/typography';
 
 // Include non-theme styles for core.
@@ -17,7 +16,7 @@ $theme: theming.define-light-theme((
     primary: $primary,
     accent: $accent,
   ),
-  typography: all-typography.define-typography-config(),
+  typography: typography.define-typography-config(),
   density: 0,
 ));
 
diff --git a/src/material/core/theming/prebuilt/indigo-pink.scss b/src/material/core/theming/prebuilt/indigo-pink.scss
index 9599a89509ec..a3e01dcddf99 100644
--- a/src/material/core/theming/prebuilt/indigo-pink.scss
+++ b/src/material/core/theming/prebuilt/indigo-pink.scss
@@ -2,7 +2,6 @@
 @use '../../core';
 @use '../palette';
 @use '../theming';
-@use '../../typography/all-typography';
 @use '../../typography/typography';
 
 
@@ -18,7 +17,7 @@ $theme: theming.define-light-theme((
     primary: $primary,
     accent: $accent
   ),
-  typography: all-typography.define-typography-config(),
+  typography: typography.define-typography-config(),
   density: 0,
 ));
 
diff --git a/src/material/core/theming/prebuilt/pink-bluegrey.scss b/src/material/core/theming/prebuilt/pink-bluegrey.scss
index c2f4477e822d..33d07a21b2be 100644
--- a/src/material/core/theming/prebuilt/pink-bluegrey.scss
+++ b/src/material/core/theming/prebuilt/pink-bluegrey.scss
@@ -2,7 +2,6 @@
 @use '../../core';
 @use '../palette';
 @use '../theming';
-@use '../../typography/all-typography';
 @use '../../typography/typography';
 
 
@@ -18,7 +17,7 @@ $theme: theming.define-dark-theme((
     primary: $primary,
     accent: $accent
   ),
-  typography: all-typography.define-typography-config(),
+  typography: typography.define-typography-config(),
   density: 0,
 ));
 
diff --git a/src/material/core/theming/prebuilt/purple-green.scss b/src/material/core/theming/prebuilt/purple-green.scss
index 69cee7530717..530430a7219c 100644
--- a/src/material/core/theming/prebuilt/purple-green.scss
+++ b/src/material/core/theming/prebuilt/purple-green.scss
@@ -2,7 +2,6 @@
 @use '../../core';
 @use '../palette';
 @use '../theming';
-@use '../../typography/all-typography';
 @use '../../typography/typography';
 
 
@@ -18,7 +17,7 @@ $theme: theming.define-dark-theme((
     primary: $primary,
     accent: $accent
   ),
-  typography: all-typography.define-typography-config(),
+  typography: typography.define-typography-config(),
   density: 0,
 ));
 
diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss
index 0222b8b55200..674e75395458 100644
--- a/src/material/core/theming/tests/test-css-variables-theme.scss
+++ b/src/material/core/theming/tests/test-css-variables-theme.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '../all-theme';
-@use '../../typography/all-typography';
+@use '../../typography/typography';
 @use '../palette';
 @use '../theming';
 @use '../../../legacy-core/theming/all-theme' as legacy-all-theme;
@@ -31,7 +31,7 @@
       accent: $palette,
       warn: $palette
     ),
-    typography: all-typography.define-typography-config(),
+    typography: typography.define-typography-config(),
   ));
   $css-var-theme: _replace-all-values($theme, var(--test-var));
   @include all-theme.all-component-themes($css-var-theme);
diff --git a/src/material/core/theming/tests/test-theming-api.scss b/src/material/core/theming/tests/test-theming-api.scss
index d2c4b604b777..18c33565efa4 100644
--- a/src/material/core/theming/tests/test-theming-api.scss
+++ b/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: all-typography.define-typography-config();
+$typography-config: 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));
 
diff --git a/src/material/core/theming/tests/test-typography-font-family.scss b/src/material/core/theming/tests/test-typography-font-family.scss
index 2f8e94554e57..9f0d32ae2002 100644
--- a/src/material/core/theming/tests/test-typography-font-family.scss
+++ b/src/material/core/theming/tests/test-typography-font-family.scss
@@ -1,5 +1,4 @@
 @use '@material/typography' as mdc-typography;
-@use '../../typography/all-typography';
 @use '../../typography/typography';
 @use 'sass:map';
 @use 'sass:meta';
@@ -16,17 +15,17 @@
 
 $no-font-family: assert-font-family(
   'should take default MDC font family if none is specified',
-  all-typography.define-typography-config(),
+  typography.define-typography-config(),
   mdc-typography.$font-family);
 
 $only-top-level-font-family: assert-font-family(
   'should take custom font family if specified at top level',
-  all-typography.define-typography-config($font-family: 'custom-top'),
+  typography.define-typography-config($font-family: 'custom-top'),
   'custom-top');
 
 $individual-levels-without-font-families: assert-font-family(
   'should set the default MDC font family if all keys are specified, but without a font-family',
-  all-typography.define-typography-config(
+  typography.define-typography-config(
     $headline-1: typography.define-typography-level($font-size: 1px),
     $headline-2: typography.define-typography-level($font-size: 1px),
     $headline-3: typography.define-typography-level($font-size: 1px),
@@ -46,7 +45,7 @@ $individual-levels-without-font-families: assert-font-family(
 
 $individual-levels-without-font-families-with-top-level-family: assert-font-family(
   'should set a custom top-level font family if all keys are specified, but without a font-family',
-  all-typography.define-typography-config(
+  typography.define-typography-config(
     $font-family: 'custom-top',
     $headline-1: typography.define-typography-level($font-size: 1px),
     $headline-2: typography.define-typography-level($font-size: 1px),
@@ -67,7 +66,7 @@ $individual-levels-without-font-families-with-top-level-family: assert-font-fami
 
 $individual-levels-with-font-families: assert-font-family(
   'should use the level font family if one is specified, but there is none at the top level',
-  all-typography.define-typography-config(
+  typography.define-typography-config(
     $headline-1: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
     $headline-2: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
     $headline-3: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
@@ -87,7 +86,7 @@ $individual-levels-with-font-families: assert-font-family(
 
 $individual-levels-with-font-families-and-top-level-family: assert-font-family(
   'should use the level font family if a top-level one is specified together with it',
-  all-typography.define-typography-config(
+  typography.define-typography-config(
     $font-family: 'custom-top',
     $headline-1: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
     $headline-2: typography.define-typography-level($font-size: 1px, $font-family: 'custom-level'),
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index 41aba6a1b68d..03a266f7fbd2 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -3,9 +3,9 @@
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
-@use '../mdc-helpers/mdc-helpers';
 @use '../theming/palette';
 @use '../theming/theming';
+@use '../typography/typography';
 
 $_placeholder-color-palette: theming.define-palette(palette.$red-palette);
 
@@ -20,7 +20,7 @@ $placeholder-color-config: (
   background: palette.$light-theme-background-palette,
 );
 
-$_placeholder-typography-level-config: mdc-helpers.typography-config-level-from-mdc(body1);
+$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
 
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss
index 229fd0b3f43d..cf25e0eb1909 100644
--- a/src/material/core/typography/_all-typography.scss
+++ b/src/material/core/typography/_all-typography.scss
@@ -1,7 +1,3 @@
-@use '@material/typography' as mdc-typography;
-@use 'sass:map';
-@use 'sass:math';
-@use 'sass:meta';
 @use './typography';
 @use '../../autocomplete/autocomplete-theme';
 @use '../../badge/badge-theme';
@@ -43,154 +39,6 @@
 @use '../core-theme';
 @use '../mdc-helpers/mdc-helpers';
 
-// TODO(mmalerba): define-mdc-typography-config is defined here rather than in _typography.scss
-//   (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 math.div($x, 1rem) * $px-per-rem;
-  }
-  @else {
-    @return $x;
-  }
-}
-
-// Applies the default font family to all levels in a typography config.
-@function _apply-font-family($font-family, $initial-config) {
-  $config: $initial-config;
-
-  @each $key, $level in $config {
-    @if map.get($level, 'font-family') == null {
-      // Sass maps are immutable so we have to re-assign the variable each time.
-      $config: map.set($config, $key, map.set($level, 'font-family', $font-family));
-    }
-  }
-
-  @return map.set($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.
-/// @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-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: null,
-  $headline-2: null,
-  $headline-3: null,
-  $headline-4: null,
-  $headline-5: null,
-  $headline-6: null,
-  $subtitle-1: null,
-  $subtitle-2: null,
-  $body-1: null,
-  $body-2: null,
-  $caption: null,
-  $button: null,
-  $overline: null,
-) {
-  @return _apply-font-family($font-family, (
-    headline-1: $headline-1 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline1)),
-    headline-2: $headline-2 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline2)),
-    headline-3: $headline-3 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline3)),
-    headline-4: $headline-4 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline4)),
-    headline-5: $headline-5 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline5)),
-    headline-6: $headline-6 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(headline6)),
-    subtitle-1: $subtitle-1 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle1)),
-    subtitle-2: $subtitle-2 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(subtitle2)),
-    body-1: $body-1 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body1)),
-    body-2: $body-2 or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(body2)),
-    caption: $caption or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(caption)),
-    button: $button or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(button)),
-    overline: $overline or _rem-to-px(mdc-helpers.typography-config-level-from-mdc(overline)),
-  ));
-}
-
-/// 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: null,
-  $headline-2: null,
-  $headline-3: null,
-  $headline-4: null,
-  $headline-5: null,
-  $headline-6: null,
-  $subtitle-1: null,
-  $subtitle-2: null,
-  $body-1: null,
-  $body-2: null,
-  $caption: null,
-  $button: null,
-  $overline: null,
-) {
-  @return _apply-font-family($font-family, (
-    headline-1: $headline-1 or mdc-helpers.typography-config-level-from-mdc(headline1),
-    headline-2: $headline-2 or mdc-helpers.typography-config-level-from-mdc(headline2),
-    headline-3: $headline-3 or mdc-helpers.typography-config-level-from-mdc(headline3),
-    headline-4: $headline-4 or mdc-helpers.typography-config-level-from-mdc(headline4),
-    headline-5: $headline-5 or mdc-helpers.typography-config-level-from-mdc(headline5),
-    headline-6: $headline-6 or mdc-helpers.typography-config-level-from-mdc(headline6),
-    subtitle-1: $subtitle-1 or mdc-helpers.typography-config-level-from-mdc(subtitle1),
-    subtitle-2: $subtitle-2 or mdc-helpers.typography-config-level-from-mdc(subtitle2),
-    body-1: $body-1 or mdc-helpers.typography-config-level-from-mdc(body1),
-    body-2: $body-2 or mdc-helpers.typography-config-level-from-mdc(body2),
-    caption: $caption or mdc-helpers.typography-config-level-from-mdc(caption),
-    button: $button or mdc-helpers.typography-config-level-from-mdc(button),
-    overline: $overline or mdc-helpers.typography-config-level-from-mdc(overline),
-  ));
-}
-
 // Includes all of the typographic styles.
 @mixin all-component-typographies($config-or-theme: null) {
   $config: if(theming.private-is-theme-object($config-or-theme),
@@ -198,7 +46,7 @@
 
   // If no actual color configuration has been specified, create a default one.
   @if not $config {
-    $config: define-typography-config();
+    $config: typography.define-typography-config();
   }
 
   // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
diff --git a/src/material/core/typography/_typography.scss b/src/material/core/typography/_typography.scss
index 5fada0de1324..5daff39e7c04 100644
--- a/src/material/core/typography/_typography.scss
+++ b/src/material/core/typography/_typography.scss
@@ -1,6 +1,9 @@
 @use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
 @use 'typography-utils';
 @use '../theming/theming';
+@use '@material/typography' as mdc-typography;
 
 /// Defines a typography level from the Material Design spec.
 /// @param {String} $font-size The font-size for this level.
@@ -97,6 +100,165 @@
   @return map.merge($config, (font-family: $font-family));
 }
 
+// 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 math.div($x, 1rem) * $px-per-rem;
+  }
+  @else {
+    @return $x;
+  }
+}
+
+// Applies the default font family to all levels in a typography config.
+@function _apply-font-family($font-family, $initial-config) {
+  $config: $initial-config;
+
+  @each $key, $level in $config {
+    @if map.get($level, 'font-family') == null {
+      // Sass maps are immutable so we have to re-assign the variable each time.
+      $config: map.set($config, $key, map.set($level, 'font-family', $font-family));
+    }
+  }
+
+  @return map.set($config, 'font-family', $font-family);
+}
+
+// Converts an MDC typography level config to an Angular Material one.
+@function typography-config-level-from-mdc($mdc-level, $font-family: null) {
+  $mdc-level-config: map.get(mdc-typography.$styles, $mdc-level);
+
+  // Explicitly default the font family to null since we'll apply it globally
+  // through the `define-typgraphy-config`/`define-legacy-typography-config`.
+  @return define-typography-level(
+    $font-family: $font-family,
+    $font-size: map.get($mdc-level-config, font-size),
+    $line-height: map.get($mdc-level-config, line-height),
+    $font-weight: map.get($mdc-level-config, font-weight),
+    $letter-spacing: map.get($mdc-level-config, letter-spacing)
+  );
+}
+
+/// 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.
+/// @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-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: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
+) {
+  @return _apply-font-family($font-family, (
+    headline-1: $headline-1 or _rem-to-px(typography-config-level-from-mdc(headline1)),
+    headline-2: $headline-2 or _rem-to-px(typography-config-level-from-mdc(headline2)),
+    headline-3: $headline-3 or _rem-to-px(typography-config-level-from-mdc(headline3)),
+    headline-4: $headline-4 or _rem-to-px(typography-config-level-from-mdc(headline4)),
+    headline-5: $headline-5 or _rem-to-px(typography-config-level-from-mdc(headline5)),
+    headline-6: $headline-6 or _rem-to-px(typography-config-level-from-mdc(headline6)),
+    subtitle-1: $subtitle-1 or _rem-to-px(typography-config-level-from-mdc(subtitle1)),
+    subtitle-2: $subtitle-2 or _rem-to-px(typography-config-level-from-mdc(subtitle2)),
+    body-1: $body-1 or _rem-to-px(typography-config-level-from-mdc(body1)),
+    body-2: $body-2 or _rem-to-px(typography-config-level-from-mdc(body2)),
+    caption: $caption or _rem-to-px(typography-config-level-from-mdc(caption)),
+    button: $button or _rem-to-px(typography-config-level-from-mdc(button)),
+    overline: $overline or _rem-to-px(typography-config-level-from-mdc(overline)),
+  ));
+}
+
+/// 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: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
+) {
+  @return _apply-font-family($font-family, (
+    headline-1: $headline-1 or typography-config-level-from-mdc(headline1),
+    headline-2: $headline-2 or typography-config-level-from-mdc(headline2),
+    headline-3: $headline-3 or typography-config-level-from-mdc(headline3),
+    headline-4: $headline-4 or typography-config-level-from-mdc(headline4),
+    headline-5: $headline-5 or typography-config-level-from-mdc(headline5),
+    headline-6: $headline-6 or typography-config-level-from-mdc(headline6),
+    subtitle-1: $subtitle-1 or typography-config-level-from-mdc(subtitle1),
+    subtitle-2: $subtitle-2 or typography-config-level-from-mdc(subtitle2),
+    body-1: $body-1 or typography-config-level-from-mdc(body1),
+    body-2: $body-2 or typography-config-level-from-mdc(body2),
+    caption: $caption or typography-config-level-from-mdc(caption),
+    button: $button or typography-config-level-from-mdc(button),
+    overline: $overline or typography-config-level-from-mdc(overline),
+  ));
+}
+
 // Whether a config is for the Material Design 2018 typography system.
 @function private-typography-is-2018-config($config) {
   @return map.get($config, headline-1) != null;
diff --git a/src/material/legacy-core/theming/prebuilt/deeppurple-amber.scss b/src/material/legacy-core/theming/prebuilt/deeppurple-amber.scss
index 327012838bbe..83cae2515a32 100644
--- a/src/material/legacy-core/theming/prebuilt/deeppurple-amber.scss
+++ b/src/material/legacy-core/theming/prebuilt/deeppurple-amber.scss
@@ -3,7 +3,6 @@
 @use '../../../core/theming/palette';
 @use '../../../core/theming/theming';
 @use '../../../core/typography/typography';
-@use '../../../core/typography/all-typography';
 
 
 // Include non-theme styles for core.
@@ -18,7 +17,7 @@ $theme: theming.define-light-theme((
     primary: $primary,
     accent: $accent,
   ),
-  typography: all-typography.define-typography-config(),
+  typography: typography.define-typography-config(),
   density: 0,
 ));
 
diff --git a/src/material/legacy-core/theming/prebuilt/indigo-pink.scss b/src/material/legacy-core/theming/prebuilt/indigo-pink.scss
index 9fb2c6f8f3e1..7047e8199a70 100644
--- a/src/material/legacy-core/theming/prebuilt/indigo-pink.scss
+++ b/src/material/legacy-core/theming/prebuilt/indigo-pink.scss
@@ -3,7 +3,6 @@
 @use '../../../core/theming/palette';
 @use '../../../core/theming/theming';
 @use '../../../core/typography/typography';
-@use '../../../core/typography/all-typography';
 
 
 // Include non-theme styles for core.
@@ -18,7 +17,7 @@ $theme: theming.define-light-theme((
     primary: $primary,
     accent: $accent
   ),
-  typography: all-typography.define-typography-config(),
+  typography: typography.define-typography-config(),
   density: 0,
 ));
 
diff --git a/src/material/legacy-core/theming/prebuilt/pink-bluegrey.scss b/src/material/legacy-core/theming/prebuilt/pink-bluegrey.scss
index 5241a375b554..1a1cf3700ded 100644
--- a/src/material/legacy-core/theming/prebuilt/pink-bluegrey.scss
+++ b/src/material/legacy-core/theming/prebuilt/pink-bluegrey.scss
@@ -3,7 +3,6 @@
 @use '../../../core/theming/palette';
 @use '../../../core/theming/theming';
 @use '../../../core/typography/typography';
-@use '../../../core/typography/all-typography';
 
 
 // Include non-theme styles for core.
@@ -18,7 +17,7 @@ $theme: theming.define-dark-theme((
     primary: $primary,
     accent: $accent
   ),
-  typography: all-typography.define-typography-config(),
+  typography: typography.define-typography-config(),
   density: 0,
 ));
 
diff --git a/src/material/legacy-core/theming/prebuilt/purple-green.scss b/src/material/legacy-core/theming/prebuilt/purple-green.scss
index 0f15639c5bc1..2d1c0ba53851 100644
--- a/src/material/legacy-core/theming/prebuilt/purple-green.scss
+++ b/src/material/legacy-core/theming/prebuilt/purple-green.scss
@@ -3,7 +3,6 @@
 @use '../../../core/theming/palette';
 @use '../../../core/theming/theming';
 @use '../../../core/typography/typography';
-@use '../../../core/typography/all-typography';
 
 
 // Include non-theme styles for core.
@@ -18,7 +17,7 @@ $theme: theming.define-dark-theme((
     primary: $primary,
     accent: $accent
   ),
-  typography: all-typography.define-typography-config(),
+  typography: typography.define-typography-config(),
   density: 0,
 ));
 

From da234357ace69671fb79f38de532fdb8ecbee03c Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Tue, 30 May 2023 22:41:00 +0000
Subject: [PATCH 2/2] fixup! refactor(material/typography): Move
 define-typography-config under _typography.scss

---
 src/material/core/typography/_all-typography.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss
index cf25e0eb1909..8df96ef5bcfd 100644
--- a/src/material/core/typography/_all-typography.scss
+++ b/src/material/core/typography/_all-typography.scss
@@ -37,7 +37,6 @@
 @use '../../tree/tree-theme';
 @use '../theming/theming';
 @use '../core-theme';
-@use '../mdc-helpers/mdc-helpers';
 
 // Includes all of the typographic styles.
 @mixin all-component-typographies($config-or-theme: null) {