perf(material-experimental/mdc-tabs): reduce bundle size (#24262)

Reworks the MDC-based tabs to reduce their bundle size. In total, the JS bundle has decreased by ~10kb and the dev app theme by ~50kb. The changes include:

* Not using MDC's tab theme since we were basically only styling the tab label color. I've switched us over to the mixins for styling the label instead.
* Using the `static-styles` mixin instead of `without-ripple`.

(cherry picked from commit e7b7576)

Author: crisbeto

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

@@ -11,7 +11,7 @@ $mat-tab-animation-duration: 500ms !default;
 // Combines the various structural styles we need for the tab group and tab nav bar.
 @mixin structural-styles {
   @include mdc-helpers.disable-fallback-declarations {
-    @include mdc-tab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+    @include mdc-tab.static-styles($query: mdc-helpers.$mat-base-styles-query);
     @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mat-base-styles-query);
   }
 
@@ -51,6 +51,13 @@ $mat-tab-animation-duration: 500ms !default;
     pointer-events: none;
   }
 
+  // Required for `fitInkBarToContent` to work. This used to be included with MDC's `without-ripple`
+  // mixin, but that no longer appears to be the case with `static-styles`. Since the latter is
+  // ~10kb smaller, we include this one extra style ourselves.
+  .mdc-tab__content {
+    @include mdc-tab-indicator.surface;
+  }
+
   // We need to handle the hover and focus indication ourselves, because we don't use MDC's ripple.
   &:hover .mdc-tab__ripple::before {
     opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);

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

@@ -4,7 +4,7 @@
 @use '@material/tab-indicator' as mdc-tab-indicator;
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/tab' as mdc-tab;
-@use '@material/tab/tab-theme' as mdc-tab-theme;
+@use '@material/tab/mixins' as mdc-tab-mixins;
 @use '@material/tab-bar' as mdc-tab-bar;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/typography/typography';
@@ -18,39 +18,9 @@
 
   @include mdc-helpers.mat-using-mdc-theme($config) {
     .mat-mdc-tab, .mat-mdc-tab-link {
-      $surface: mdc-theme-color.$surface;
-      $on-surface: rgba(mdc-theme-color.$on-surface, 0.6);
-
-      // TODO(crisbeto): these styles should actually be set through the `theme` mixin while the
-      // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
-      // they are not, because `theme-styles` outputs the token values directly, rather than
-      // generating CSS variables.
-      @include mdc-tab-theme.primary-navigation-tab-theme-styles(map.merge(
-          mdc-tab-theme.$primary-light-theme,
-          (
-            container-color: $surface,
-            inactive-focus-state-layer-color: $on-surface,
-            inactive-hover-state-layer-color: $on-surface,
-            inactive-pressed-state-layer-color: $on-surface,
-            with-icon-inactive-focus-icon-color: $on-surface,
-            with-icon-inactive-hover-icon-color: $on-surface,
-            with-icon-inactive-icon-color: $on-surface,
-            with-icon-inactive-pressed-icon-color: $on-surface,
-            with-label-text-inactive-focus-label-text-color: $on-surface,
-            with-label-text-inactive-hover-label-text-color: $on-surface,
-            with-label-text-inactive-label-text-color: $on-surface,
-            with-label-text-inactive-pressed-label-text-color: $on-surface,
-
-            // TODO(crisbeto): MDC's styles are set up so that the icon size is set through a
-            // `font-size` at the root of the tab while the text size of the tab is set on
-            // `.mdc-tab__text-label` which overrides the one from the root. The problem is that
-            // the `$light-theme` is looking for a `subhead2` level which doesn't exist in MDC's
-            // code which in turn causes no text label styles to be emitted and for the icon size
-            // to be applied to the entire tab. Since we don't support icons inside the tab
-            // anyway, we can temporarily work around it by preventing MDC from emitting icon
-            // styles. The correct label typography will be applied by our theme instead.
-            with-icon-icon-size: null
-          )));
+      &:not(.mat-mdc-tab-disabled) {
+        @include mdc-tab-mixins.text-label-color(rgba(mdc-theme-color.$on-surface, 0.6));
+      }
 
       // MDC seems to include a background color on tabs which only stands out on dark themes.
       // Disable for now for backwards compatibility. These styles are inside the theme in order
@@ -125,27 +95,10 @@
 
 @mixin _palette-styles($color) {
   .mat-mdc-tab, .mat-mdc-tab-link {
-    // TODO(crisbeto): these styles should actually be set through the `theme` mixin while the
-    // `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
-    // they are not, because `theme-styles` outputs the token values directly, rather than
-    // generating CSS variables.
-    @include mdc-tab-theme.primary-navigation-tab-theme-styles((
-      active-focus-state-layer-color: $color,
-      active-hover-state-layer-color: $color,
-      active-pressed-state-layer-color: $color,
-      with-icon-active-focus-icon-color: $color,
-      with-icon-active-hover-icon-color: $color,
-      with-icon-active-icon-color: $color,
-      with-icon-active-pressed-icon-color: $color,
-      with-label-text-active-focus-label-text-color: $color,
-      with-label-text-active-hover-label-text-color: $color,
-      with-label-text-active-label-text-color: $color,
-      with-label-text-active-pressed-label-text-color: $color,
-    ));
-
-    @include mdc-tab-indicator-theme.theme-styles((
-      active-indicator-color: $color
-    ));
+    &:not(.mat-mdc-tab-disabled) {
+      @include mdc-tab-mixins.active-text-label-color($color);
+      @include mdc-tab-indicator-theme.theme-styles((active-indicator-color: $color));
+    }
   }
 
   .mdc-tab__ripple::before,