@angular/material 17.2.0-next.1 → 17.2.0

package/_index.scss

@@ -20,22 +20,11 @@
 @forward './core/density/private/all-density' show all-component-densities;
 @forward './core/theming/theming' show private-check-duplicate-theme-styles,
   private-legacy-get-theme, private-is-theme-object;
-@forward './core/style/layout-common' as private-* show private-fill;
-@forward './core/style/private' show private-theme-elevation, private-animation-noop;
-@forward './core/style/vendor-prefixes' as private-* show private-user-select,
-  private-position-sticky, private-color-adjust, private-clip-path;
-@forward './core/theming/palette' as private-* show $private-dark-primary-text,
-  $private-dark-disabled-text;
+@forward './core/style/private' show private-theme-elevation;
+@forward './core/style/vendor-prefixes' as private-* show private-user-select;
 @forward './core/style/variables' as private-* show $private-swift-ease-in-duration,
   $private-swift-ease-in-timing-function, $private-swift-ease-out-timing-function,
   $private-ease-in-out-curve-function, $private-swift-ease-out-duration, $private-xsmall;
-@forward './core/typography/typography' show private-typography-to-2014-config,
-  private-typography-to-2018-config;
-@forward './table/table-flex-styles' show private-table-flex-styles;
-@forward './core/style/menu-common' as private-menu-common-*;
-@forward './core/style/button-common' as private-button-common-*;
-// The form field density mixin needs to be exposed, because the paginator depends on it.
-@forward './form-field/form-field-theme' as private-form-field-* show private-form-field-density;
 @forward './core/style/sass-utils' as private-*;
 @forward './core/style/validation' as private-*;
 
@@ -143,12 +132,6 @@
 @forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density,
   tree-base;
 
-// MDC Helpers
-@forward './core/mdc-helpers/mdc-helpers' as private-* show
-  private-disable-mdc-fallback-declarations, private-typography-config-level-from-mdc,
-  $private-mdc-base-styles-query, $private-mdc-base-styles-without-animation-query,
-  $private-mdc-theme-styles-query, $private-mdc-typography-styles-query;
-
-// New theming APIs:
+// New theming APIs
 @forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,
   get-theme-typography, get-theme-density, theme-has, theme-remove;

package/autocomplete/_autocomplete-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
@@ -10,7 +11,12 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-unthemable-tokens());
+    }
+  }
 }
 
 @mixin color($theme) {
@@ -29,14 +35,24 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-typography-tokens($theme));
+    }
+  }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
-  @else {}
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
+        tokens-mat-autocomplete.get-density-tokens($theme));
+    }
+  }
 }
 
 @mixin theme($theme) {
@@ -60,6 +76,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));

package/badge/_badge-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/badge' as tokens-mat-badge;
 @use '../core/tokens/token-utils';
@@ -97,6 +98,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
 }

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -2,6 +2,7 @@
 @use '../core/typography/typography';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
@@ -70,6 +71,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix));

package/button/_button-theme.scss

@@ -5,6 +5,7 @@
 
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
@@ -78,6 +79,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-text-button-tokens:
       token-utils.get-tokens-for($tokens, tokens-mdc-text-button.$prefix, $options...);
   $mdc-protected-button-tokens:
@@ -112,7 +115,7 @@
 /// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
     @include sass-utils.current-selector-or-root() {

package/button/_fab-theme.scss

@@ -4,6 +4,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
 @use '../core/tokens/m2/mdc/fab-small' as tokens-mdc-fab-small;
 @use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
@@ -166,6 +167,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-extended-fab-tokens: token-utils.get-tokens-for(
       $tokens, tokens-mdc-extended-fab.$prefix, $options...);
   $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);

package/button/_icon-button-theme.scss

