From 86a4ba790e993958e32cbe9ba06ef11e112b46dc Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 7 Jan 2020 21:59:08 +0100 Subject: [PATCH] fix(material-experimental/mdc-tabs): incorrect tab text color in dark theme (#18068) Fixes the MDC-based tabs using the light theme text color for dark themes which has a very low contrast ratio. The issue comes from the fact that MDC's color is inside a variable which we have to override to account for our theming. --- src/material-experimental/mdc-tabs/_mdc-tabs.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/material-experimental/mdc-tabs/_mdc-tabs.scss b/src/material-experimental/mdc-tabs/_mdc-tabs.scss index 3fb930d88d83..d7ea9a341fc4 100644 --- a/src/material-experimental/mdc-tabs/_mdc-tabs.scss +++ b/src/material-experimental/mdc-tabs/_mdc-tabs.scss @@ -9,8 +9,14 @@ // variables to their original values and prevent unintended side effects from using this mixin. $orig-mdc-tab-text-label-color-active: $mdc-tab-text-label-color-active; $orig-mdc-tab-icon-color-active: $mdc-tab-icon-color-active; + $orig-mdc-tab-text-label-color-default: $mdc-tab-text-label-color-default; @include mat-using-mdc-theme($theme) { + // This value is the same as MDC's default, but MDC defines it once inside + // a variables file which means that we can't override it with our own palette. + $mdc-tab-text-label-color-default: + rgba(mdc-theme-prop-value(on-surface), $mdc-tab-text-label-opacity) !global; + @include _mat-mdc-tabs-palette-styles($mdc-tab-text-label-color-active); .mat-mdc-tab-group, .mat-mdc-tab-nav-bar { @@ -49,6 +55,7 @@ // Restore original values of MDC global variables. $mdc-tab-text-label-color-active: $orig-mdc-tab-text-label-color-active !global; $mdc-tab-icon-color-active: $orig-mdc-tab-icon-color-active !global; + $mdc-tab-text-label-color-default: $orig-mdc-tab-text-label-color-default !global; } @mixin _mat-mdc-tabs-background($background-color, $foreground-color) {