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

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

@@ -231,6 +231,41 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
 }
 
+/// 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;
+  }
+}
+
 /// Gets the set of tokens from the given theme, limited to those affected by the requested theming
 /// systems.
 /// @param {Map} $theme The theme to get tokens from.
@@ -254,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

@@ -209,3 +209,60 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   @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;
+}

package/core/theming/_theming.scss

@@ -24,11 +24,6 @@ $_legacy-theme-warning: 'Angular Material themes should be created from a map co
   'palette values for "primary", "accent", and "warn". ' +
   'See https://material.angular.io/guide/theming for more information.';
 
-// Flag whether theme config getter functions should warn if a key is expected to exist but not
-// present in the config. This can be transformed internally in Google to ensure all clients have
-// comprehensive theme configurations.
-$_enable-strict-theme-config: false;
-
 // Flag whether to disable theme definitions copying color values to the top-level theme config.
 // This copy is to preserve backwards compatibility.
 $_disable-color-backwards-compatibility: false;
@@ -270,9 +265,6 @@ $_emitted-base: () !default;
   @if map.has-key($theme, color) {
     @return map.get($theme, color);
   }
-  @else if ($_enable-strict-theme-config) {
-    @error 'Angular Material theme configuration is missing a "color" value';
-  }
   @return $default;
 }
 
@@ -292,9 +284,6 @@ $_emitted-base: () !default;
   @if map.has-key($theme-or-config, density) {
     @return map.get($theme-or-config, density);
   }
-  @else if ($_enable-strict-theme-config) {
-    @error 'Angular Material theme configuration is missing a "density" value';
-  }
   @return $default;
 }
 
@@ -315,9 +304,6 @@ $_emitted-base: () !default;
   @if (map.has-key($theme-or-config, typography)) {
     @return map.get($theme-or-config, typography);
   }
-  @else if ($_enable-strict-theme-config) {
-    @error 'Angular Material theme configuration is missing a "typography" value';
-  }
   @return $default;
 }
 

package/core/tokens/m2/mat/_autocomplete.scss

