Additional Color Combinations
diff --git a/demos/icon-toggle.scss b/demos/icon-toggle.scss
index 654f66ec4a8..dfa243d6011 100644
--- a/demos/icon-toggle.scss
+++ b/demos/icon-toggle.scss
@@ -60,7 +60,7 @@
background-color: #3e82f7;
}
#light-on-bg .mdc-icon-toggle {
- color: white;
+ @include mdc-icon-toggle-ink-color(white);
@include mdc-states-base-color(white);
@include mdc-states-hover-opacity(.1);
@include mdc-states-focus-opacity(.3);
@@ -71,12 +71,12 @@
background-color: #00bcd6;
}
#dark-on-bg .mdc-icon-toggle {
- color: black;
+ @include mdc-icon-toggle-ink-color(black);
@include mdc-states(black);
}
#custom-on-dark .mdc-icon-toggle {
- color: #de442c;
+ @include mdc-icon-toggle-ink-color(#de442c);
@include mdc-states-base-color(#de442c);
@include mdc-states-hover-opacity(.09);
@include mdc-states-focus-opacity(.26);
diff --git a/packages/mdc-icon-toggle/README.md b/packages/mdc-icon-toggle/README.md
index 5b030ff80de..2462621ae9d 100644
--- a/packages/mdc-icon-toggle/README.md
+++ b/packages/mdc-icon-toggle/README.md
@@ -37,7 +37,8 @@ npm install --save @material/icon-toggle
## Usage
-In order to use MDC Icon Toggle, you will need to import an icon set, such as [Material Icons](https://design.google.com/icons/) or [Font Awesome](http://fontawesome.io/).
+In order to use MDC Icon Toggle, you will need to import an icon set, such as
+[Material Icons](https://design.google.com/icons/) or [Font Awesome](http://fontawesome.io/).
```html
```
-### Theming
-
-`mdc-icon-toggle` ships with two css classes, `mdc-icon-toggle--primary` and
-`mdc-icon-toggle--accent` that allow you to color mdc-icon-toggle based on your primary and secondary
-colors, respectively.
-
### Listening for change events
`MDCIconToggle` emits an `MDCIconToggle:change` custom event when the value of the icon toggle
@@ -168,19 +163,19 @@ can use to build their own MDCIconToggle components with minimal effort. As with
classes, an adapter object must be provided. The adapter for icon toggles must provide the following
functions, with correct signatures:
-| Method Signature | Description |
-| --- | --- |
-| `addClass(className: string) => void` | Adds a class to the root element, or the inner icon element. |
-| `removeClass(className: string) => void` | Removes a class from the root element, or the inner icon element. |
-| `registerInteractionHandler(type: string, handler: EventListener) => void` | Registers an event handler for an interaction event, such as `click` or `keydown`. |
-| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event handler for an interaction event, such as `click` or `keydown`. |
-| `setText(text: string) => void` | Sets the text content of the root element, or the inner icon element. |
-| `getTabIndex() => number` | Returns the tab index of the root element. |
-| `setTabIndex(tabIndex: number) => void` | Sets the tab index of the root element. |
-| `getAttr(name: string) => string` | Returns the value of the attribute `name` on the root element. Can also return `null`, similar to `getAttribute()`. |
-| `setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element. |
-| `rmAttr(name: string) => void` | Removes the attribute `name` on the root element. |
-| `notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this. |
+Method Signature | Description
+--- | ---
+`addClass(className: string) => void` | Adds a class to the root element, or the inner icon element.
+`removeClass(className: string) => void` | Removes a class from the root element, or the inner icon element.
+`registerInteractionHandler(type: string, handler: EventListener) => void` | Registers an event handler for an interaction event, such as `click` or `keydown`.
+`deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event handler for an interaction event, such as `click` or `keydown`.
+`setText(text: string) => void` | Sets the text content of the root element, or the inner icon element.
+`getTabIndex() => number` | Returns the tab index of the root element.
+`setTabIndex(tabIndex: number) => void` | Sets the tab index of the root element.
+`getAttr(name: string) => string` | Returns the value of the attribute `name` on the root element. Can also return `null`, similar to `getAttribute()`.
+`setAttr(name: string, value: string) => void` | Sets the attribute `name` to `value` on the root element.
+`rmAttr(name: string) => void` | Removes the attribute `name` on the root element.
+`notifyChange(evtData: {isOn: boolean}) => void` | Broadcasts a change notification, passing along the `evtData` to the environment's event handling system. In our vanilla implementation, Custom Events are used for this.
#### Adapter implementer considerations
@@ -224,3 +219,9 @@ Enables / disables the foundation's state, updating the component via the adapte
Returns true if the foundation is currently activated by a keyboard event, false otherwise.
Useful for MDCRippleFoundation's `isSurfaceActive()` adapter method.
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-icon-toggle-ink-color($color)` | Sets the ink color of the icon toggle
diff --git a/packages/mdc-icon-toggle/_mixins.scss b/packages/mdc-icon-toggle/_mixins.scss
new file mode 100644
index 00000000000..0c54724e06d
--- /dev/null
+++ b/packages/mdc-icon-toggle/_mixins.scss
@@ -0,0 +1,21 @@
+//
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/theme/mixins";
+
+@mixin mdc-icon-toggle-ink-color($color) {
+ @include mdc-theme-prop(color, $color);
+}
diff --git a/packages/mdc-icon-toggle/mdc-icon-toggle.scss b/packages/mdc-icon-toggle/mdc-icon-toggle.scss
index 943a44486b3..27fd3de1447 100644
--- a/packages/mdc-icon-toggle/mdc-icon-toggle.scss
+++ b/packages/mdc-icon-toggle/mdc-icon-toggle.scss
@@ -19,15 +19,17 @@
@import "@material/animation/functions";
@import "@material/ripple/mixins";
@import "@material/theme/mixins";
+@import "./mixins";
.mdc-icon-toggle {
- @include mdc-theme-prop(color, text-secondary-on-light);
@include mdc-ripple-surface;
@include mdc-ripple-radius;
@include mdc-states(black);
+ @include mdc-icon-toggle-ink-color(text-primary-on-light);
@include mdc-theme-dark(".mdc-icon-toggle", true) {
@include mdc-states(white);
+ @include mdc-icon-toggle-ink-color(text-primary-on-dark);
}
display: flex;
@@ -52,20 +54,6 @@
pointer-events: none;
content: "";
}
-
- @include mdc-theme-dark {
- @include mdc-theme-prop(color, text-primary-on-dark);
- }
-}
-
-.mdc-icon-toggle--primary {
- @include mdc-theme-prop(color, primary);
- @include mdc-states(primary);
-}
-
-.mdc-icon-toggle--accent {
- @include mdc-theme-prop(color, secondary);
- @include mdc-states(secondary);
}
.mdc-icon-toggle--disabled {