@angular/material 20.0.0-next.1 → 20.0.0-next.3

package/core/tokens/_token-utils.scss

@@ -118,11 +118,26 @@ $_system-fallbacks: m3-system.create-system-fallbacks();
 
 // Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
-  @if $tokens != null {
-    // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility
-    // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should
-    // figure out a better way to do this or move all the concrete styles out of the theme.
-    & {
+  @include _create-token-values-internal($prefix, $tokens, false);
+}
+
+// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
+// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
+@mixin create-token-values-mixed($prefix, $tokens) {
+  @include _create-token-values-internal($prefix, $tokens, true);
+}
+
+@mixin _create-token-values-internal($prefix, $tokens, $in-place) {
+  @if ($tokens != null) {
+    @if ($in-place) {
+      & {
+        @each $key, $value in $tokens {
+          @if $value != null {
+            #{_create-var-name($prefix, $key)}: #{$value};
+          }
+        }
+      }
+    } @else {
       @each $key, $value in $tokens {
         @if $value != null {
           #{_create-var-name($prefix, $key)}: #{$value};

package/core/tokens/m2/_index.scss

@@ -45,6 +45,7 @@
 @use './mat/toolbar' as tokens-mat-toolbar;
 @use './mat/tree' as tokens-mat-tree;
 @use './mat/timepicker' as tokens-mat-timepicker;
+@use './mat/tonal-button' as tokens-mat-tonal-button;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
 @use './mdc/text-button' as tokens-mdc-text-button;
 @use './mdc/protected-button' as tokens-mdc-protected-button;
@@ -158,6 +159,7 @@
     _get-tokens-for-module($theme, tokens-mat-toolbar),
     _get-tokens-for-module($theme, tokens-mat-tree),
     _get-tokens-for-module($theme, tokens-mat-timepicker),
+    _get-tokens-for-module($theme, tokens-mat-tonal-button),
     _get-tokens-for-module($theme, tokens-mdc-checkbox),
     _get-tokens-for-module($theme, tokens-mdc-chip),
     _get-tokens-for-module($theme, tokens-mdc-circular-progress),

package/core/tokens/m2/mat/_tonal-button.scss

@@ -0,0 +1,110 @@
+@use 'sass:map';
+@use '../../token-definition';
+@use '../../../theming/theming';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, tonal-button);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return (
+    // Shape of the container element.
+    container-shape: 4px,
+
+    // Start/end padding of the button.
+    horizontal-padding: 16px,
+
+    // Space between the icon and the button's main content.
+    icon-spacing: 8px,
+
+    // Amount by which to offset the icon so that its presence
+    // doesn't increase throw off the horizontal padding.
+    icon-offset: -4px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+
+  @return (
+    container-color: inspection.get-theme-color($theme, background, card),
+    label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
+    disabled-container-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      0.12),
+    disabled-label-text-color: inspection.get-theme-color($theme, foreground, disabled-button,
+      if($is-dark, 0.5, 0.38)),
+
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: inspection.get-theme-color($theme, foreground, base),
+
+    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+
+    // Color of the ripple element.
+    ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
+  );
+}
+
+// Generates the mapping for the properties that change based on the button palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    container-color: inspection.get-theme-color($theme, $palette-name, default),
+    label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
+    state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
+    ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, button, font-family),
+    label-text-size: inspection.get-theme-typography($theme, button, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    label-text-transform: none,
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    touch-target-display: if($scale < -1, none, block),
+    container-height:
+      map.get(
+        (
+          0: 36px,
+          -1: 32px,
+          -2: 28px,
+          -3: 24px,
+        ),
+        $scale
+      )
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-definition.$placeholder-color-config),
+      get-typography-tokens(token-definition.$placeholder-typography-config),
+      get-density-tokens(token-definition.$placeholder-density-config)
+  );
+}

package/core/tokens/m3/_index.scss

@@ -43,6 +43,7 @@
 @use './mat/toolbar' as tokens-mat-toolbar;
 @use './mat/tree' as tokens-mat-tree;
 @use './mat/timepicker' as tokens-mat-timepicker;
+@use './mat/tonal-button' as tokens-mat-tonal-button;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
 @use './mdc/text-button' as tokens-mdc-text-button;
 @use './mdc/protected-button' as tokens-mdc-protected-button;
@@ -85,6 +86,7 @@ $_module-names: (
   tokens-mat-fab,
   tokens-mat-fab-small,
   tokens-mat-filled-button,
+  tokens-mat-tonal-button,
   tokens-mat-form-field,
   tokens-mat-grid-list,
   tokens-mat-icon-button,

package/core/tokens/m3/definitions/_index.scss

@@ -14,6 +14,7 @@
 @forward './md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small-*;
 @forward './md-comp-fab-tertiary' as md-comp-fab-tertiary-*;
 @forward './md-comp-filled-button' as md-comp-filled-button-*;
+@forward './md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;
 @forward './md-comp-filled-card' as md-comp-filled-card-*;
 @forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*;
 @forward './md-comp-filled-text-field' as md-comp-filled-text-field-*;
@@ -63,7 +64,6 @@
 // @forward './unused/md-comp-filled-autocomplete' as md-comp-filled-autocomplete-*;
 // @forward './unused/md-comp-filled-menu-button' as md-comp-filled-menu-button-*;
 // @forward './unused/md-comp-filled-select' as md-comp-filled-select-*;
-// @forward './unused/md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;
 // @forward './unused/md-comp-filled-tonal-icon-button' as md-comp-filled-tonal-icon-button-*;
 // @forward './unused/md-comp-filter-chip' as md-comp-filter-chip-*;
 // @forward './unused/md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;

package/core/tokens/m3/definitions/_md-comp-elevated-card.scss

@@ -21,7 +21,7 @@ $_default: (
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return (
+  $values: (
     'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'),
     'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
     'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
@@ -50,4 +50,6 @@ $_default: (
     'pressed-state-layer-opacity':
       map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')
   );
+
+  @return $values;
 }

package/core/tokens/m3/definitions/_md-sys-color.scss

@@ -7,12 +7,15 @@
 
 @use './md-ref-palette';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default-dark: (
   'md-ref-palette': md-ref-palette.values(),
 );
 
 @function values-dark($deps: $_default-dark) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral6'),
     'error': map.get($deps, 'md-ref-palette', 'error80'),
     'error-container': map.get($deps, 'md-ref-palette', 'error30'),
@@ -64,6 +67,24 @@ $_default-dark: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral10'),
+      'surface-bright': #37393b,
+      'surface-container': #1e1f20,
+      'surface-container-high': #282a2c,
+      'surface-container-highest': #333537,
+      'surface-container-low': #1b1b1b,
+      'surface-container-lowest': #0e0e0e,
+      'surface-dim': #131313,
+      'surface-tint': #d1e1ff,
+    ));
+  }
+
+  @return $values;
 }
 
 $_default-light: (
@@ -71,7 +92,7 @@ $_default-light: (
 );
 
 @function values-light($deps: $_default-light) {
-  @return (
+  $values: (
     'background': map.get($deps, 'md-ref-palette', 'neutral98'),
     'error': map.get($deps, 'md-ref-palette', 'error40'),
     'error-container': map.get($deps, 'md-ref-palette', 'error90'),
@@ -123,4 +144,25 @@ $_default-light: (
     'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'),
     'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'background': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'on-error-container': map.get($deps, 'md-ref-palette', 'error10'),
+      'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'),
+      'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'),
+      'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'),
+      'surface': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-bright': map.get($deps, 'md-ref-palette', 'neutral100'),
+      'surface-container': #f0f4f9,
+      'surface-container-high': #e9eef6,
+      'surface-container-highest': #dde3ea,
+      'surface-container-low': #f8fafd,
+      'surface-container-lowest': map.get($deps, 'md-ref-palette', 'primary100'),
+      'surface-dim': #d3dbe5,
+      'surface-tint': #6991d6,
+    ));
+  }
+
+  @return $values;
 }

