refactor(material/tabs): switch to tokens API

Switches the tabs to use the new tokens API.

src/material/core/tokens/m2/mat/_tab-header-with-background.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, tab-header-with-background);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $primary: map.get($config, primary);
+
+  @return (
+    background-color: theming.get-color-from-palette($primary, default),
+    foreground-color: theming.get-color-from-palette($primary, default-contrast),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// 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 token-utils.merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/core/tokens/m2/mat/_tab-header.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, tab-header);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, is-dark);
+  $foreground: map.get($config, foreground);
+  $primary: map.get($config, primary);
+
+  @return (
+    ripple-color: theming.get-color-from-palette($primary, default),
+    disabled-ripple-color: theming.get-color-from-palette($foreground, disabled),
+    pagination-icon-color: if($is-dark, #fff, #000),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// 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 token-utils.merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/core/tokens/m2/mdc/_tab-indicator.scss

@@ -0,0 +1,53 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, tab-indicator);
+
+// 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 (
+    active-indicator-height: 2px,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    active-indicator-shape: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $primary: map.get($config, primary);
+
+  @return (
+    active-indicator-color: theming.get-color-from-palette($primary, default),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @return ();
+}
+
+// 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 token-utils.merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/core/tokens/m2/mdc/_tab.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+@use '../../../theming/theming';
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, 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,
+
+    // =============================================================================================
+    // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
+    // =============================================================================================
+    container-color: null,
+    container-elevation: null,
+    container-shadow-color: null,
+    container-shape: null,
+    focus-label-text-color: null,
+    focus-state-layer-color: null,
+    focus-state-layer-opacity: null,
+    hover-label-text-color: null,
+    hover-state-layer-color: null,
+    hover-state-layer-opacity: null,
+    pressed-label-text-color: null,
+    pressed-state-layer-color: null,
+    pressed-state-layer-opacity: null,
+    with-icon-active-icon-color: null,
+    with-icon-focus-icon-color: null,
+    with-icon-hover-icon-color: null,
+    with-icon-inactive-icon-color: null,
+    with-icon-pressed-icon-color: null,
+    with-icon-icon-size: null,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($config) {
+  $is-dark: map.get($config, is-dark);
+  $primary: map.get($config, primary);
+
+  @return (
+    inactive-label-text-color: rgba(if($is-dark, #fff, #000), 0.6),
+    active-label-text-color: theming.get-color-from-palette($primary, default),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    label-text-font:
+      typography-utils.font-family($config, button) or typography-utils.font-family($config),
+    label-text-size: typography-utils.font-size($config, button),
+    label-text-letter-spacing: typography-utils.letter-spacing($config, button),
+    label-text-line-height: typography-utils.line-height($config, button),
+    label-text-weight: typography-utils.font-weight($config, button),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  $scale: theming.clamp-density($config, -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 token-utils.merge-all(
+          get-unthemable-tokens(),
+          get-color-tokens(token-utils.$placeholder-color-config),
+          get-typography-tokens(token-utils.$placeholder-typography-config),
+          get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/core/tokens/tests/test-validate-tokens.scss

@@ -9,6 +9,8 @@
 @use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
 @use '@material/list/list-theme' as mdc-list-theme;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
+@use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
+@use '@material/tab/tab-theme' as mdc-tab-theme;
 @use '@material/theme/validate' as mdc-validate;
 
 @use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress;
@@ -19,6 +21,8 @@
 @use '../m2/mdc/list' as tokens-mdc-list;
 @use '../m2/mdc/outlined-card' as tokens-mdc-outlined-card;
 @use '../m2/mdc/radio' as tokens-mdc-radio;
+@use '../m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;
+@use '../m2/mdc/tab' as tokens-mdc-tab;
 
 @mixin validate-slots($component, $slots, $reference) {
   @debug 'Validating #{$component}...';
@@ -72,3 +76,13 @@
   $slots: tokens-mdc-radio.get-token-slots(),
   $reference: mdc-radio-theme.$light-theme
 );
+@include validate-slots(
+  $component: 'm2.mdc.tab-indicator',
+  $slots: tokens-mdc-tab-indicator.get-token-slots(),
+  $reference: mdc-tab-indicator-theme.$light-theme
+);
+@include validate-slots(
+  $component: 'm2.mdc.tab',
+  $slots: tokens-mdc-tab.get-token-slots(),
+  $reference: mdc-tab-theme.$secondary-light-theme
+);