@@ -8,6 +8,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 
 
 @mixin base($theme) {
@@ -141,6 +142,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include mdc-icon-button-theme.theme(map.get($tokens, tokens-mdc-icon-button.$prefix));
     @include token-utils.create-token-values(

package/button-toggle/_button-toggle-theme.scss

@@ -1,5 +1,6 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/legacy-button-toggle' as tokens-mat-legacy-button-toggle;
 @use '../core/tokens/m2/mat/standard-button-toggle' as tokens-mat-standard-button-toggle;
@@ -104,6 +105,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mat-standard-button-toggle-tokens:
       token-utils.get-tokens-for($tokens, tokens-mat-standard-button-toggle.$prefix, $options...);
   @include token-utils.create-token-values(

package/card/_card-theme.scss

@@ -2,6 +2,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/card' as tokens-mat-card;
@@ -108,6 +109,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     $elevated-card-tokens: map.get($tokens, tokens-mdc-elevated-card.$prefix);
     // Work around a bug in MDC where the elevation is not resolved to an actual shadow value.

package/checkbox/_checkbox-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
@@ -117,6 +118,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-checkbox-tokens: token-utils.get-tokens-for(
       $tokens, tokens-mdc-checkbox.$prefix, $options...);
   // Don't pass $options here, since the mdc-form-field doesn't support color options,

package/chips/_chips-theme.scss

@@ -5,6 +5,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/typography/typography';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -44,16 +45,22 @@
         &.mat-primary {
           $primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
           @include mdc-chip-theme.theme($primary-color-tokens);
+          @include token-utils.create-token-values(
+              tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, primary));
         }
 
         &.mat-accent {
           $accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
           @include mdc-chip-theme.theme($accent-color-tokens);
+          @include token-utils.create-token-values(
+              tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, accent));
         }
 
         &.mat-warn {
           $warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
           @include mdc-chip-theme.theme($warn-color-tokens);
+          @include token-utils.create-token-values(
+              tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, warn));
         }
       }
     }
@@ -120,8 +127,10 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...);
-  $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix);
+  $mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...);
   @include mdc-chip-theme.theme($mdc-chip-tokens);
   @include token-utils.create-token-values(tokens-mat-chip.$prefix, $mat-chip-tokens);
 }

package/core/_core-theme.scss

@@ -1,5 +1,6 @@
 @use './theming/theming';
 @use './theming/inspection';
+@use './theming/validation';
 @use './style/private';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
@@ -112,6 +113,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...);
   $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...);
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);

package/core/option/_optgroup-theme.scss

@@ -3,6 +3,7 @@
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
 @use '../theming/theming';
+@use '../theming/validation';
 @use '../theming/inspection';
 @use '../typography/typography';
 
@@ -65,6 +66,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-optgroup.$prefix, map.get($tokens, tokens-mat-optgroup.$prefix));

package/core/option/_option-theme.scss

@@ -3,6 +3,7 @@
 @use '../style/sass-utils';
 @use '../theming/theming';
 @use '../theming/inspection';
+@use '../theming/validation';
 @use '../typography/typography';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -91,6 +92,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
 }

package/core/ripple/_ripple-theme.scss

@@ -4,6 +4,7 @@
 @use '../style/sass-utils';
 @use '../theming/theming';
 @use '../theming/inspection';
+@use '../theming/validation';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
@@ -69,6 +70,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
         tokens-mat-ripple.$prefix, map.get($tokens, tokens-mat-ripple.$prefix));

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,5 +1,6 @@
 @use '../../theming/theming';
 @use '../../theming/inspection';
+@use '../../theming/validation';
 @use '../../style/sass-utils';
 @use '../../tokens/token-utils';
 @use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
@@ -15,6 +16,8 @@
 }
 
 @mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mat-full-pseudo-checkbox-tokens:
       token-utils.get-tokens-for($tokens, tokens-mat-full-pseudo-checkbox.$prefix, $options...);
   $mat-minimal-pseudo-checkbox-tokens:

package/core/style/_menu-common.scss

@@ -59,29 +59,16 @@ $icon-margin: 16px !default;
   }
 }
 
-@mixin item-submenu-trigger($side-padding) {
-  // Increase the side padding to prevent the indicator from overlapping the text.
-  padding-right: $side-padding * 2;
-
-  [dir='rtl'] & {
-    padding-right: $side-padding;
-    padding-left: $side-padding * 2;
-  }
-}
-
-@mixin item-submenu-icon($side-padding) {
-  position: absolute;
-  top: 50%;
-  right: $side-padding;
-  transform: translateY(-50%);
-  width: 5px;
+@mixin item-submenu-icon($item-spacing, $icon-size) {
+  width: $icon-size;
   height: 10px;
   fill: currentColor;
+  padding-left: $item-spacing;
 
   [dir='rtl'] & {
     right: auto;
-    left: $side-padding;
-    transform: translateY(-50%) scaleX(-1);
+    padding-right: $item-spacing;
+    padding-left: 0;
   }
 
   // Fix for Chromium-based browsers blending in the `currentColor` with the background.

package/core/theming/_inspection.scss

@@ -260,6 +260,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
       }
       @else if $system == density {
         $theme: map.deep-remove($theme, $_internals, density-scale);
+        $theme: map.deep-remove($theme, $_internals, density-tokens);
       }
     }
     @return $theme;
