@angular/material 17.0.0-next.0 → 17.0.0-next.2

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

@@ -1,57 +1,48 @@
 @use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/style/sass-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mdc/snack-bar' as tokens-mdc-snack-bar;
 @use '../core/tokens/m2/mat/snack-bar' as tokens-mat-snack-bar;
 
-@mixin base($config-or-theme) {
+@mixin base($theme) {
     // 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());
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  .mat-mdc-snack-bar-container {
-    @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-color-tokens($config));
+@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($config)
+      tokens-mat-snack-bar.get-color-tokens($theme)
     );
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-
-  .mat-mdc-snack-bar-container {
-    @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-typography-tokens($config));
+@mixin typography($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-snackbar-theme.theme(tokens-mdc-snack-bar.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {}
+@mixin density($theme) {}
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
     @include base($theme);
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/sort/_sort-theme.scss

@@ -1,16 +1,12 @@
 @use 'sass:color';
-@use 'sass:map';
 @use 'sass:meta';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
-
+@mixin color($theme) {
   .mat-sort-header-arrow {
-    $table-background: theming.get-color-from-palette($background, 'card');
-    $text-color: theming.get-color-from-palette($foreground, secondary-text);
+    $table-background: inspection.get-theme-color($theme, background, card);
+    $text-color: inspection.get-theme-color($theme, foreground, secondary-text);
 
     // Because the arrow is made up of multiple elements that are stacked on top of each other,
     // we can't use the semi-transparent color from the theme directly. If the value is a color
@@ -28,25 +24,20 @@
   }
 }
 
-@mixin typography($config-or-theme) {}
+@mixin typography($theme) {}
 
-@mixin density($config-or-theme) {}
+@mixin density($theme) {}
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/stepper/_stepper-theme.scss

@@ -1,69 +1,51 @@
-@use 'sass:map';
-@use 'sass:math';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use '../core/density/private/compatibility';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper;
-@use './stepper-variables';
-
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
 
+@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($config));
+      tokens-mat-stepper.get-color-tokens($theme));
 
     .mat-step-header.mat-accent {
       @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
-        tokens-mat-stepper.private-get-color-palette-color-tokens(map.get($config, accent)));
+        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(map.get($config, warn)));
+        tokens-mat-stepper.private-get-color-palette-color-tokens($theme, warn));
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
-
+@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($config));
+      tokens-mat-stepper.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-  $height: compatibility.private-density-prop-value(stepper-variables.$density-config,
-    $density-scale, height);
-  $vertical-padding: math.div($height - stepper-variables.$label-header-height, 2);
-
+@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($density-scale));
+      tokens-mat-stepper.get-density-tokens($theme));
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/table/_table-theme.scss

@@ -1,5 +1,6 @@
 @use '../core/tokens/m2/mat/table' as tokens-mat-table;
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 
@@ -14,49 +15,37 @@
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   @include _output-tokens {
     @include token-utils.create-token-values(tokens-mat-table.$prefix,
-      tokens-mat-table.get-color-tokens($config));
+      tokens-mat-table.get-color-tokens($theme));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include _output-tokens {
     @include token-utils.create-token-values(tokens-mat-table.$prefix,
-      tokens-mat-table.get-typography-tokens($config));
+      tokens-mat-table.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-
+@mixin density($theme) {
   @include _output-tokens {
     @include token-utils.create-token-values(tokens-mat-table.$prefix,
-      tokens-mat-table.get-density-tokens($density-scale));
+      tokens-mat-table.get-density-tokens($theme));
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/tabs/_tabs-theme.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/tab/tab-theme' as mdc-tab-theme;
 @use '../core/tokens/m2/mdc/tab' as tokens-mdc-tab;
@@ -6,99 +5,86 @@
 @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/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 
-
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
-    @include _palette-styles($config, primary);
+    @include _palette-styles($theme, primary);
 
     &.mat-accent {
-      @include _palette-styles($config, accent);
+      @include _palette-styles($theme, accent);
     }
 
     &.mat-warn {
-      @include _palette-styles($config, warn);
+      @include _palette-styles($theme, warn);
     }
 
     &.mat-background-primary {
-      @include _background-styles($config, primary);
+      @include _background-styles($theme, primary);
     }
 
     &.mat-background-accent {
-      @include _background-styles($config, accent);
+      @include _background-styles($theme, accent);
     }
 
     &.mat-background-warn {
-      @include _background-styles($config, warn);
+      @include _background-styles($theme, warn);
     }
   }
 }
 
-@mixin _background-styles($initial-config, $palette) {
-  $config: map.merge($initial-config, (primary: map.get($initial-config, $palette)));
+@mixin _background-styles($theme, $palette-name) {
   @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
-    tokens-mat-tab-header-with-background.get-color-tokens($config));
+    tokens-mat-tab-header-with-background.get-color-tokens($theme, $palette-name));
 }
 
