refactor(material/typography): Move define-typography-config under _t…

…ypography.scss (#27195)

* 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.

* fixup! refactor(material/typography): Move define-typography-config under _typography.scss

(cherry picked from commit 3749308)

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;

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),
   );
 }
 

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,
 ));
 

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,
 ));
 

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,
 ));
 

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,
 ));
 

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);

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));
 

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'),

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.