fix(material/tabs): move unthemable tokens to theme mixin (#27891)

Though these tokens are not currently affected by the theme, in the
future they will be affected by the design system used for theming (M2
or M3)

BREAKING CHANGE:
There are new styles emitted by mat.tabs-theme that are not
emitted by any of: mat.tabs-color, mat.tabs-typography,
mat.tabs-density. If you rely on the partial mixins only and don't
call mat.tabs-theme, you can add mat.tabs-base to get the
missing styles.

Author: mmalerba

src/material/_index.scss

@@ -130,7 +130,8 @@ menu-base;
   stepper-typography, stepper-density, stepper-base;
 @forward './table/table-theme' as table-* show table-theme, table-color, table-typography,
   table-density, table-base;
-@forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density;
+@forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density,
+  tabs-base;
 @forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color,
   toolbar-typography, toolbar-density, toolbar-base;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color,

src/material/tabs/_tabs-common.scss

@@ -215,11 +215,6 @@ $mat-tab-animation-duration: 500ms !default;
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
-
-    @include mdc-tab-indicator-theme.theme(tokens-mdc-tab-indicator.get-unthemable-tokens());
-    @include mdc-tab-theme.secondary-navigation-tab-theme(tokens-mdc-tab.get-unthemable-tokens());
-    @include token-utils.create-token-values(
-      tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens());
   }
 
   .mdc-tab-indicator .mdc-tab-indicator__content {
@@ -352,11 +347,6 @@ $mat-tab-animation-duration: 500ms !default;
 
 @mixin paginated-tab-header-with-background($header-selector, $tab-selector) {
   &.mat-tabs-with-background {
-    @include token-utils.create-token-values(
-      tokens-mat-tab-header-with-background.$prefix,
-      tokens-mat-tab-header-with-background.get-unthemable-tokens()
-    );
-
     @include token-utils.use-tokens(
       tokens-mat-tab-header-with-background.$prefix,
       tokens-mat-tab-header-with-background.get-token-slots()

src/material/tabs/_tabs-theme.scss

@@ -1,5 +1,6 @@
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/tab/tab-theme' as mdc-tab-theme;
+@use '../core/style/sass-utils';
 @use '../core/tokens/m2/mdc/tab' as tokens-mdc-tab;
 @use '../core/tokens/m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;
 @use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header;
@@ -9,6 +10,19 @@
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 
+@mixin base($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-tab-indicator-theme.theme(tokens-mdc-tab-indicator.get-unthemable-tokens());
+    @include mdc-tab-theme.secondary-navigation-tab-theme(tokens-mdc-tab.get-unthemable-tokens());
+    @include token-utils.create-token-values(
+        tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens());
+    @include token-utils.create-token-values(
+        tokens-mat-tab-header-with-background.$prefix,
+        tokens-mat-tab-header-with-background.get-unthemable-tokens()
+    );
+  }
+}
+
 @mixin color($theme) {
   .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
     @include _palette-styles($theme, primary);
@@ -77,6 +91,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }