@angular/material 17.0.0-next.0 → 17.0.0-next.2

package/core/style/_private.scss

@@ -1,17 +1,15 @@
-@use 'sass:map';
 @use './elevation';
+@use '../theming/inspection';
 
-@mixin private-theme-elevation($zValue, $config) {
-  $foreground: map.get($config, foreground);
-  $elevation-color: map.get($foreground, elevation);
+@mixin private-theme-elevation($zValue, $theme) {
+  $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
   @include elevation.elevation($zValue, $elevation-color-or-default);
 }
 
-@mixin private-theme-overridable-elevation($zValue, $config) {
-  $foreground: map.get($config, foreground);
-  $elevation-color: map.get($foreground, elevation);
+@mixin private-theme-overridable-elevation($zValue, $theme) {
+  $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
   @include elevation.overridable-elevation($zValue, $elevation-color-or-default);

package/core/style/_sass-utils.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
 
@@ -47,3 +48,9 @@
 @function coerce-to-list($value) {
   @return if(meta.type-of($value) != 'list', ($value,), $value);
 }
+
+/// A version of the Sass `color.change` function that is safe ot use with CSS variables.
+@function safe-color-change($color, $args...) {
+  $args: meta.keywords($args);
+  @return if(meta.type-of($color) == 'color', color.change($color, $args...), $color);
+}

package/core/testing/index.d.ts

@@ -1,6 +1,7 @@
 import { BaseHarnessFilters } from '@angular/cdk/testing';
 import { ComponentHarness } from '@angular/cdk/testing';
 import { ComponentHarnessConstructor } from '@angular/cdk/testing';
+import { ContentContainerComponentHarness } from '@angular/cdk/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
 
 /** Harness for interacting with an MDC-based `mat-optgroup` in tests. */
@@ -27,7 +28,7 @@ export declare class MatOptgroupHarness extends ComponentHarness {
 }
 
 /** Harness for interacting with an MDC-based `mat-option` in tests. */
-export declare class MatOptionHarness extends ComponentHarness {
+export declare class MatOptionHarness extends ContentContainerComponentHarness {
     /** Selector used to locate option instances. */
     static hostSelector: string;
     /** Element containing the option's text. */

package/core/theming/_all-theme.scss

@@ -39,50 +39,50 @@
 @use './theming';
 
 // Create a theme.
-@mixin all-component-themes($theme-or-color-config) {
+@mixin all-component-themes($theme) {
   $dedupe-key: 'angular-material-theme';
-  @include theming.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
-    @include core-theme.theme($theme-or-color-config);
-    @include card-theme.theme($theme-or-color-config);
-    @include progress-bar-theme.theme($theme-or-color-config);
-    @include tooltip-theme.theme($theme-or-color-config);
-    @include form-field-theme.theme($theme-or-color-config);
-    @include input-theme.theme($theme-or-color-config);
-    @include select-theme.theme($theme-or-color-config);
-    @include autocomplete-theme.theme($theme-or-color-config);
-    @include dialog-theme.theme($theme-or-color-config);
-    @include chips-theme.theme($theme-or-color-config);
-    @include slide-toggle-theme.theme($theme-or-color-config);
-    @include radio-theme.theme($theme-or-color-config);
-    @include slider-theme.theme($theme-or-color-config);
-    @include menu-theme.theme($theme-or-color-config);
-    @include list-theme.theme($theme-or-color-config);
-    @include paginator-theme.theme($theme-or-color-config);
-    @include tabs-theme.theme($theme-or-color-config);
-    @include checkbox-theme.theme($theme-or-color-config);
-    @include button-theme.theme($theme-or-color-config);
-    @include icon-button-theme.theme($theme-or-color-config);
-    @include fab-theme.theme($theme-or-color-config);
-    @include snack-bar-theme.theme($theme-or-color-config);
-    @include table-theme.theme($theme-or-color-config);
-    @include progress-spinner-theme.theme($theme-or-color-config);
-    @include badge-theme.theme($theme-or-color-config);
-    @include bottom-sheet-theme.theme($theme-or-color-config);
-    @include button-toggle-theme.theme($theme-or-color-config);
-    @include datepicker-theme.theme($theme-or-color-config);
-    @include divider-theme.theme($theme-or-color-config);
-    @include expansion-theme.theme($theme-or-color-config);
-    @include grid-list-theme.theme($theme-or-color-config);
-    @include icon-theme.theme($theme-or-color-config);
-    @include sidenav-theme.theme($theme-or-color-config);
-    @include stepper-theme.theme($theme-or-color-config);
-    @include sort-theme.theme($theme-or-color-config);
-    @include toolbar-theme.theme($theme-or-color-config);
-    @include tree-theme.theme($theme-or-color-config);
+  @include theming.private-check-duplicate-theme-styles($theme, $dedupe-key) {
+    @include core-theme.theme($theme);
+    @include card-theme.theme($theme);
+    @include progress-bar-theme.theme($theme);
+    @include tooltip-theme.theme($theme);
+    @include form-field-theme.theme($theme);
+    @include input-theme.theme($theme);
+    @include select-theme.theme($theme);
+    @include autocomplete-theme.theme($theme);
+    @include dialog-theme.theme($theme);
+    @include chips-theme.theme($theme);
+    @include slide-toggle-theme.theme($theme);
+    @include radio-theme.theme($theme);
+    @include slider-theme.theme($theme);
+    @include menu-theme.theme($theme);
+    @include list-theme.theme($theme);
+    @include paginator-theme.theme($theme);
+    @include tabs-theme.theme($theme);
+    @include checkbox-theme.theme($theme);
+    @include button-theme.theme($theme);
+    @include icon-button-theme.theme($theme);
+    @include fab-theme.theme($theme);
+    @include snack-bar-theme.theme($theme);
+    @include table-theme.theme($theme);
+    @include progress-spinner-theme.theme($theme);
+    @include badge-theme.theme($theme);
+    @include bottom-sheet-theme.theme($theme);
+    @include button-toggle-theme.theme($theme);
+    @include datepicker-theme.theme($theme);
+    @include divider-theme.theme($theme);
+    @include expansion-theme.theme($theme);
+    @include grid-list-theme.theme($theme);
+    @include icon-theme.theme($theme);
+    @include sidenav-theme.theme($theme);
+    @include stepper-theme.theme($theme);
+    @include sort-theme.theme($theme);
+    @include toolbar-theme.theme($theme);
+    @include tree-theme.theme($theme);
   }
 }
 
 // @deprecated Use `all-component-themes`.
-@mixin angular-material-theme($theme-or-color-config) {
-  @include all-component-themes($theme-or-color-config);
+@mixin angular-material-theme($theme) {
+  @include all-component-themes($theme);
 }

package/core/theming/_inspection.scss

@@ -1,8 +1,7 @@
-// This file contains functions used to inspect Angular Material theme objects.
-
 @use 'sass:list';
 @use 'sass:map';
 @use '../style/validation';
+@use './m2-inspection';
 
 $_internals: _mat-theming-internals-do-not-access;
 
@@ -48,15 +47,19 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {Map} $theme The theme
 /// @return {String} The type of theme (either `light` or `dark`).
 @function get-theme-type($theme) {
-  $err: _validate-theme-object($theme);
-  @if $err {
-    // TODO(mmalerba): implement for old style theme objects.
-    @error #{'get-theme-type does not support legacy theme objects.'};
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.get-theme-type($theme);
   }
-  @if not theme-has($theme, color) {
-    @error 'Color information is not available on this theme.';
+  @else if $version == 1 {
+    @if not theme-has($theme, color) {
+      @error 'Color information is not available on this theme.';
+    }
+    @return map.get($theme, $_internals, theme-type) or light;
+  }
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
   }
-  @return map.get($theme, $_internals, theme-type) or light;
 }
 
 /// Gets a color from a theme object. This function can take 2 or 3 arguments. If 2 arguments are
@@ -70,14 +73,26 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 ///   interpreted as a palette name).
 /// @return {Color} The requested theme color.
 @function get-theme-color($theme, $args...) {
+  $version: get-theme-version($theme);
   $args-count: list.length($args);
-  @if $args-count == 1 {
-    @return _get-theme-role-color($theme, $args...);
+  @if $args-count != 1 and $args-count != 2 {
+    @error #{'Expected 2 or 3 arguments. Got:'} $args-count + 1;
+  }
+
+  @if $version == 0 {
+    @return m2-inspection.get-theme-color($theme, $args...);
   }
-  @else if $args-count == 2 {
-    @return _get-theme-palette-color($theme, $args...);
+  @else if $version == 1 {
+    @if $args-count == 1 {
+      @return _get-theme-role-color($theme, $args...);
+    }
+    @else if $args-count == 2 {
+      @return _get-theme-palette-color($theme, $args...);
+    }
+  }
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
   }
-  @error #{'Expected 2 or 3 arguments. Got:'} $args-count + 1;
 }
 
 /// Gets a role color from a theme object.
@@ -136,45 +151,53 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 ///   (font, font-family, font-size, font-weight, line-height, or letter-spacing).
 /// @return {*} The value of the requested font property.
 @function get-theme-typography($theme, $typescale, $property: font) {
-  $err: _validate-theme-object($theme);
-  @if $err {
-    // TODO(mmalerba): implement for old style theme objects.
-    @error #{'get-theme-typography does not support legacy theme objects.'};
-  }
-  @if not theme-has($theme, typography) {
-    @error 'Typography information is not available on this theme.';
-  }
-  @if not list.index($_m3-typescales, $typescale) {
-    @error #{'Valid typescales are: #{$_m3-typescales}. Got:'} $typescale;
-  }
-  @if not list.index($_typography-properties, $property) {
-    @error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
-  }
-  $property-key: map.get((
-    font: '',
-    font-family: '-font',
-    line-height: '-line-height',
-    font-size: '-size',
-    letter-spacing: '-tracking',
-    font-weight: '-weight'
-  ), $property);
-  $token-name: '#{$typescale}#{$property-key}';
-  @return map.get($theme, $_internals, typography-tokens, (mdc, typography), $token-name);
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.get-theme-typography($theme, $typescale, $property);
+  }
+  @else if $version == 1 {
+    @if not theme-has($theme, typography) {
+      @error 'Typography information is not available on this theme.';
+    }
+    @if not list.index($_m3-typescales, $typescale) {
+      @error #{'Valid typescales are: #{$_m3-typescales}. Got:'} $typescale;
+    }
+    @if not list.index($_typography-properties, $property) {
+      @error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
+    }
+    $property-key: map.get((
+      font: '',
+      font-family: '-font',
+      line-height: '-line-height',
+      font-size: '-size',
+      letter-spacing: '-tracking',
+      font-weight: '-weight'
+    ), $property);
+    $token-name: '#{$typescale}#{$property-key}';
+    @return map.get($theme, $_internals, typography-tokens, (mdc, typography), $token-name);
+  }
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
+  }
 }
 
 /// Gets the density scale from a theme object.
 /// @param {Map} $theme The theme
 /// @return {Number} The density scale.
 @function get-theme-density($theme) {
-  $err: _validate-theme-object($theme);
-  @if $err {
-    // TODO(mmalerba): implement for old style theme objects.
-    @error #{'get-theme-density does not support legacy theme objects.'};
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.get-theme-density($theme);
+  }
+  @else if $version == 1 {
+    @if not theme-has($theme, density) {
+      @error 'Density information is not available on this theme.';
+    }
+    @return map.get($theme, $_internals, density-scale);
   }
-  @if not theme-has($theme, density) {
-    @error 'Density information is not available on this theme.';
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
   }
-  @return map.get($theme, $_internals, density-scale);
 }
 
 /// Checks whether the theme has information about given theming system.
@@ -182,26 +205,65 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {String} $system The system to check
 /// @param {Boolean} Whether the theme has information about the system.
 @function theme-has($theme, $system) {
-  $err: _validate-theme-object($theme);
-  @if $err {
-    // TODO(mmalerba): implement for old style theme objects.
-    @error #{'get-theme-density does not support legacy theme objects.'};
-  }
-  @if $system == base {
-    @return map.get($theme, $_internals, base-tokens) != null;
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.theme-has($theme, $system);
   }
-  @if $system == color {
-    @return map.get($theme, $_internals, color-tokens) != null and
+  @else if $version == 1 {
+    @if $system == base {
+      @return map.get($theme, $_internals, base-tokens) != null;
+    }
+    @if $system == color {
+      @return map.get($theme, $_internals, color-tokens) != null and
         map.get($theme, $_internals, theme-type) != null and
         map.get($theme, $_internals, palettes) != null;
+    }
+    @if $system == typography {
+      @return map.get($theme, $_internals, typography-tokens) != null;
+    }
+    @if $system == density {
+      @return map.get($theme, $_internals, density-scale) != null;
+    }
+    @error 'Valid systems are: base, color, typography, density. Got:' $system;
   }
-  @if $system == typography {
-    @return map.get($theme, $_internals, typography-tokens) != null;
+  @else {
+    @error #{'Unrecognized theme version:'} $version;
   }
-  @if $system == density {
-    @return map.get($theme, $_internals, density-scale) != null;
+}
+
+/// Removes the information about the given theming system(s) from the given theme.
+/// @param {Map} $theme The theme to remove information from
+/// @param {String...} $systems The systems to remove
+/// @return {Map} A version of the theme without the removed theming systems.
+@function theme-remove($theme, $systems...) {
+  $err: validation.validate-allowed-values($systems, color, typography, density, base);
+  @if $err {
+    @error #{'Expected $systems to contain valid system names (color, typography, density, or'}
+    #{'base). Got invalid system names:'} $err;
+  }
+  $version: get-theme-version($theme);
+  @if $version == 0 {
+    @return m2-inspection.theme-remove($theme, $systems...);
+  }
+  @else if $version == 1 {
+    @each $system in $systems {
+      @if $system == base {
+        $theme: map.deep-remove($theme, $_internals, base-tokens);
+      }
+      @else if $system == color {
+        $theme: map.deep-remove($theme, $_internals, color-tokens);
+        $theme: map.deep-remove($theme, $_internals, theme-type);
+        $theme: map.deep-remove($theme, $_internals, palettes);
+      }
+      @else if $system == typography {
+        $theme: map.deep-remove($theme, $_internals, typography-tokens);
+      }
+      @else if $system == density {
+        $theme: map.deep-remove($theme, $_internals, density-scale);
+      }
+    }
+    @return $theme;
   }
-  @error 'Valid systems are: base, color, typography, density. Got:' $system;
 }
 
 /// Gets the set of tokens from the given theme, limited to those affected by the requested theming
@@ -227,3 +289,15 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   @return $result;
 }
+
+/// Gets a version of the theme with a modified typography config that preserves old behavior in
+/// some components that previously used `private-typography-to-2014-config`.
+/// Do not introduce new usages of this, it should be cleaned up and removed.
+/// @deprecated
+@function private-get-typography-back-compat-theme($theme) {
+  @return if(
+      get-theme-version($theme) == 0,
+      m2-inspection.private-get-typography-back-compat-theme($theme),
+      $theme
+  );
+}

package/core/theming/_m2-inspection.scss

@@ -0,0 +1,268 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use './theming';
+@use '../typography/property-getters' as typography-getters;
+@use '../typography/versioning' as typography-versioning;
+
+/// Key used to access the Angular Material theme internals.
+$_internals: _mat-theming-internals-do-not-access;
+
+/// Keys that indicate a config object is a color config.
+$_color-keys: (
+  primary,
+  accent,
+  warn,
+  foreground,
+  background,
+  is-dark,
+  color, /* included for themes that incorrectly nest the color config: (color: (color: (....))) */
+);
+
+/// Keys that indicate a config object is a typography config.
+$_typography-keys: (
+  headline-1,
+  headline-2,
+  headline-3,
+  headline-4,
+  headline-5,
+  headline-6,
+  subtitle-1,
+  font-famiy,
+  subtitle-2,
+  body-1,
+  body-2,
+  button,
+  caption,
+  overline,
+);
+
+/// The CSS typography properties supported by the inspection API.
+$_typography-properties: (font, font-family, line-height, font-size, letter-spacing, font-weight);
+
+/// Gets the m2-config from the theme.
+@function _get-m2-config($theme) {
+  // It is possible for a user to pass a "density theme" that is just a number.
+  @if meta.type-of($theme) != 'map' {
+    @return $theme;
+  }
+  $internal: map.get($theme, $_internals, m2-config);
+  $theme: map.remove($theme, $_internals);
+  @return if(_is-error-theme($theme), $internal, $theme);
+}
+
+/// Checks whether the given theme contains error values.
+/// @param {*} $theme The theme to check.
+/// @return {Boolean} true if the theme contains error values, else false.
+@function _is-error-theme($theme) {
+  @if meta.type-of($theme) != 'map' {
+    @return false;
+  }
+  @if map.get($theme, ERROR) {
+    @return true;
+  }
+  @return _is-error-theme(list.nth(map.values($theme), 1));
+}
+
+/// Checks whether the given theme object has any of the given keys.
+/// @param {Map} $theme The theme to check
+/// @param {List} $keys The keys to check for
+/// @return {Boolean} Whether the theme has any of the given keys.
+@function _has-any-key($theme, $keys) {
+  @each $key in $keys {
+    @if map.has-key($theme, $key) {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+/// Checks whether the given theme is a density scale value.
+/// @param {*} $theme The theme to check.
+/// @return {Boolean} true if the theme is a density scale value, else false.
+@function _is-density-value($theme) {
+  @return $theme == minimum or $theme == maximum or meta.type-of($theme) == 'number';
+}
+
+/// Gets the type of theme represented by a theme object (light or dark).
+/// @param {Map} $theme The theme
+/// @return {String} The type of theme (either `light` or `dark`).
+@function get-theme-type($theme) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $colors: theming.get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: theming.get-color-config($colors);
+  }
+  @return if(map.get($colors, is-dark), dark, light);
+}
+
+/// Gets a color from a theme object. This function can take 2 or 3 arguments. If 2 arguments are
+/// passed, the second argument is treated as the name of a color role. If 3 arguments are passed,
+/// the second argument is treated as the name of a color palette (primary, secondary, etc.) and the
+/// third is treated as the palette hue (10, 50, etc.)
+/// @param {Map} $theme The theme
+/// @param {String} $palette-name The name of a color palette.
+/// @param {Number} $hue The palette hue to get (passing this argument means the second argument is
+///   interpreted as a palette name).
+/// @return {Color} The requested theme color.
+@function get-theme-color($theme, $palette-name, $args...) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $colors: theming.get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: theming.get-color-config($colors);
+  }
+  $palette: map.get($colors, $palette-name);
+  @if not $palette {
+    @error 'Unrecognized palette name:' $palette-name;
+  }
+  @return theming.get-color-from-palette($palette, $args...);
+}
+
+/// Gets a typography value from a theme object.
+/// @param {Map} $theme The theme
+/// @param {String} $typescale The typescale name.
+/// @param {String} $property The CSS font property to get
+///   (font, font-family, font-size, font-weight, line-height, or letter-spacing).
+/// @return {*} The value of the requested font property.
+@function get-theme-typography($theme, $typescale, $property) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, typography) {
+    @error 'Typography information is not available on this theme.';
+  }
+  $typography: typography-versioning.private-typography-to-2018-config(
+      theming.get-typography-config($theme));
+  @if $property == font {
+    $font-weight: typography-getters.font-weight($typography, $typescale);
+    $font-size: typography-getters.font-size($typography, $typescale);
+    $line-height: typography-getters.line-height($typography, $typescale);
+    $font-family: typography-getters.font-family($typography, $typescale);
+    @return ($font-weight list.slash($font-size, $line-height) $font-family);
+  }
+  @else if $property == font-family {
+    $result: typography-getters.font-family($typography, $typescale);
+    @return $result or typography-getters.font-family($typography);
+  }
+  @else if $property == font-size {
+    @return typography-getters.font-size($typography, $typescale);
+  }
+  @else if $property == font-weight {
+    @return typography-getters.font-weight($typography, $typescale);
+  }
+  @else if $property == line-height {
+    @return typography-getters.line-height($typography, $typescale);
+  }
+  @else if $property == letter-spacing {
+    @return typography-getters.letter-spacing($typography, $typescale);
+  }
+  @else {
+    @error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
+  }
+}
+
+/// Gets the density scale from a theme object.
+/// @param {Map} $theme The theme
+/// @return {Number} The density scale.
+@function get-theme-density($theme) {
+  $theme: _get-m2-config($theme);
+  @if not theme-has($theme, density) {
+    @error 'Density information is not available on this theme.';
+  }
+  $scale: theming.get-density-config($theme);
+  @return theming.clamp-density($scale, -5);
+}
+
+/// Checks whether the theme has information about given theming system.
+/// @param {Map} $theme The theme
+/// @param {String} $system The system to check
+/// @param {Boolean} Whether the theme has information about the system.
+@function theme-has($theme, $system) {
+  $theme: _get-m2-config($theme);
+  @if $system == base {
+    @return true;
+  }
+  @if $system == color {
+    $color: theming.get-color-config($theme);
+    @return $color != null and _has-any-key($color, $_color-keys);
+  }
+  @if $system == typography {
+    $typography: theming.get-typography-config($theme);
+    @return $typography != null and _has-any-key($typography, $_typography-keys);
+  }
+  @if $system == density {
+    // Backwards compatibility for the case where an explicit, but invalid density is given
+    // (this was previously treated as density 0).
+    @if meta.type-of($theme) == 'map' and map.get($theme, density) {
+      @return true;
+    }
+    $density: theming.get-density-config($theme);
+    @return $density != null and _is-density-value($density);
+  }
+  @error 'Valid systems are: base, color, typography, density. Got:' $system;
+}
+
+/// Removes the information about the given theming system(s) from the given theme.
+/// @param {Map} $theme The theme to remove information from
+/// @param {String...} $systems The systems to remove
+/// @return {Map} A version of the theme without the removed theming systems.
+@function theme-remove($theme, $systems...) {
+  $internal: map.get($theme, $_internals, m2-config);
+  @each $system in $systems {
+    @if $system == color {
+      $theme: map.set($theme, color, null);
+    }
+    @else if $system == typography {
+      $theme: map.set($theme, typography, null);
+    }
+    @else if $system == density {
+      $theme: map.set($theme, density, null);
+    }
+  }
+  @if $internal {
+    $internal: theme-remove($internal, $systems...);
+    $theme: map.set($theme, $_internals, m2-config, $internal);
+  }
+  @return $theme;
+}
+
+/// Gets a version of the theme with a modified typography config that preserves old behavior in
+/// some components that previously used `private-typography-to-2014-config`.
+/// Do not introduce new usages of this, it should be cleaned up and removed.
+/// @deprecated
+@function private-get-typography-back-compat-theme($theme) {
+  // It is possible for a user to pass a "density theme" that is just a number.
+  @if meta.type-of($theme) != 'map' {
+    @return $theme;
+  }
+  $internal: map.get($theme, $_internals, m2-config);
+  $theme: map.remove($theme, $_internals);
+  @if theme-has($theme, typography) {
+    $typography-config: theming.get-typography-config($theme);
+    // gmat configs have both 2018 and 2014 keys.
+    @if (not typography-versioning.private-typography-is-2014-config($typography-config)) or
+        (not typography-versioning.private-typography-is-2018-config($typography-config)) {
+      @return $theme;
+    }
+    $new-typography-config: typography-versioning.private-typography-to-2018-config(
+        $typography-config, true);
+    // subtitle-2 is mapped differently by `private-typography-to-2014-config`.
+    $new-typography-config: map.set(
+        $new-typography-config, subtitle-2, map.get($new-typography-config, body-1));
+    $theme: if($theme == $typography-config, $new-typography-config,
+      map.set($theme, typography, $new-typography-config));
+  }
+  @if $internal {
+    $internal: private-get-typography-back-compat-theme($internal);
+    $theme: map.set($theme, $_internals, m2-config, $internal);
+  }
+  @return $theme;
+}