feat(icon-toggle): Add color theme mixin; remove --primary/--accent m…

…odifiers (#1717)

BREAKING CHANGE: The `--primary` and `--accent` CSS modifier classes have been removed in favor of the new mixin.

Resolves #1147

demos/icon-toggle.html

@@ -105,36 +105,6 @@ <h2 class="mdc-theme--text-primary-on-dark">Dark Theme</h2>
           </div>
         </div>
 
-        <div class="toggle-example">
-          <h2>Primary Colored Icons</h2>
-          <div class="demo-wrapper">
-            <i class="mdc-icon-toggle mdc-icon-toggle--primary material-icons"
-               role="button"
-               aria-label="Add to favorites"
-               aria-pressed="false"
-               tabindex="0"
-               data-toggle-on='{"content": "favorite", "label": "Remove From Favorites"}'
-               data-toggle-off='{"content": "favorite_border", "label": "Add to Favorites"}'>
-              favorite_border
-            </i>
-          </div>
-        </div>
-
-        <div class="toggle-example">
-          <h2>Secondary Colored Icons</h2>
-          <div class="demo-wrapper">
-            <i class="mdc-icon-toggle mdc-icon-toggle--accent material-icons"
-               role="button"
-               aria-label="Add to favorites"
-               aria-pressed="false"
-               tabindex="0"
-               data-toggle-on='{"content": "favorite", "label": "Remove From Favorites"}'
-               data-toggle-off='{"content": "favorite_border", "label": "Add to Favorites"}'>
-              favorite_border
-            </i>
-          </div>
-        </div>
-
         <div class="toggle-example">
           <h2>Disabled Icons</h2>
           <div class="demo-wrapper">
@@ -165,7 +135,6 @@ <h2>Disabled Icons</h2>
           </div>
         </div>
 
-
         <div class="toggle-example">
           <h2>Additional Color Combinations</h2>
           <div id="demo-color-combos">

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);

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
 <i class="mdc-icon-toggle material-icons" role="button" aria-pressed="false"
@@ -92,11 +93,11 @@ allows MDCIconToggle to be so flexible. The `data-toggle-on` configuration will
 MDCIconToggle is toggled on, and vice versa for `data-toggle-off`. Both data attributes are encoded
 as JSON and can contain the following properties:
 
-| Property | Description |
-| --- | --- |
-| `label` | The value to apply to the element's "aria-label" attribute. |
-| `content` | The text content to set on the element. Note that if an inner icon is used, the text content will be set on that element instead. |
-| `cssClass` | A css class to apply to the icon element for the given toggle state. The same rules regarding inner icon elements described for `content` apply here as well. |
+Property | Description
+--- | ---
+`label` | The value to apply to the element's "aria-label" attribute.
+`content` | The text content to set on the element. Note that if an inner icon is used, the text content will be set on that element instead.
+`cssClass` | A css class to apply to the icon element for the given toggle state. The same rules regarding inner icon elements described for `content` apply here as well.
 
 ### Disabled icon toggles
 
@@ -106,12 +107,6 @@ as JSON and can contain the following properties:
    data-toggle-on='{"content": "favorite"}' data-toggle-off='{"content": "favorite_border"}'></i>
 ```
 
-### 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

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);
+}

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 {