[Checkbox] Theme flashes the secondary color after click about material-components-web-catalog HOT 2 CLOSED

I think the catalog usage needs to be updated, here the demo of latest checkbox with custom theme:
https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/08/19_30_20_273/spec/mdc-checkbox/mixins/container-colors.html?utm_source=golden_json

Here is the usage:
https://github.com/material-components/material-components-web/blob/master/test/screenshot/spec/mdc-checkbox/fixture.scss

I'm transferring this issue to catalog repo.

from material-components-web-catalog.

Actually theme demo already removed, but problem was in the way of styling components in demo:

.theme-demo {
  $mdc-theme-primary: #fcb8ab;
  $mdc-theme-secondary: #feeae6;

  @import "@material/checkbox/mdc-checkbox";
}

<div class="theme-demo">
  <div className='mdc-checkbox'>...</div>
</div>

In this case because of this condition wrong class for checkbox animation was generated .theme-demo.mdc-checkbox--anim-unchecked-checked .... (without space after .theme-demo).

Two components mdc-top-app-bar and mdc-checkbox are affected by this problem.

Including whole components style inside parent selector is considered as a bad practice, so no fixes on components side required. Since this code already removed from material-components-web-catalog no additional actions required.

Closing this issue.

from material-components-web-catalog.