fix(material/button): allow touch target size to be customized

Adds tokens to the various button appearances to allow the touch target to be customized.

Author: crisbeto

src/material/button/_button-base.scss

@@ -119,16 +119,20 @@
   }
 }
 
-@mixin mat-private-button-touch-target($is-square, $touch-target-display-token, $fallbacks) {
+@mixin mat-private-button-touch-target(
+  $is-square,
+  $touch-target-size-token,
+  $touch-target-display-token,
+  $fallbacks) {
   .mat-mdc-button-touch-target {
     position: absolute;
     top: 50%;
-    height: 48px;
+    height: token-utils.slot($touch-target-size-token, $fallbacks);
     display: token-utils.slot($touch-target-display-token, $fallbacks);
 
     @if $is-square {
       left: 50%;
-      width: 48px;
+      width: token-utils.slot($touch-target-size-token, $fallbacks);
       transform: translate(-50%, -50%);
     } @else {
       left: 0;

src/material/button/_m2-button.scss

@@ -17,19 +17,22 @@
     -3: 24px,
   ), $scale);
   $touch-target-display: if($scale < -1, none, block);
+  $touch-target-size: 48px;
 
   @return (
     base: (
       button-filled-container-shape: 4px,
       button-filled-horizontal-padding: 16px,
       button-filled-icon-offset: -4px,
       button-filled-icon-spacing: 8px,
+      button-filled-touch-target-size: $touch-target-size,
       button-outlined-container-shape: 4px,
       button-outlined-horizontal-padding: 15px, // Normally it's 16px, but -1px for the outline.
       button-outlined-icon-offset: -4px,
       button-outlined-icon-spacing: 8px,
       button-outlined-keep-touch-target: false,
       button-outlined-outline-width: 1px,
+      button-outlined-touch-target-size: $touch-target-size,
       button-protected-container-elevation-shadow: elevation.get-box-shadow(2),
       button-protected-container-shape: 4px,
       button-protected-disabled-container-elevation-shadow: elevation.get-box-shadow(0),
@@ -39,15 +42,18 @@
       button-protected-icon-offset: -4px,
       button-protected-icon-spacing: 8px,
       button-protected-pressed-container-elevation-shadow: elevation.get-box-shadow(8),
+      button-protected-touch-target-size: $touch-target-size,
       button-text-container-shape: 4px,
       button-text-horizontal-padding: 8px,
       button-text-icon-offset: 0,
       button-text-icon-spacing: 8px,
       button-text-with-icon-horizontal-padding: 8px,
+      button-text-touch-target-size: $touch-target-size,
       button-tonal-container-shape: 4px,
       button-tonal-horizontal-padding: 16px,
       button-tonal-icon-offset: -4px,
       button-tonal-icon-spacing: 8px,
+      button-tonal-touch-target-size: $touch-target-size,
     ),
     color: (
       button-filled-container-color: map.get($system, surface),

src/material/button/_m2-fab.scss

@@ -16,11 +16,13 @@
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
   $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-size: 48px;
 
   @return (
     base: (
       fab-container-elevation-shadow: elevation.get-box-shadow(6),
       fab-container-shape: 50%,
+      fab-touch-target-size: $touch-target-size,
       fab-extended-container-elevation-shadow: elevation.get-box-shadow(6),
       fab-extended-container-height: 48px,
       fab-extended-container-shape: 24px,
@@ -32,6 +34,7 @@
       fab-pressed-container-elevation-shadow: elevation.get-box-shadow(12),
       fab-small-container-elevation-shadow: elevation.get-box-shadow(6),
       fab-small-container-shape: 50%,
+      fab-small-touch-target-size: $touch-target-size,
       fab-small-focus-container-elevation-shadow: elevation.get-box-shadow(8),
       fab-small-hover-container-elevation-shadow: elevation.get-box-shadow(8),
       fab-small-pressed-container-elevation-shadow: elevation.get-box-shadow(12),

src/material/button/_m2-icon-button.scss

@@ -11,6 +11,7 @@
     base: (
       icon-button-icon-size: 24px,
       icon-button-container-shape: 50%,
+      icon-button-touch-target-size: 48px,
     ),
     color: (
       icon-button-disabled-icon-color:

src/material/button/_m3-button.scss

@@ -9,6 +9,7 @@
 /// Generates custom tokens for the button.
 @function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
   $system: m3-utils.get-system($theme);
+  $touch-target-size: 48px;
   @if $color-variant {
     $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
     $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
@@ -21,28 +22,33 @@
       button-filled-icon-offset: -8px,
       button-filled-icon-spacing: 8px,
       button-filled-label-text-transform: null,
+      button-filled-touch-target-size: $touch-target-size,
       button-outlined-container-shape: map.get($system, corner-full),
       button-outlined-horizontal-padding: 24px,
       button-outlined-icon-offset: -8px,
       button-outlined-icon-spacing: 8px,
       button-outlined-outline-width: 1px,
       button-outlined-label-text-transform: null,
+      button-outlined-touch-target-size: $touch-target-size,
       button-protected-container-shape: map.get($system, corner-full),
       button-protected-horizontal-padding: 24px,
       button-protected-icon-offset: -8px,
       button-protected-icon-spacing: 8px,
       button-protected-label-text-transform: null,
+      button-protected-touch-target-size: $touch-target-size,
       button-text-container-shape: map.get($system, corner-full),
       button-text-horizontal-padding: 12px,
       button-text-icon-offset: -4px,
       button-text-icon-spacing: 8px,
       button-text-with-icon-horizontal-padding: 16px,
       button-text-label-text-transform: null,
+      button-text-touch-target-size: $touch-target-size,
       button-tonal-container-shape: map.get($system, corner-full),
       button-tonal-horizontal-padding: 24px,
       button-tonal-icon-offset: -8px,
       button-tonal-icon-spacing: 8px,
       button-tonal-label-text-transform: null,
+      button-tonal-touch-target-size: $touch-target-size,
     ),
     color: (
       button-filled-container-color: map.get($system, primary),

src/material/button/_m3-fab.scss

@@ -8,6 +8,7 @@
 /// Generates custom tokens for the mat-fab.
 @function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
   $system: m3-utils.get-system($theme);
+  $touch-target-size: 48px;
   @if $color-variant {
     $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
   }
@@ -19,6 +20,8 @@
       fab-extended-container-shape: map.get($system, corner-large),
       fab-small-container-shape: map.get($system, corner-medium),
       fab-touch-target-display: null,
+      fab-touch-target-size: $touch-target-size,
+      fab-small-touch-target-size: $touch-target-size,
     ),
     color: (
       fab-container-color: map.get($system, primary-container),

src/material/button/_m3-icon-button.scss

@@ -20,6 +20,7 @@
     base: (
       icon-button-icon-size: 24px,
       icon-button-container-shape: map.get($system, corner-full),
+      icon-button-touch-target-size: 48px,
     ),
     color: (
       icon-button-disabled-icon-color:

src/material/button/button.scss

@@ -93,7 +93,7 @@ $fallbacks: m3-button.get-tokens();
       button-text-hover-state-layer-opacity, button-text-focus-state-layer-opacity,
       button-text-pressed-state-layer-opacity, $fallbacks);
   @include button-base.mat-private-button-touch-target(false,
-    button-text-touch-target-display, $fallbacks);
+    button-text-touch-target-size, button-text-touch-target-display, $fallbacks);
 }
 
 .mat-mdc-unelevated-button {
@@ -114,7 +114,7 @@ $fallbacks: m3-button.get-tokens();
       button-filled-hover-state-layer-opacity, button-filled-focus-state-layer-opacity,
       button-filled-pressed-state-layer-opacity, $fallbacks);
   @include button-base.mat-private-button-touch-target(false,
-    button-filled-touch-target-display, $fallbacks);
+    button-filled-touch-target-size, button-filled-touch-target-display, $fallbacks);
 
   &:not(:disabled) {
     color: token-utils.slot(button-filled-label-text-color, $fallbacks);
@@ -152,7 +152,7 @@ $fallbacks: m3-button.get-tokens();
       button-protected-hover-state-layer-opacity, button-protected-focus-state-layer-opacity,
       button-protected-pressed-state-layer-opacity, $fallbacks);
   @include button-base.mat-private-button-touch-target(false,
-      button-protected-touch-target-display, $fallbacks);
+      button-protected-touch-target-size, button-protected-touch-target-display, $fallbacks);
 
   &:not(:disabled) {
     color: token-utils.slot(button-protected-label-text-color, $fallbacks);
@@ -209,7 +209,7 @@ $fallbacks: m3-button.get-tokens();
       button-outlined-hover-state-layer-opacity, button-outlined-focus-state-layer-opacity,
       button-outlined-pressed-state-layer-opacity, $fallbacks);
   @include button-base.mat-private-button-touch-target(false,
-    button-outlined-touch-target-display, $fallbacks);
+      button-outlined-touch-target-size, button-outlined-touch-target-display, $fallbacks);
 
   &:not(:disabled) {
     color: token-utils.slot(button-outlined-label-text-color, $fallbacks);
@@ -258,7 +258,7 @@ $fallbacks: m3-button.get-tokens();
       button-tonal-hover-state-layer-opacity, button-tonal-focus-state-layer-opacity,
       button-tonal-pressed-state-layer-opacity, $fallbacks);
   @include button-base.mat-private-button-touch-target(false,
-    button-tonal-touch-target-display, $fallbacks);
+      button-tonal-touch-target-size, button-tonal-touch-target-display, $fallbacks);
 }
 
 .mat-mdc-button,

src/material/button/fab.scss

@@ -118,7 +118,8 @@ $fallbacks: m3-fab.get-tokens();
     background-color: token-utils.slot(fab-disabled-state-container-color, $fallbacks);
   }
 