package/core/tokens/m3/definitions/_md-sys-typescale.scss

@@ -7,12 +7,15 @@
 
 @use './md-ref-typeface';
 
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
 $_default: (
   'md-ref-typeface': md-ref-typeface.values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
-  @return (
+  $values: (
     // Warning: risk of reduced fidelity from using this composite typography token.
     // Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font"
     // property shorthand. Consider using the discrete properties instead.
@@ -305,4 +308,20 @@ $_default: (
     'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
     'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')
   );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge($values, (
+      'body-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'body-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'display-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-large-tracking': if($exclude-hardcoded-values, null, 0),
+      'label-medium-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'label-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+      'title-medium-tracking': if($exclude-hardcoded-values, null, 0),
+      'title-small-tracking': if($exclude-hardcoded-values, null, 0),
+    ));
+  }
+
+  @return $values;
 }

package/core/tokens/m3/mat/_tonal-button.scss

@@ -0,0 +1,101 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../../style/sass-utils';
+@use '../../token-definition';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, tonal-button);
+
+/// Generates custom tokens for the mat-flat-button.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-flat-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-definition.get-mdc-tokens('filled-tonal-button', $systems, $exclude-hardcoded);
+
+  $tokens: map.merge($mdc-tokens, (
+    horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded),
+    icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded),
+    icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded),
+    state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    ripple-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-secondary-container),
+      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+    ),
+    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+  ));
+
+  $variant-tokens: (
+    // Color variants:
+    primary: (),
+    secondary: (),
+    tertiary: (
+      container-color: map.get($systems, md-sys-color, tertiary-container),
+      focus-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      hover-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      pressed-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      pressed-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      with-icon-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-tertiary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    error: (
+      container-color: map.get($systems, md-sys-color, error-container),
+      focus-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      focus-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      hover-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      label-text-color: map.get($systems, md-sys-color, on-error-container),
+      pressed-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      pressed-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-error-container),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-error-container),
+      with-icon-icon-color: map.get($systems, md-sys-color, on-error-container),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-error-container),
+      state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-error-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    )
+  );
+
+  @return token-definition.namespace-tokens($prefix, (
+    _fix-tokens($tokens),
+    token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens))
+  ), $token-slots);
+}
+
+
+/// Fixes inconsistent values in the tonal button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of tonal button tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-tokens($initial-tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: token-definition.get-mdc-tokens('filled-tonal-button', (), false);
+
+  @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity,
+    ),
+    (
+      color: disabled-container-color,
+      opacity: disabled-container-opacity,
+    )
+  ));
+}

