From a2721c39d407f556fee4322c7c055ad9dea7ca9b Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Tue, 23 Jan 2024 15:05:44 -0800 Subject: [PATCH] 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 --- switch/internal/_handle.scss | 79 +++++++++++++------------- switch/internal/_icon.scss | 34 ++++++------ switch/internal/_switch.scss | 104 +++++++++++++++++------------------ switch/internal/_track.scss | 36 ++++++------ 4 files changed, 129 insertions(+), 124 deletions(-) diff --git a/switch/internal/_handle.scss b/switch/internal/_handle.scss index 6a881c3a9..c050dab85 100644 --- a/switch/internal/_handle.scss +++ b/switch/internal/_handle.scss @@ -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; @@ -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; @@ -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; @@ -71,79 +73,82 @@ $_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'), ) ); } @@ -151,10 +156,10 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard'); .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'), ) ); } diff --git a/switch/internal/_icon.scss b/switch/internal/_icon.scss index 87da30d3d..ae62eb777 100644 --- a/switch/internal/_icon.scss +++ b/switch/internal/_icon.scss @@ -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; @@ -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'); } } diff --git a/switch/internal/_switch.scss b/switch/internal/_switch.scss index 5acb5ca99..d9698f510 100644 --- a/switch/internal/_switch.scss +++ b/switch/internal/_switch.scss @@ -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; @@ -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'), ) ); } @@ -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 @@ -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); } diff --git a/switch/internal/_track.scss b/switch/internal/_track.scss index e35ddc674..f1044f3c4 100644 --- a/switch/internal/_track.scss +++ b/switch/internal/_track.scss @@ -7,7 +7,7 @@ @use 'sass:map'; // go/keep-sorted end -@mixin styles() { +@mixin styles($tokens) { @layer styles { .track { position: absolute; @@ -45,7 +45,7 @@ .disabled .track::before, .disabled .track::after { transition: none; - opacity: var(--_disabled-track-opacity); + opacity: map.get($tokens, 'disabled-track-opacity'); } .disabled .track::before { @@ -53,19 +53,19 @@ } .selected .track::before { - background-color: var(--_selected-track-color); + background-color: map.get($tokens, 'selected-track-color'); } .selected:hover .track::before { - background-color: var(--_selected-hover-track-color); + background-color: map.get($tokens, 'selected-hover-track-color'); } .selected:focus-within .track::before { - background-color: var(--_selected-focus-track-color); + background-color: map.get($tokens, 'selected-focus-track-color'); } .selected:active .track::before { - background-color: var(--_selected-pressed-track-color); + background-color: map.get($tokens, 'selected-pressed-track-color'); } .selected.disabled .track { @@ -73,34 +73,34 @@ } .selected.disabled .track::before { - background-color: var(--_disabled-selected-track-color); + background-color: map.get($tokens, 'disabled-selected-track-color'); } .unselected .track::before { - background-color: var(--_track-color); - border-color: var(--_track-outline-color); + background-color: map.get($tokens, 'track-color'); + border-color: map.get($tokens, 'track-outline-color'); border-style: solid; - border-width: var(--_track-outline-width); + border-width: map.get($tokens, 'track-outline-width'); } .unselected:hover .track::before { - background-color: var(--_hover-track-color); - border-color: var(--_hover-track-outline-color); + background-color: map.get($tokens, 'hover-track-color'); + border-color: map.get($tokens, 'hover-track-outline-color'); } .unselected:focus-visible .track::before { - background-color: var(--_focus-track-color); - border-color: var(--_focus-track-outline-color); + background-color: map.get($tokens, 'focus-track-color'); + border-color: map.get($tokens, 'focus-track-outline-color'); } .unselected:active .track::before { - background-color: var(--_pressed-track-color); - border-color: var(--_pressed-track-outline-color); + background-color: map.get($tokens, 'pressed-track-color'); + border-color: map.get($tokens, 'pressed-track-outline-color'); } .unselected.disabled .track::before { - background-color: var(--_disabled-track-color); - border-color: var(--_disabled-track-outline-color); + background-color: map.get($tokens, 'disabled-track-color'); + border-color: map.get($tokens, 'disabled-track-outline-color'); } }