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

@@ -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'),
         )
       );
     }

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');
     }
   }
 

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);
 }

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');
     }
   }