fix(list): selection list checkbox theme overwritten by parent theme (#16939)

Fixes the theme of the pseudo checkbox inside the `mat-list-option` being overwritten if the list is placed inside of an element that has a different default theme. The issue comes from the default checkbox styles not being specific enough and the selection list not setting a class for `mat-accent`.

Fixes #16891.

Author: crisbeto

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

@@ -27,21 +27,23 @@
     color: $disabled-color;
   }
 
+  .mat-primary .mat-pseudo-checkbox-checked,
+  .mat-primary .mat-pseudo-checkbox-indeterminate {
+    background: mat-color(map-get($theme, primary));
+  }
+
   // 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.
+  // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
+  // in order to allow for the color to be overwritten if the checkbox is inside a parent that
+  // has `mat-accent` and is placed inside another parent that has `mat-primary`.
   .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));

src/material/list/selection-list.spec.ts

@@ -150,6 +150,24 @@ describe('MatSelectionList without forms', () => {
         .toBe(true);
     });
 
+    it('should explicitly set the `accent` color', () => {
+      const classList = listOptions[0].nativeElement.classList;
+
+      fixture.componentInstance.firstOptionColor = 'primary';
+      fixture.detectChanges();
+
+      expect(classList).toContain('mat-primary');
+      expect(classList).not.toContain('mat-accent');
+      expect(classList).not.toContain('mat-warn');
+
+      fixture.componentInstance.firstOptionColor = 'accent';
+      fixture.detectChanges();
+
+      expect(classList).not.toContain('mat-primary');
+      expect(classList).toContain('mat-accent');
+      expect(classList).not.toContain('mat-warn');
+    });
+
     it('should be able to deselect an option', () => {
       let testListItem = listOptions[2].injector.get<MatListOption>(MatListOption);
       let selectList =

src/material/list/selection-list.ts

@@ -101,8 +101,11 @@ export class MatSelectionListChange {
     '[class.mat-list-item-with-avatar]': '_avatar || _icon',
     // Manually set the "primary" or "warn" class if the color has been explicitly
     // set to "primary" or "warn". The pseudo checkbox picks up these classes for
-    // its theme. The accent theme palette is the default and doesn't need to be set.
+    // its theme.
     '[class.mat-primary]': 'color === "primary"',
+    // Even though accent is the default, we need to set this class anyway, because the  list might
+    // be placed inside a parent that has one of the other colors with a higher specificity.
+    '[class.mat-accent]': 'color !== "primary" && color !== "warn"',
     '[class.mat-warn]': 'color === "warn"',
     '[attr.aria-selected]': 'selected',
     '[attr.aria-disabled]': 'disabled',