@angular/material 17.0.1 → 17.0.3

package/icon/_icon-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/m2/mat/icon' as tokens-mat-icon;
@@ -10,45 +11,76 @@
   @include token-utils.create-token-values(tokens-mat-icon.$prefix, $tokens);
 }
 
-@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-icon.$prefix,
-      tokens-mat-icon.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
-
-  .mat-icon {
-    &.mat-primary {
-      @include _palette-colors($theme, primary);
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-icon.$prefix,
+        tokens-mat-icon.get-color-tokens($theme));
     }
 
-    &.mat-accent {
-      @include _palette-colors($theme, accent);
-    }
+    .mat-icon {
+      &.mat-primary {
+        @include _palette-colors($theme, primary);
+      }
+
+      &.mat-accent {
+        @include _palette-colors($theme, accent);
+      }
 
-    &.mat-warn {
-      @include _palette-colors($theme, warn);
+      &.mat-warn {
+        @include _palette-colors($theme, warn);
+      }
     }
   }
 }
 
-@mixin typography($theme) {}
+@mixin typography($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-@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-icon') {
-    @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 token-utils.create-token-values(
+        tokens-mat-icon.$prefix, map.get($tokens, tokens-mat-icon.$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.1",
+  "version": "17.0.3",
   "description": "Angular Material",
   "repository": {
     "type": "git",
@@ -478,7 +478,7 @@
   },
   "peerDependencies": {
     "@angular/animations": "^17.0.0 || ^18.0.0",
-    "@angular/cdk": "17.0.1",
+    "@angular/cdk": "17.0.3",
     "@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));
+  }
+}