feat(switch): add touch target token

PiperOrigin-RevId: 661026784
material-components · Aug 8, 2024 · b8f362a · b8f362a
1 parent e15f47e
commit b8f362a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/switch/internal/_switch.scss b/switch/internal/_switch.scss
@@ -78,13 +78,16 @@
     // Input is also touch target
     input {
       appearance: none;
-      height: 48px;
+      height: max(100%, map.get($tokens, 'touch-target-size'));
       outline: none;
       margin: 0;
       position: absolute;
-      width: 100%;
+      width: max(100%, map.get($tokens, 'touch-target-size'));
       z-index: 1;
       cursor: inherit;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
 
     :host([touch-target='none']) input {

diff --git a/tokens/_md-comp-switch.scss b/tokens/_md-comp-switch.scss
@@ -79,6 +79,7 @@ $supported-tokens: (
   'selected-track-color',
   'state-layer-shape',
   'state-layer-size',
+  'touch-target-size',
   'track-color',
   'track-height',
   'track-outline-color',
@@ -120,6 +121,12 @@ $_default: (
     'handle-shape',
     'track-shape'
   );
+  $new-tokens: map.merge(
+    $new-tokens,
+    (
+      'touch-target-size': if($exclude-hardcoded-values, null, 48px)
+    )
+  );
 
   $tokens: validate.values(
     $tokens,