Skip to content

Commit a2721c3

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
refactor(switch): reduce CSS size
Reduces the size by removing private (`--_*`) custom properties. These are not needed since the component does not share styles across variants. Size before: 14,615b / 2,327b gzip Size after: 10,802 (-26%) / 1,865b gzip (-20%) PiperOrigin-RevId: 600918909
1 parent 0eb0e94 commit a2721c3

File tree

4 files changed

+129
-124
lines changed

4 files changed

+129
-124
lines changed

‎switch/internal/_handle.scss‎

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
$_md-sys-motion: tokens.md-sys-motion-values();
1515
$_easing-standard: map.get($_md-sys-motion, 'easing-standard');
1616

17-
@mixin styles() {
17+
@mixin styles($tokens) {
1818
@layer styles {
1919
.handle-container {
2020
display: flex;
@@ -25,7 +25,9 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
2525
transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
2626
}
2727

28-
$margin: calc(var(--_track-width) - var(--_track-height));
28+
$margin: calc(
29+
map.get($tokens, 'track-width') - map.get($tokens, 'track-height')
30+
);
2931

3032
.selected .handle-container {
3133
margin-inline-start: $margin;
@@ -41,12 +43,12 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
4143

4244
.handle {
4345
// Handle shape
44-
border-start-start-radius: var(--_handle-shape-start-start);
45-
border-start-end-radius: var(--_handle-shape-start-end);
46-
border-end-end-radius: var(--_handle-shape-end-end);
47-
border-end-start-radius: var(--_handle-shape-end-start);
48-
height: var(--_handle-height);
49-
width: var(--_handle-width);
46+
border-start-start-radius: map.get($tokens, 'handle-shape-start-start');
47+
border-start-end-radius: map.get($tokens, 'handle-shape-start-end');
48+
border-end-end-radius: map.get($tokens, 'handle-shape-end-end');
49+
border-end-start-radius: map.get($tokens, 'handle-shape-end-start');
50+
height: map.get($tokens, 'handle-height');
51+
width: map.get($tokens, 'handle-width');
5052

5153
transform-origin: center;
5254
transition-property: height, width;
@@ -71,90 +73,93 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
7173
}
7274

7375
.selected .handle {
74-
height: var(--_selected-handle-height);
75-
width: var(--_selected-handle-width);
76+
height: map.get($tokens, 'selected-handle-height');
77+
width: map.get($tokens, 'selected-handle-width');
7678
}
7779

7880
.handle.with-icon {
79-
height: var(--_with-icon-handle-height);
80-
width: var(--_with-icon-handle-width);
81+
height: map.get($tokens, 'with-icon-handle-height');
82+
width: map.get($tokens, 'with-icon-handle-width');
8183
}
8284

8385
.selected:not(.disabled):active .handle,
8486
.unselected:not(.disabled):active .handle {
85-
height: var(--_pressed-handle-height);
86-
width: var(--_pressed-handle-width);
87+
height: map.get($tokens, 'pressed-handle-height');
88+
width: map.get($tokens, 'pressed-handle-width');
8789
transition-timing-function: linear;
8890
transition-duration: 100ms;
8991
}
9092

9193
.selected .handle::before {
92-
background-color: var(--_selected-handle-color);
94+
background-color: map.get($tokens, 'selected-handle-color');
9395
}
9496

9597
.selected:hover .handle::before {
96-
background-color: var(--_selected-hover-handle-color);
98+
background-color: map.get($tokens, 'selected-hover-handle-color');
9799
}
98100

99101
.selected:focus-within .handle::before {
100-
background-color: var(--_selected-focus-handle-color);
102+
background-color: map.get($tokens, 'selected-focus-handle-color');
101103
}
102104

103105
.selected:active .handle::before {
104-
background-color: var(--_selected-pressed-handle-color);
106+
background-color: map.get($tokens, 'selected-pressed-handle-color');
105107
}
106108

107109
.selected.disabled .handle::before {
108-
background-color: var(--_disabled-selected-handle-color);
109-
opacity: var(--_disabled-selected-handle-opacity);
110+
background-color: map.get($tokens, 'disabled-selected-handle-color');
111+
opacity: map.get($tokens, 'disabled-selected-handle-opacity');
110112
}
111113

112114
.unselected .handle::before {
113-
background-color: var(--_handle-color);
115+
background-color: map.get($tokens, 'handle-color');
114116
}
115117

116118
.unselected:hover .handle::before {
117-
background-color: var(--_hover-handle-color);
119+
background-color: map.get($tokens, 'hover-handle-color');
118120
}
119121

120122
.unselected:focus-within .handle::before {
121-
background-color: var(--_focus-handle-color);
123+
background-color: map.get($tokens, 'focus-handle-color');
122124
}
123125

124126
.unselected:active .handle::before {
125-
background-color: var(--_pressed-handle-color);
127+
background-color: map.get($tokens, 'pressed-handle-color');
126128
}
127129

128130
.unselected.disabled .handle::before {
129-
background-color: var(--_disabled-handle-color);
130-
opacity: var(--_disabled-handle-opacity);
131+
background-color: map.get($tokens, 'disabled-handle-color');
132+
opacity: map.get($tokens, 'disabled-handle-opacity');
131133
}
132134

133135
md-ripple {
134-
border-radius: var(--_state-layer-shape);
135-
height: var(--_state-layer-size);
136+
border-radius: map.get($tokens, 'state-layer-shape');
137+
height: map.get($tokens, 'state-layer-size');
136138
inset: unset;
137-
width: var(--_state-layer-size);
139+
width: map.get($tokens, 'state-layer-size');
138140
}
139141

140142
.selected md-ripple {
141143
@include ripple.theme(
142144
(
143-
'hover-color': var(--_selected-hover-state-layer-color),
144-
'pressed-color': var(--_selected-pressed-state-layer-color),
145-
'hover-opacity': var(--_selected-hover-state-layer-opacity),
146-
'pressed-opacity': var(--_selected-pressed-state-layer-opacity),
145+
'hover-color': map.get($tokens, 'selected-hover-state-layer-color'),
146+
'pressed-color':
147+
map.get($tokens, 'selected-pressed-state-layer-color'),
148+
'hover-opacity':
149+
map.get($tokens, 'selected-hover-state-layer-opacity'),
150+
'pressed-opacity':
151+
map.get($tokens, 'selected-pressed-state-layer-opacity'),
147152
)
148153
);
149154
}
150155

151156
.unselected md-ripple {
152157
@include ripple.theme(
153158
(
154-
'hover-color': var(--_hover-state-layer-color),
155-
'pressed-color': var(--_pressed-state-layer-color),
156-
'hover-opacity': var(--_hover-state-layer-opacity),
157-
'pressed-opacity': var(--_pressed-state-layer-opacity),
159+
'hover-color': map.get($tokens, 'hover-state-layer-color'),
160+
'pressed-color': map.get($tokens, 'pressed-state-layer-color'),
161+
'hover-opacity': map.get($tokens, 'hover-state-layer-opacity'),
162+
'pressed-opacity': map.get($tokens, 'pressed-state-layer-opacity'),
158163
)
159164
);
160165
}

‎switch/internal/_icon.scss‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
$_md-sys-motion: tokens.md-sys-motion-values();
1414
$_easing-standard: map.get($_md-sys-motion, 'easing-standard');
1515

16-
@mixin styles() {
16+
@mixin styles($tokens) {
1717
@layer styles {
1818
.icons {
1919
position: relative;
@@ -50,49 +50,49 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
5050
}
5151

5252
.icon--off {
53-
width: var(--_icon-size);
54-
height: var(--_icon-size);
55-
color: var(--_icon-color);
53+
width: map.get($tokens, 'icon-size');
54+
height: map.get($tokens, 'icon-size');
55+
color: map.get($tokens, 'icon-color');
5656
}
5757

5858
.unselected:hover .icon--off {
59-
color: var(--_hover-icon-color);
59+
color: map.get($tokens, 'hover-icon-color');
6060
}
6161

6262
.unselected:focus-within .icon--off {
63-
color: var(--_focus-icon-color);
63+
color: map.get($tokens, 'focus-icon-color');
6464
}
6565

6666
.unselected:active .icon--off {
67-
color: var(--_pressed-icon-color);
67+
color: map.get($tokens, 'pressed-icon-color');
6868
}
6969

7070
.unselected.disabled .icon--off {
71-
color: var(--_disabled-icon-color);
72-
opacity: var(--_disabled-icon-opacity);
71+
color: map.get($tokens, 'disabled-icon-color');
72+
opacity: map.get($tokens, 'disabled-icon-opacity');
7373
}
7474

7575
.icon--on {
76-
width: var(--_selected-icon-size);
77-
height: var(--_selected-icon-size);
78-
color: var(--_selected-icon-color);
76+
width: map.get($tokens, 'selected-icon-size');
77+
height: map.get($tokens, 'selected-icon-size');
78+
color: map.get($tokens, 'selected-icon-color');
7979
}
8080

8181
.selected:hover .icon--on {
82-
color: var(--_selected-hover-icon-color);
82+
color: map.get($tokens, 'selected-hover-icon-color');
8383
}
8484

8585
.selected:focus-within .icon--on {
86-
color: var(--_selected-focus-icon-color);
86+
color: map.get($tokens, 'selected-focus-icon-color');
8787
}
8888

8989
.selected:active .icon--on {
90-
color: var(--_selected-pressed-icon-color);
90+
color: map.get($tokens, 'selected-pressed-icon-color');
9191
}
9292

9393
.selected.disabled .icon--on {
94-
color: var(--_disabled-selected-icon-color);
95-
opacity: var(--_disabled-selected-icon-opacity);
94+
color: map.get($tokens, 'disabled-selected-icon-color');
95+
opacity: map.get($tokens, 'disabled-selected-icon-opacity');
9696
}
9797
}
9898

‎switch/internal/_switch.scss‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -43,48 +43,48 @@
4343

4444
@mixin styles() {
4545
$tokens: tokens.md-comp-switch-values();
46+
@each $token, $value in $tokens {
47+
$tokens: map.set($tokens, $token, var(--md-switch-#{$token}, #{$value}));
48+
}
49+
50+
// Support logical shape properties
51+
$tokens: map.merge(
52+
$tokens,
53+
(
54+
'handle-shape-start-start':
55+
var(
56+
--md-switch-handle-shape-start-start,
57+
map.get($tokens, 'handle-shape')
58+
),
59+
'handle-shape-start-end':
60+
var(
61+
--md-switch-handle-shape-start-end,
62+
map.get($tokens, 'handle-shape')
63+
),
64+
'handle-shape-end-end':
65+
var(--md-switch-handle-shape-end-end, map.get($tokens, 'handle-shape')),
66+
'handle-shape-end-start':
67+
var(
68+
--md-switch-handle-shape-end-start,
69+
map.get($tokens, 'handle-shape')
70+
),
71+
'track-shape-start-start':
72+
var(
73+
--md-switch-track-shape-start-start,
74+
map.get($tokens, 'track-shape')
75+
),
76+
'track-shape-start-end':
77+
var(--md-switch-track-shape-start-end, map.get($tokens, 'track-shape')),
78+
'track-shape-end-end':
79+
var(--md-switch-track-shape-end-end, map.get($tokens, 'track-shape')),
80+
'track-shape-end-start':
81+
var(--md-switch-track-shape-end-start, map.get($tokens, 'track-shape')),
82+
)
83+
);
4684

4785
@layer styles, hcm;
4886
@layer styles {
4987
:host {
50-
@each $token, $value in $tokens {
51-
--_#{$token}: var(--md-switch-#{$token}, #{$value});
52-
}
53-
54-
// Support logical shape properties
55-
--_handle-shape-start-start: var(
56-
--md-switch-handle-shape-start-start,
57-
var(--_handle-shape)
58-
);
59-
--_handle-shape-start-end: var(
60-
--md-switch-handle-shape-start-end,
61-
var(--_handle-shape)
62-
);
63-
--_handle-shape-end-end: var(
64-
--md-switch-handle-shape-end-end,
65-
var(--_handle-shape)
66-
);
67-
--_handle-shape-end-start: var(
68-
--md-switch-handle-shape-end-start,
69-
var(--_handle-shape)
70-
);
71-
--_track-shape-start-start: var(
72-
--md-switch-track-shape-start-start,
73-
var(--_track-shape)
74-
);
75-
--_track-shape-start-end: var(
76-
--md-switch-track-shape-start-end,
77-
var(--_track-shape)
78-
);
79-
--_track-shape-end-end: var(
80-
--md-switch-track-shape-end-end,
81-
var(--_track-shape)
82-
);
83-
--_track-shape-end-start: var(
84-
--md-switch-track-shape-end-start,
85-
var(--_track-shape)
86-
);
87-
8888
display: inline-flex;
8989
outline: none;
9090
vertical-align: top;
@@ -97,16 +97,16 @@
9797
}
9898

9999
:host([touch-target='wrapper']) {
100-
margin: max(0px, (48px - var(--_track-height)) / 2) 0px;
100+
margin: max(0px, (48px - map.get($tokens, 'track-height')) / 2) 0px;
101101
}
102102

103103
md-focus-ring {
104104
@include focus-ring.theme(
105105
(
106-
'shape-start-start': var(--_track-shape-start-start),
107-
'shape-start-end': var(--_track-shape-start-end),
108-
'shape-end-end': var(--_track-shape-end-end),
109-
'shape-end-start': var(--_track-shape-end-start),
106+
'shape-start-start': map.get($tokens, 'track-shape-start-start'),
107+
'shape-start-end': map.get($tokens, 'track-shape-start-end'),
108+
'shape-end-end': map.get($tokens, 'track-shape-end-end'),
109+
'shape-end-start': map.get($tokens, 'track-shape-end-start'),
110110
)
111111
);
112112
}
@@ -116,14 +116,14 @@
116116
display: inline-flex;
117117
flex-shrink: 0; // Stop from collapsing in flex containers
118118
position: relative;
119-
width: var(--_track-width);
120-
height: var(--_track-height);
119+
width: map.get($tokens, 'track-width');
120+
height: map.get($tokens, 'track-height');
121121

122122
// Track shape
123-
border-start-start-radius: var(--_track-shape-start-start);
124-
border-start-end-radius: var(--_track-shape-start-end);
125-
border-end-end-radius: var(--_track-shape-end-end);
126-
border-end-start-radius: var(--_track-shape-end-start);
123+
border-start-start-radius: map.get($tokens, 'track-shape-start-start');
124+
border-start-end-radius: map.get($tokens, 'track-shape-start-end');
125+
border-end-end-radius: map.get($tokens, 'track-shape-end-end');
126+
border-end-start-radius: map.get($tokens, 'track-shape-end-start');
127127
}
128128

129129
// Input is also touch target
@@ -143,7 +143,7 @@
143143
}
144144
}
145145

146-
@include track.styles();
147-
@include handle.styles();
148-
@include icon.styles();
146+
@include track.styles($tokens);
147+
@include handle.styles($tokens);
148+
@include icon.styles($tokens);
149149
}

0 commit comments

Comments
 (0)