package/datepicker/_datepicker-theme.scss

@@ -26,7 +26,7 @@ $calendar-weekday-table-font-size: 11px !default;
     $palette-name
   );
 
-  @include token-utils.create-token-values(
+  @include token-utils.create-token-values-mixed(
     tokens-mat-datepicker.$prefix,
     map.merge($calendar-tokens, $range-tokens)
   );
@@ -40,7 +40,7 @@ $calendar-weekday-table-font-size: 11px !default;
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-datepicker.$prefix,
         tokens-mat-datepicker.get-unthemable-tokens()
       );
@@ -58,7 +58,7 @@ $calendar-weekday-table-font-size: 11px !default;
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-datepicker.$prefix,
         tokens-mat-datepicker.get-color-tokens($theme)
       );
@@ -80,7 +80,8 @@ $calendar-weekday-table-font-size: 11px !default;
           $theme,
           accent
         );
-        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
+        @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix,
+          $accent-tokens);
       }
 
       &.mat-warn {
@@ -88,7 +89,7 @@ $calendar-weekday-table-font-size: 11px !default;
           $theme,
           warn
         );
-        @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
+        @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, $warn-tokens);
       }
     }
   }
@@ -101,7 +102,7 @@ $calendar-weekday-table-font-size: 11px !default;
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-datepicker.$prefix,
         tokens-mat-datepicker.get-typography-tokens($theme)
       );
@@ -124,7 +125,7 @@ $calendar-weekday-table-font-size: 11px !default;
   );
 
   @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $tokens);
+    @include token-utils.create-token-values-mixed(tokens-mat-datepicker.$prefix, $tokens);
   }
 }
 

package/datepicker/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { OnChanges, OnDestroy, AfterViewChecked, EventEmitter, SimpleChanges, FactoryProvider, AfterContentInit, ChangeDetectorRef, AfterViewInit, ElementRef, InjectionToken, OnInit, DoCheck, TemplateRef } from '@angular/core';
-import { b as MatButton, m as MatButtonModule } from '../module.d-18a67f56.js';
+import { c as MatButton, n as MatButtonModule } from '../module.d-d86ca350.js';
 import * as i2 from '@angular/cdk/overlay';
 import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
 import * as i1 from '@angular/cdk/a11y';
@@ -17,10 +17,10 @@ import { M as MatFormFieldControl } from '../form-field-control.d-eb86711c.js';
 import { Directionality } from '@angular/cdk/bidi';
 import { E as ErrorStateMatcher } from '../error-options.d-448d9046.js';
 import * as i5 from '@angular/cdk/scrolling';
-import '../index.d-0536b706.js';
-import '../ripple.d-2fb57d04.js';
+import '../index.d-cc6e48d4.js';
+import '../ripple.d-f2cd74cf.js';
 import '@angular/cdk/platform';
