@angular/material 17.0.0-rc.3 → 17.0.1

package/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -12,14 +12,15 @@
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
-      <button
-        type="button"
-        aria-label="Toggle sidenav"
-        mat-icon-button
-        (click)="drawer.toggle()"
-        *ngIf="isHandset$ | async">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-      </button>
+      @if (isHandset$ | async) {
+        <button
+          type="button"
+          aria-label="Toggle sidenav"
+          mat-icon-button
+          (click)="drawer.toggle()">
+          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+        </button>
+      }
       <span><%= project %></span>
     </mat-toolbar>
     <!-- Add Content Here -->

package/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,5 +1,6 @@
 import { Component, inject<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';<% if(standalone) { %>
+import { AsyncPipe } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -7,7 +8,6 @@ import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';<% } %>
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
-import { AsyncPipe, NgIf } from '@angular/common';
 
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -29,7 +29,6 @@ import { AsyncPipe, NgIf } from '@angular/common';
     MatListModule,
     MatIconModule,
     AsyncPipe,
-    NgIf
   ]<% } %>
 })
 export class <%= classify(name) %>Component {

package/schematics/ng-update/index_bundled.js

@@ -474,9 +474,9 @@ var require_tslib = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/legacy-imports-error.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/legacy-imports-error.js
 var require_legacy_imports_error = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/legacy-imports-error.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/legacy-imports-error.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.legacyImportsError = void 0;
@@ -543,9 +543,9 @@ ${filesMessage}
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js
 var require_attribute_selectors = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/attribute-selectors.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.attributeSelectors = void 0;
@@ -553,9 +553,9 @@ var require_attribute_selectors = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js
 var require_class_names = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/class-names.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.classNames = void 0;
@@ -563,9 +563,9 @@ var require_class_names = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js
 var require_constructor_checks = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/constructor-checks.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.constructorChecks = void 0;
@@ -573,9 +573,9 @@ var require_constructor_checks = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js
 var require_css_selectors = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/css-selectors.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.cssSelectors = void 0;
@@ -583,9 +583,9 @@ var require_css_selectors = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js
 var require_element_selectors = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/element-selectors.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.elementSelectors = void 0;
@@ -593,9 +593,9 @@ var require_element_selectors = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js
 var require_input_names = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/input-names.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.inputNames = void 0;
@@ -603,9 +603,9 @@ var require_input_names = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js
 var require_method_call_checks = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/method-call-checks.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.methodCallChecks = void 0;
@@ -613,9 +613,9 @@ var require_method_call_checks = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js
 var require_output_names = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/output-names.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.outputNames = void 0;
@@ -623,9 +623,9 @@ var require_output_names = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js
 var require_property_names = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/property-names.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.propertyNames = void 0;
@@ -633,9 +633,9 @@ var require_property_names = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js
 var require_symbol_removal = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/symbol-removal.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.symbolRemoval = void 0;
@@ -643,9 +643,9 @@ var require_symbol_removal = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/index.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/index.js
 var require_data = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/data/index.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/data/index.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     var tslib_1 = require_tslib();
@@ -662,9 +662,9 @@ var require_data = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js
 var require_upgrade_data = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/upgrade-data.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.materialUpgradeData = void 0;
@@ -684,9 +684,9 @@ var require_upgrade_data = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/migration.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/migration.js
 var require_migration = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/migration.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/migration.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.addThemeBaseMixins = exports.checkThemeBaseMixins = void 0;
@@ -903,9 +903,9 @@ var require_migration = __commonJS({
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/index.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/index.js
 var require_theme_base_v17 = __commonJS({
-  "bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/index.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/index.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ThemeBaseMigration = void 0;
@@ -988,7 +988,7 @@ ${mixinsText}`
   }
 });
 
-// bazel-out/k8-fastbuild/bin/src/material/schematics/ng-update/index.mjs
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/index.mjs
 var ng_update_exports = {};
 __export(ng_update_exports, {
   updateToV17: () => updateToV17

package/slide-toggle/_slide-toggle-theme.scss

@@ -1,82 +1,116 @@
+@use 'sass:map';
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
-@use '../core/tokens/m2/mdc/switch' as m2-mdc-switch;
-@use '../core/tokens/m2/mat/slide-toggle' as m2-mat-slide-toggle;
+@use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
+@use '../core/tokens/m2/mat/slide-toggle' as tokens-mat-slide-toggle;
 @use '../core/tokens/token-utils';
 
 @mixin base($theme) {
-  .mdc-switch {
-    @include mdc-switch-theme.theme(m2-mdc-switch.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    .mdc-switch {
+      @include mdc-switch-theme.theme(tokens-mdc-switch.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $mdc-switch-color-tokens: m2-mdc-switch.get-color-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    $mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme);
 
-  @include mdc-helpers.using-mdc-theme($theme) {
-    // Add values for MDC slide toggles tokens
-    .mat-mdc-slide-toggle {
-      @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
-      @include mdc-switch-theme.theme($mdc-switch-color-tokens);
+    @include mdc-helpers.using-mdc-theme($theme) {
+      // Add values for MDC slide toggles tokens
+      .mat-mdc-slide-toggle {
+        @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
+        @include mdc-switch-theme.theme($mdc-switch-color-tokens);
 
-      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-      .mdc-switch--disabled + label {
-        color: inspection.get-theme-color($theme, foreground, disabled-text);
-      }
+        // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
+        .mdc-switch--disabled + label {
+          color: inspection.get-theme-color($theme, foreground, disabled-text);
+        }
 
-      // Change the color palette related tokens to accent or warn if applicable
-      &.mat-accent {
-        @include mdc-switch-theme.theme(
-            m2-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
-      }
+        // Change the color palette related tokens to accent or warn if applicable
+        &.mat-accent {
+          @include mdc-switch-theme.theme(
+              tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
+        }
 
-      &.mat-warn {
-        @include mdc-switch-theme.theme(
-            m2-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
+        &.mat-warn {
+          @include mdc-switch-theme.theme(
+              tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
+        }
       }
     }
   }
 }
 
 @mixin typography($theme) {
-  $mdc-switch-typography-tokens: m2-mdc-switch.get-typography-tokens($theme);
-  $mat-slide-toggle-typography-tokens: m2-mat-slide-toggle.get-typography-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    $mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme);
+    $mat-slide-toggle-typography-tokens: tokens-mat-slide-toggle.get-typography-tokens($theme);
 
-  //Add values for MDC slide toggle tokens
-  .mat-mdc-slide-toggle {
-    @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
-    @include mdc-switch-theme.theme($mdc-switch-typography-tokens);
-    @include token-utils.create-token-values(
-      m2-mat-slide-toggle.$prefix,
-      $mat-slide-toggle-typography-tokens
-    );
+    //Add values for MDC slide toggle tokens
+    .mat-mdc-slide-toggle {
+      @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
+      @include mdc-switch-theme.theme($mdc-switch-typography-tokens);
+      @include token-utils.create-token-values(
+          tokens-mat-slide-toggle.$prefix,
+          $mat-slide-toggle-typography-tokens
+      );
+    }
   }
 }
 
 @mixin density($theme) {
-  $density-scale: inspection.get-theme-density($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);
 
-  .mat-mdc-slide-toggle {
-    @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
+    .mat-mdc-slide-toggle {
+      @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
-    @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 mdc-switch-theme.theme(map.get($tokens, tokens-mdc-switch.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mat-slide-toggle.$prefix, map.get($tokens, tokens-mat-slide-toggle.$prefix));
+  }
+}

package/sort/_sort-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/tokens/m2/mat/sort' as tokens-mat-sort;
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
@@ -5,42 +6,72 @@
 @use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
 
-@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-sort.$prefix,
-      tokens-mat-sort.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-sort.$prefix,
+        tokens-mat-sort.get-color-tokens($theme));
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-sort.$prefix,
-      tokens-mat-sort.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-sort.$prefix,
+        tokens-mat-sort.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-sort.$prefix,
-      tokens-mat-sort.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-sort.$prefix,
+        tokens-mat-sort.get-density-tokens($theme));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {
-    @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-sort.$prefix, map.get($tokens, tokens-mat-sort.$prefix));
+  }
+}

package/stepper/_stepper-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -5,50 +6,82 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper;
 
-@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-stepper.$prefix,
-      tokens-mat-stepper.get-color-tokens($theme));
-
-    .mat-step-header.mat-accent {
+  @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-stepper.$prefix,
-        tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent));
-    }
+        tokens-mat-stepper.get-color-tokens($theme));
 
-    .mat-step-header.mat-warn {
-      @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-        tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn));
+      .mat-step-header.mat-accent {
+        @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
+          tokens-mat-stepper.private-get-color-palette-color-tokens($theme, accent));
+      }
+
+      .mat-step-header.mat-warn {
+        @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
+          tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn));
+      }
     }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-      tokens-mat-stepper.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-stepper.$prefix,
+        tokens-mat-stepper.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-      tokens-mat-stepper.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
+        tokens-mat-stepper.get-density-tokens($theme));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
-    @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-stepper.$prefix, map.get($tokens, tokens-mat-stepper.$prefix));
+  }
+}