Skip to content

Commit 1431ef0

Browse files
dylanatsmithCopilot
andcommitted
Refactor ToggleSwitch knob to DRY up 1px/2px values via custom properties
Introduce --toggleSwitch-knob-inset (the track border width) and --toggleSwitch-knob-offset (twice the inset), rooting the knob inset, checked travel, and concentric border-radius in a single source of truth. No visual change. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent f4cac1b commit 1431ef0

1 file changed

Lines changed: 10 additions & 6 deletions

File tree

app/components/primer/alpha/toggle_switch.pcss

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
}
88

99
.ToggleSwitch {
10+
/* Knob clears the track's border on every side */
11+
--toggleSwitch-knob-inset: var(--borderWidth-thin);
12+
--toggleSwitch-knob-offset: calc(2 * var(--toggleSwitch-knob-inset));
13+
1014
align-items: center;
1115
display: inline-flex;
1216
gap: var(--controlStack-medium-gap-condensed);
@@ -93,7 +97,7 @@
9397
& .ToggleSwitch-knob {
9498
background-color: var(--controlKnob-bgColor-checked);
9599
border-color: var(--controlKnob-borderColor-checked);
96-
transform: translateX(calc(100% - 2px));
100+
transform: translateX(calc(100% - var(--toggleSwitch-knob-offset)));
97101
}
98102

99103
& .ToggleSwitch-lineIcon {
@@ -155,18 +159,18 @@
155159
.ToggleSwitch-knob {
156160
position: absolute;
157161
/* stylelint-disable-next-line primer/spacing */
158-
top: 1px;
162+
top: var(--toggleSwitch-knob-inset);
159163
/* stylelint-disable-next-line primer/spacing */
160-
bottom: 1px;
164+
bottom: var(--toggleSwitch-knob-inset);
161165
/* stylelint-disable-next-line primer/spacing */
162-
left: 1px;
166+
left: var(--toggleSwitch-knob-inset);
163167
z-index: 1;
164168
width: 50%;
165169
background-color: var(--controlKnob-bgColor-rest);
166170
border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
167-
/* Use calc to account for the 1px border around the track */
171+
/* Concentric radius: subtract the track border on both sides */
168172
/* stylelint-disable-next-line primer/borders */
169-
border-radius: calc(var(--borderRadius-medium) - var(--borderWidth-thick));
173+
border-radius: calc(var(--borderRadius-medium) - var(--toggleSwitch-knob-offset));
170174
transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
171175
transition-duration: 80ms;
172176
transition-property: transform;

0 commit comments

Comments
 (0)