Skip to content

Commit

Permalink
refactor(switch): reduce CSS size
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed Jan 23, 2024
1 parent 0eb0e94 commit a2721c3
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 124 deletions.
79 changes: 42 additions & 37 deletions switch/internal/_handle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
$_md-sys-motion: tokens.md-sys-motion-values();
$_easing-standard: map.get($_md-sys-motion, 'easing-standard');

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

$margin: calc(var(--_track-width) - var(--_track-height));
$margin: calc(
map.get($tokens, 'track-width') - map.get($tokens, 'track-height')
);

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

.handle {
// Handle shape
border-start-start-radius: var(--_handle-shape-start-start);
border-start-end-radius: var(--_handle-shape-start-end);
border-end-end-radius: var(--_handle-shape-end-end);
border-end-start-radius: var(--_handle-shape-end-start);
height: var(--_handle-height);
width: var(--_handle-width);
border-start-start-radius: map.get($tokens, 'handle-shape-start-start');
border-start-end-radius: map.get($tokens, 'handle-shape-start-end');
border-end-end-radius: map.get($tokens, 'handle-shape-end-end');
border-end-start-radius: map.get($tokens, 'handle-shape-end-start');
height: map.get($tokens, 'handle-height');
width: map.get($tokens, 'handle-width');

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

.selected .handle {
height: var(--_selected-handle-height);
width: var(--_selected-handle-width);
height: map.get($tokens, 'selected-handle-height');
width: map.get($tokens, 'selected-handle-width');
}

.handle.with-icon {
height: var(--_with-icon-handle-height);
width: var(--_with-icon-handle-width);
height: map.get($tokens, 'with-icon-handle-height');
width: map.get($tokens, 'with-icon-handle-width');
}

.selected:not(.disabled):active .handle,
.unselected:not(.disabled):active .handle {
height: var(--_pressed-handle-height);
width: var(--_pressed-handle-width);
height: map.get($tokens, 'pressed-handle-height');
width: map.get($tokens, 'pressed-handle-width');
transition-timing-function: linear;
transition-duration: 100ms;
}

.selected .handle::before {
background-color: var(--_selected-handle-color);
background-color: map.get($tokens, 'selected-handle-color');
}

.selected:hover .handle::before {
background-color: var(--_selected-hover-handle-color);
background-color: map.get($tokens, 'selected-hover-handle-color');
}

.selected:focus-within .handle::before {
background-color: var(--_selected-focus-handle-color);
background-color: map.get($tokens, 'selected-focus-handle-color');
}

.selected:active .handle::before {
background-color: var(--_selected-pressed-handle-color);
background-color: map.get($tokens, 'selected-pressed-handle-color');
}

.selected.disabled .handle::before {
background-color: var(--_disabled-selected-handle-color);
opacity: var(--_disabled-selected-handle-opacity);
background-color: map.get($tokens, 'disabled-selected-handle-color');
opacity: map.get($tokens, 'disabled-selected-handle-opacity');
}

.unselected .handle::before {
background-color: var(--_handle-color);
background-color: map.get($tokens, 'handle-color');
}

.unselected:hover .handle::before {
background-color: var(--_hover-handle-color);
background-color: map.get($tokens, 'hover-handle-color');
}

.unselected:focus-within .handle::before {
background-color: var(--_focus-handle-color);
background-color: map.get($tokens, 'focus-handle-color');
}

.unselected:active .handle::before {
background-color: var(--_pressed-handle-color);
background-color: map.get($tokens, 'pressed-handle-color');
}

.unselected.disabled .handle::before {
background-color: var(--_disabled-handle-color);
opacity: var(--_disabled-handle-opacity);
background-color: map.get($tokens, 'disabled-handle-color');
opacity: map.get($tokens, 'disabled-handle-opacity');
}

md-ripple {
border-radius: var(--_state-layer-shape);
height: var(--_state-layer-size);
border-radius: map.get($tokens, 'state-layer-shape');
height: map.get($tokens, 'state-layer-size');
inset: unset;
width: var(--_state-layer-size);
width: map.get($tokens, 'state-layer-size');
}

.selected md-ripple {
@include ripple.theme(
(
'hover-color': var(--_selected-hover-state-layer-color),
'pressed-color': var(--_selected-pressed-state-layer-color),
'hover-opacity': var(--_selected-hover-state-layer-opacity),
'pressed-opacity': var(--_selected-pressed-state-layer-opacity),
'hover-color': map.get($tokens, 'selected-hover-state-layer-color'),
'pressed-color':
map.get($tokens, 'selected-pressed-state-layer-color'),
'hover-opacity':
map.get($tokens, 'selected-hover-state-layer-opacity'),
'pressed-opacity':
map.get($tokens, 'selected-pressed-state-layer-opacity'),
)
);
}

.unselected md-ripple {
@include ripple.theme(
(
'hover-color': var(--_hover-state-layer-color),
'pressed-color': var(--_pressed-state-layer-color),
'hover-opacity': var(--_hover-state-layer-opacity),
'pressed-opacity': var(--_pressed-state-layer-opacity),
'hover-color': map.get($tokens, 'hover-state-layer-color'),
'pressed-color': map.get($tokens, 'pressed-state-layer-color'),
'hover-opacity': map.get($tokens, 'hover-state-layer-opacity'),
'pressed-opacity': map.get($tokens, 'pressed-state-layer-opacity'),
)
);
}
Expand Down
34 changes: 17 additions & 17 deletions switch/internal/_icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
$_md-sys-motion: tokens.md-sys-motion-values();
$_easing-standard: map.get($_md-sys-motion, 'easing-standard');

@mixin styles() {
@mixin styles($tokens) {
@layer styles {
.icons {
position: relative;
Expand Down Expand Up @@ -50,49 +50,49 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
}

.icon--off {
width: var(--_icon-size);
height: var(--_icon-size);
color: var(--_icon-color);
width: map.get($tokens, 'icon-size');
height: map.get($tokens, 'icon-size');
color: map.get($tokens, 'icon-color');
}

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

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

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

.unselected.disabled .icon--off {
color: var(--_disabled-icon-color);
opacity: var(--_disabled-icon-opacity);
color: map.get($tokens, 'disabled-icon-color');
opacity: map.get($tokens, 'disabled-icon-opacity');
}

.icon--on {
width: var(--_selected-icon-size);
height: var(--_selected-icon-size);
color: var(--_selected-icon-color);
width: map.get($tokens, 'selected-icon-size');
height: map.get($tokens, 'selected-icon-size');
color: map.get($tokens, 'selected-icon-color');
}

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

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

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

.selected.disabled .icon--on {
color: var(--_disabled-selected-icon-color);
opacity: var(--_disabled-selected-icon-opacity);
color: map.get($tokens, 'disabled-selected-icon-color');
opacity: map.get($tokens, 'disabled-selected-icon-opacity');
}
}

Expand Down
104 changes: 52 additions & 52 deletions switch/internal/_switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,48 +43,48 @@

@mixin styles() {
$tokens: tokens.md-comp-switch-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-switch-#{$token}, #{$value}));
}

// Support logical shape properties
$tokens: map.merge(
$tokens,
(
'handle-shape-start-start':
var(
--md-switch-handle-shape-start-start,
map.get($tokens, 'handle-shape')
),
'handle-shape-start-end':
var(
--md-switch-handle-shape-start-end,
map.get($tokens, 'handle-shape')
),
'handle-shape-end-end':
var(--md-switch-handle-shape-end-end, map.get($tokens, 'handle-shape')),
'handle-shape-end-start':
var(
--md-switch-handle-shape-end-start,
map.get($tokens, 'handle-shape')
),
'track-shape-start-start':
var(
--md-switch-track-shape-start-start,
map.get($tokens, 'track-shape')
),
'track-shape-start-end':
var(--md-switch-track-shape-start-end, map.get($tokens, 'track-shape')),
'track-shape-end-end':
var(--md-switch-track-shape-end-end, map.get($tokens, 'track-shape')),
'track-shape-end-start':
var(--md-switch-track-shape-end-start, map.get($tokens, 'track-shape')),
)
);

@layer styles, hcm;
@layer styles {
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-switch-#{$token}, #{$value});
}

// Support logical shape properties
--_handle-shape-start-start: var(
--md-switch-handle-shape-start-start,
var(--_handle-shape)
);
--_handle-shape-start-end: var(
--md-switch-handle-shape-start-end,
var(--_handle-shape)
);
--_handle-shape-end-end: var(
--md-switch-handle-shape-end-end,
var(--_handle-shape)
);
--_handle-shape-end-start: var(
--md-switch-handle-shape-end-start,
var(--_handle-shape)
);
--_track-shape-start-start: var(
--md-switch-track-shape-start-start,
var(--_track-shape)
);
--_track-shape-start-end: var(
--md-switch-track-shape-start-end,
var(--_track-shape)
);
--_track-shape-end-end: var(
--md-switch-track-shape-end-end,
var(--_track-shape)
);
--_track-shape-end-start: var(
--md-switch-track-shape-end-start,
var(--_track-shape)
);

display: inline-flex;
outline: none;
vertical-align: top;
Expand All @@ -97,16 +97,16 @@
}

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

md-focus-ring {
@include focus-ring.theme(
(
'shape-start-start': var(--_track-shape-start-start),
'shape-start-end': var(--_track-shape-start-end),
'shape-end-end': var(--_track-shape-end-end),
'shape-end-start': var(--_track-shape-end-start),
'shape-start-start': map.get($tokens, 'track-shape-start-start'),
'shape-start-end': map.get($tokens, 'track-shape-start-end'),
'shape-end-end': map.get($tokens, 'track-shape-end-end'),
'shape-end-start': map.get($tokens, 'track-shape-end-start'),
)
);
}
Expand All @@ -116,14 +116,14 @@
display: inline-flex;
flex-shrink: 0; // Stop from collapsing in flex containers
position: relative;
width: var(--_track-width);
height: var(--_track-height);
width: map.get($tokens, 'track-width');
height: map.get($tokens, 'track-height');

// Track shape
border-start-start-radius: var(--_track-shape-start-start);
border-start-end-radius: var(--_track-shape-start-end);
border-end-end-radius: var(--_track-shape-end-end);
border-end-start-radius: var(--_track-shape-end-start);
border-start-start-radius: map.get($tokens, 'track-shape-start-start');
border-start-end-radius: map.get($tokens, 'track-shape-start-end');
border-end-end-radius: map.get($tokens, 'track-shape-end-end');
border-end-start-radius: map.get($tokens, 'track-shape-end-start');
}

// Input is also touch target
Expand All @@ -143,7 +143,7 @@
}
}

@include track.styles();
@include handle.styles();
@include icon.styles();
@include track.styles($tokens);
@include handle.styles($tokens);
@include icon.styles($tokens);
}
Loading

0 comments on commit a2721c3

Please sign in to comment.