@angular/material 17.0.0 → 17.0.2

package/list/_list-theme.scss

@@ -14,139 +14,171 @@
 
 @mixin base($theme) {
   // Add default values for tokens not related to color, typography, or density.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-list-theme.theme(tokens-mdc-list.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-list-theme.theme(tokens-mdc-list.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  $mdc-list-color-tokens: tokens-mdc-list.get-color-tokens($theme);
-
-  // Add values for MDC list tokens.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-list-theme.theme($mdc-list-color-tokens);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
+  @else {
+    $mdc-list-color-tokens: tokens-mdc-list.get-color-tokens($theme);
 
-  .mdc-list-item__start,
-  .mdc-list-item__end {
-    @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
-  }
+    // Add values for MDC list tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-list-theme.theme($mdc-list-color-tokens);
+    }
 
-  .mat-accent {
     .mdc-list-item__start,
     .mdc-list-item__end {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, accent));
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
     }
-  }
 
-  .mat-warn {
-    .mdc-list-item__start,
-    .mdc-list-item__end {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
+    .mat-accent {
+      .mdc-list-item__start,
+      .mdc-list-item__end {
+        @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, accent));
+      }
     }
-  }
 
-  .mat-mdc-list-option {
-    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
-  }
-  .mat-mdc-list-option.mat-accent {
-    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
-  }
-  .mat-mdc-list-option.mat-warn {
-    @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
-  }
+    .mat-warn {
+      .mdc-list-item__start,
+      .mdc-list-item__end {
+        @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
+      }
+    }
 
-  // There is no token for activated color on nav list.
-  // TODO(mmalerba): Add a token to MDC or make a custom one.
-  .mat-mdc-list-base.mat-mdc-list-base {
-    @include evolution-mixins.list-selected-ink-color(inspection.get-theme-color($theme, primary));
-  }
+    .mat-mdc-list-option {
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
+    }
+    .mat-mdc-list-option.mat-accent {
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
+    }
+    .mat-mdc-list-option.mat-warn {
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
+    }
 
-  // TODO(mmalerba): Leaking styles from the old MDC list mixins used in other components can cause
-  //  opacity issues, so we need this override for now. We can remove it when all Angular Material
-  //  components stop using the old MDC mixins.
-  .mat-mdc-list-base .mdc-list-item--disabled {
-    .mdc-list-item__start,
-    .mdc-list-item__content,
-    .mdc-list-item__end {
-      opacity: 1;
+    // There is no token for activated color on nav list.
+    // TODO(mmalerba): Add a token to MDC or make a custom one.
+    .mat-mdc-list-base.mat-mdc-list-base {
+      @include evolution-mixins.list-selected-ink-color(
+          inspection.get-theme-color($theme, primary));
+    }
+
+    // TODO(mmalerba): Leaking styles from the old MDC list mixins used in other components can
+    //  cause opacity issues, so we need this override for now. We can remove it when all
+    //  Angular Material components stop using the old MDC mixins.
+    .mat-mdc-list-base .mdc-list-item--disabled {
+      .mdc-list-item__start,
+      .mdc-list-item__content,
+      .mdc-list-item__end {
+        opacity: 1;
+      }
     }
   }
 }
 
 @mixin density($theme) {
-  $density-scale: inspection.get-theme-density($theme);
-  $mdc-list-density-tokens: tokens-mdc-list.get-density-tokens($theme);
-
-  // Add values for MDC list tokens.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-list-theme.theme($mdc-list-density-tokens);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
+  @else {
+    $density-scale: inspection.get-theme-density($theme);
+    $mdc-list-density-tokens: tokens-mdc-list.get-density-tokens($theme);
 
-  .mdc-list-item__start,
-  .mdc-list-item__end {
-    @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
-  }
+    // Add values for MDC list tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-list-theme.theme($mdc-list-density-tokens);
+    }
 
-  // TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based API,
-  //  to avoid screenshot diffs. We should remove it in favor of following MDC's current style, or
-  //  add custom tokens for it.
-  .mat-mdc-list-item {
-    &.mdc-list-item--with-leading-avatar,
-    &.mdc-list-item--with-leading-checkbox,
-    &.mdc-list-item--with-leading-icon {
-      &.mdc-list-item--with-one-line {
-        height: map.get((
+    .mdc-list-item__start,
+    .mdc-list-item__end {
+      @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
+    }
+
+    // TODO(mmalerba): This is added to maintain the same style MDC used prior to the token-based
+    //  API, to avoid screenshot diffs. We should remove it in favor of following MDC's current
+    //  style, or add custom tokens for it.
+    .mat-mdc-list-item {
+      &.mdc-list-item--with-leading-avatar,
+      &.mdc-list-item--with-leading-checkbox,
+      &.mdc-list-item--with-leading-icon {
+        &.mdc-list-item--with-one-line {
+          height: map.get((
             0: 56px,
             -1: 52px,
             -2: 48px,
             -3: 44px,
             -4: 40px,
             -5: 40px,
-        ), $density-scale);
-      }
+          ), $density-scale);
+        }
 
-      &.mdc-list-item--with-two-lines {
-        height: map.get((
+        &.mdc-list-item--with-two-lines {
+          height: map.get((
             0: 72px,
             -1: 68px,
             -2: 64px,
             -3: 60px,
             -4: 56px,
             -5: 56px,
-        ), $density-scale);
+          ), $density-scale);
+        }
       }
     }
   }
 }
 
 @mixin typography($theme) {
-  $mdc-list-typography-tokens: tokens-mdc-list.get-typography-tokens($theme);
-
-  // Add values for MDC list tokens.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-list-theme.theme($mdc-list-typography-tokens);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
+  @else {
+    $mdc-list-typography-tokens: tokens-mdc-list.get-typography-tokens($theme);
 
-  // MDC does not have tokens for the subheader.
-  // TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
-  .mdc-list-group__subheader {
-    font: inspection.get-theme-typography($theme, subtitle-1, font);
-    letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
+    // Add values for MDC list tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-list-theme.theme($mdc-list-typography-tokens);
+    }
+
+    // MDC does not have tokens for the subheader.
+    // TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
+    .mdc-list-group__subheader {
+      font: inspection.get-theme-typography($theme, subtitle-1, font);
+      letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-list') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
-    }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-list-theme.theme(map.get($tokens, tokens-mdc-list.$prefix));
+  }
+}

package/menu/_menu-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/tokens/m2/mat/menu' as tokens-mat-menu;
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
@@ -6,40 +7,71 @@
 @use '../core/typography/typography';
 
 @mixin base($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-menu.$prefix,
-      tokens-mat-menu.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-menu.$prefix,
+        tokens-mat-menu.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-menu.$prefix,
-      tokens-mat-menu.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-menu.$prefix,
+        tokens-mat-menu.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-menu.$prefix,
-      tokens-mat-menu.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-menu.$prefix,
+        tokens-mat-menu.get-typography-tokens($theme));
+    }
   }
 }
 
-@mixin density($theme) {}
+@mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-menu') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
 
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-menu.$prefix, map.get($tokens, tokens-mat-menu.$prefix));
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material",
-  "version": "17.0.0",
+  "version": "17.0.2",
   "description": "Angular Material",
   "repository": {
     "type": "git",
@@ -478,7 +478,7 @@
   },
   "peerDependencies": {
     "@angular/animations": "^17.0.0 || ^18.0.0",
-    "@angular/cdk": "17.0.0",
+    "@angular/cdk": "17.0.2",
     "@angular/core": "^17.0.0 || ^18.0.0",
     "@angular/common": "^17.0.0 || ^18.0.0",
     "@angular/forms": "^17.0.0 || ^18.0.0",

package/paginator/_paginator-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use 'sass:meta';
 @use '../core/tokens/m2/mat/paginator' as tokens-mat-paginator;
 @use '../core/style/sass-utils';
@@ -7,55 +8,87 @@
 @use '../core/tokens/token-utils';
 @use '../form-field/form-field-density';
 
-@mixin base($theme) {}
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {}
+}
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
-      tokens-mat-paginator.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
+        tokens-mat-paginator.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
-      tokens-mat-paginator.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
+        tokens-mat-paginator.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  $density-scale: inspection.get-theme-density($theme);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
-      tokens-mat-paginator.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
+  @else {
+    $density-scale: inspection.get-theme-density($theme);
 
-  // TODO: this should be done through tokens once the form field has been switched over.
-  .mat-mdc-paginator {
-    // We need the form field to be narrower in order to fit into the paginator,
-    // so we set its density to be -4 or denser.
-    @if ((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or
-         $density-scale == maximum) {
-      @include form-field-density.private-form-field-density(-4);
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-paginator.$prefix,
+        tokens-mat-paginator.get-density-tokens($theme));
     }
-    @else {
-      @include form-field-density.private-form-field-density($density-scale);
+
+    // TODO: this should be done through tokens once the form field has been switched over.
+    .mat-mdc-paginator {
+      // We need the form field to be narrower in order to fit into the paginator,
+      // so we set its density to be -4 or denser.
+      @if ((meta.type-of($density-scale) == 'number' and $density-scale >= -4) or
+         $density-scale == maximum) {
+        @include form-field-density.private-form-field-density(-4);
+      }
+      @else {
+        @include form-field-density.private-form-field-density($density-scale);
+      }
     }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(
+        tokens-mat-paginator.$prefix, map.get($tokens, tokens-mat-paginator.$prefix));
+  }
+}