Skip to content

Commit b1e9c4a

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
fix(switch): add missing tokens
PiperOrigin-RevId: 532593357
1 parent dd5f3f0 commit b1e9c4a

File tree

8 files changed

+122
-55
lines changed

8 files changed

+122
-55
lines changed

‎switch/lib/_handle.scss‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,16 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
6767
transition: none;
6868
}
6969

70-
.switch--selected .handle,
71-
.switch--unselected .handle.handle--big {
70+
.switch--selected .handle {
7271
height: var(--_selected-handle-height);
7372
width: var(--_selected-handle-width);
7473
}
7574

75+
.handle.with-icon {
76+
height: var(--_with-icon-handle-height);
77+
width: var(--_with-icon-handle-width);
78+
}
79+
7680
.switch--selected:enabled:active .handle,
7781
.switch--unselected:enabled:active .handle {
7882
height: var(--_pressed-handle-height);
@@ -89,7 +93,7 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
8993
background-color: var(--_selected-hover-handle-color);
9094
}
9195

92-
.switch--selected:focus-visible .handle::before {
96+
.switch--selected:focus-within .handle::before {
9397
background-color: var(--_selected-focus-handle-color);
9498
}
9599

@@ -110,7 +114,7 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
110114
background-color: var(--_unselected-hover-handle-color);
111115
}
112116

113-
.switch--unselected:focus-visible .handle::before {
117+
.switch--unselected:focus-within .handle::before {
114118
background-color: var(--_unselected-focus-handle-color);
115119
}
116120

@@ -131,30 +135,36 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
131135
transform: translate(-50%, -50%);
132136
height: var(--_state-layer-size);
133137
width: var(--_state-layer-size);
138+
139+
@include ripple.theme(
140+
(
141+
'shape': var(--_state-layer-shape),
142+
)
143+
);
134144
}
135145

136146
.switch--selected .ripple {
137147
@include ripple.theme(
138148
(
139-
hover-color: var(--_selected-hover-state-layer-color),
140-
focus-color: var(--_selected-focus-state-layer-color),
141-
pressed-color: var(--_selected-pressed-state-layer-color),
142-
hover-opacity: var(--_selected-hover-state-layer-opacity),
143-
focus-opacity: var(--_selected-focus-state-layer-opacity),
144-
pressed-opacity: var(--_selected-pressed-state-layer-opacity),
149+
'hover-color': var(--_selected-hover-state-layer-color),
150+
'focus-color': var(--_selected-focus-state-layer-color),
151+
'pressed-color': var(--_selected-pressed-state-layer-color),
152+
'hover-opacity': var(--_selected-hover-state-layer-opacity),
153+
'focus-opacity': var(--_selected-focus-state-layer-opacity),
154+
'pressed-opacity': var(--_selected-pressed-state-layer-opacity),
145155
)
146156
);
147157
}
148158

149159
.switch--unselected .ripple {
150160
@include ripple.theme(
151161
(
152-
hover-color: var(--_unselected-hover-state-layer-color),
153-
focus-color: var(--_unselected-focus-state-layer-color),
154-
pressed-color: var(--_unselected-pressed-state-layer-color),
155-
hover-opacity: var(--_unselected-hover-state-layer-opacity),
156-
focus-opacity: var(--_unselected-focus-state-layer-opacity),
157-
pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
162+
'hover-color': var(--_unselected-hover-state-layer-color),
163+
'focus-color': var(--_unselected-focus-state-layer-color),
164+
'pressed-color': var(--_unselected-pressed-state-layer-color),
165+
'hover-opacity': var(--_unselected-hover-state-layer-opacity),
166+
'focus-opacity': var(--_unselected-focus-state-layer-opacity),
167+
'pressed-opacity': var(--_unselected-pressed-state-layer-opacity),
158168
)
159169
);
160170
}

‎switch/lib/_icon.scss‎

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,29 +40,53 @@ $_easing-standard: map.get($_md-sys-motion, 'easing-standard');
4040
}
4141

4242
// rotate selected icon into view when there is no unselected icon
43-
.switch--unselected .handle:not(.handle--big) .icon--on {
43+
.switch--unselected .handle:not(.with-icon) .icon--on {
4444
transform: rotate(-45deg);
4545
}
4646

47-
.icon--on {
48-
width: var(--_selected-icon-size);
49-
height: var(--_selected-icon-size);
50-
fill: var(--_selected-icon-color);
51-
}
52-
5347
.icon--off {
5448
width: var(--_unselected-icon-size);
5549
height: var(--_unselected-icon-size);
5650
fill: var(--_unselected-icon-color);
5751
}
5852

59-
.switch--selected:disabled .icon--on {
60-
fill: var(--_disabled-selected-icon-color);
61-
opacity: var(--_disabled-selected-icon-opacity);
53+
.switch--unselected:hover .icon--off {
54+
fill: var(--_unselected-hover-icon-color);
55+
}
56+
57+
.switch--unselected:focus-within .icon--off {
58+
fill: var(--_unselected-focus-icon-color);
59+
}
60+
61+
.switch--unselected:active .icon--off {
62+
fill: var(--_unselected-pressed-icon-color);
6263
}
6364

6465
.switch--unselected:disabled .icon--off {
6566
fill: var(--_disabled-unselected-icon-color);
6667
opacity: var(--_disabled-unselected-icon-opacity);
6768
}
69+
70+
.icon--on {
71+
width: var(--_selected-icon-size);
72+
height: var(--_selected-icon-size);
73+
fill: var(--_selected-icon-color);
74+
}
75+
76+
.switch--selected:hover .icon--on {
77+
fill: var(--_selected-hover-icon-color);
78+
}
79+
80+
.switch--selected:focus-within .icon--on {
81+
fill: var(--_selected-focus-icon-color);
82+
}
83+
84+
.switch--selected:active .icon--on {
85+
fill: var(--_selected-pressed-icon-color);
86+
}
87+
88+
.switch--selected:disabled .icon--on {
89+
fill: var(--_disabled-selected-icon-color);
90+
opacity: var(--_disabled-selected-icon-opacity);
91+
}
6892
}

‎switch/lib/_switch.scss‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,6 @@
1515
@use './track';
1616
// go/keep-sorted end
1717

18-
$_forced-colors-theme: (
19-
disabled-selected-icon-color: GrayText,
20-
disabled-selected-icon-opacity: 1,
21-
disabled-selected-track-color: GrayText,
22-
disabled-track-opacity: 1,
23-
disabled-unselected-handle-color: GrayText,
24-
disabled-unselected-handle-opacity: 1,
25-
disabled-unselected-icon-color: Canvas,
26-
disabled-unselected-icon-opacity: 1,
27-
selected-focus-track-color: ButtonText,
28-
selected-hover-track-color: ButtonText,
29-
selected-icon-color: ButtonText,
30-
selected-pressed-track-color: ButtonText,
31-
selected-track-color: ButtonText,
32-
unselected-focus-handle-color: ButtonText,
33-
unselected-handle-color: ButtonText,
34-
unselected-hover-handle-color: ButtonText,
35-
unselected-icon-color: Canvas,
36-
unselected-pressed-handle-color: ButtonText,
37-
);
38-
3918
@mixin theme($tokens) {
4019
$supported-tokens: list.join(
4120
tokens.$md-comp-switch-supported-tokens,
@@ -104,11 +83,6 @@ $_forced-colors-theme: (
10483
var(--_track-shape)
10584
);
10685

107-
// TODO(b/230630968): create a forced-colors-mode mixin
108-
@media screen and (forced-colors: active) {
109-
@include theme($_forced-colors-theme);
110-
}
111-
11286
display: inline-flex;
11387
outline: none;
11488
vertical-align: top;

‎switch/lib/_track.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
background-color: var(--_selected-hover-track-color);
5151
}
5252

53-
.switch--selected:focus-visible .track::before {
53+
.switch--selected:focus-within .track::before {
5454
background-color: var(--_selected-focus-track-color);
5555
}
5656

‎switch/lib/forced-colors-styles.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
//
2+
// Copyright 2023 Google LLC
3+
// SPDX-License-Identifier: Apache-2.0
4+
//
5+
6+
// go/keep-sorted start
7+
@use './switch';
8+
// go/keep-sorted end
9+
10+
@media (forced-colors: active) {
11+
:host {
12+
@include switch.theme(
13+
(
14+
'disabled-selected-icon-color': GrayText,
15+
'disabled-selected-icon-opacity': 1,
16+
'disabled-selected-track-color': GrayText,
17+
'disabled-track-opacity': 1,
18+
'disabled-unselected-handle-color': GrayText,
19+
'disabled-unselected-handle-opacity': 1,
20+
'disabled-unselected-icon-color': Canvas,
21+
'disabled-unselected-icon-opacity': 1,
22+
'selected-focus-track-color': ButtonText,
23+
'selected-hover-track-color': ButtonText,
24+
'selected-icon-color': ButtonText,
25+
'selected-hover-icon-color': ButtonText,
26+
'selected-focus-icon-color': ButtonText,
27+
'selected-pressed-icon-color': ButtonText,
28+
'selected-pressed-track-color': ButtonText,
29+
'selected-track-color': ButtonText,
30+
'unselected-focus-handle-color': ButtonText,
31+
'unselected-handle-color': ButtonText,
32+
'unselected-hover-handle-color': ButtonText,
33+
'unselected-icon-color': Canvas,
34+
'unselected-hover-icon-color': Canvas,
35+
'unselected-focus-icon-color': Canvas,
36+
'unselected-pressed-icon-color': Canvas,
37+
'unselected-pressed-handle-color': ButtonText,
38+
)
39+
);
40+
}
41+
}

‎switch/lib/switch.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export class Switch extends LitElement {
154154

155155
private renderHandle() {
156156
const classes = {
157-
'handle--big': this.icons && !this.showOnlySelectedIcon,
157+
'with-icon': this.icons || (this.showOnlySelectedIcon && this.selected),
158158
};
159159
return html`
160160
<span class="handle-container">

‎switch/switch.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
import {customElement} from 'lit/decorators.js';
88

9+
import {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';
910
import {Switch} from './lib/switch.js';
1011
import {styles} from './lib/switch-styles.css.js';
1112

@@ -27,5 +28,5 @@ declare global {
2728
*/
2829
@customElement('md-switch')
2930
export class MdSwitch extends Switch {
30-
static override styles = [styles];
31+
static override styles = [styles, forcedColorsStyles];
3132
}

‎switch/switch_test.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* @license
3+
* Copyright 2023 Google LLC
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
// import 'jasmine'; (google3-only)
8+
9+
import {createTokenTests} from '../testing/tokens.js';
10+
11+
import {MdSwitch} from './switch.js';
12+
13+
describe('<md-switch>', () => {
14+
describe('.styles', () => {
15+
createTokenTests(MdSwitch.styles);
16+
});
17+
});

0 commit comments

Comments
 (0)