@angular/material 17.1.0 → 17.2.0-next.0

package/core/index.d.ts

@@ -77,7 +77,7 @@ export declare interface CanUpdateErrorState {
     /** Whether the component is in an error state. */
     errorState: boolean;
     /** An object used to control the error state of the component. */
-    errorStateMatcher: ErrorStateMatcher;
+    errorStateMatcher: ErrorStateMatcher_2;
 }
 
 declare type CanUpdateErrorStateCtor = _Constructor<CanUpdateErrorState> & _AbstractConstructor<CanUpdateErrorState>;
@@ -314,6 +314,9 @@ export declare class ErrorStateMatcher {
     static ɵprov: i0.ɵɵInjectableDeclaration<ErrorStateMatcher>;
 }
 
+declare interface ErrorStateMatcher_2 extends ErrorStateMatcher {
+}
+
 /**
  * Class that tracks the error state of a component.
  * @docs-private
@@ -327,8 +330,8 @@ export declare class _ErrorStateTracker {
     /** Whether the tracker is currently in an error state. */
     errorState: boolean;
     /** User-defined matcher for the error state. */
-    matcher: ErrorStateMatcher;
-    constructor(_defaultMatcher: ErrorStateMatcher | null, ngControl: NgControl | null, _parentFormGroup: FormGroupDirective | null, _parentForm: NgForm | null, _stateChanges: Subject<void>);
+    matcher: ErrorStateMatcher_2;
+    constructor(_defaultMatcher: ErrorStateMatcher_2 | null, ngControl: NgControl | null, _parentFormGroup: FormGroupDirective | null, _parentForm: NgForm | null, _stateChanges: Subject<void>);
     /** Updates the error state based on the provided error state matcher. */
     updateErrorState(): void;
 }
@@ -359,7 +362,7 @@ declare interface HasElementRef {
 declare interface HasErrorState {
     _parentFormGroup: FormGroupDirective;
     _parentForm: NgForm;
-    _defaultErrorStateMatcher: ErrorStateMatcher;
+    _defaultErrorStateMatcher: ErrorStateMatcher_2;
     ngControl: NgControl;
     stateChanges: Subject<void>;
 }

package/core/mdc-helpers/_mdc-helpers.scss

@@ -5,7 +5,6 @@
 @use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/css' as mdc-theme-css;
-@use 'sass:meta';
 
 // A set of standard queries to use with MDC's queryable mixins.
 $mdc-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
@@ -59,10 +58,3 @@ $mdc-typography-styles-query: typography;
   @content;
   mdc-theme-css.$enable-fallback-declarations: $previous-value;
 }
-
-// Excludes the passed-in CSS content if the layout is too dense to supports touch targets.
-@mixin if-touch-targets-unsupported($scale) {
-  @if ($scale == 'minimum' or (meta.type-of($scale) == 'number' and $scale < -1)) {
-    @content;
-  }
-}

package/core/option/_option-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '../tokens/m2/mat/option' as tokens-mat-option;
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
@@ -6,6 +5,9 @@
 @use '../theming/inspection';
 @use '../typography/typography';
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-option.
+/// @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));
@@ -13,9 +15,14 @@
   @else {}
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-option.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the selected option: primary, secondary,
+///      tertiary, or error (If not specified, default secondary color will be used).
+@mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -35,6 +42,8 @@
   }
 }
 
+/// Outputs typography theme styles for the mat-option.
+/// @param {Map} $theme The theme to generate typography styles for.
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
@@ -47,6 +56,8 @@
   }
 }
 
+/// Outputs density theme styles for the mat-option.
+/// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
@@ -54,10 +65,15 @@
   @else {}
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-option.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the selected option: primary, secondary,
+///      tertiary, or error (If not specified, default secondary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -74,9 +90,7 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-        tokens-mat-option.$prefix, map.get($tokens, tokens-mat-option.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $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/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -14,43 +14,83 @@
   }
 }
 
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mat-full-pseudo-checkbox-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mat-full-pseudo-checkbox.$prefix, $options...);
+  $mat-minimal-pseudo-checkbox-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mat-minimal-pseudo-checkbox.$prefix, $options...);
+  @include token-utils.create-token-values(
+      tokens-mat-full-pseudo-checkbox.$prefix, $mat-full-pseudo-checkbox-tokens);
+  @include token-utils.create-token-values(
+      tokens-mat-minimal-pseudo-checkbox.$prefix, $mat-minimal-pseudo-checkbox-tokens);
+}
+
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-pseudo-checkbox.
+/// @param {Map} $theme The theme to generate base styles for.
 @mixin base($theme) {}
 
