Add tokens to customize touch target sizes

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 {

src/material/checkbox/_m2-checkbox.scss

@@ -17,6 +17,7 @@
       checkbox-unselected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
       checkbox-unselected-pressed-state-layer-opacity:
           map.get($system, pressed-state-layer-opacity),
+      checkbox-touch-target-size: 48px,
     ),
     color: private-get-color-palette-color-tokens($theme, secondary),
     typography: (

src/material/checkbox/_m3-checkbox.scss

@@ -20,6 +20,7 @@
       checkbox-unselected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
       checkbox-unselected-pressed-state-layer-opacity:
           map.get($system, pressed-state-layer-opacity),
+      checkbox-touch-target-size: 48px,
     ),
     color: (
       checkbox-disabled-label-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),

src/material/checkbox/checkbox.scss

@@ -85,8 +85,8 @@ $fallbacks: m3-checkbox.get-tokens();
   position: absolute;
   top: 50%;
   left: 50%;
-  height: 48px;
-  width: 48px;
+  height: token-utils.slot(checkbox-touch-target-size, $fallbacks);
+  width: token-utils.slot(checkbox-touch-target-size, $fallbacks);
   transform: translate(-50%, -50%);
   display: token-utils.slot(checkbox-touch-target-display, $fallbacks);
 }

src/material/paginator/_m2-paginator.scss

@@ -18,7 +18,10 @@
   ), if($density-scale > -4, -4, $density-scale));
 
   @return (
-    base: (),
+    base: (
+      paginator-page-size-select-width: 84px,
+      paginator-page-size-select-touch-target-height: 48px,
+    ),
     color: (
       paginator-container-text-color: map.get($system, on-surface),
       paginator-container-background-color: map.get($system, surface),

src/material/paginator/_m3-paginator.scss

@@ -9,7 +9,10 @@
   $system: m3-utils.get-system($theme);
 
   @return (
-    base: (),
+    base: (
+      paginator-page-size-select-width: 84px,
+      paginator-page-size-select-touch-target-height: 48px,
+    ),
     color: (
       paginator-container-text-color: map.get($system, on-surface),
       paginator-container-background-color: map.get($system, surface),

src/material/paginator/paginator.scss

@@ -8,8 +8,6 @@ $page-size-margin-right: 8px;
 
 $items-per-page-label-margin: 0 4px;
 $selector-margin: 0 4px;
-$selector-trigger-width: 84px;
-$touch-target-height: 48px;
 
 $range-label-margin: 0 32px 0 24px;
 $button-icon-size: 28px;
@@ -84,7 +82,7 @@ $fallbacks: m3-paginator.get-tokens();
 
 .mat-mdc-paginator-page-size-select {
   margin: $selector-margin;
-  width: $selector-trigger-width;
+  width: token-utils.slot(paginator-page-size-select-width, $fallbacks);
 }
 
 .mat-mdc-paginator-range-label {
@@ -131,8 +129,8 @@ $fallbacks: m3-paginator.get-tokens();
   position: absolute;
   top: 50%;
   left: 50%;
-  width: $selector-trigger-width;
-  height: $touch-target-height;
+  width: token-utils.slot(paginator-page-size-select-width, $fallbacks);
+  height: token-utils.slot(paginator-page-size-select-touch-target-height, $fallbacks);
   background-color: transparent;
   transform: translate(-50%, -50%);
   cursor: pointer;

src/material/radio/_m2-radio.scss

@@ -15,6 +15,7 @@
       // determines the size of the radio button itself and there are internal
       // tests who don't configure the theme correctly.
       radio-state-layer-size: 40px,
+      radio-touch-target-size: 48px,
     ),
     color: private-get-color-palette-color-tokens($theme, secondary),
     typography: (

src/material/radio/_m3-radio.scss

@@ -16,6 +16,7 @@
     base: (
       radio-disabled-unselected-icon-opacity: 0.38,
       radio-disabled-selected-icon-opacity: 0.38,
+      radio-touch-target-size: 48px,
     ),
     color: (
       radio-checked-ripple-color: map.get($system, primary),

src/material/radio/radio.scss

@@ -88,8 +88,8 @@ $fallbacks: m3-radio.get-tokens();
   position: absolute;
   top: 50%;
   left: 50%;
-  height: 48px;
-  width: 48px;
+  height: token-utils.slot(radio-touch-target-size, $fallbacks);
+  width: token-utils.slot(radio-touch-target-size, $fallbacks);
   transform: translate(-50%, -50%);
   display: token-utils.slot(radio-touch-target-display, $fallbacks);
 

src/material/slide-toggle/_m2-slide-toggle.scss

@@ -60,6 +60,7 @@
       slide-toggle-visible-track-opacity: 1,
       slide-toggle-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1),
       slide-toggle-with-icon-handle-size: 20px,
+      slide-toggle-touch-target-size: 48px,
     ),
     color: map.merge(private-get-color-palette-color-tokens($theme, primary), (
       slide-toggle-disabled-label-text-color:

src/material/slide-toggle/_m3-slide-toggle.scss

@@ -60,6 +60,7 @@
       slide-toggle-with-icon-handle-size: 24px,
       slide-toggle-handle-width: null,
       slide-toggle-handle-height: null,
+      slide-toggle-touch-target-size: 48px,
     ),
     color: (
       slide-toggle-disabled-label-text-color: map.get($system, on-surface),

src/material/slide-toggle/slide-toggle.scss

@@ -548,7 +548,7 @@ $fallbacks: m3-slide-toggle.get-tokens();
   position: absolute;
   top: 50%;
   left: 50%;
-  height: 48px;
+  height: token-utils.slot(slide-toggle-touch-target-size, $fallbacks);
   width: 100%;
   transform: translate(-50%, -50%);
   display: token-utils.slot(slide-toggle-touch-target-display, $fallbacks);