feat(checkbox): Support customizing the color of the stroke in the ma…

…rked state (#3412)
material-components · Sep 13, 2018 · 7f47386 · 7f47386
1 parent 0da74d9
commit 7f47386
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md
@@ -119,16 +119,15 @@ The following mixins apply only to _enabled_ checkboxes. It is not currently pos
 
 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-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-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
 
 The ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.
 
-#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)`
+#### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)`
 
-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.
+Stroke and fill color may be customized independently in both the marked and unmarked state.
 
 All parameters are optional, and if left unspecified will use their default values.
 

diff --git a/packages/mdc-checkbox/_mixins.scss b/packages/mdc-checkbox/_mixins.scss
@@ -33,6 +33,7 @@
 @mixin mdc-checkbox-container-colors(
   $unmarked-stroke-color: $mdc-checkbox-border-color,
   $unmarked-fill-color: transparent,
+  $marked-stroke-color: $mdc-checkbox-baseline-theme-color,
   $marked-fill-color: $mdc-checkbox-baseline-theme-color,
   $generate-keyframes: true) {
   @include mdc-checkbox-unmarked-background-selector-enabled_ {
@@ -41,7 +42,7 @@
   }
 
   @include mdc-checkbox-marked-background-selector-enabled_ {
-    @include mdc-theme-prop(border-color, $marked-fill-color);
+    @include mdc-theme-prop(border-color, $marked-stroke-color);
     @include mdc-theme-prop(background-color, $marked-fill-color);
   }
 
@@ -51,7 +52,7 @@
 
     @include mdc-checkbox-container-keyframes_(
       $from-stroke-color: $unmarked-stroke-color,
-      $to-stroke-color: $marked-fill-color,
+      $to-stroke-color: $marked-stroke-color,
       $from-fill-color: $unmarked-fill-color,
       $to-fill-color: $marked-fill-color,
       $uid: $uid);

diff --git a/test/screenshot/spec/mdc-checkbox/fixture.scss b/test/screenshot/spec/mdc-checkbox/fixture.scss
@@ -33,6 +33,7 @@ $custom-checkbox-color: $material-color-red-300;
 .custom-checkbox--container-colors {
   @include mdc-checkbox-container-colors(
     $unmarked-stroke-color: $custom-checkbox-color,
+    $marked-stroke-color: $custom-checkbox-color,
     $marked-fill-color: $custom-checkbox-color
   );
 }