feat(checkbox): Add color theme mixins and update default color to secondary (#1365)

- Removed `[aria-disabled="true"]` selector, as it doesn't appear to be necessary
- Fixed preexisting state transition color animation bugs

Resolves #1146

Author: acdvorak

demos/checkbox.html

@@ -15,6 +15,34 @@
 //
 
 @import "./common";
+@import "../packages/mdc-button/mdc-button";
 @import "../packages/mdc-checkbox/mdc-checkbox";
 @import "../packages/mdc-form-field/mdc-form-field";
+@import "../packages/mdc-theme/color_palette";
+@import "../packages/mdc-theme/mixins";
 @import "../packages/mdc-typography/mdc-typography";
+
+.mdc-checkbox.demo-checkbox--custom-all {
+  $color: $material-color-red-500;
+
+  @include mdc-checkbox-focus-indicator-color($color);
+  @include mdc-checkbox-ripple((base-color: $color, opacity: $mdc-checkbox-ripple-opacity));
+  @include mdc-checkbox-container-colors(
+    $unmarked-stroke-color: $color,
+    $unmarked-fill-color: rgba($color, .25),
+    $marked-fill-color: $color);
+
+  @include mdc-theme-dark(".mdc-checkbox", $compound: true) {
+    @include mdc-checkbox-ink-color(black);
+    @include mdc-checkbox-container-colors(
+      $unmarked-stroke-color: $color,
+      $unmarked-fill-color: rgba($color, .35),
+      $marked-fill-color: $color);
+  }
+}
+
+.mdc-checkbox.demo-checkbox--custom-stroke-and-fill {
+  @include mdc-checkbox-container-colors(
+    $unmarked-stroke-color: $material-color-blue-500,
+    $marked-fill-color: $material-color-purple-500);
+}

demos/checkbox.scss

@@ -91,6 +91,8 @@ easily position checkboxes and their labels.
 
 #### Disabled Checkboxes
 
+Note that `mdc-checkbox--disabled` is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a `disabled` attribute on the `<input>` element is sufficient.
+
 ```html
 <div class="mdc-checkbox mdc-checkbox--disabled">
   <input type="checkbox"
@@ -111,8 +113,6 @@ easily position checkboxes and their labels.
 <label for="basic-disabled-checkbox" id="basic-disabled-checkbox-label">This is my disabled checkbox</label>
 ```
 
-Note that `mdc-checkbox--disabled` is necessary on the root element to prevent hover states from activating.
-
 ### Using the JS Component
 
 MDC Checkbox ships with a Component / Foundation combo which progressively enhances the checkbox
@@ -255,8 +255,30 @@ not return an object.
 
 ## Theming
 
-MDC Checkboxes use the theme's primary color by default for checked and indeterminate states, and are completely dark theme
-aware.
+MDC Checkboxes use the theme's secondary color by default for "marked" states (i.e., checked or indeterminate), and are completely dark theme aware.
+
+### Sass Mixins
+
+The following mixins apply only to _enabled_ checkboxes. It is not currently possible to customize the color of a _disabled_ checkbox.
+
+Mixin | Description
+--- | ---
+`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox
+`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons
+`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator
+`mdc-checkbox-ripple($ripple-config)` | Sets the ripple to the given [ripple configuration][ripple-readme]
+
+[ripple-readme]: https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/README.md
+
+#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)`
+
+Generates CSS classes to set the container stroke color and/or fill color of a checkbox in its marked and unmarked states.
+In the unmarked state, stroke and fill color may be customized independently; in the marked state, only the fill color
+may be customized, and the stroke will automatically match the fill color.
+
+All parameters are optional, and if left unspecified will use their default values.
+
+If you plan to use CSS-only checkboxes, set `$generate-keyframes` to `false` to prevent the mixin from generating `@keyframes` and CSS classes used by the JavaScript component.
 
 ### Caveat: Edge and CSS Variables
 

packages/mdc-checkbox/README.md

@@ -0,0 +1,33 @@
+//
+// Copyright 2016 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/functions";
+
+$mdc-checkbox-container-keyframes-uid_: -1;
+
+@function mdc-checkbox-transition-enter($property, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
+  @return mdc-animation-enter($property, $duration, $delay);
+}
+
+@function mdc-checkbox-transition-exit($property, $delay: 0ms, $duration: $mdc-checkbox-transition-duration) {
+  @return mdc-animation-exit-temporary($property, $duration, $delay);
+}
+
+@function mdc-checkbox-container-keyframes-uid_() {
+  $mdc-checkbox-container-keyframes-uid_: $mdc-checkbox-container-keyframes-uid_ + 1 !global;
+
+  @return $mdc-checkbox-container-keyframes-uid_;
+}

packages/mdc-checkbox/_functions.scss

@@ -18,60 +18,42 @@
 @import "@material/theme/mixins";
 @import "./variables";
 
-@keyframes mdc-checkbox-fade-in-background {
-  0% {
-    border-color: $mdc-checkbox-border-color;
-    background-color: transparent;
-  }
-
-  50% {
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-  }
-}
-
-@keyframes mdc-checkbox-fade-out-background {
-  0%,
-  80% {
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-  }
-
-  100% {
-    border-color: $mdc-checkbox-border-color;
-    background-color: transparent;
-  }
-}
-
-@keyframes mdc-checkbox-fade-in-background-dark {
-  0% {
-    border-color: $mdc-checkbox-border-color-dark;
-    background-color: transparent;
-  }
-
-  50% {
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-  }
-}
-
-@keyframes mdc-checkbox-fade-out-background-dark {
-  0%,
-  80% {
-    @include mdc-theme-prop(border-color, primary);
-    @include mdc-theme-prop(background-color, primary);
-  }
-
-  100% {
-    border-color: $mdc-checkbox-border-color-dark;
-    background-color: transparent;
+@mixin mdc-checkbox-container-keyframes_(
+  $from-stroke-color,
+  $to-stroke-color,
+  $from-fill-color,
+  $to-fill-color,
+  $uid) {
+  @keyframes mdc-checkbox-fade-in-background-#{$uid} {
+    0% {
+      @include mdc-theme-prop(border-color, $from-stroke-color);
+      @include mdc-theme-prop(background-color, $from-fill-color);
+    }
+
+    50% {
+      @include mdc-theme-prop(border-color, $to-stroke-color);
+      @include mdc-theme-prop(background-color, $to-fill-color);
+    }
+  }
+
+  @keyframes mdc-checkbox-fade-out-background-#{$uid} {
+    0%,
+    80% {
+      @include mdc-theme-prop(border-color, $to-stroke-color);
+      @include mdc-theme-prop(background-color, $to-fill-color);
+    }
+
+    100% {
+      @include mdc-theme-prop(border-color, $from-stroke-color);
+      @include mdc-theme-prop(background-color, $from-fill-color);
+    }
   }
 }
 
 @keyframes mdc-checkbox-unchecked-checked-checkmark-path {
   0%,
   50% {
-    stroke-dashoffset: $_mdc-checkbox-mark-path-length;
+    stroke-dashoffset: $mdc-checkbox-mark-path-length_;
   }
 
   50% {
@@ -107,7 +89,7 @@
 
   to {
     opacity: 0;
-    stroke-dashoffset: $_mdc-checkbox-mark-path-length * -1;
+    stroke-dashoffset: $mdc-checkbox-mark-path-length_ * -1;
   }
 }
 
@@ -126,7 +108,7 @@
 
 @keyframes mdc-checkbox-indeterminate-checked-checkmark {
   from {
-    animation-timing-function: $_mdc-checkbox-indeterminate-checked-easing-function;
+    animation-timing-function: $mdc-checkbox-indeterminate-checked-easing-function_;
     transform: rotate(45deg);
     opacity: 0;
   }
@@ -152,7 +134,7 @@
 
 @keyframes mdc-checkbox-indeterminate-checked-mixedmark {
   from {
-    animation-timing-function: $_mdc-checkbox-indeterminate-checked-easing-function;
+    animation-timing-function: $mdc-checkbox-indeterminate-checked-easing-function_;
     transform: rotate(0deg);
     opacity: 1;
   }