From 2b06b90680bf6662d3a4b53f87199e1f40d37cd8 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 1 Sep 2019 15:07:07 +0200
Subject: [PATCH] fix(list): selection list checkbox theme overwritten by
 parent theme

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.
---
 .../_pseudo-checkbox-theme.scss                | 14 ++++++++------
 src/material/list/selection-list.spec.ts       | 18 ++++++++++++++++++
 src/material/list/selection-list.ts            |  5 ++++-
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
index edc813b39dc1..42a87bba2ef5 100644
--- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
+++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
@@ -27,9 +27,16 @@
     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,
@@ -37,11 +44,6 @@
     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));
diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts
index 58c475a4ae90..1e2122589e72 100644
--- a/src/material/list/selection-list.spec.ts
+++ b/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 =
diff --git a/src/material/list/selection-list.ts b/src/material/list/selection-list.ts
index 6f2f96b5e603..5a5c83e7c8b9 100644
--- a/src/material/list/selection-list.ts
+++ b/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',