fix(checkbox): not handling unknown color palette

Fixes the checkbox component not falling back to the default color, if the color is `undefined`. We need to handle this, because `ThemePalette` allows `undefined`.

Fixes #18465.

Author: crisbeto

src/material-experimental/mdc-checkbox/checkbox.spec.ts

@@ -7,6 +7,7 @@ import {
   flushMicrotasks,
   TestBed,
 } from '@angular/core/testing';
+import {ThemePalette} from '@angular/material/core';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {
@@ -467,6 +468,13 @@ describe('MDC-based MatCheckbox', () => {
            expect(checkboxNativeElement.classList.contains('mat-accent')).toBe(true);
            expect(checkboxNativeElement.classList.contains('custom-class')).toBe(true);
          }));
+
+      it('should default to accent if no color is passed in', fakeAsync(() => {
+        testComponent.checkboxColor = undefined;
+        fixture.detectChanges();
+        expect(checkboxNativeElement.classList).toContain('mat-accent');
+      }));
+
     });
 
     describe(`when MAT_CHECKBOX_CLICK_ACTION is set`, () => {
@@ -1052,7 +1060,7 @@ class SingleCheckbox {
   parentElementClicked: boolean = false;
   parentElementKeyedUp: boolean = false;
   checkboxId: string|null = 'simple-check';
-  checkboxColor: string = 'primary';
+  checkboxColor: ThemePalette = 'primary';
   checkboxValue: string = 'single_checkbox';
 
   onCheckboxClick: (event?: Event) => void = () => {};

src/material-experimental/mdc-checkbox/checkbox.ts

@@ -59,9 +59,9 @@ export class MatCheckboxChange {
   host: {
     'class': 'mat-mdc-checkbox',
     '[attr.tabindex]': 'null',
-    '[class.mat-primary]': 'color == "primary"',
-    '[class.mat-accent]': 'color == "accent"',
-    '[class.mat-warn]': 'color == "warn"',
+    '[class.mat-primary]': 'color === "primary"',
+    '[class.mat-accent]': 'color !== "primary" && color !== "warn"',
+    '[class.mat-warn]': 'color === "warn"',
     '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`,
     '[class.mdc-checkbox--disabled]': 'disabled',
     '[id]': 'id',

src/material/checkbox/checkbox.spec.ts

@@ -465,8 +465,14 @@ describe('MatCheckbox', () => {
         expect(checkboxNativeElement.classList.contains('mat-primary')).toBe(false);
         expect(checkboxNativeElement.classList.contains('mat-accent')).toBe(true);
         expect(checkboxNativeElement.classList.contains('custom-class')).toBe(true);
+      });
 
+      it('should default to accent if no color is passed in', () => {
+        testComponent.checkboxColor = undefined;
+        fixture.detectChanges();
+        expect(checkboxNativeElement.classList).toContain('mat-accent');
       });
+
     });
 
     describe('state transition css classes', () => {

src/material/checkbox/checkbox.ts

@@ -100,7 +100,7 @@ const _MatCheckboxMixinBase:
     CanDisableRippleCtor &
     CanDisableCtor &
     typeof MatCheckboxBase =
-        mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase))));
+        mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'));
 
 
 /**