fix(material/tabs): background color inherited to nested groups (#21533)

Fixes that setting a `backgroundColor` on a top-level tab group ends up being inherited
to all grounds nested within it. The problem was that our selectors were too broad and
they were targeting all descendants.

Fixes #14819.
Fixes #21530.

(cherry picked from commit bf0dff8)

Author: crisbeto

src/material-experimental/mdc-tabs/_tabs-theme.scss

@@ -61,22 +61,27 @@
 }
 
 @mixin _mat-mdc-tabs-background($background-color, $foreground-color) {
-  .mat-mdc-tab-header, .mat-mdc-tab-links, .mat-mdc-tab-header-pagination {
+  // Note that these selectors target direct descendants so
+  // that the styles don't apply to any nested tab groups.
+
+  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container, > .mat-mdc-tab-header-pagination {
     // Set background color for the tab group
     @include mdc-theme-prop(background-color, $background-color);
   }
 
-  // Set labels to contrast against background
-  .mdc-tab__text-label, .mat-mdc-tab-link {
-    @include mdc-theme-prop(color, $foreground-color);
-  }
+  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container {
+    // Set labels to contrast against background
+    .mdc-tab__text-label, .mat-mdc-tab-link {
+      @include mdc-theme-prop(color, $foreground-color);
+    }
 
-  .mat-ripple-element, .mdc-tab__ripple::before {
-    @include mdc-theme-prop(background-color, $foreground-color);
-  }
+    .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 {
-    @include mdc-theme-prop(border-color, $foreground-color);
+    .mdc-tab-indicator__content--underline, .mat-mdc-tab-header-pagination-chevron {
+      @include mdc-theme-prop(border-color, $foreground-color);
+    }
   }
 }
 

src/material/tabs/_tabs-theme.scss

@@ -63,7 +63,9 @@
 
         // Override ink bar when background color is the same
         &.mat-background-#{$name} {
-          @include _mat-ink-bar($color, default-contrast);
+          > .mat-tab-header, > .mat-tab-link-container {
+            @include _mat-ink-bar($color, default-contrast);
+          }
         }
       }
     }
@@ -97,13 +99,16 @@
 }
 
 @mixin _mat-tabs-background($background-color) {
+  // Note that these selectors target direct descendants so
+  // that the styles don't apply to any nested tab groups.
+
   // Set background color for the tab group
-  .mat-tab-header, .mat-tab-links, .mat-tab-header-pagination {
+  > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination {
     background-color: mat-color($background-color);
   }
 
   // Set labels to contrast against background
-  .mat-tab-label, .mat-tab-link {
+  > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .mat-tab-link {
     color: mat-color($background-color, default-contrast);
 
     &.mat-tab-disabled {
@@ -112,17 +117,18 @@
   }
 
   // Set pagination chevrons to contrast background
-  .mat-tab-header-pagination-chevron {
+  > .mat-tab-header-pagination .mat-tab-header-pagination-chevron {
     border-color: mat-color($background-color, default-contrast);
   }
 
-  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
+  > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
     border-color: mat-color($background-color, default-contrast, 0.4);
   }
 
   // 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-ripple-element {
+  > .mat-tab-header .mat-ripple-element,
+  > .mat-tab-link-container .mat-ripple-element {
     background-color: mat-color($background-color, default-contrast, 0.12);
   }
 }