-@mixin _palette-styles($initial-config, $palette) {
-  $config: map.merge($initial-config, (primary: map.get($initial-config, $palette)));
+@mixin _palette-styles($theme, $palette-name) {
   @include mdc-tab-theme.secondary-navigation-tab-theme(
-    tokens-mdc-tab.get-color-tokens($config));
+    tokens-mdc-tab.get-color-tokens($theme, $palette-name));
   @include mdc-tab-indicator-theme.theme(
-    tokens-mdc-tab-indicator.get-color-tokens($config));
+    tokens-mdc-tab-indicator.get-color-tokens($theme, $palette-name));
   @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
-   tokens-mat-tab-header.get-color-tokens($config));
+   tokens-mat-tab-header.get-color-tokens($theme, $palette-name));
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   .mat-mdc-tab-header {
     @include mdc-tab-theme.secondary-navigation-tab-theme(
-      tokens-mdc-tab.get-typography-tokens($config));
+      tokens-mdc-tab.get-typography-tokens($theme));
     @include mdc-tab-indicator-theme.theme(
-      tokens-mdc-tab-indicator.get-typography-tokens($config));
+      tokens-mdc-tab-indicator.get-typography-tokens($theme));
     @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
-      tokens-mat-tab-header.get-typography-tokens($config));
+      tokens-mat-tab-header.get-typography-tokens($theme));
     @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
-      tokens-mat-tab-header-with-background.get-typography-tokens($config));
+      tokens-mat-tab-header-with-background.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
   .mat-mdc-tab-header {
     @include mdc-tab-theme.secondary-navigation-tab-theme(
-      tokens-mdc-tab.get-density-tokens($density-scale));
+      tokens-mdc-tab.get-density-tokens($theme));
     @include mdc-tab-indicator-theme.theme(
-      tokens-mdc-tab-indicator.get-density-tokens($density-scale));
+      tokens-mdc-tab-indicator.get-density-tokens($theme));
     @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
-      tokens-mat-tab-header.get-density-tokens($density-scale));
+      tokens-mat-tab-header.get-density-tokens($theme));
     @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
-      tokens-mat-tab-header-with-background.get-density-tokens($density-scale));
+      tokens-mat-tab-header-with-background.get-density-tokens($theme));
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/toolbar/_toolbar-theme.scss

@@ -1,77 +1,68 @@
-@use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar;
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
-@mixin _palette-styles($palette) {
+@mixin _palette-styles($theme, $palette-name) {
   @include token-utils.create-token-values(
     tokens-mat-toolbar.$prefix,
     tokens-mat-toolbar.private-get-color-palette-color-tokens(
-      $background-color: theming.get-color-from-palette($palette),
-      $text-color: theming.get-color-from-palette($palette, default-contrast)
+      $background-color: inspection.get-theme-color($theme, $palette-name),
+      $text-color: inspection.get-theme-color($theme, $palette-name, default-contrast)
     )
   );
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@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($config));
+      tokens-mat-toolbar.get-color-tokens($theme));
   }
 
   .mat-toolbar {
     &.mat-primary {
-      @include _palette-styles(map.get($config, primary));
+      @include _palette-styles($theme, primary);
     }
 
     &.mat-accent {
-      @include _palette-styles(map.get($config, accent));
+      @include _palette-styles($theme, accent);
     }
 
     &.mat-warn {
-      @include _palette-styles(map.get($config, warn));
+      @include _palette-styles($theme, warn);
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(
-      theming.get-typography-config($config-or-theme));
+@mixin typography($theme) {
+  // 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($config));
+      tokens-mat-toolbar.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-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($density-scale));
+      tokens-mat-toolbar.get-density-tokens($theme));
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/tooltip/_tooltip-theme.scss

@@ -1,19 +1,19 @@
 @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;
 
-@mixin base($config-or-theme) {
+@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());
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $mdc-tooltip-color-tokens: m2-mdc-plain-tooltip.get-color-tokens($config);
+@mixin color($theme) {
+  $mdc-tooltip-color-tokens: m2-mdc-plain-tooltip.get-color-tokens($theme);
 
   // Add values for MDC tooltip tokens.
   @include sass-utils.current-selector-or-root() {
@@ -21,10 +21,8 @@
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-          theming.get-typography-config($config-or-theme));
-  $mdc-tooltip-typography-tokens: m2-mdc-plain-tooltip.get-typography-tokens($config);
+@mixin typography($theme) {
+  $mdc-tooltip-typography-tokens: m2-mdc-plain-tooltip.get-typography-tokens($theme);
 
   // Add values for MDC tooltip tokens.
   @include sass-utils.current-selector-or-root() {
@@ -32,9 +30,8 @@
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-  $mdc-tooltip-density-tokens: m2-mdc-plain-tooltip.get-density-tokens($density-scale);
+@mixin density($theme) {
+  $mdc-tooltip-density-tokens: m2-mdc-plain-tooltip.get-density-tokens($theme);
 
   // Add values for MDC tooltip tokens.
   @include sass-utils.current-selector-or-root() {
@@ -42,22 +39,17 @@
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
-
     @include base($theme);
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
-    @if $density != null {
-      @include density($density);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }