fix(switch): add missing tokens

PiperOrigin-RevId: 532593357

switch/lib/_handle.scss

@@ -67,12 +67,16 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
     transition: none;
   }
 
-  .switch--selected .handle,
-  .switch--unselected .handle.handle--big {
+  .switch--selected .handle {
     height: var(--_selected-handle-height);
     width: var(--_selected-handle-width);
   }
 
+  .handle.with-icon {
+    height: var(--_with-icon-handle-height);
+    width: var(--_with-icon-handle-width);
+  }
+
   .switch--selected:enabled:active .handle,
   .switch--unselected:enabled:active .handle {
     height: var(--_pressed-handle-height);
@@ -89,7 +93,7 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
     background-color: var(--_selected-hover-handle-color);
   }
 
-  .switch--selected:focus-visible .handle::before {
+  .switch--selected:focus-within .handle::before {
     background-color: var(--_selected-focus-handle-color);
   }
 
@@ -110,7 +114,7 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
     background-color: var(--_unselected-hover-handle-color);
   }
 
-  .switch--unselected:focus-visible .handle::before {
+  .switch--unselected:focus-within .handle::before {
     background-color: var(--_unselected-focus-handle-color);
   }
 
@@ -131,30 +135,36 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
     transform: translate(-50%, -50%);
     height: var(--_state-layer-size);
     width: var(--_state-layer-size);
+
+    @include ripple.theme(
+      (
+        'shape': var(--_state-layer-shape),
+      )
+    );
   }
 
   .switch--selected .ripple {
     @include ripple.theme(
       (
-        hover-color: var(--_selected-hover-state-layer-color),
-        focus-color: var(--_selected-focus-state-layer-color),
-        pressed-color: var(--_selected-pressed-state-layer-color),
-        hover-opacity: var(--_selected-hover-state-layer-opacity),
-        focus-opacity: var(--_selected-focus-state-layer-opacity),
-        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+        'hover-color': var(--_selected-hover-state-layer-color),
+        'focus-color': var(--_selected-focus-state-layer-color),
+        'pressed-color': var(--_selected-pressed-state-layer-color),
+        'hover-opacity': var(--_selected-hover-state-layer-opacity),
+        'focus-opacity': var(--_selected-focus-state-layer-opacity),
+        'pressed-opacity': var(--_selected-pressed-state-layer-opacity),
       )
     );
   }
 
   .switch--unselected .ripple {
     @include ripple.theme(
       (
-        hover-color: var(--_unselected-hover-state-layer-color),
-        focus-color: var(--_unselected-focus-state-layer-color),
-        pressed-color: var(--_unselected-pressed-state-layer-color),
-        hover-opacity: var(--_unselected-hover-state-layer-opacity),
-        focus-opacity: var(--_unselected-focus-state-layer-opacity),
-        pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
+        'hover-color': var(--_unselected-hover-state-layer-color),
+        'focus-color': var(--_unselected-focus-state-layer-color),
+        'pressed-color': var(--_unselected-pressed-state-layer-color),
+        'hover-opacity': var(--_unselected-hover-state-layer-opacity),
+        'focus-opacity': var(--_unselected-focus-state-layer-opacity),
+        'pressed-opacity': var(--_unselected-pressed-state-layer-opacity),
       )
     );
   }

switch/lib/_icon.scss

@@ -40,29 +40,53 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
   }
 
   // rotate selected icon into view when there is no unselected icon
