perf(material/tabs): reduce amount of CSS generated for background color (#26186)

We were generating more than 15kb of selectors to support the background colors for tabs. These changes move the selectors into the base styles and use variables to set the colors.

Author: crisbeto

src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.html

@@ -2,24 +2,26 @@
   <mat-button-toggle-group #colorToggle="matButtonToggleGroup"
                            value="primary"
                            aria-label="Change color">
-    <mat-button-toggle value="primary"> Primary </mat-button-toggle>
-    <mat-button-toggle value="accent"> Accent </mat-button-toggle>
+    <mat-button-toggle value="primary">Primary</mat-button-toggle>
+    <mat-button-toggle value="accent">Accent</mat-button-toggle>
+    <mat-button-toggle value="warn">Warn</mat-button-toggle>
   </mat-button-toggle-group>
-  <span class="example-button-toggle-label"> Color </span>
+  <span class="example-button-toggle-label">Color</span>
 </div>
 
 <div>
   <mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup"
                            value="primary"
                            aria-label="Change color">
-    <mat-button-toggle value="primary"> Primary </mat-button-toggle>
-    <mat-button-toggle value="accent"> Accent </mat-button-toggle>
+    <mat-button-toggle value="primary">Primary</mat-button-toggle>
+    <mat-button-toggle value="accent">Accent</mat-button-toggle>
+    <mat-button-toggle value="warn">Warn</mat-button-toggle>
   </mat-button-toggle-group>
-  <span class="example-button-toggle-label"> Background Color </span>
+  <span class="example-button-toggle-label">Background Color</span>
 </div>
 
 <mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
-  <mat-tab label="First"> Content 1 </mat-tab>
-  <mat-tab label="Second"> Content 2 </mat-tab>
-  <mat-tab label="Third"> Content 3 </mat-tab>
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
 </mat-tab-group>

src/material/tabs/_tabs-common.scss

@@ -196,3 +196,39 @@ $mat-tab-animation-duration: 500ms !default;
   overflow: hidden;
   z-index: 1;
 }
+
+@mixin paginated-tab-header-with-background($header-selector) {
+  // TODO(crisbeto): the class is repeated here to ensure the specificity is high enough.
+  // We should be able to remove it once the tabs are switched to the new theming API.
+  &.mat-tabs-with-background.mat-tabs-with-background {
+    // Note that these selectors target direct descendants so
+    // that the styles don't apply to any nested tab groups.
+    > #{$header-selector}, > .mat-mdc-tab-header-pagination {
+      // Set background color for the tab group
+      background-color: var(--mat-mdc-tab-header-with-background-background-color, transparent);
+    }
+
+    > #{$header-selector} {
+      // Set labels to contrast against background
+      .mat-mdc-tab .mdc-tab__text-label, .mat-mdc-tab-link .mdc-tab__text-label {
+        color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      }
+
+      .mdc-tab-indicator__content--underline,
+      .mat-mdc-tab-header-pagination-chevron,
+      .mat-mdc-focus-indicator::before {
+        border-color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      }
+    }
+
+    > #{$header-selector}, > .mat-mdc-tab-header-pagination {
+      .mat-ripple-element, .mdc-tab__ripple::before {
+        background-color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      }
+
+      .mat-mdc-tab-header-pagination-chevron {
+        border-color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      }
+    }
+  }
+}

src/material/tabs/_tabs-theme.scss

@@ -62,36 +62,10 @@
 }
 
 @mixin _background($background-color, $foreground-color) {
-  // 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);
-  }
-
-  > .mat-mdc-tab-header, > .mat-mdc-tab-link-container {
-    // Set labels to contrast against background
-    .mat-mdc-tab .mdc-tab__text-label, .mat-mdc-tab-link .mdc-tab__text-label {
-      @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);
-    }
-
-    .mat-mdc-tab-header-pagination-chevron {
-      @include mdc-theme.prop(border-color, $foreground-color);
-    }
-  }
+  $background-value: mdc-theme-color.prop-value($background-color);
+  $foreground-value: mdc-theme-color.prop-value($foreground-color);
+  --mat-mdc-tab-header-with-background-background-color: #{$background-value};
+  --mat-mdc-tab-header-with-background-foreground-color: #{$foreground-value};
 }
 
 @mixin _palette-styles($color) {

src/material/tabs/tab-group.scss

@@ -20,6 +20,7 @@
 }
 
 .mat-mdc-tab-group {
+  @include tabs-common.paginated-tab-header-with-background('.mat-mdc-tab-header');
   display: flex;
   flex-direction: column;
 

src/material/tabs/tab-group.ts

@@ -199,12 +199,12 @@ export abstract class _MatTabGroupBase
   }
 
   set backgroundColor(value: ThemePalette) {
-    const nativeElement: HTMLElement = this._elementRef.nativeElement;
+    const classList: DOMTokenList = this._elementRef.nativeElement.classList;
 
-    nativeElement.classList.remove(`mat-background-${this.backgroundColor}`);
+    classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`);
 
     if (value) {
-      nativeElement.classList.add(`mat-background-${value}`);
+      classList.add('mat-tabs-with-background', `mat-background-${value}`);
     }
 
     this._backgroundColor = value;

src/material/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -10,3 +10,7 @@
 .mat-mdc-tab-link-container {
   @include tabs-common.paginated-tab-header-container;
 }
+
+.mat-mdc-tab-nav-bar {
+  @include tabs-common.paginated-tab-header-with-background('.mat-mdc-tab-link-container');
+}

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -75,10 +75,10 @@ export abstract class _MatTabNavBase
 
   set backgroundColor(value: ThemePalette) {
     const classList = this._elementRef.nativeElement.classList;
-    classList.remove(`mat-background-${this.backgroundColor}`);
+    classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`);
 
     if (value) {
-      classList.add(`mat-background-${value}`);
+      classList.add('mat-tabs-with-background', `mat-background-${value}`);
     }
 
     this._backgroundColor = value;