fix(pseudo-checkbox): simplify theming (#6082)

Currently the pseudo checkbox both inherits its colors via CSS and has a `color` input. This means that if we wanted to the keep it in sync with its parent component (e.g. a multi-select), we'd have to add some boilerplate that listens to changes, goes through and updates all of the checkboxes, and triggers change detection while avoiding the "changed after check" assertions.

Since the component is meant to be really lean and to inherit its colors from the parent, these changes remove the `color` input altogether in order to reduce the complexity and be clearer regarding the intended usage.

Since the same is true for the `md-option` component, I've removed the `md-options.{{ palette }}` selectors as well.

Fixes #6079.

Author: crisbeto

src/lib/core/option/_option-theme.scss

@@ -16,15 +16,15 @@
       background: mat-color($background, hover);
     }
 
-    &.mat-selected.mat-primary, .mat-primary &.mat-selected {
+    .mat-primary &.mat-selected {
       color: mat-color($primary);
     }
 
-    &.mat-selected.mat-accent, .mat-accent &.mat-selected {
+    .mat-accent &.mat-selected {
       color: mat-color($accent);
     }
 
-    &.mat-selected.mat-warn, .mat-warn &.mat-selected {
+    .mat-warn &.mat-selected {
       color: mat-color($warn);
     }
 

src/lib/core/option/option.html

@@ -1,8 +1,8 @@
 <span [ngSwitch]="_isCompatibilityMode" *ngIf="multiple">
   <mat-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchCase="true"
-      [state]="selected ? 'checked' : ''" color="primary"></mat-pseudo-checkbox>
+      [state]="selected ? 'checked' : ''"></mat-pseudo-checkbox>
   <md-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchDefault
-      [state]="selected ? 'checked' : ''" color="primary"></md-pseudo-checkbox>
+      [state]="selected ? 'checked' : ''"></md-pseudo-checkbox>
 </span>
 
 <ng-content></ng-content>

src/lib/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,17 +1,5 @@
 @import '../../theming/theming';
 
-@mixin _mat-pseudo-checkbox-inner-content-theme($theme, $palette-name) {
-  $palette: map-get($theme, $palette-name);
-  $color: mat-color($palette);
-
-  .mat-pseudo-checkbox-checked.mat-#{$palette-name},
-  .mat-pseudo-checkbox-indeterminate.mat-#{$palette-name},
-  .mat-#{$palette-name} .mat-pseudo-checkbox-checked,
-  .mat-#{$palette-name} .mat-pseudo-checkbox-indeterminate {
-    background: $color;
-  }
-}
-
 @mixin mat-pseudo-checkbox-theme($theme) {
   $is-dark-theme: map-get($theme, is-dark);
   $primary: map-get($theme, primary);
@@ -35,11 +23,28 @@
     }
   }
 
-  @include _mat-pseudo-checkbox-inner-content-theme($theme, primary);
-  @include _mat-pseudo-checkbox-inner-content-theme($theme, accent);
-  @include _mat-pseudo-checkbox-inner-content-theme($theme, warn);
+  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
+  // theme from their parent, rather than implementing their own theming, which is why we
+  // don't attach to the `mat-*` classes.
+  .mat-pseudo-checkbox-checked,
+  .mat-pseudo-checkbox-indeterminate,
+  .mat-accent .mat-pseudo-checkbox-checked,
+  .mat-accent .mat-pseudo-checkbox-indeterminate {
+    background: mat-color(map-get($theme, accent));
+  }
+
+  .mat-primary .mat-pseudo-checkbox-checked,
+  .mat-primary .mat-pseudo-checkbox-indeterminate {
+    background: mat-color(map-get($theme, primary));
+  }
+
+  .mat-warn .mat-pseudo-checkbox-checked,
+  .mat-warn .mat-pseudo-checkbox-indeterminate {
+    background: mat-color(map-get($theme, warn));
+  }
 
-  .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {
+  .mat-pseudo-checkbox-checked,
+  .mat-pseudo-checkbox-indeterminate {
     &.mat-pseudo-checkbox-disabled {
       background: $disabled-color;
     }

src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts

@@ -6,31 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  Component,
-  ViewEncapsulation,
-  Input,
-  ElementRef,
-  Renderer2,
-  ChangeDetectionStrategy,
-} from '@angular/core';
-import {CanColor, mixinColor} from '../../common-behaviors/color';
+import {Component, ViewEncapsulation, Input, ChangeDetectionStrategy} from '@angular/core';
 
 export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
 
-
-// Boilerplate for applying mixins to MdChip.
-/** @docs-private */
-export class MdPseudoCheckboxBase {
-  constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
-}
-export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent');
-
-
 /**
  * Component that shows a simplified checkbox without including any kind of "real" checkbox.
  * Meant to be used when the checkbox is purely decorative and a large number of them will be
  * included, such as for the options in a multi-select. Uses no SVGs or complex animations.
+ * Note that theming is meant to be handled by the parent element, e.g.
+ * `mat-primary .mat-pseudo-checkbox`.
  *
  * Note that this component will be completely invisible to screen-reader users. This is *not*
  * interchangeable with <md-checkbox> and should *not* be used if the user would directly interact
@@ -44,7 +29,6 @@ export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent');
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'md-pseudo-checkbox, mat-pseudo-checkbox',
   styleUrls: ['pseudo-checkbox.css'],
-  inputs: ['color'],
   template: '',
   host: {
     'class': 'mat-pseudo-checkbox',
@@ -53,14 +37,10 @@ export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent');
     '[class.mat-pseudo-checkbox-disabled]': 'disabled',
   },
 })
-export class MdPseudoCheckbox extends _MdPseudoCheckboxBase implements CanColor {
+export class MdPseudoCheckbox {
   /** Display state of the checkbox. */
   @Input() state: MdPseudoCheckboxState = 'unchecked';
 
   /** Whether the checkbox is disabled. */
   @Input() disabled: boolean = false;
-
-  constructor(elementRef: ElementRef, renderer: Renderer2) {
-    super(renderer, elementRef);
-  }
 }