@angular/material 17.0.0-next.4 → 17.0.0-next.6

package/slider/_slider-theme.scss

@@ -1,78 +1,104 @@
+@use 'sass:map';
 @use '@material/slider/slider-theme' as mdc-slider-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mat/slider' as m2-mat-slider;
-@use '../core/tokens/m2/mdc/slider' as m2-mdc-slider;
+@use '../core/tokens/m2/mat/slider' as tokens-mat-slider;
+@use '../core/tokens/m2/mdc/slider' as tokens-mdc-slider;
 
 @mixin base($theme) {
-  // Add default values for tokens not related to color, typography, or density.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-slider-theme.theme(m2-mdc-slider.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    // Add default values for tokens not related to color, typography, or density.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-slider-theme.theme(tokens-mdc-slider.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
+  @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-color-tokens: token-utils.resolve-elevation(
-    m2-mdc-slider.get-color-tokens($theme),
-    handle-elevation,
-    handle-shadow-color
-  );
+    $mdc-color-tokens: token-utils.resolve-elevation(
+        tokens-mdc-slider.get-color-tokens($theme),
+        handle-elevation,
+        handle-shadow-color
+    );
 
-  $mat-slider-color-tokens: m2-mat-slider.get-color-tokens($theme);
+    $mat-slider-color-tokens: tokens-mat-slider.get-color-tokens($theme);
 
-  // Add values for MDC slider tokens.
-  .mat-mdc-slider {
-    @include mdc-slider-theme.theme($mdc-color-tokens);
-    @include _slider-ripple-color($theme, primary);
-    @include token-utils.create-token-values(
-      m2-mat-slider.$prefix,
-      $mat-slider-color-tokens
-    );
+    // Add values for MDC slider tokens.
+    .mat-mdc-slider {
+      @include mdc-slider-theme.theme($mdc-color-tokens);
+      @include _slider-ripple-color($theme, primary);
+      @include token-utils.create-token-values(
+          tokens-mat-slider.$prefix,
+          $mat-slider-color-tokens
+      );
 
-    &.mat-accent {
-      @include mdc-slider-theme.theme(
-          m2-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
-      @include _slider-ripple-color($theme, accent);
-    }
+      &.mat-accent {
+        @include mdc-slider-theme.theme(
+            tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
+        @include _slider-ripple-color($theme, accent);
+      }
 
-    &.mat-warn {
-      @include mdc-slider-theme.theme(
-          m2-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
-      @include _slider-ripple-color($theme, warn);
+      &.mat-warn {
+        @include mdc-slider-theme.theme(
+            tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
+        @include _slider-ripple-color($theme, warn);
+      }
     }
   }
 }
 
 @mixin typography($theme) {
-  // Add values for MDC slider tokens.
-  .mat-mdc-slider {
-    @include mdc-slider-theme.theme(m2-mdc-slider.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    // Add values for MDC slider tokens.
+    .mat-mdc-slider {
+      @include mdc-slider-theme.theme(tokens-mdc-slider.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  // Add values for MDC slider tokens.
-  .mat-mdc-slider {
-    @include mdc-slider-theme.theme(m2-mdc-slider.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    // Add values for MDC slider tokens.
+    .mat-mdc-slider {
+      @include mdc-slider-theme.theme(tokens-mdc-slider.get-density-tokens($theme));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') {
-    @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);
+      }
     }
   }
 }
@@ -85,3 +111,11 @@
   --mat-mdc-slider-hover-ripple-color: #{rgba($color, 0.05)};
   --mat-mdc-slider-focus-ripple-color: #{rgba($color, 0.2)};
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-slider-theme.theme(map.get($tokens, tokens-mdc-slider.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mat-slider.$prefix, map.get($tokens, tokens-mat-slider.$prefix));
+  }
+}

package/snack-bar/_snack-bar-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -8,25 +9,40 @@
 @use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar;
 
 @mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
     // Add default values for tokens not related to color, typography, or density.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-unthemable-tokens());
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-color-tokens($theme));
-    @include token-utils.create-token-values(
-      tokens-mat-snack-bar.$prefix,
-      tokens-mat-snack-bar.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 mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+          tokens-mat-snack-bar.$prefix,
+          tokens-mat-snack-bar.get-color-tokens($theme)
+      );
+    }
   }
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.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 mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-typography-tokens($theme));
+    }
   }
 }
 