@@ -285,7 +286,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   $result: ();
   @each $system in $systems {
-    $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens'));
+    $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens') or ());
   }
   @return $result;
 }

package/core/theming/_m2-inspection.scss

@@ -123,7 +123,8 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   $palette: map.get($colors, $palette-name);
   @if not $palette {
-    @error 'Unrecognized palette name:' $palette-name;
+    @error $palette-name $args $theme;
+    @error #{'Unrecognized palette name:'} $palette-name;
   }
   @return theming.get-color-from-palette($palette, $args...);
 }

package/core/theming/_validation.scss

@@ -0,0 +1,5 @@
+@mixin selector-defined($msg) {
+  @if #{&} == '' {
+    @error $msg;
+  }
+}

package/core/tokens/m2/_index.scss

@@ -11,6 +11,7 @@
 @use './mat/dialog' as tokens-mat-dialog;
 @use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
 @use './mat/card' as tokens-mat-card;
+@use './mat/chip' as tokens-mat-chip;
 @use './mat/datepicker' as tokens-mat-datepicker;
 @use './mat/divider' as tokens-mat-divider;
 @use './mat/expansion' as tokens-mat-expansion;
@@ -20,6 +21,7 @@
 @use './mat/grid-list' as tokens-mat-grid-list;
 @use './mat/icon' as tokens-mat-icon;
 @use './mat/icon-button' as tokens-mat-icon-button;
+@use './mat/list' as tokens-mat-list;
 @use './mat/menu' as tokens-mat-menu;
 @use './mat/option' as tokens-mat-option;
 @use './mat/optgroup' as tokens-mat-optgroup;
@@ -32,6 +34,7 @@
 @use './mat/select' as tokens-mat-select;
 @use './mat/sidenav' as tokens-mat-sidenav;
 @use './mat/slider' as tokens-mat-slider;
+@use './mat/switch' as tokens-mat-switch;
 @use './mat/snack-bar' as tokens-mat-snack-bar;
 @use './mat/sort' as tokens-mat-sort;
 @use './mat/standard-button-toggle' as tokens-mat-button-toggle;
@@ -67,6 +70,7 @@
 @use './mdc/switch' as tokens-mdc-switch;
 @use './mdc/tab' as tokens-mdc-tab;
 @use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
+@use '../../theming/inspection';
 
 /// Gets the tokens for the given theme, m2 tokens module, and theming system.
 /// @param {Map} $theme The Angular Material theme object to generate token values from.
@@ -80,11 +84,11 @@
     @return meta.call(
         meta.get-function(get-#{$system}-tokens, $module: $module));
   }
-  @if not map.get($theme, $system) {
+  @if not inspection.theme-has($theme, $system) {
     @return ();
   }
   @return meta.call(
-      meta.get-function(get-#{$system}-tokens, $module: $module), map.get($theme, $system));
+      meta.get-function(get-#{$system}-tokens, $module: $module), $theme);
 }
 
 /// Gets the fully qualified tokens map for the given theme and m2 tokens module.
@@ -117,6 +121,7 @@
       _get-tokens-for-module($theme, tokens-mat-bottom-sheet),
       _get-tokens-for-module($theme, tokens-mat-button-toggle),
       _get-tokens-for-module($theme, tokens-mat-card),
+      _get-tokens-for-module($theme, tokens-mat-chip),
       _get-tokens-for-module($theme, tokens-mat-datepicker),
       _get-tokens-for-module($theme, tokens-mat-dialog),
       _get-tokens-for-module($theme, tokens-mat-divider),
@@ -135,6 +140,7 @@
       _get-tokens-for-module($theme, tokens-mat-paginator),
       _get-tokens-for-module($theme, tokens-mat-checkbox),
       _get-tokens-for-module($theme, tokens-mat-full-pseudo-checkbox),
+      _get-tokens-for-module($theme, tokens-mat-list),
       _get-tokens-for-module($theme, tokens-mat-minimal-pseudo-checkbox),
       _get-tokens-for-module($theme, tokens-mat-protected-button),
       _get-tokens-for-module($theme, tokens-mat-radio),
@@ -142,6 +148,7 @@
       _get-tokens-for-module($theme, tokens-mat-select),
       _get-tokens-for-module($theme, tokens-mat-sidenav),
       _get-tokens-for-module($theme, tokens-mat-slider),
+      _get-tokens-for-module($theme, tokens-mat-switch),
       _get-tokens-for-module($theme, tokens-mat-snack-bar),
       _get-tokens-for-module($theme, tokens-mat-sort),
       _get-tokens-for-module($theme, tokens-mat-stepper),

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

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -8,7 +9,10 @@ $prefix: (mat, autocomplete);
 // 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 ();
+  @return (
+    container-shape: 4px,
+    container-elevation-shadow: mdc-elevation.elevation-box-shadow(8),
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

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

@@ -1,5 +1,8 @@
+@use 'sass:map';
 @use '../../token-utils';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
+@use '../../../theming/palette';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, chip);
@@ -9,12 +12,33 @@ $prefix: (mat, chip);
 @function get-unthemable-tokens() {
   @return (
     disabled-container-opacity: 0.4,
+    trailing-action-opacity: 0.54,
+    trailing-action-focus-opacity: 1,
+    trailing-action-state-layer-color: transparent,
+    selected-trailing-action-state-layer-color: transparent,
+    trailing-action-hover-state-layer-opacity: 0,
+    trailing-action-focus-state-layer-opacity: 0,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  @return ();
+@function get-color-tokens($theme, $palette-name: null) {
+  $foreground: null;
+  @if $palette-name == null {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    $grey-50: map.get(palette.$grey-palette, 50);
+    $grey-900: map.get(palette.$grey-palette, 900);
+    $foreground: if($is-dark, $grey-50, $grey-900);
+  }
+  @else {
+    $foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
+  }
+  @return (
+    // The color of the icon at the end of a disabled chip.
+    selected-disabled-trailing-icon-color: $foreground,
+    // The color of the icon at the end of the chip.
+    selected-trailing-icon-color: $foreground
+  );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

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

@@ -1,3 +1,4 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 @use 'sass:color';
 @use 'sass:meta';
 @use 'sass:math';
@@ -30,7 +31,12 @@ $private-default-overlap-color: #a8dab5;
 // 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 ();
+  @return (
+    calendar-container-shape: 4px,
+    calendar-container-touch-shape: 4px,
+    calendar-container-elevation-shadow: mdc-elevation.elevation-box-shadow(4),
+    calendar-container-touch-elevation-shadow: mdc-elevation.elevation-box-shadow(24),
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
@@ -43,6 +49,8 @@ $private-default-overlap-color: #a8dab5;
   $hint-text-color: inspection.get-theme-color($theme, foreground, hint-text);
   $preview-outline-color: $divider-color;
   $today-disabled-outline-color: null;
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #fff, #000);
 
   $primary-color: inspection.get-theme-color($theme, primary);
   $range-tokens: get-range-color-tokens(private-get-range-background-color($primary-color));
@@ -67,6 +75,7 @@ $private-default-overlap-color: #a8dab5;
   @return sass-utils.merge-all($calendar-tokens, $toggle-tokens, $range-tokens, (
     toggle-icon-color: $inactive-icon-color,
     calendar-body-label-text-color: $secondary-text-color,
+    calendar-period-button-text-color: $on-surface,
     calendar-period-button-icon-color: $inactive-icon-color,
     calendar-navigation-button-icon-color: $inactive-icon-color,
     calendar-header-divider-color: $divider-color,

package/core/tokens/m2/mat/_legacy-button-toggle.scss

@@ -34,11 +34,11 @@ $prefix: (mat, legacy-button-toggle);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
-    // letter spacing etc). The button toggle only has the font to match what it had in the
-    // old theming API and to reduce internal breakages. We should introduce more typography
-    // tokens at some point.
-    text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }