From 439ad2c59db31824ed6f4dcec16823f704852923 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 18 Jan 2022 17:00:15 +0100 Subject: [PATCH] fix(material/list): fix up disabled list item styles (#18881) Fixes a couple of issues with the list item's disabled styles: - In dark themes we were setting the disabled styles to black. This looks out of place since it's not how other components style themselves under dark themes. - The disabled styles are somewhat similar to the selected styles. These changes also set the text color to the disabled text color to make it easier to distinguish. (cherry picked from commit 350ab4d87eddc534cbae6ab7d2933fd773e7f965) --- src/material/core/theming/_palette.scss | 2 +- src/material/list/_list-theme.scss | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/material/core/theming/_palette.scss b/src/material/core/theming/_palette.scss index 10fa42bf4553..e2b5faada05c 100644 --- a/src/material/core/theming/_palette.scss +++ b/src/material/core/theming/_palette.scss @@ -705,7 +705,7 @@ $dark-theme-background-palette: ( selected-disabled-button: map.get($grey-palette, 800), disabled-button-toggle: black, unselected-chip: map.get($grey-palette, 700), - disabled-list-option: black, + disabled-list-option: rgba(white, 0.12), tooltip: map.get($grey-palette, 700), ); diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index 6cbe89e7fe5a..c3721145362b 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -22,10 +22,11 @@ .mat-subheader { color: theming.get-color-from-palette($foreground, secondary-text); } - } - .mat-list-item-disabled { - background-color: theming.get-color-from-palette($background, disabled-list-option); + .mat-list-item-disabled { + background-color: theming.get-color-from-palette($background, disabled-list-option); + color: theming.get-color-from-palette($foreground, disabled-text); + } } .mat-list-option,