-import '../ripple-loader.d-8aac2988.js';
+import '../ripple-loader.d-e5ac6c14.js';
 
 /** Extra CSS classes that can be associated with a calendar cell. */
 type MatCalendarCellCssClasses = string | string[] | Set<string> | {
@@ -1156,6 +1156,7 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     private _dateAdapter;
     private _dir;
     private _model;
+    private _animationsDisabled;
     private _scrollStrategy;
     private _inputStateChanges;
     private _document;

package/dialog/_dialog-theme.scss

@@ -14,11 +14,11 @@
   } @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-dialog.$prefix,
         tokens-mdc-dialog.get-unthemable-tokens()
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-dialog.$prefix,
         tokens-mat-dialog.get-unthemable-tokens()
       );
@@ -31,11 +31,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-dialog.$prefix,
         tokens-mdc-dialog.get-color-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-dialog.$prefix,
         tokens-mat-dialog.get-color-tokens($theme)
       );
@@ -48,11 +48,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mdc-dialog.$prefix,
         tokens-mdc-dialog.get-typography-tokens($theme)
       );
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-dialog.$prefix,
         tokens-mat-dialog.get-typography-tokens($theme)
       );

package/dialog/index.d.ts

@@ -1,5 +1,5 @@
-import { M as MatDialogRef, a as MatDialogContainer } from '../dialog.d-57867441.js';
-export { A as AutoFocusTarget, f as DialogPosition, D as DialogRole, b as MAT_DIALOG_DATA, c as MAT_DIALOG_DEFAULT_OPTIONS, d as MAT_DIALOG_SCROLL_STRATEGY, e as MatDialog, g as MatDialogConfig, a as MatDialogContainer, M as MatDialogRef, h as MatDialogState, _ as _closeDialogVia } from '../dialog.d-57867441.js';
+import { M as MatDialogRef, a as MatDialogContainer } from '../dialog.d-4ffbd89c.js';
+export { A as AutoFocusTarget, f as DialogPosition, D as DialogRole, b as MAT_DIALOG_DATA, c as MAT_DIALOG_DEFAULT_OPTIONS, d as MAT_DIALOG_SCROLL_STRATEGY, e as MatDialog, g as MatDialogConfig, a as MatDialogContainer, M as MatDialogRef, h as MatDialogState, _ as _closeDialogVia } from '../dialog.d-4ffbd89c.js';
 import * as i0 from '@angular/core';
 import { OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
 import * as i5 from '@angular/cdk/scrolling';

package/dialog/testing/index.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_cdk_testing from '@angular/cdk/testing';
 import { BaseHarnessFilters, ContentContainerComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
-import { D as DialogRole, e as MatDialog, g as MatDialogConfig, M as MatDialogRef } from '../../dialog.d-57867441.js';
+import { D as DialogRole, e as MatDialog, g as MatDialogConfig, M as MatDialogRef } from '../../dialog.d-4ffbd89c.js';
 import { ComponentType } from '@angular/cdk/overlay';
 import { OnDestroy } from '@angular/core';
 import '@angular/cdk/bidi';

package/{dialog.d-57867441.d.ts → dialog.d-4ffbd89c.d.ts}

@@ -121,7 +121,6 @@ interface LegacyDialogAnimationEvent {
     totalTime: number;
 }
 declare class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> implements OnDestroy {
-    private _animationMode;
     /** Emits when an animation state changes. */
     _animationStateChanged: EventEmitter<LegacyDialogAnimationEvent>;
     /** Whether animations are enabled. */
@@ -284,6 +283,7 @@ declare class MatDialog implements OnDestroy {
     private _parentDialog;
     private _idGenerator;
     protected _dialog: Dialog;
+    private _animationsDisabled;
     private readonly _openDialogsAtThisLevel;
     private readonly _afterAllClosedAtThisLevel;
     private readonly _afterOpenedAtThisLevel;

package/divider/_divider-theme.scss

@@ -11,7 +11,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-divider.$prefix,
         tokens-mat-divider.get-unthemable-tokens()
       );
@@ -24,7 +24,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-divider.$prefix,
         tokens-mat-divider.get-color-tokens($theme)
       );

package/expansion/_expansion-theme.scss

@@ -12,7 +12,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-expansion.$prefix,
         tokens-mat-expansion.get-unthemable-tokens()
       );
@@ -25,7 +25,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-expansion.$prefix,
         tokens-mat-expansion.get-color-tokens($theme)
       );
@@ -41,7 +41,7 @@
     $theme: inspection.private-get-typography-back-compat-theme($theme);
 
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-expansion.$prefix,
         tokens-mat-expansion.get-typography-tokens($theme)
       );
@@ -54,7 +54,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
+      @include token-utils.create-token-values-mixed(
         tokens-mat-expansion.$prefix,
         tokens-mat-expansion.get-density-tokens($theme)
       );