Skip to content

Commit b8f362a

Browse files
feat(switch): add touch target token
PiperOrigin-RevId: 661026784
1 parent e15f47e commit b8f362a

File tree

2 files changed

+12
-2
lines changed

2 files changed

+12
-2
lines changed

switch/internal/_switch.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,16 @@
7878
// Input is also touch target
7979
input {
8080
appearance: none;
81-
height: 48px;
81+
height: max(100%, map.get($tokens, 'touch-target-size'));
8282
outline: none;
8383
margin: 0;
8484
position: absolute;
85-
width: 100%;
85+
width: max(100%, map.get($tokens, 'touch-target-size'));
8686
z-index: 1;
8787
cursor: inherit;
88+
top: 50%;
89+
left: 50%;
90+
transform: translate(-50%, -50%);
8891
}
8992

9093
:host([touch-target='none']) input {

tokens/_md-comp-switch.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ $supported-tokens: (
7979
'selected-track-color',
8080
'state-layer-shape',
8181
'state-layer-size',
82+
'touch-target-size',
8283
'track-color',
8384
'track-height',
8485
'track-outline-color',
@@ -120,6 +121,12 @@ $_default: (
120121
'handle-shape',
121122
'track-shape'
122123
);
124+
$new-tokens: map.merge(
125+
$new-tokens,
126+
(
127+
'touch-target-size': if($exclude-hardcoded-values, null, 48px)
128+
)
129+
);
123130

124131
$tokens: validate.values(
125132
$tokens,

0 commit comments

Comments
 (0)