From b1e9c4abb3123714469d271c0446ee542f7944fa Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Tue, 16 May 2023 15:36:44 -0700 Subject: [PATCH] fix(switch): add missing tokens PiperOrigin-RevId: 532593357 --- switch/lib/_handle.scss | 42 ++++++++++++++++---------- switch/lib/_icon.scss | 44 +++++++++++++++++++++------- switch/lib/_switch.scss | 26 ---------------- switch/lib/_track.scss | 2 +- switch/lib/forced-colors-styles.scss | 41 ++++++++++++++++++++++++++ switch/lib/switch.ts | 2 +- switch/switch.ts | 3 +- switch/switch_test.ts | 17 +++++++++++ 8 files changed, 122 insertions(+), 55 deletions(-) create mode 100644 switch/lib/forced-colors-styles.scss create mode 100644 switch/switch_test.ts diff --git a/switch/lib/_handle.scss b/switch/lib/_handle.scss index afd6a9ebcf..f4c7c5448c 100644 --- a/switch/lib/_handle.scss +++ b/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,17 +135,23 @@ $_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), ) ); } @@ -149,12 +159,12 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard'); .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), ) ); } diff --git a/switch/lib/_icon.scss b/switch/lib/_icon.scss index d547a83819..34d3db6678 100644 --- a/switch/lib/_icon.scss +++ b/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); + } } diff --git a/switch/lib/_switch.scss b/switch/lib/_switch.scss index 157a78d7f4..547edd71be 100644 --- a/switch/lib/_switch.scss +++ b/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; diff --git a/switch/lib/_track.scss b/switch/lib/_track.scss index 4e9122432a..9c620f0007 100644 --- a/switch/lib/_track.scss +++ b/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); } diff --git a/switch/lib/forced-colors-styles.scss b/switch/lib/forced-colors-styles.scss new file mode 100644 index 0000000000..9c2a3061c0 --- /dev/null +++ b/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, + ) + ); + } +} diff --git a/switch/lib/switch.ts b/switch/lib/switch.ts index f3e394adf9..6b2a710793 100644 --- a/switch/lib/switch.ts +++ b/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` diff --git a/switch/switch.ts b/switch/switch.ts index 46094206d8..90e1782994 100644 --- a/switch/switch.ts +++ b/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]; } diff --git a/switch/switch_test.ts b/switch/switch_test.ts new file mode 100644 index 0000000000..c415f7443e --- /dev/null +++ b/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('', () => { + describe('.styles', () => { + createTokenTests(MdSwitch.styles); + }); +});