-  @include button-base.mat-private-button-touch-target(true, fab-touch-target-display, $fallbacks);
+  @include button-base.mat-private-button-touch-target(true, fab-touch-target-size,
+    fab-touch-target-display, $fallbacks);
   @include button-base.mat-private-button-ripple(fab-ripple-color, fab-state-layer-color,
     fab-disabled-state-layer-color, fab-hover-state-layer-opacity, fab-focus-state-layer-opacity,
     fab-pressed-state-layer-opacity, $fallbacks);
@@ -150,7 +151,7 @@ $fallbacks: m3-fab.get-tokens();
   }
 
   @include button-base.mat-private-button-touch-target(true,
-    fab-small-touch-target-display, $fallbacks);
+    fab-small-touch-target-size, fab-small-touch-target-display, $fallbacks);
   @include button-base.mat-private-button-ripple(fab-small-ripple-color,
     fab-small-state-layer-color,
     fab-small-disabled-state-layer-color, fab-small-hover-state-layer-opacity,

src/material/button/icon-button.scss

@@ -53,7 +53,7 @@ $fallbacks: m3-icon-button.get-tokens();
       icon-button-hover-state-layer-opacity, icon-button-focus-state-layer-opacity,
       icon-button-pressed-state-layer-opacity, $fallbacks);
   @include button-base.mat-private-button-touch-target(true,
-    icon-button-touch-target-display, $fallbacks);
+      icon-button-touch-target-size, icon-button-touch-target-display, $fallbacks);
   @include private.private-animation-noop();
 
   @include button-base.mat-private-button-disabled {