@@ -1,6 +1,5 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -13,21 +12,19 @@ $prefix: (mat, autocomplete);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $background: map.get($config, background);
-
+@function get-color-tokens($theme) {
   @return (
-    background-color: theming.get-color-from-palette($background, card)
+    background-color: inspection.get-theme-color($theme, background, card)
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

package/core/tokens/m2/mat/_badge.scss

@@ -2,8 +2,7 @@
 @use 'sass:map';
 @use 'sass:color';
 @use '../../token-utils';
-@use '../../../typography/typography-utils';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -16,12 +15,10 @@ $prefix: (mat, badge);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $primary-color-tokens: private-get-color-palette-color-tokens(map.get($config, primary));
-  $app-background: theming.get-color-from-palette($background, 'background');
-  $disabled-background: theming.get-color-from-palette($foreground, disabled-button);
+@function get-color-tokens($theme) {
+  $primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
+  $app-background: inspection.get-theme-color($theme, background, background);
+  $disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
 
   // The disabled color usually has some kind of opacity, but because the badge is overlayed
   // on top of something else, it won't look good if it's opaque. If it is a color *type*,
@@ -36,24 +33,24 @@ $prefix: (mat, badge);
 
   @return map.merge($primary-color-tokens, (
     disabled-state-background-color: $disabled-background,
-    disabled-state-text-color: theming.get-color-from-palette($foreground, disabled-text),
+    disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
   ));
 }
 
 // Generates the tokens used to theme the badge based on a palette.
-@function private-get-color-palette-color-tokens($palette) {
+@function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
   @return (
-    background-color: theming.get-color-from-palette($palette),
-    text-color: theming.get-color-from-palette($palette, default-contrast),
+    background-color: inspection.get-theme-color($theme, $palette-name),
+    text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   $base-size: 12px;
 
   @return (
-    text-font: typography-utils.font-family($config),
+    text-font: inspection.get-theme-typography($theme, body-2, font-family),
     text-size: $base-size,
     text-weight: 600,
     small-size-text-size: $base-size * 0.75,
@@ -62,7 +59,7 @@ $prefix: (mat, badge);
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

package/core/tokens/m2/mat/_bottom-sheet.scss

@@ -1,7 +1,5 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../typography/typography-utils';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -17,30 +15,26 @@ $prefix: (mat, bottom-sheet);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-
+@function get-color-tokens($theme) {
   @return (
-    container-text-color: theming.get-color-from-palette($foreground, text),
-    container-background-color: theming.get-color-from-palette($background, dialog),
+    container-text-color: inspection.get-theme-color($theme, foreground, text),
+    container-background-color: inspection.get-theme-color($theme, background, dialog),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return (
-    container-text-font: typography-utils.font-family($config, body-1) or
-      typography-utils.font-family($config),
-    container-text-line-height: typography-utils.line-height($config, body-1),
-    container-text-size: typography-utils.font-size($config, body-1),
-    container-text-tracking: typography-utils.letter-spacing($config, body-1),
-    container-text-weight: typography-utils.font-weight($config, body-1),
+    container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    container-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    container-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    container-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
   );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

package/core/tokens/m2/mat/_datepicker.scss

@@ -1,10 +1,8 @@
 @use 'sass:color';
-@use 'sass:map';
 @use 'sass:meta';
 @use 'sass:math';
 @use '../../token-utils';
-@use '../../../theming/theming';
-@use '../../../typography/typography-utils';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -36,23 +34,20 @@ $private-default-overlap-color: #a8dab5;
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $background: map.get($config, background);
-  $primary: map.get($config, primary);
-  $inactive-icon-color: theming.get-color-from-palette($foreground, icon);
-  $text-color: theming.get-color-from-palette($foreground, text);
-  $secondary-text-color: theming.get-color-from-palette($foreground, secondary-text);
-  $disabled-text-color: theming.get-color-from-palette($foreground, disabled-text);
-  $divider-color: theming.get-color-from-palette($foreground, divider);
-  $hint-text-color: theming.get-color-from-palette($foreground, hint-text);
+@function get-color-tokens($theme) {
+  $inactive-icon-color: inspection.get-theme-color($theme, foreground, icon);
+  $text-color: inspection.get-theme-color($theme, foreground, text);
+  $secondary-text-color: inspection.get-theme-color($theme, foreground, secondary-text);
+  $disabled-text-color: inspection.get-theme-color($theme, foreground, disabled-text);
+  $divider-color: inspection.get-theme-color($theme, foreground, divider);
+  $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
   $preview-outline-color: $divider-color;
   $today-disabled-outline-color: null;
 
-  $primary-color: theming.get-color-from-palette(map.get($config, primary));
+  $primary-color: inspection.get-theme-color($theme, primary);
   $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
-  $calendar-tokens: private-get-calendar-color-palette-color-tokens($config, primary);
-  $toggle-tokens: private-get-toggle-color-palette-color-tokens($config, primary);
+  $calendar-tokens: private-get-calendar-color-palette-color-tokens($theme, primary);
+  $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
 
   // The divider color is set under the assumption that it'll be used
   // for a solid border, but because we're using a dashed border for the
@@ -90,31 +85,30 @@ $private-default-overlap-color: #a8dab5;
     range-input-disabled-state-separator-color: $disabled-text-color,
     range-input-disabled-state-text-color: $disabled-text-color,
 
-    calendar-container-background-color: theming.get-color-from-palette($background, card),
+    calendar-container-background-color: inspection.get-theme-color($theme, background, card),
     calendar-container-text-color: $text-color,
   ));
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  $fallback-font: typography-utils.font-family($config);
-
+@function get-typography-tokens($theme) {
   @return (
     // TODO(crisbeto): the typography tokens for other components set every typography dimension of
     // an element (e.g. size, weight, line height, letter spacing). These tokens only set the values
     // that were set in the previous theming API to reduce the amount of subtle screenshot
     // differences. We should look into introducing the other tokens in a follow-up.
-    calendar-text-font: $fallback-font,
+    calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
     calendar-text-size: 13px, // TODO(crisbeto): this doesn't appear to affect anything
 
-    calendar-body-label-text-size: typography-utils.font-size($config, button),
-    calendar-body-label-text-weight: typography-utils.font-weight($config, button),
+    calendar-body-label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    calendar-body-label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
 
-    calendar-period-button-text-size: typography-utils.font-size($config, button),
-    calendar-period-button-text-weight: typography-utils.font-weight($config, button),
+    calendar-period-button-text-size: inspection.get-theme-typography($theme, button, font-size),
+    calendar-period-button-text-weight: inspection.get-theme-typography(
+        $theme, button, font-weight),
 
     calendar-header-text-size: 11px,
-    calendar-header-text-weight: typography-utils.font-weight($config, body-1),
+    calendar-header-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }
 
@@ -133,19 +127,17 @@ $private-default-overlap-color: #a8dab5;
   );
 }
 
-@function private-get-calendar-color-palette-color-tokens($config, $palette-name) {
-  $foreground: map.get($config, foreground);
-  $palette: map.get($config, $palette-name);
-  $palette-color: theming.get-color-from-palette($palette);
-  $default-contrast: theming.get-color-from-palette($palette, default-contrast);
-  $active-background-color: theming.get-color-from-palette($palette, 0.3);
+@function private-get-calendar-color-palette-color-tokens($theme, $palette-name) {
+  $palette-color: inspection.get-theme-color($theme, $palette-name);
+  $default-contrast: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  $active-background-color: sass-utils.safe-color-change($palette-color, $alpha: 0.3);
   $active-disabled-color: null;
 
   @if (meta.type-of($palette-color) == color) {
     $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
   }
   @else {
-    $active-disabled-color: theming.get-color-from-palette($foreground, disabled-button);
+    $active-disabled-color: inspection.get-theme-color($theme, foreground, disabled-button);
   }
 
   @return (
@@ -158,17 +150,15 @@ $private-default-overlap-color: #a8dab5;
   );
 }
 
-@function private-get-toggle-color-palette-color-tokens($config, $palette-name) {
-  $palette: map.get($config, $palette-name);
-
+@function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    toggle-active-state-icon-color: theming.get-color-from-palette($palette, text),
+    toggle-active-state-icon-color: inspection.get-theme-color($theme, $palette-name, text),
   );
 }
 
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

package/core/tokens/m2/mat/_divider.scss

@@ -1,6 +1,5 @@
-@use 'sass:map';
 @use '../../token-utils';
-@use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -15,21 +14,19 @@ $prefix: (mat, divider);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-
+@function get-color-tokens($theme) {
   @return (
-    color: theming.get-color-from-palette($foreground, divider)
+    color: inspection.get-theme-color($theme, foreground, divider)
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }