refactor: merge tabs tokens

Author: andrewseguin

src/material/core/tokens/_m2-tokens.scss

@@ -29,10 +29,7 @@
 @use '../../sort/m2-sort';
 @use '../../stepper/m2-stepper';
 @use '../../table/m2-table';
-@use '../../tabs/m2-secondary-navigation-tab';
-@use '../../tabs/m2-tab-header';
-@use '../../tabs/m2-tab-header-with-background';
-@use '../../tabs/m2-tab-indicator';
+@use '../../tabs/m2-tabs';
 @use '../../timepicker/m2-timepicker';
 @use '../../toolbar/m2-toolbar';
 @use '../../tooltip/m2-tooltip';
@@ -117,17 +114,14 @@
     _get-tokens-for-module($theme, m2-pseudo-checkbox),
     _get-tokens-for-module($theme, m2-radio),
     _get-tokens-for-module($theme, m2-ripple),
-    _get-tokens-for-module($theme, m2-secondary-navigation-tab),
     _get-tokens-for-module($theme, m2-select),
     _get-tokens-for-module($theme, m2-sidenav),
     _get-tokens-for-module($theme, m2-slide-toggle),
     _get-tokens-for-module($theme, m2-slider),
     _get-tokens-for-module($theme, m2-snack-bar),
     _get-tokens-for-module($theme, m2-sort),
     _get-tokens-for-module($theme, m2-stepper),
-    _get-tokens-for-module($theme, m2-tab-header),
-    _get-tokens-for-module($theme, m2-tab-header-with-background),
-    _get-tokens-for-module($theme, m2-tab-indicator),
+    _get-tokens-for-module($theme, m2-tabs),
     _get-tokens-for-module($theme, m2-table),
     _get-tokens-for-module($theme, m2-timepicker),
     _get-tokens-for-module($theme, m2-toolbar),

src/material/core/tokens/_m3-tokens.scss

@@ -29,9 +29,7 @@
 @use '../../sort/m3-sort';
 @use '../../stepper/m3-stepper';
 @use '../../table/m3-table';
-@use '../../tabs/m3-secondary-navigation-tab';
-@use '../../tabs/m3-tab-header';
-@use '../../tabs/m3-tab-indicator';
+@use '../../tabs/m3-tabs';
 @use '../../timepicker/m3-timepicker';
 @use '../../toolbar/m3-toolbar';
 @use '../../tooltip/m3-tooltip';
@@ -442,16 +440,14 @@ $system-variables-prefix) {
     m3-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-radio.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-ripple.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-secondary-navigation-tab.get-tokens($systems, $exclude-hardcoded, $token-slots),
+    m3-tabs.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-select.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-slide-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-slider.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-sort.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-stepper.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tab-header.get-tokens($systems, $exclude-hardcoded, $token-slots),
-    m3-tab-indicator.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-table.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots),
     m3-toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots),

src/material/tabs/BUILD.bazel

@@ -13,9 +13,7 @@ package(default_visibility = ["//visibility:public"])
 sass_library(
     name = "m3",
     srcs = [
-        "_m3-secondary-navigation-tab.scss",
-        "_m3-tab-header.scss",
-        "_m3-tab-indicator.scss",
+        "_m3-tabs.scss",
     ],
     deps = [
         "//src/material/core/style:sass_utils",
@@ -26,10 +24,7 @@ sass_library(
 sass_library(
     name = "m2",
     srcs = [
-        "_m2-secondary-navigation-tab.scss",
-        "_m2-tab-header.scss",
-        "_m2-tab-header-with-background.scss",
-        "_m2-tab-indicator.scss",
+        "_m2-tabs.scss",
     ],
     deps = [
         "//src/material/core/style:elevation",

src/material/tabs/_m2-secondary-navigation-tab.scss

@@ -1,18 +1,30 @@
-@use '../core/tokens/m2-utils';
+@use 'sass:map';
+@use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/style/sass-utils';
+@use '../core/tokens/m2-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, tab);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
+//
+// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
+// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
+// our CSS.
 @function get-unthemable-tokens() {
   @return (
+    // This is specified both here and in the density tokens, because it determines the size of the
+    // tab itself and there are internal tests who don't configure the theme correctly.
+    container-height: 48px,
     // For some period of time, the MDC tabs removed the divider. This has been added back in
     // and will be present in M3.
     divider-color: transparent,
     divider-height: 0,
+    active-indicator-height: 2px,
+    // Currently set to zero, but used by the gmat styles to make the indicator rounded.
+    active-indicator-shape: 0,
   );
 }
 
@@ -40,6 +52,9 @@ $prefix: (mat, tab);
     active-hover-label-text-color: $active-label-text-color,
     active-focus-indicator-color: $active-label-text-color,
     active-hover-indicator-color: $active-label-text-color,
+    active-indicator-color: inspection.get-theme-color($theme, $palette-name, default),
+    background-color: inspection.get-theme-color($theme, $palette-name, default),
+    foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
   );
 }
 
@@ -57,16 +72,26 @@ $prefix: (mat, tab);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
+
+  @return (
+    container-height: map.get((
+      0: 48px,
+      -1: 44px,
+      -2: 40px,
+      -3: 36px,
+      -4: 32px,
+    ), $scale),
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.
 // This is used to create token slots.
 @function get-token-slots() {
   @return sass-utils.deep-merge-all(
-          get-unthemable-tokens(),
-          get-color-tokens(m2-utils.$placeholder-color-config),
-          get-typography-tokens(m2-utils.$placeholder-typography-config),
-          get-density-tokens(m2-utils.$placeholder-density-config)
+      get-unthemable-tokens(),
+      get-color-tokens(m2-utils.$placeholder-color-config),
+      get-typography-tokens(m2-utils.$placeholder-typography-config),
+      get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }