From c6015b08a40bdbbaf909ded0aca93cb80d29ee79 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sun, 2 May 2021 13:25:04 +0200
Subject: [PATCH] fix(material/tabs): coloring issues when a backgroundColor is
 set

Resolves several issues related to the color of icons and ripples in the tab header, when it has a non-default `backgroundColor`.

Fixes #22587.
---
 src/material-experimental/mdc-tabs/_tabs-common.scss |  5 ++++-
 src/material-experimental/mdc-tabs/_tabs-theme.scss  | 12 +++++++++---
 src/material-experimental/mdc-tabs/tab-header.scss   |  6 ------
 src/material/tabs/_tabs-theme.scss                   |  7 +++++--
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
index 3daa19355cf6..cf2b15e0abc3 100644
--- a/src/material-experimental/mdc-tabs/_tabs-common.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-common.scss
@@ -129,8 +129,11 @@ $mat-tab-animation-duration: 500ms !default;
   .mat-mdc-tab-header-pagination-disabled {
     box-shadow: none;
     cursor: default;
-    opacity: 0.4;
     pointer-events: none;
+
+    .mat-mdc-tab-header-pagination-chevron {
+      opacity: 0.4;
+    }
   }
 
   .mat-mdc-tab-list {
diff --git a/src/material-experimental/mdc-tabs/_tabs-theme.scss b/src/material-experimental/mdc-tabs/_tabs-theme.scss
index 6a83b77cc892..580ccbee371d 100644
--- a/src/material-experimental/mdc-tabs/_tabs-theme.scss
+++ b/src/material-experimental/mdc-tabs/_tabs-theme.scss
@@ -77,13 +77,19 @@
       @include mdc-theme.prop(color, $foreground-color);
     }
 
+    .mdc-tab-indicator__content--underline,
+    .mat-mdc-tab-header-pagination-chevron,
+    .mat-mdc-focus-indicator::before {
+      @include mdc-theme.prop(border-color, $foreground-color);
+    }
+  }
+
+  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container, > .mat-mdc-tab-header-pagination {
     .mat-ripple-element, .mdc-tab__ripple::before {
       @include mdc-theme.prop(background-color, $foreground-color);
     }
 
-    .mdc-tab-indicator__content--underline, .mat-mdc-tab-header-pagination-chevron,
-    .mat-mdc-focus-indicator::before,
-    .mat-mdc-focus-indicator::before {
+    .mat-mdc-tab-header-pagination-chevron {
       @include mdc-theme.prop(border-color, $foreground-color);
     }
   }
diff --git a/src/material-experimental/mdc-tabs/tab-header.scss b/src/material-experimental/mdc-tabs/tab-header.scss
index 30d5a65b2afb..cc6ac77cef7d 100644
--- a/src/material-experimental/mdc-tabs/tab-header.scss
+++ b/src/material-experimental/mdc-tabs/tab-header.scss
@@ -9,12 +9,6 @@
   @include tabs-common.paginated-tab-header-container;
 }
 
-.mat-mdc-tab-header-pagination-disabled {
-  box-shadow: none;
-  cursor: default;
-  opacity: 0.4;
-}
-
 .mat-mdc-tab-labels {
   @include tabs-common.paginated-tab-header-item-wrapper('.mat-mdc-tab-header');
 }
diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss
index 3a2063372931..b5bb4d8da4e4 100644
--- a/src/material/tabs/_tabs-theme.scss
+++ b/src/material/tabs/_tabs-theme.scss
@@ -117,12 +117,14 @@
   }
 
   // Set pagination chevrons to contrast background
+  > .mat-tab-header .mat-tab-header-pagination-chevron,
   > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
-  > .mat-tab-links .mat-focus-indicator::before,
+  > .mat-tab-link-container .mat-focus-indicator::before,
   > .mat-tab-header .mat-focus-indicator::before {
     border-color: theming.get-color-from-palette($background-color, default-contrast);
   }
 
+  > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
   > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
     border-color: theming.get-color-from-palette($background-color, default-contrast, 0.4);
   }
@@ -130,7 +132,8 @@
   // Set ripples color to be the contrast color of the new background. Otherwise the ripple
   // color will be based on the app background color.
   > .mat-tab-header .mat-ripple-element,
-  > .mat-tab-link-container .mat-ripple-element {
+  > .mat-tab-link-container .mat-ripple-element,
+  > .mat-tab-header-pagination .mat-ripple-element {
     background-color: theming.get-color-from-palette($background-color, default-contrast, 0.12);
   }
 }