diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md index 6f453cdb037..09c66a06000 100644 --- 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 index b0b33e257e1..857826d518d 100644 --- 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 index 58453d454f2..7dd29ca3665 100644 --- 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 ); }