@@ -34,16 +50,28 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
-    @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-snackbar-theme.theme(map.get($tokens, tokens-mdc-snack-bar.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mat-snack-bar.$prefix, map.get($tokens, tokens-mat-snack-bar.$prefix));
+  }
+}

package/toolbar/_toolbar-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -16,53 +17,80 @@
 }
 
 @mixin color($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
-      tokens-mat-toolbar.get-color-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
-
-  .mat-toolbar {
-    &.mat-primary {
-      @include _palette-styles($theme, primary);
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
+        tokens-mat-toolbar.get-color-tokens($theme));
     }
 
-    &.mat-accent {
-      @include _palette-styles($theme, accent);
-    }
+    .mat-toolbar {
+      &.mat-primary {
+        @include _palette-styles($theme, primary);
+      }
+
+      &.mat-accent {
+        @include _palette-styles($theme, accent);
+      }
 
-    &.mat-warn {
-      @include _palette-styles($theme, warn);
+      &.mat-warn {
+        @include _palette-styles($theme, warn);
+      }
     }
   }
 }
 
 @mixin typography($theme) {
-  // TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
-  $theme: inspection.private-get-typography-back-compat-theme($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    // TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
+    $theme: inspection.private-get-typography-back-compat-theme($theme);
 
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
-      tokens-mat-toolbar.get-typography-tokens($theme));
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
+        tokens-mat-toolbar.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
-      tokens-mat-toolbar.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-toolbar.$prefix,
+        tokens-mat-toolbar.get-density-tokens($theme));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {
-    @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 {
+      @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-toolbar.$prefix,
+      map.get($tokens, tokens-mat-toolbar.$prefix));
+  }
+}

package/tooltip/_tooltip-theme.scss

@@ -1,55 +1,87 @@
+@use 'sass:map';
 @use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
+@use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
 
 @mixin base($theme) {
-  // Add default values for tokens not related to color, typography, or density.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-plain-tooltip-theme.theme(m2-mdc-plain-tooltip.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    // Add default values for tokens not related to color, typography, or density.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-plain-tooltip-theme.theme(tokens-mdc-plain-tooltip.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  $mdc-tooltip-color-tokens: m2-mdc-plain-tooltip.get-color-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    $mdc-tooltip-color-tokens: tokens-mdc-plain-tooltip.get-color-tokens($theme);
 
-  // Add values for MDC tooltip tokens.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
+    // Add values for MDC tooltip tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
+    }
   }
 }
 
 @mixin typography($theme) {
-  $mdc-tooltip-typography-tokens: m2-mdc-plain-tooltip.get-typography-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    $mdc-tooltip-typography-tokens: tokens-mdc-plain-tooltip.get-typography-tokens($theme);
 
-  // Add values for MDC tooltip tokens.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
+    // Add values for MDC tooltip tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
+    }
   }
 }
 
 @mixin density($theme) {
-  $mdc-tooltip-density-tokens: m2-mdc-plain-tooltip.get-density-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    $mdc-tooltip-density-tokens: tokens-mdc-plain-tooltip.get-density-tokens($theme);
 
-  // Add values for MDC tooltip tokens.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
+    // Add values for MDC tooltip tokens.
+    @include sass-utils.current-selector-or-root() {
+      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') {
-    @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-plain-tooltip-theme.theme(map.get($tokens, tokens-mdc-plain-tooltip.$prefix));
+  }
+}