refactor: fix tabs tokens

Author: andrewseguin

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,46 @@
     .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),
+          ));
       }
     }
   }
@@ -118,5 +149,8 @@
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
   $tabs-tokens: token-utils.get-tokens-for($tokens, m2-tabs.$prefix, $options...);
+  $tabs-tokens-without-options: token-utils.get-tokens-for($tokens, m2-tabs.$prefix);
+
+  @include token-utils.create-token-values(m2-tabs.$prefix, $tabs-tokens-without-options);
   @include token-utils.create-token-values(m2-tabs.$prefix, $tabs-tokens);
 }