-@mixin color($theme) {
-  .mat-primary {
-    @include _palette-styles($theme, primary);
+/// Outputs color theme styles for the mat-pseudo-checkbox.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the pseudo-checkbox: primary, secondary,
+///      tertiary, or error (If not specified, default primary color will be used).
+@mixin color($theme, $options...) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
+  @else {
+    .mat-primary {
+      @include _palette-styles($theme, primary);
+    }
 
-  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
-  // theme from their parent, rather than implementing their own theming, which is why we
-  // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
-  // in order to allow for the color to be overwritten if the checkbox is inside a parent that
-  // has `mat-accent` and is placed inside another parent that has `mat-primary`.
-  @include _palette-styles($theme, accent);
-  .mat-accent {
+    // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
+    // theme from their parent, rather than implementing their own theming, which is why we
+    // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
+    // in order to allow for the color to be overwritten if the checkbox is inside a parent that
+    // has `mat-accent` and is placed inside another parent that has `mat-primary`.
     @include _palette-styles($theme, accent);
-  }
+    .mat-accent {
+      @include _palette-styles($theme, accent);
+    }
 
-  .mat-warn {
-    @include _palette-styles($theme, warn);
+    .mat-warn {
+      @include _palette-styles($theme, warn);
+    }
   }
 }
 
-@mixin typography($theme) {}
+/// Outputs typography theme styles for the mat-pseudo-checkbox.
+/// @param {Map} $theme The theme to generate typography styles for.
+@mixin typography($theme) {
+}
 
-@mixin density($theme) {}
+/// Outputs density theme styles for the mat-pseudo-checkbox.
+/// @param {Map} $theme The theme to generate density styles for.
+@mixin density($theme) {
+}
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-pseudo-checkbox.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
+///   $color-variant: The color variant to use for the pseudo-checkbox: primary, secondary,
+///      tertiary, or error (If not specified, default primary color will be used).
+@mixin theme($theme, $options...) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }

package/core/tokens/_token-utils.scss

@@ -110,6 +110,28 @@ $_component-prefix: null;
   @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
 }
 
+// TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
+// Returns a `var()` reference to a specific token. Intended for declarations
+// where the token has to be referenced as a part of a larger expression.
+@function get-token-variable-reference($token, $emit-fallback: false) {
+  @if $_component-prefix == null or $_tokens == null {
+    @error '`get-token-variable-reference` must be used within `use-tokens`';
+  }
+  @if not map.has-key($_tokens, $token) {
+    @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
+  }
+
+  $var: get-token-variable($token);
+  $fallback: if($emit-fallback, map.get($_tokens, $token), null);
+
+  @if ($fallback != null) {
+    @return var($var, $fallback);
+  }
+  @else {
+    @return var($var);
+  }
+}
+
 @mixin create-token-values($prefix, $tokens) {
   @include _configure-token-prefix($prefix...) {
     @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);

package/core/tokens/m2/_index.scss

@@ -1,18 +1,21 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '../../style/sass-utils';
+@use './mat/app' as tokens-mat-app;
 @use './mat/autocomplete' as tokens-mat-autocomplete;
 @use './mat/badge' as tokens-mat-badge;
 @use './mat/text-button' as tokens-mat-text-button;
 @use './mat/protected-button' as tokens-mat-protected-button;
 @use './mat/filled-button' as tokens-mat-filled-button;
 @use './mat/outlined-button' as tokens-mat-outlined-button;
+@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/datepicker' as tokens-mat-datepicker;
 @use './mat/divider' as tokens-mat-divider;
 @use './mat/expansion' as tokens-mat-expansion;
 @use './mat/fab' as tokens-mat-fab;
+@use './mat/fab-small' as tokens-mat-fab-small;
 @use './mat/form-field' as tokens-mat-form-field;
 @use './mat/grid-list' as tokens-mat-grid-list;
 @use './mat/icon' as tokens-mat-icon;
@@ -21,6 +24,9 @@
 @use './mat/option' as tokens-mat-option;
 @use './mat/optgroup' as tokens-mat-optgroup;
 @use './mat/paginator' as tokens-mat-paginator;
+@use './mat/checkbox' as tokens-mat-checkbox;
+@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
+@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
 @use './mat/radio' as tokens-mat-radio;
 @use './mat/ripple' as tokens-mat-ripple;
 @use './mat/select' as tokens-mat-select;
@@ -46,6 +52,8 @@
 @use './mdc/elevated-card' as tokens-mdc-elevated-card;
 @use './mdc/extended-fab' as tokens-mdc-extended-fab;
 @use './mdc/fab' as tokens-mdc-fab;
+@use './mdc/fab-small' as tokens-mdc-fab-small;
+@use './mdc/form-field' as tokens-mdc-form-field;
 @use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
 @use './mdc/icon-button' as tokens-mdc-icon-button;
 @use './mdc/linear-progress' as tokens-mdc-linear-progress;
@@ -103,15 +111,18 @@
 ///     )
 @function m2-tokens-from-theme($theme) {
   @return sass-utils.deep-merge-all(
+      _get-tokens-for-module($theme, tokens-mat-app),
       _get-tokens-for-module($theme, tokens-mat-autocomplete),
       _get-tokens-for-module($theme, tokens-mat-badge),
       _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-datepicker),
+      _get-tokens-for-module($theme, tokens-mat-dialog),
       _get-tokens-for-module($theme, tokens-mat-divider),
       _get-tokens-for-module($theme, tokens-mat-expansion),
       _get-tokens-for-module($theme, tokens-mat-fab),
+      _get-tokens-for-module($theme, tokens-mat-fab-small),
       _get-tokens-for-module($theme, tokens-mat-filled-button),
       _get-tokens-for-module($theme, tokens-mat-form-field),
       _get-tokens-for-module($theme, tokens-mat-grid-list),
@@ -122,6 +133,9 @@
       _get-tokens-for-module($theme, tokens-mat-option),
       _get-tokens-for-module($theme, tokens-mat-outlined-button),
       _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-minimal-pseudo-checkbox),
       _get-tokens-for-module($theme, tokens-mat-protected-button),
       _get-tokens-for-module($theme, tokens-mat-radio),
       _get-tokens-for-module($theme, tokens-mat-ripple),
@@ -144,8 +158,10 @@
       _get-tokens-for-module($theme, tokens-mdc-elevated-card),
       _get-tokens-for-module($theme, tokens-mdc-extended-fab),
       _get-tokens-for-module($theme, tokens-mdc-fab),
+      _get-tokens-for-module($theme, tokens-mdc-fab-small),
       _get-tokens-for-module($theme, tokens-mdc-filled-button),
       _get-tokens-for-module($theme, tokens-mdc-filled-text-field),
+      _get-tokens-for-module($theme, tokens-mdc-form-field),
       _get-tokens-for-module($theme, tokens-mdc-icon-button),
       _get-tokens-for-module($theme, tokens-mdc-linear-progress),
       _get-tokens-for-module($theme, tokens-mdc-list),

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

@@ -1,5 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
+@use 'sass:math';
 @use 'sass:color';
 @use '../../token-utils';
 @use '../../../theming/inspection';
@@ -11,7 +12,32 @@ $prefix: (mat, badge);
 // 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 ();
+  $default-size: 22px;
+  $small-size: $default-size - 6;
+  $large-size: $default-size + 6;
+
+  @return (
+    container-shape: 50%,
+    container-size: unset,
+    small-size-container-size: unset,
+    large-size-container-size: unset,
+
+    legacy-container-size: $default-size,
+    legacy-small-size-container-size: $small-size,
+    legacy-large-size-container-size: $large-size,
+
+    container-offset: math.div($default-size, -2) 0,
+    small-size-container-offset: math.div($small-size, -2) 0,
+    large-size-container-offset: math.div($large-size, -2) 0,
+
+    container-overlap-offset: math.div($default-size, -2),
+    small-size-container-overlap-offset: math.div($small-size, -2),
+    large-size-container-overlap-offset: math.div($large-size, -2),
+
+    container-padding: 0,
+    small-size-container-padding: 0,
+    large-size-container-padding: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

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

@@ -0,0 +1,45 @@
+@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.
+$prefix: (mat, checkbox);
+
+// 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 ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return (
+    disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    touch-target-display: if($density-scale < -1, none, block),
+  );
+}
+
+// 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-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

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

@@ -0,0 +1,49 @@
+@use '../../token-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, dialog);
+
+// 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 (
+    container-max-width: 80vw,
+    container-small-max-width: 80vw,
+    container-min-width: 0,
+    actions-alignment: start,
+    actions-padding: 8px,
+    content-padding: 20px 24px,
+    with-actions-content-padding: 20px 24px,
+
+    // Note: the CSS class is `title` while the M2 tokens call it `subhead`.
+    // M3 calls it `headline` which is what we're aligning with.
+    headline-padding: 0 24px 9px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// 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-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

package/core/tokens/m2/mat/_fab-small.scss

@@ -0,0 +1,95 @@
+@use 'sass:map';
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+@use '../../../mdc-helpers/mdc-helpers';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, fab-small);
+
+// 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 ();
+}
+
+// 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;
+  $on-surface: if($is-dark, #fff, #000);
+  $ripple-opacities: if($is-dark,
+    mdc-ripple-theme.$light-ink-opacities,
+    mdc-ripple-theme.$dark-ink-opacities
+  );
+
+  @return (
+    // Color of icons and text projected into a FAB.
+    foreground-color: inspection.get-theme-color($theme, foreground, base),
+
+    // Color of the element that shows the hover, focus and pressed states.
+    state-layer-color: $on-surface,
+
+    // Color of the element that shows the hover, focus and pressed states while disabled.
+    disabled-state-layer-color: $on-surface,
+
+    // Color of the ripple element.
+    ripple-color: rgba($on-surface, 0.1),
+
+    // Opacity of the ripple when the button is hovered.
+    hover-state-layer-opacity: map.get($ripple-opacities, hover),
+
+    // Opacity of the ripple when the button is focused.
+    focus-state-layer-opacity: map.get($ripple-opacities, focus),
+
+    // Opacity of the ripple when the button is pressed.
+    pressed-state-layer-opacity: map.get($ripple-opacities, press),
+
+    // MDC doesn't have tokens for disabled FABs so we need to implemented them ourselves.
+    // Background color of the container when the FAB is disabled.
+    disabled-state-container-color: rgba($on-surface, 0.12),
+
+    // Color of the icons and projected text when the FAB is disabled.
+    disabled-state-foreground-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+  );
+}
+
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $container-color: inspection.get-theme-color($theme, $palette-name);
+  $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+  $color: if($contrast-tone == 'dark', #000, #fff);
+
+  @return (
+    foreground-color: $color,
+    state-layer-color: $color,
+    ripple-color: rgba($color, 0.1),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    touch-target-display: if($density-scale < -1, none, block),
+  );
+}
+
+// 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-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../../mdc-helpers/mdc-helpers';
@@ -75,7 +76,11 @@ $prefix: (mat, fab);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    touch-target-display: if($density-scale < -1, none, block),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 @use '../../../mdc-helpers/mdc-helpers';
@@ -11,7 +12,17 @@ $prefix: (mat, filled-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 ();
+  @return (
+    // 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.
@@ -64,7 +75,11 @@ $prefix: (mat, filled-button);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    touch-target-display: if($density-scale < -1, none, block),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

package/core/tokens/m2/mat/_form-field.scss

@@ -39,6 +39,21 @@ $prefix: (mat, form-field);
     // https://developer.mozilla.org/en-US/docs/Web/CSS/system-color
     select-disabled-option-text-color: if($is-dark, palette.$dark-disabled-text, GrayText),
 
+    // These tokens are necessary for M3. MDC has them built in already, but:
+    // 1. They are too specific, breaking a lot of internal clients.
+    // 2. The larger selectors result in a larger bundle.
+    // Note: MDC has tokens for all the various states of the icons. Some of them are ommitted,
+    // because they resolve to the same value (e.g. focus and base states for the leading icon
+    // are the same).
+    leading-icon-color: unset,
+    disabled-leading-icon-color: unset,
+
+    trailing-icon-color: unset,
+    disabled-trailing-icon-color: unset,
+    error-focus-trailing-icon-color: unset,
+    error-hover-trailing-icon-color: unset,
+    error-trailing-icon-color: unset,
+
     // These values are taken from the MDC select implementation:
     // https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
     enabled-select-arrow-color: rgba($on-surface, 0.54),