@angular/material 16.0.0-rc.0 → 16.0.0-rc.2

package/tabs/_tabs-common.scss

@@ -1,8 +1,16 @@
-@use '../core/mdc-helpers/mdc-helpers';
-@use '../core/style/vendor-prefixes';
 @use '@material/ripple' as mdc-ripple;
 @use '@material/tab' as mdc-tab;
 @use '@material/tab-indicator' as mdc-tab-indicator;
+@use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
+@use '@material/tab/tab-theme' as mdc-tab-theme;
+@use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '../core/mdc-helpers/mdc-helpers';
+@use '../core/style/vendor-prefixes';
+@use '../core/tokens/m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;
+@use '../core/tokens/m2/mdc/tab' as tokens-mdc-tab;
+@use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header;
+@use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
+@use '../core/tokens/token-utils';
 @use 'sass:map';
 
 
@@ -10,9 +18,12 @@ $mat-tab-animation-duration: 500ms !default;
 
 // Combines the various structural styles we need for the tab group and tab nav bar.
 @mixin structural-styles {
-  @include mdc-helpers.disable-mdc-fallback-declarations {
+  @include mdc-custom-properties.configure(
+    $emit-fallback-values: false,
+    $emit-fallback-vars: false
+  ) {
     @include mdc-tab.static-styles($query: mdc-helpers.$mdc-base-styles-query);
-    @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mdc-base-styles-query);
+    @include mdc-tab-indicator.static-styles($query: mdc-helpers.$mdc-base-styles-query);
   }
 
   .mat-mdc-tab-ripple {
@@ -26,19 +37,102 @@ $mat-tab-animation-duration: 500ms !default;
 }
 
 @mixin tab {
+  @include mdc-custom-properties.configure(
+    $emit-fallback-values: false,
+    $emit-fallback-vars: false
+  ) {
+    @include mdc-tab-indicator-theme.theme-styles(tokens-mdc-tab-indicator.get-token-slots());
+    @include mdc-tab-theme.secondary-navigation-tab-theme-styles(tokens-mdc-tab.get-token-slots());
+  }
+
   -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-decoration: none;
 
-  &.mdc-tab {
-    // This is usually included by MDC's tab bar, however we don't
-    // use it because we implement our own pagination.
-    @include mdc-tab.height(mdc-tab.$height, mdc-helpers.$mdc-base-styles-query);
+  // Tabs might be `button` elements so we have to reset the user agent styling.
+  background: none;
 
+  &.mdc-tab {
     // MDC's tabs stretch to fit the header by default, whereas stretching on our current ones
     // is an opt-in behavior. Also technically we don't need to combine the two classes, but
     // we need the extra specificity to avoid issues with CSS insertion order.
     flex-grow: 0;
   }
 
+  @include token-utils.use-tokens(
+    tokens-mat-tab-header.$prefix,
+    tokens-mat-tab-header.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(letter-spacing, label-text-letter-spacing);
+    @include token-utils.create-token-slot(line-height, label-text-line-height);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+
+    &:hover .mdc-tab__text-label {
+      @include token-utils.create-token-slot(color, inactive-hover-label-text-color);
+    }
+
+    &:focus .mdc-tab__text-label {
+      @include token-utils.create-token-slot(color, inactive-focus-label-text-color);
+    }
+
+    &.mdc-tab--active {
+      .mdc-tab__text-label {
+        @include token-utils.create-token-slot(color, active-label-text-color);
+      }
+
+      .mdc-tab__ripple::before,
+      .mat-ripple-element {
+        @include token-utils.create-token-slot(background-color, active-ripple-color);
+      }
+
+      &:hover {
+        .mdc-tab__text-label {
+          @include token-utils.create-token-slot(color, active-hover-label-text-color);
+        }
+
+        .mdc-tab-indicator__content--underline {
+          @include token-utils.create-token-slot(border-color, active-hover-indicator-color);
+        }
+      }
+
+      &:focus {
+        .mdc-tab__text-label {
+          @include token-utils.create-token-slot(color, active-focus-label-text-color);
+        }
+
+        .mdc-tab-indicator__content--underline {
+          @include token-utils.create-token-slot(border-color, active-focus-indicator-color);
+        }
+      }
+    }
+  }
+
+  &.mat-mdc-tab-disabled {
+    // MDC doesn't support disabled tabs so we need to improvise.
+    opacity: 0.4;
+
+    // We use `pointer-events` to make the element unclickable when it's disabled, rather than
+    // preventing the default action through JS, because we can't prevent the action reliably
+    // due to other directives potentially registering their events earlier. This shouldn't cause
+    // the user to click through, because we always have a header behind the tab. Furthermore, this
+    // saves us some CSS, because we don't have to add `:not(.mat-mdc-tab-disabled)` to all the
+    // hover and focus selectors.
+    pointer-events: none;
+
+    @include token-utils.use-tokens(
+      tokens-mat-tab-header.$prefix,
+      tokens-mat-tab-header.get-token-slots()
+    ) {
+      .mdc-tab__ripple::before,
+      .mat-ripple-element {
+        @include token-utils.create-token-slot(background-color, disabled-ripple-color);
+      }
+    }
+  }
+
   // Used to render out the background tint when hovered/focused. Usually this is done by
   // MDC's ripple styles, however we're using our own ripples due to size concerns.
   .mdc-tab__ripple::before {
@@ -51,10 +145,24 @@ $mat-tab-animation-duration: 500ms !default;
     bottom: 0;
     opacity: 0;
     pointer-events: none;
+
+    @include token-utils.use-tokens(
+      tokens-mat-tab-header.$prefix,
+      tokens-mat-tab-header.get-token-slots()
+    ) {
+      @include token-utils.create-token-slot(background-color, inactive-ripple-color);
+    }
   }
 
-  // We support projecting icons into the tab. These styles ensure that they're centered.
   .mdc-tab__text-label {
+    @include token-utils.use-tokens(
+      tokens-mat-tab-header.$prefix,
+      tokens-mat-tab-header.get-token-slots()
+    ) {
+      @include token-utils.create-token-slot(color, inactive-label-text-color);
+    }
+
+    // We support projecting icons into the tab. These styles ensure that they're centered.
     display: inline-flex;
     align-items: center;
   }
@@ -63,7 +171,7 @@ $mat-tab-animation-duration: 500ms !default;
     // Required for `fitInkBarToContent` to work. This used to be included with MDC's
     // `without-ripple` mixin, but that no longer appears to be the case with `static-styles`.
     // Since the latter is ~10kb smaller, we include this one extra style ourselves.
-    @include mdc-tab-indicator.surface;
+    position: relative;
 
     // MDC sets `pointer-events: none` on the content which prevents interactions with the
     // nested content. Re-enable it since we allow nesting any content in the tab (see #26195).
@@ -84,6 +192,13 @@ $mat-tab-animation-duration: 500ms !default;
 
   .mat-ripple-element {
     opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
+
+    @include token-utils.use-tokens(
+      tokens-mat-tab-header.$prefix,
+      tokens-mat-tab-header.get-token-slots()
+    ) {
+      @include token-utils.create-token-slot(background-color, inactive-ripple-color);
+    }
   }
 }
 
@@ -95,6 +210,11 @@ $mat-tab-animation-duration: 500ms !default;
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
+
+    @include mdc-tab-indicator-theme.theme(tokens-mdc-tab-indicator.get-unthemable-tokens());
+    @include mdc-tab-theme.secondary-navigation-tab-theme(tokens-mdc-tab.get-unthemable-tokens());
+    @include token-utils.create-token-values(
+      tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens());
   }
 
   .mat-mdc-tab-header-pagination {
@@ -120,6 +240,13 @@ $mat-tab-animation-duration: 500ms !default;
 
     .mat-ripple-element {
       opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
+
+      @include token-utils.use-tokens(
+        tokens-mat-tab-header.$prefix,
+        tokens-mat-tab-header.get-token-slots()
+      ) {
+        @include token-utils.create-token-slot(background-color, inactive-ripple-color);
+      }
     }
 
     .mat-mdc-tab-header-pagination-controls-enabled & {
@@ -150,6 +277,13 @@ $mat-tab-animation-duration: 500ms !default;
     border-width: 2px 2px 0 0;
     height: 8px;
     width: 8px;
+
+    @include token-utils.use-tokens(
+      tokens-mat-tab-header.$prefix,
+      tokens-mat-tab-header.get-token-slots()
+    ) {
+      @include token-utils.create-token-slot(border-color, pagination-icon-color);
+    }
   }
 
   .mat-mdc-tab-header-pagination-disabled {
@@ -207,35 +341,64 @@ $mat-tab-animation-duration: 500ms !default;
   z-index: 1;
 }
 
-@mixin paginated-tab-header-with-background($header-selector) {
+@mixin paginated-tab-header-with-background($header-selector, $tab-selector) {
   &.mat-tabs-with-background {
-    // Note that these selectors target direct descendants so
-    // that the styles don't apply to any nested tab groups.
-    > #{$header-selector}, > .mat-mdc-tab-header-pagination {
-      // Set background color for the tab group
-      background-color: var(--mat-mdc-tab-header-with-background-background-color, transparent);
-    }
-
-    > #{$header-selector} {
-      // Set labels to contrast against background
-      .mat-mdc-tab .mdc-tab__text-label, .mat-mdc-tab-link .mdc-tab__text-label {
-        color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+    @include token-utils.create-token-values(
+      tokens-mat-tab-header-with-background.$prefix,
+      tokens-mat-tab-header-with-background.get-unthemable-tokens()
+    );
+
+    @include token-utils.use-tokens(
+      tokens-mat-tab-header-with-background.$prefix,
+      tokens-mat-tab-header-with-background.get-token-slots()
+    ) {
+      // Note that these selectors target direct descendants so
+      // that the styles don't apply to any nested tab groups.
+      > #{$header-selector}, > .mat-mdc-tab-header-pagination {
+        // Set background color for the tab group
+        @include token-utils.create-token-slot(background-color, background-color);
       }
 
-      .mdc-tab-indicator__content--underline,
-      .mat-mdc-tab-header-pagination-chevron,
-      .mat-mdc-focus-indicator::before {
-        border-color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      // Note: this is only scoped to primary, because the legacy tabs had the incorrect behavior
+      // where setting both a background and `mat-accent` would add the background, but keep
+      // accent on the selected tab. There are some internal apps whose design depends on this now
+      // so we have to replicate it here.
+      &.mat-primary > #{$header-selector} {
+        // Set labels to contrast against background
+        #{$tab-selector} .mdc-tab__text-label {
+          @include token-utils.create-token-slot(color, foreground-color);
+        }
+
+        .mdc-tab-indicator__content--underline {
+          @include token-utils.create-token-slot(border-color, foreground-color);
+        }
       }
-    }
 
-    > #{$header-selector}, > .mat-mdc-tab-header-pagination {
-      .mat-ripple-element, .mdc-tab__ripple::before {
-        background-color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      &:not(.mat-primary) > #{$header-selector} {
+        #{$tab-selector}:not(.mdc-tab--active) {
+          .mdc-tab__text-label {
+            @include token-utils.create-token-slot(color, foreground-color);
+          }
+
+          .mdc-tab-indicator__content--underline {
+            @include token-utils.create-token-slot(border-color, foreground-color);
+          }
+        }
       }
 
-      .mat-mdc-tab-header-pagination-chevron {
-        border-color: var(--mat-mdc-tab-header-with-background-foreground-color, inherit);
+      > #{$header-selector}, > .mat-mdc-tab-header-pagination {
+        .mat-mdc-tab-header-pagination-chevron,
+        .mat-mdc-focus-indicator::before {
+          @include token-utils.create-token-slot(border-color, foreground-color);
+        }
+
+        .mat-ripple-element, .mdc-tab__ripple::before {
+          @include token-utils.create-token-slot(background-color, foreground-color);
+        }
+
+        .mat-mdc-tab-header-pagination-chevron {
+          @include token-utils.create-token-slot(color, foreground-color);
+        }
       }
     }
   }

package/tabs/_tabs-theme.scss

@@ -1,108 +1,87 @@
 @use 'sass:map';
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/tab-indicator' as mdc-tab-indicator;
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/tab' as mdc-tab;
-@use '@material/tab/mixins' as mdc-tab-mixins;
-@use '@material/tab-bar' as mdc-tab-bar;
+@use '@material/tab/tab-theme' as mdc-tab-theme;
+@use '../core/tokens/m2/mdc/tab' as tokens-mdc-tab;
+@use '../core/tokens/m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;
+@use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header;
+@use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/mdc-helpers/mdc-helpers';
+@use '../core/tokens/token-utils';
 
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
-  $foreground: map.get($config, foreground);
-
-  @include mdc-helpers.using-mdc-theme($config) {
-    .mat-mdc-tab, .mat-mdc-tab-link {
-      @include mdc-tab-mixins.text-label-color(rgba(mdc-theme-color.$on-surface, 0.6));
-
-      // MDC seems to include a background color on tabs which only stands out on dark themes.
-      // Disable for now for backwards compatibility. These styles are inside the theme in order
-      // to avoid CSS specificity issues.
-      background-color: transparent;
-
-      &.mat-mdc-tab-disabled {
-        .mdc-tab__ripple::before,
-        .mat-ripple-element {
-          background-color: theming.get-color-from-palette($foreground, disabled);
-        }
-      }
-    }
-
-    @include _palette-styles($primary);
 
-    .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-      &.mat-accent {
-        @include _palette-styles($accent);
-      }
+  .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
+    @include _palette-styles($config, primary);
 
-      &.mat-warn {
-        @include _palette-styles($warn);
-      }
+    &.mat-accent {
+      @include _palette-styles($config, accent);
     }
 
-    .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-      &.mat-background-primary {
-        @include _background(primary, on-primary);
-      }
+    &.mat-warn {
+      @include _palette-styles($config, warn);
+    }
 
-      &.mat-background-accent {
-        @include _background(secondary, on-secondary);
-      }
+    &.mat-background-primary {
+      @include _background-styles($config, primary);
+    }
 
-      &.mat-background-warn {
-        @include _background(error, on-error);
-      }
+    &.mat-background-accent {
+      @include _background-styles($config, accent);
     }
 
-    .mat-mdc-tab-header-pagination-chevron {
-      @include mdc-theme.prop(border-color, on-surface);
+    &.mat-background-warn {
+      @include _background-styles($config, warn);
     }
   }
 }
 
-@mixin _background($background-color, $foreground-color) {
-  $background-value: mdc-theme-color.prop-value($background-color);
-  $foreground-value: mdc-theme-color.prop-value($foreground-color);
-  --mat-mdc-tab-header-with-background-background-color: #{$background-value};
-  --mat-mdc-tab-header-with-background-foreground-color: #{$foreground-value};
+@mixin _background-styles($initial-config, $palette) {
+  $config: map.merge($initial-config, (primary: map.get($initial-config, $palette)));
+  @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
+    tokens-mat-tab-header-with-background.get-color-tokens($config));
 }
 
-@mixin _palette-styles($color) {
-  .mat-mdc-tab, .mat-mdc-tab-link {
-    &:not(.mat-mdc-tab-disabled) {
-      @include mdc-tab-mixins.active-text-label-color($color);
-      @include mdc-tab-indicator-theme.theme-styles((active-indicator-color: $color));
-    }
-  }
-
-  .mdc-tab__ripple::before,
-  .mat-mdc-tab .mat-ripple-element,
-  .mat-mdc-tab-header-pagination .mat-ripple-element,
-  .mat-mdc-tab-link .mat-ripple-element {
-    @include mdc-theme.prop(background-color, $color);
-  }
+@mixin _palette-styles($initial-config, $palette) {
+  $config: map.merge($initial-config, (primary: map.get($initial-config, $palette)));
+  @include mdc-tab-theme.secondary-navigation-tab-theme(
+    tokens-mdc-tab.get-color-tokens($config));
+  @include mdc-tab-indicator-theme.theme(
+    tokens-mdc-tab-indicator.get-color-tokens($config));
+  @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
+   tokens-mat-tab-header.get-color-tokens($config));
 }
 
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2018-config(
       theming.get-typography-config($config-or-theme));
-  @include mdc-helpers.using-mdc-typography($config) {
-    @include mdc-tab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+
+  .mat-mdc-tab-header {
+    @include mdc-tab-theme.secondary-navigation-tab-theme(
+      tokens-mdc-tab.get-typography-tokens($config));
+    @include mdc-tab-indicator-theme.theme(
+      tokens-mdc-tab-indicator.get-typography-tokens($config));
+    @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
+      tokens-mat-tab-header.get-typography-tokens($config));
+    @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
+      tokens-mat-tab-header-with-background.get-typography-tokens($config));
   }
 }
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-tab-header {
-    @include mdc-tab-bar.density($density-scale, $query: mdc-helpers.$mdc-base-styles-query);
+    @include mdc-tab-theme.secondary-navigation-tab-theme(
+      tokens-mdc-tab.get-density-tokens($density-scale));
+    @include mdc-tab-indicator-theme.theme(
+      tokens-mdc-tab-indicator.get-density-tokens($density-scale));
+    @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
+      tokens-mat-tab-header.get-density-tokens($density-scale));
+    @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
+      tokens-mat-tab-header-with-background.get-density-tokens($density-scale));
   }
 }