diff --git a/switch/internal/_switch.scss b/switch/internal/_switch.scss index 2d088085ea..040a88eef4 100644 --- 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 index df3f6946dd..9ecc38edbc 100644 --- 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,