@angular/material 16.0.1 → 16.0.3

package/_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;

package/button/index.d.ts

@@ -12,6 +12,7 @@ import * as i4 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { MatRipple } from '@angular/material/core';
 import { NgZone } from '@angular/core';
+import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
@@ -94,7 +95,7 @@ export declare class MatButton extends MatButtonBase {
 }
 
 /** Base class for all buttons.  */
-declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnDestroy {
+declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanColor, CanDisableRipple, AfterViewInit, OnChanges, OnDestroy {
     _platform: Platform;
     _ngZone: NgZone;
     _animationMode?: string | undefined;
@@ -117,12 +118,12 @@ declare class MatButtonBase extends _MatButtonMixin implements CanDisable, CanCo
     protected _ripple?: MatRipple;
     constructor(elementRef: ElementRef, _platform: Platform, _ngZone: NgZone, _animationMode?: string | undefined);
     ngAfterViewInit(): void;
+    ngOnChanges(): void;
     ngOnDestroy(): void;
     /** Focuses the button. */
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
     /** Gets whether the button has one of the given attributes. */
     private _hasHostAttributes;
-    _isRippleDisabled(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, {}, {}, never, never, false, never>;
 }

package/checkbox/_checkbox-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '@material/form-field' as mdc-form-field;
+@use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/mdc-helpers/mdc-helpers';
@@ -12,9 +13,11 @@
   $warn: map.get($config, warn);
   $foreground: map.get($config, foreground);
 
-  .mat-mdc-checkbox {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));
+  }
 
+  .mat-mdc-checkbox {
     &.mat-primary {
       $primary-config: map.merge($config, (accent: $primary));
       @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($primary-config));
@@ -40,9 +43,12 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
           theming.get-typography-config($config-or-theme));
-  .mat-mdc-checkbox {
+
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));
+  }
 
+  .mat-mdc-checkbox {
     @include mdc-helpers.using-mdc-typography($config) {
       // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
       @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
@@ -53,7 +59,7 @@
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
 
-  .mat-mdc-checkbox {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
   }
 

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

package/core/style/_sass-utils.scss

@@ -0,0 +1,7 @@
+// Include content under the current selector (&) or the document root if there is no current
+// selector.
+@mixin current-selector-or-root($root: html) {
+  @at-root #{& or $root} {
+    @content;
+  }
+}

package/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.

package/core/tokens/m2/mdc/_linear-progress.scss

@@ -17,13 +17,11 @@ $prefix: (mdc, linear-progress);
   $height: 4px;
 
   @return (
-    // The height of the progress bar. MDC has three tokens with the goal
-    // of having `track-height` apply only to the track. In our case, all three
-    // are always the same. Specify all three while the transition is in
-    // progress.
+    // The height of the progress bar. `active-indicator-height` applies to the
+    // bar and `track-height` applies to the track.
     active-indicator-height: $height,
-    bar-and-track-height: $height,
     track-height: $height,
+    track-shape: 0,
   );
 }
 

package/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';
@@ -41,155 +37,6 @@
 @use '../../tree/tree-theme';
 @use '../theming/theming';
 @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) {
@@ -198,7 +45,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

package/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;