-  .switch--unselected .handle:not(.handle--big) .icon--on {
+  .switch--unselected .handle:not(.with-icon) .icon--on {
     transform: rotate(-45deg);
   }
 
-  .icon--on {
-    width: var(--_selected-icon-size);
-    height: var(--_selected-icon-size);
-    fill: var(--_selected-icon-color);
-  }
-
   .icon--off {
     width: var(--_unselected-icon-size);
     height: var(--_unselected-icon-size);
     fill: var(--_unselected-icon-color);
   }
 
-  .switch--selected:disabled .icon--on {
-    fill: var(--_disabled-selected-icon-color);
-    opacity: var(--_disabled-selected-icon-opacity);
+  .switch--unselected:hover .icon--off {
+    fill: var(--_unselected-hover-icon-color);
+  }
+
+  .switch--unselected:focus-within .icon--off {
+    fill: var(--_unselected-focus-icon-color);
+  }
+
+  .switch--unselected:active .icon--off {
+    fill: var(--_unselected-pressed-icon-color);
   }
 
   .switch--unselected:disabled .icon--off {
     fill: var(--_disabled-unselected-icon-color);
     opacity: var(--_disabled-unselected-icon-opacity);
   }
+
+  .icon--on {
+    width: var(--_selected-icon-size);
+    height: var(--_selected-icon-size);
+    fill: var(--_selected-icon-color);
+  }
+
+  .switch--selected:hover .icon--on {
+    fill: var(--_selected-hover-icon-color);
+  }
+
+  .switch--selected:focus-within .icon--on {
+    fill: var(--_selected-focus-icon-color);
+  }
+
+  .switch--selected:active .icon--on {
+    fill: var(--_selected-pressed-icon-color);
+  }
+
+  .switch--selected:disabled .icon--on {
+    fill: var(--_disabled-selected-icon-color);
+    opacity: var(--_disabled-selected-icon-opacity);
+  }
 }

switch/lib/_switch.scss

@@ -15,27 +15,6 @@
 @use './track';
 // go/keep-sorted end
 
-$_forced-colors-theme: (
-  disabled-selected-icon-color: GrayText,
-  disabled-selected-icon-opacity: 1,
-  disabled-selected-track-color: GrayText,
-  disabled-track-opacity: 1,
-  disabled-unselected-handle-color: GrayText,
-  disabled-unselected-handle-opacity: 1,
-  disabled-unselected-icon-color: Canvas,
-  disabled-unselected-icon-opacity: 1,
-  selected-focus-track-color: ButtonText,
-  selected-hover-track-color: ButtonText,
-  selected-icon-color: ButtonText,
-  selected-pressed-track-color: ButtonText,
-  selected-track-color: ButtonText,
-  unselected-focus-handle-color: ButtonText,
-  unselected-handle-color: ButtonText,
-  unselected-hover-handle-color: ButtonText,
-  unselected-icon-color: Canvas,
-  unselected-pressed-handle-color: ButtonText,
-);
-
 @mixin theme($tokens) {
   $supported-tokens: list.join(
     tokens.$md-comp-switch-supported-tokens,
@@ -104,11 +83,6 @@ $_forced-colors-theme: (
       var(--_track-shape)
     );
 
-    // TODO(b/230630968): create a forced-colors-mode mixin
-    @media screen and (forced-colors: active) {
-      @include theme($_forced-colors-theme);
-    }
-
     display: inline-flex;
     outline: none;
     vertical-align: top;

switch/lib/_track.scss

@@ -50,7 +50,7 @@
     background-color: var(--_selected-hover-track-color);
   }
 
-  .switch--selected:focus-visible .track::before {
+  .switch--selected:focus-within .track::before {
     background-color: var(--_selected-focus-track-color);
   }
 

switch/lib/forced-colors-styles.scss

@@ -0,0 +1,41 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './switch';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :host {
+    @include switch.theme(
+      (
+        'disabled-selected-icon-color': GrayText,
+        'disabled-selected-icon-opacity': 1,
+        'disabled-selected-track-color': GrayText,
+        'disabled-track-opacity': 1,
+        'disabled-unselected-handle-color': GrayText,
+        'disabled-unselected-handle-opacity': 1,
+        'disabled-unselected-icon-color': Canvas,
+        'disabled-unselected-icon-opacity': 1,
+        'selected-focus-track-color': ButtonText,
+        'selected-hover-track-color': ButtonText,
+        'selected-icon-color': ButtonText,
+        'selected-hover-icon-color': ButtonText,
+        'selected-focus-icon-color': ButtonText,
+        'selected-pressed-icon-color': ButtonText,
+        'selected-pressed-track-color': ButtonText,
+        'selected-track-color': ButtonText,
+        'unselected-focus-handle-color': ButtonText,
+        'unselected-handle-color': ButtonText,
+        'unselected-hover-handle-color': ButtonText,
+        'unselected-icon-color': Canvas,
+        'unselected-hover-icon-color': Canvas,
+        'unselected-focus-icon-color': Canvas,
+        'unselected-pressed-icon-color': Canvas,
+        'unselected-pressed-handle-color': ButtonText,
+      )
+    );
+  }
+}

switch/lib/switch.ts

@@ -154,7 +154,7 @@ export class Switch extends LitElement {
 
   private renderHandle() {
     const classes = {
-      'handle--big': this.icons && !this.showOnlySelectedIcon,
+      'with-icon': this.icons || (this.showOnlySelectedIcon && this.selected),
     };
     return html`
       <span class="handle-container">

switch/switch.ts

@@ -6,6 +6,7 @@
 
 import {customElement} from 'lit/decorators.js';
 
+import {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';
 import {Switch} from './lib/switch.js';
 import {styles} from './lib/switch-styles.css.js';
 
@@ -27,5 +28,5 @@ declare global {
  */
 @customElement('md-switch')
 export class MdSwitch extends Switch {
-  static override styles = [styles];
+  static override styles = [styles, forcedColorsStyles];
 }

switch/switch_test.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {createTokenTests} from '../testing/tokens.js';
+
+import {MdSwitch} from './switch.js';
+
+describe('<md-switch>', () => {
+  describe('.styles', () => {
+    createTokenTests(MdSwitch.styles);
+  });
+});