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

Adds a token that allows for the checkbox touch target to be customized.

(cherry picked from commit febe2c6)

Author: crisbeto

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);
 }