@angular/material 17.1.0 → 17.2.0-next.0

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

@@ -2,6 +2,7 @@
 @use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
@@ -61,7 +62,11 @@ $prefix: (mat, icon-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/_outlined-button.scss

@@ -2,6 +2,7 @@
 @use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
@@ -11,7 +12,17 @@ $prefix: (mat, outlined-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: 15px, // Normally it's 16px, but -1px for the outline.
+
+    // 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.
@@ -61,7 +72,11 @@ $prefix: (mat, outlined-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/_protected-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, protected-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, protected-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/_radio.scss

@@ -1,4 +1,5 @@
 @use '../../token-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
@@ -29,7 +30,11 @@ $prefix: (mat, radio);
 
 // 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/_stepper.scss

@@ -10,7 +10,12 @@ $prefix: (mat, stepper);
 // 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 (
+    // Border radius for step header on focus
+    header-focus-state-layer-shape: 0,
+    // Border radius for step header on hover
+    header-hover-state-layer-shape: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.

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

@@ -2,6 +2,7 @@
 @use 'sass:meta';
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../token-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
@@ -11,7 +12,20 @@ $prefix: (mat, text-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: 8px,
+
+    // Start/end padding of the button when it has an icon.
+    with-icon-horizontal-padding: 8px,
+
+    // 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: 0,
+  );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
@@ -61,7 +75,11 @@ $prefix: (mat, text-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/mdc/_extended-fab.scss

@@ -8,12 +8,13 @@ $prefix: (mdc, extended-fab);
 
 @function get-unthemable-tokens() {
   @return (
+    container-height: 48px,
+    container-shape: 24px,
+
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
     container-color: null,
-    container-height: null,
-    container-shape: null,
     container-surface-tint-layer-color: null,
     focus-icon-color: null,
     focus-label-text-color: null,

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

@@ -0,0 +1,90 @@
+@use '../../../theming/inspection';
+@use '../../token-utils';
+
+@use 'sass:map';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, fab-small);
+
+@function get-unthemable-tokens() {
+  @return (
+    container-shape: 50%,
+    icon-size: 24px,
+
+    // We don't use this token, because it doesn't set the color of any text inside the FAB.
+    // We create a custom token for it instead.
+    icon-color: null,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    container-height: null,
+    container-width: null,
+
+    focus-icon-color: null,
+    focus-outline-color: null,
+    focus-outline-width: null,
+    focus-state-layer-color: null,
+    focus-state-layer-opacity: null,
+
+    hover-icon-color: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+
+    lowered-container-elevation: null,
+    lowered-focus-container-elevation: null,
+    lowered-hover-container-elevation: null,
+    lowered-pressed-container-elevation: null,
+
+    pressed-icon-color: null,
+    pressed-ripple-color: null,
+    pressed-ripple-opacity: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  @return (
+    // Background color of the FAB.
+    container-color: inspection.get-theme-color($theme, background, card),
+    container-elevation: 6,
+    focus-container-elevation: 8,
+    hover-container-elevation: 8,
+    pressed-container-elevation: 12,
+    container-shadow-color: #000,
+  );
+}
+
+// Generates the mapping for the properties that change based on the FAB palette color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  @return (
+    container-color: inspection.get-theme-color($theme, $palette-name, default),
+  );
+}
+
+// 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 map.merge(
+    get-unthemable-tokens(),
+    map.merge(
+      get-color-tokens(token-utils.$placeholder-color-config),
+      map.merge(
+        get-typography-tokens(token-utils.$placeholder-typography-config),
+        get-density-tokens(token-utils.$placeholder-density-config)
+      )
+    )
+  );
+}

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

@@ -6,17 +6,6 @@
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, fab);
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
-$height: 56px;
-$mini-height: 40px;
-$shape-radius: 50%;
-$ripple-target: '.mdc-fab__ripple';
-
 @function get-unthemable-tokens() {
   @return (
     container-shape: 50%,

package/core/tokens/m2/mdc/_filled-text-field.scss

@@ -34,8 +34,6 @@ $prefix: (mdc, filled-text-field);
     label-text-populated-size: null,
     label-text-type: null,
     disabled-label-text-opacity: null,
-    hover-label-text-color: null,
-    error-hover-label-text-color: null,
     supporting-text-color: null,
     supporting-text-font: null,
     supporting-text-line-height: null,
@@ -50,7 +48,11 @@ $prefix: (mdc, filled-text-field);
     focus-supporting-text-color: null,
     hover-supporting-text-color: null,
     input-text-prefix-color: null,
+    input-text-suffix-color: null,
     container-height: null,
+    trailing-icon-size: null,
+    leading-icon-size: null,
+    trailing-icon-color: null,
     disabled-trailing-icon-color: null,
     disabled-trailing-icon-opacity: null,
     error-focus-trailing-icon-color: null,
@@ -58,19 +60,15 @@ $prefix: (mdc, filled-text-field);
     error-trailing-icon-color: null,
     focus-trailing-icon-color: null,
     hover-trailing-icon-color: null,
-    trailing-icon-color: null,
-    trailing-icon-size: null,
-    disabled-leading-icon-color: null,
+    leading-icon-color: null,
     disabled-leading-icon-opacity: null,
+    disabled-leading-icon-color: null,
     error-focus-leading-icon-color: null,
     error-hover-leading-icon-color: null,
     error-leading-icon-color: null,
     focus-leading-icon-color: null,
     hover-leading-icon-color: null,
-    leading-icon-color: null,
-    leading-icon-size: null,
     input-text-type: null,
-    input-text-suffix-color: null,
     input-text-font: null,
     input-text-line-height: null,
     input-text-size: null,
@@ -104,12 +102,14 @@ $prefix: (mdc, filled-text-field);
     disabled-container-color: _variable-safe-mix($on-surface, $surface, 2%),
 
     label-text-color: rgba($on-surface, 0.6),
+    hover-label-text-color: rgba($on-surface, 0.6),
     disabled-label-text-color: rgba($on-surface, 0.38),
 
     input-text-color: rgba($on-surface, 0.87),
     disabled-input-text-color: rgba($on-surface, 0.38),
     input-text-placeholder-color: rgba($on-surface, 0.6),
 
+    error-hover-label-text-color: $warn-color,
     error-focus-label-text-color: $warn-color,
     error-label-text-color: $warn-color,
     error-caret-color: $warn-color,

package/core/tokens/m2/mdc/_icon-button.scss

@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use '../../../style/sass-utils';
+@use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../token-utils';
 
@@ -13,12 +15,6 @@ $prefix: (mdc, icon-button);
 // our CSS.
 @function get-unthemable-tokens() {
   @return (
-    // =============================================================================================
-    // = TOKENS THAT SHOULD NOT BE CUSTOMIZABLE                                                    =
-    // =============================================================================================
-    // Determines the size of the icon. Name is inaccurate - applies to the whole component,
-    // not just the state layer.
-    state-layer-size: 48px,
     // MDC's icon size applied to svg and img elements inside the component
     icon-size: 24px,
 
@@ -68,7 +64,19 @@ $prefix: (mdc, icon-button);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -5);
+
+  @return (
+    // The diameter of the checkbox's ripple.
+    state-layer-size: map.get((
+      0: 48px,
+      -1: 44px,
+      -2: 40px,
+      -3: 36px,
+      -4: 32px,
+      -5: 28px,
+    ), $scale)
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

package/core/tokens/m2/mdc/_outlined-text-field.scss

@@ -31,8 +31,6 @@ $prefix: (mdc, outlined-text-field);
     label-text-type: null,
     label-text-populated-line-height: null,
     label-text-populated-size: null,
-    hover-label-text-color: null,
-    error-hover-label-text-color: null,
     disabled-label-text-opacity: null,
     disabled-supporting-text-color: null,
     disabled-supporting-text-opacity: null,
@@ -48,6 +46,9 @@ $prefix: (mdc, outlined-text-field);
     supporting-text-tracking: null,
     supporting-text-type: null,
     supporting-text-weight: null,
+    leading-icon-size: null,
+    trailing-icon-size: null,
+    leading-icon-color: null,
     disabled-leading-icon-color: null,
     disabled-leading-icon-opacity: null,
     error-focus-leading-icon-color: null,
@@ -55,8 +56,7 @@ $prefix: (mdc, outlined-text-field);
     error-leading-icon-color: null,
     focus-leading-icon-color: null,
     hover-leading-icon-color: null,
-    leading-icon-color: null,
-    leading-icon-size: null,
+    trailing-icon-color: null,
     disabled-trailing-icon-color: null,
     disabled-trailing-icon-opacity: null,
     error-focus-trailing-icon-color: null,
@@ -64,8 +64,6 @@ $prefix: (mdc, outlined-text-field);
     error-trailing-icon-color: null,
     focus-trailing-icon-color: null,
     hover-trailing-icon-color: null,
-    trailing-icon-color: null,
-    trailing-icon-size: null,
     input-text-prefix-color: null,
     input-text-type: null,
     container-height: null,
@@ -94,6 +92,7 @@ $prefix: (mdc, outlined-text-field);
 
   @return map.merge($color-tokens, (
     label-text-color: rgba($on-surface, 0.6),
+    hover-label-text-color: rgba($on-surface, 0.6),
     disabled-label-text-color: rgba($on-surface, 0.38),
 
     input-text-color: rgba($on-surface, 0.87),
@@ -103,6 +102,7 @@ $prefix: (mdc, outlined-text-field);
     error-caret-color: $warn-color,
     error-focus-label-text-color: $warn-color,
     error-label-text-color: $warn-color,
+    error-hover-label-text-color: $warn-color,
 
     // Outline tokens
     outline-color: rgba($on-surface, 0.38),

package/core/tokens/m2/mdc/_switch.scss

@@ -2,6 +2,7 @@
 @use '../../../style/elevation';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
+@use '../../../theming/theming';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -40,8 +41,6 @@ $prefix: (mdc, switch);
     track-width: 36px,
     // Width and height of icon when unselected.
     unselected-icon-size: 18px,
-    // The diameter of the handle ripple.
-    state-layer-size: 40px,
     // Opacity of ripple when selected and focused.
     selected-focus-state-layer-opacity: 0.12,
     // Opacity of ripple when selected and on hover.
@@ -164,7 +163,17 @@ $prefix: (mdc, switch);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    // The diameter of the handle ripple.
+    state-layer-size: map.get((
+      0: 40px,
+      -1: 36px,
+      -2: 32px,
+      -3: 28px,
+    ), $scale)
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

package/datepicker/_datepicker-theme.scss

@@ -27,6 +27,9 @@ $calendar-weekday-table-font-size: 11px !default;
     map.merge($calendar-tokens, $range-tokens));
 }
 
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-datepicker.
+/// @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));
@@ -34,9 +37,14 @@ $calendar-weekday-table-font-size: 11px !default;
   @else {}
 }
 
-@mixin color($theme) {
+/// Outputs color theme styles for the mat-datepicker.
+/// @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 main selection: 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));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -70,6 +78,8 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
+/// Outputs typography theme styles for the mat-datepicker.
+/// @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));
@@ -100,6 +110,8 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
+/// Outputs density theme styles for the mat-datepicker.
+/// @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));
@@ -116,10 +128,15 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
-@mixin theme($theme) {
+/// Outputs all (base, color, typography, and density) theme styles for the mat-datepicker.
+/// @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 main selection: 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-datepicker') {
     @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);
@@ -136,9 +153,8 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-        tokens-mat-datepicker.$prefix, map.get($tokens, tokens-mat-datepicker.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  $mat-datepicker-tokens:
+      token-utils.get-tokens-for($tokens, tokens-mat-datepicker.$prefix, $options...);
+  @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $mat-datepicker-tokens);
 }

package/dialog/_dialog-theme.scss

@@ -2,6 +2,8 @@
 @use '@material/dialog/dialog-theme' as mdc-dialog-theme;
 @use '../core/style/sass-utils';
 @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
+@use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
+@use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -14,6 +16,8 @@
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
       @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-dialog.$prefix, tokens-mat-dialog.get-unthemable-tokens());
     }
   }
 }
@@ -25,6 +29,8 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-dialog.$prefix, tokens-mat-dialog.get-color-tokens($theme));
     }
   }
 }
@@ -36,6 +42,8 @@
   @else {
     @include sass-utils.current-selector-or-root() {
       @include mdc-dialog-theme.theme(tokens-mdc-dialog.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-dialog.$prefix, tokens-mat-dialog.get-typography-tokens($theme));
     }
   }
 }
@@ -70,5 +78,7 @@
 @mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     @include mdc-dialog-theme.theme(map.get($tokens, tokens-mdc-dialog.$prefix));
+    @include token-utils.create-token-values(
+      tokens-mat-dialog.$prefix, map.get($tokens, tokens-mat-dialog.$prefix));
   }
 }