refactor: exclude some tabs tokens

Author: andrewseguin

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

@@ -1,5 +1,5 @@
 <!-- #docregion align-start -->
-<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
+<mat-tab-group mat-stretch-tabs="false" color="accent" mat-align-tabs="start" backgroundColor="accent">
 <!-- #enddocregion align-start -->
   <mat-tab label="First">Content 1</mat-tab>
   <mat-tab label="Second">Content 2</mat-tab>

src/material/tabs/_m2-tabs.scss

@@ -29,13 +29,13 @@ $prefix: (mat, tab);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary) {
+@function get-color-tokens($theme, $palette-name: primary, $exclude: ()) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $inactive-label-text-color: inspection.get-theme-color($theme, foreground, text, 0.6);
   $active-label-text-color: inspection.get-theme-color($theme, $palette-name, default);
   $ripple-color: inspection.get-theme-color($theme, $palette-name, default);
 
-  @return (
+  $tokens: (
     disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
     pagination-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),
 
@@ -56,6 +56,12 @@ $prefix: (mat, tab);
     background-color: inspection.get-theme-color($theme, $palette-name, default),
     foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
   );
+
+  @each $token in $exclude {
+    $tokens: map.remove($tokens, $token);
+  }
+
+  @return $tokens;
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

src/material/tabs/_tabs-theme.scss

@@ -5,6 +5,7 @@
 @use '../core/theming/validation';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-tab.
@@ -32,16 +33,43 @@
     .mat-mdc-tab-group,
     .mat-mdc-tab-nav-bar {
       @include token-utils.create-token-values-mixed(
-          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, primary));
+          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, primary, $exclude: (background-color, foreground-color)));
 
-      &.mat-accent, &.mat-background-accent {
+      &.mat-accent {
         @include token-utils.create-token-values-mixed(
-            m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, accent));
+          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, accent, $exclude: (background-color, foreground-color)));
       }
 
-      &.mat-warn, &.mat-background-warn {
+      &.mat-warn {
         @include token-utils.create-token-values-mixed(
-            m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, warn));
+          m2-tabs.$prefix, m2-tabs.get-color-tokens($theme, warn, $exclude: (background-color, foreground-color)));
+      }
+
+      &.mat-background-primary {
+        $tokens: m2-tabs.get-color-tokens($theme, primary);
+        @include token-utils.create-token-values-mixed(
+            m2-tabs.$prefix, (
+              background-color: map.get($tokens, background-color),
+              foreground-color: map.get($tokens, foreground-color),
+            ));
+      }
+
+      &.mat-background-accent {
+        $tokens: m2-tabs.get-color-tokens($theme, accent);
+        @include token-utils.create-token-values-mixed(
+            m2-tabs.$prefix, (
+            background-color: map.get($tokens, background-color),
+            foreground-color: map.get($tokens, foreground-color),
+          ));
+      }
+
+      &.mat-background-warn {
+        $tokens: m2-tabs.get-color-tokens($theme, warn);
+        @include token-utils.create-token-values-mixed(
+            m2-tabs.$prefix, (
+            background-color: map.get($tokens, background-color),
+            foreground-color: map.get($tokens, foreground-color),
+          ));
       }
     }
   }