Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit e4b4fa7

Browse files
acdvorakacdvorak
authored
feat(switch): Add color theme mixins and update default color to secondary (#1411)
Resolves #1144
1 parent da9d48f commit e4b4fa7

File tree

7 files changed

+220
-76
lines changed

7 files changed

+220
-76
lines changed

‎demos/switch.html

Lines changed: 49 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@
4949
background-color: #333;
5050
}
5151

52-
section.example.mdc-theme--dark > h2 {
52+
section.example.mdc-theme--dark h2 {
5353
color: white;
5454
}
5555

56-
section.example.mdc-theme--dark > label {
56+
section.example.mdc-theme--dark label {
5757
color: white;
5858
}
5959
</style>
@@ -82,39 +82,66 @@
8282

8383
<section class="example">
8484
<h2>Switch on Light Theme</h2>
85-
<div class="mdc-switch">
86-
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
87-
<div class="mdc-switch__background">
88-
<div class="mdc-switch__knob"></div>
85+
<div class="demo-switch-wrapper">
86+
<div class="mdc-switch">
87+
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control"/>
88+
<div class="mdc-switch__background">
89+
<div class="mdc-switch__knob"></div>
90+
</div>
91+
</div>
92+
<label for="basic-switch" class="mdc-switch-label">off/on</label>
93+
</div>
94+
<div class="demo-switch-wrapper">
95+
<div class="mdc-switch demo-switch--custom">
96+
<input type="checkbox" id="basic-switch-custom" class="mdc-switch__native-control" checked/>
97+
<div class="mdc-switch__background">
98+
<div class="mdc-switch__knob"></div>
99+
</div>
89100
</div>
101+
<label for="basic-switch-custom" class="mdc-switch-label">custom color</label>
90102
</div>
91-
<label for="basic-switch" class="mdc-switch-label">off/on</label>
92103
</section>
93104
<section class="example">
94105
<h2>Switch on Light Theme - Disabled</h2>
95-
<div class="mdc-switch">
96-
<input type="checkbox"
97-
id="basic-switch--disabled"
98-
class="mdc-switch__native-control"
99-
disabled />
100-
<div class="mdc-switch__background">
101-
<div class="mdc-switch__knob"></div>
106+
<div class="demo-switch-wrapper">
107+
<div class="mdc-switch">
108+
<input type="checkbox"
109+
id="basic-switch--disabled"
110+
class="mdc-switch__native-control"
111+
disabled/>
112+
<div class="mdc-switch__background">
113+
<div class="mdc-switch__knob"></div>
114+
</div>
102115
</div>
116+
<label for="basic-switch--disabled" class="mdc-switch-label">off/on</label>
103117
</div>
104-
<label for="basic-switch--disabled" class="mdc-switch-label">off/on</label>
105118
</section>
106119

107120
<section class="example mdc-theme--dark">
108121
<h2>Switch on Dark Theme</h2>
109-
<div class="mdc-switch">
110-
<input type="checkbox"
111-
id="basic-switch--dark"
112-
class="mdc-switch__native-control"/>
113-
<div class="mdc-switch__background">
114-
<div class="mdc-switch__knob"></div>
122+
<div class="demo-switch-wrapper">
123+
<div class="mdc-switch">
124+
<input type="checkbox"
125+
id="basic-switch--dark"
126+
class="mdc-switch__native-control"/>
127+
<div class="mdc-switch__background">
128+
<div class="mdc-switch__knob"></div>
129+
</div>
130+
</div>
131+
<label for="basic-switch--dark" class="mdc-switch-label">off/on</label>
132+
</div>
133+
<div class="demo-switch-wrapper">
134+
<div class="mdc-switch demo-switch--custom">
135+
<input type="checkbox"
136+
id="basic-switch--dark-custom"
137+
class="mdc-switch__native-control"
138+
checked />
139+
<div class="mdc-switch__background">
140+
<div class="mdc-switch__knob"></div>
141+
</div>
115142
</div>
143+
<label for="basic-switch--dark-custom" class="mdc-switch-label">custom color</label>
116144
</div>
117-
<label for="basic-switch--dark" class="mdc-switch-label">off/on</label>
118145
</section>
119146

120147
<section class="example mdc-theme--dark">

‎demos/switch.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,18 @@
1616

1717
@import "./common";
1818
@import "../packages/mdc-switch/mdc-switch";
19+
@import "../packages/mdc-theme/color_palette";
1920
@import "../packages/mdc-typography/mdc-typography";
21+
22+
.demo-switch-wrapper {
23+
display: inline-block;
24+
margin-right: 16px;
25+
}
26+
27+
.demo-switch--custom {
28+
$color: $material-color-red-500;
29+
30+
@include mdc-switch-track-color($color);
31+
@include mdc-switch-knob-color($color);
32+
@include mdc-switch-focus-indicator-color($color);
33+
}

‎packages/mdc-switch/README.md

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,27 @@ npm install --save @material/switch
5959
<label for="another-basic-switch" class="mdc-switch-label">off/on</label>
6060
```
6161

62-
## Classes
62+
### Classes
6363

64-
### Block
64+
#### Block
6565

6666
The block class is `mdc-switch`. This defines the top-level switch element.
6767

68-
### Modifier
68+
#### Modifier
6969

7070
The provided modifiers are:
7171

72-
| Class | Description |
73-
| ----------------------| -------------------------------------------- |
74-
| `mdc-switch--disabled` | Applies disabled style to disabled switches. |
72+
| Class | Description |
73+
| -----------------------| -------------------------------------------- |
74+
| `mdc-switch--disabled` | Applies disabled style to disabled switches. |
75+
76+
### Sass Mixins
77+
78+
The following mixins apply only to _enabled_ switches in the _on_ (checked) state.
79+
It is not currently possible to customize the color of a _disabled_ or _off_ (unchecked) switch.
80+
81+
Mixin | Description
82+
--- | ---
83+
`mdc-switch-track-color($color)` | Sets the track color
84+
`mdc-switch-knob-color($color)` | Sets the knob color
85+
`mdc-switch-focus-indicator-color($color)` | Sets the focus indicator color

‎packages/mdc-switch/_functions.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
//
2+
// Copyright 2016 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
@import "@material/animation/variables";
18+
19+
@function mdc-switch-transition($property) {
20+
@return $property 90ms $mdc-animation-standard-curve-timing-function;
21+
}

‎packages/mdc-switch/_mixins.scss

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
//
2+
// Copyright 2016 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
@import "@material/theme/mixins";
18+
@import "./variables";
19+
20+
//
21+
// Public
22+
//
23+
24+
@mixin mdc-switch-track-color($color) {
25+
.mdc-switch__native-control:enabled:checked ~ .mdc-switch__background::before {
26+
@include mdc-theme-prop(background-color, $color);
27+
}
28+
}
29+
30+
@mixin mdc-switch-knob-color($color) {
31+
// stylelint-disable-next-line selector-max-specificity
32+
.mdc-switch__native-control:enabled:checked ~ .mdc-switch__background .mdc-switch__knob {
33+
@include mdc-theme-prop(background-color, $color);
34+
}
35+
}
36+
37+
@mixin mdc-switch-focus-indicator-color($color) {
38+
// stylelint-disable-next-line selector-max-specificity
39+
.mdc-switch__native-control:enabled:checked ~ .mdc-switch__background .mdc-switch__knob::before {
40+
@include mdc-theme-prop(background-color, $color);
41+
}
42+
}
43+
44+
//
45+
// Private
46+
//
47+
48+
@mixin mdc-switch-unchecked-track-color_($color) {
49+
.mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background::before {
50+
@include mdc-theme-prop(background-color, $color);
51+
}
52+
}
53+
54+
@mixin mdc-switch-unchecked-knob-color_($color) {
55+
// stylelint-disable-next-line selector-max-specificity
56+
.mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background .mdc-switch__knob {
57+
@include mdc-theme-prop(background-color, $color);
58+
}
59+
}
60+
61+
@mixin mdc-switch-unchecked-focus-indicator-color_($color) {
62+
// stylelint-disable-next-line selector-max-specificity
63+
.mdc-switch__native-control:enabled:not(:checked) ~ .mdc-switch__background .mdc-switch__knob::before {
64+
@include mdc-theme-prop(background-color, $color);
65+
}
66+
}
67+
68+
@mixin mdc-switch-tap-target_ {
69+
position: absolute;
70+
top: -14px;
71+
left: -14px;
72+
width: $mdc-switch-focus-ring-diameter;
73+
height: $mdc-switch-focus-ring-diameter;
74+
}

‎packages/mdc-switch/_variables.scss

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
//
1+
//
22
// Copyright 2016 Google Inc. All Rights Reserved.
3-
//
3+
//
44
// Licensed under the Apache License, Version 2.0 (the "License");
55
// you may not use this file except in compliance with the License.
66
// You may obtain a copy of the License at
7-
//
7+
//
88
// http://www.apache.org/licenses/LICENSE-2.0
9-
//
9+
//
1010
// Unless required by applicable law or agreed to in writing, software
1111
// distributed under the License is distributed on an "AS IS" BASIS,
1212
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1313
// See the License for the specific language governing permissions and
1414
// limitations under the License.
15-
//
15+
//
1616

1717
$mdc-switch-track-width: 34px;
1818
$mdc-switch-track-height: 14px;
@@ -28,3 +28,7 @@ $mdc-switch-unchecked-track-color-dark: #fff;
2828
$mdc-switch-unchecked-focus-ring-color-dark: #f1f1f1;
2929
$mdc-switch-disabled-knob-color: #bdbdbd;
3030
$mdc-switch-disabled-knob-color-dark: #424242;
31+
32+
$mdc-switch-baseline-theme-color: secondary;
33+
34+
$mdc-switch-knob-vertical-offset_: -3px;

0 commit comments

Comments
 (0)