fix(material/tabs): update tokens to system colors (#31287)

Co-authored-by: Andrew Seguin <andrewseguin@google.com>

Author: andrewseguin

src/material/tabs/_m2-tabs.scss

@@ -29,22 +29,16 @@
 @function get-color-tokens($theme, $color-variant, $exclude: ()) {
   $system: m2-utils.get-system($theme);
   $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $inactive-label-text-color: inspection.get-theme-color($theme, foreground, base, 0.6);
 
   $tokens: (
-    tab-disabled-ripple-color: inspection.get-theme-color($theme, foreground, disabled),
+    tab-disabled-ripple-color: map.get($system, on-surface-variant),
     tab-pagination-icon-color: inspection.get-theme-color($theme, system, on-surface),
-
-    // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
-    tab-inactive-label-text-color: $inactive-label-text-color,
+    tab-inactive-label-text-color: map.get($system, on-surface-variant),
     tab-active-label-text-color: map.get($system, primary),
-
-    // Tokens needed to implement the gmat styles. Externally they don't change.
     tab-active-ripple-color: map.get($system, primary),
     tab-inactive-ripple-color: map.get($system, primary),
-    tab-inactive-focus-label-text-color: $inactive-label-text-color,
-    tab-inactive-hover-label-text-color: $inactive-label-text-color,
+    tab-inactive-focus-label-text-color: map.get($system, on-surface-variant),
+    tab-inactive-hover-label-text-color: map.get($system, on-surface-variant),
     tab-active-focus-label-text-color: map.get($system, primary),
     tab-active-hover-label-text-color: map.get($system, primary),
     tab-active-focus-indicator-color: map.get($system, primary),