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

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);
     }
   }
 }

package/tree/_tree-theme.scss

@@ -1,41 +1,37 @@
-@use 'sass:map';
 @use '../core/density/private/compatibility';
 @use '../core/theming/theming';
+@use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
 @use './tree-variables';
 
-@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-tree {
-    background: theming.get-color-from-palette($background, 'card');
+    background: inspection.get-theme-color($theme, background, card);
   }
 
   .mat-tree-node,
   .mat-nested-tree-node {
-    color: theming.get-color-from-palette($foreground, text);
+    color: inspection.get-theme-color($theme, foreground, text);
   }
 }
 
-@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);
+
   .mat-tree {
-    font-family: typography-utils.font-family($config);
+    font-family: inspection.get-theme-typography($theme, body-2, font-family);
   }
 
   .mat-tree-node,
   .mat-nested-tree-node {
-    font-weight: typography-utils.font-weight($config, body-1);
-    font-size: typography-utils.font-size($config, body-1);
+    font-weight: inspection.get-theme-typography($theme, body-2, font-weight);
+    font-size: inspection.get-theme-typography($theme, body-2, font-size);
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
+  $density-scale: inspection.get-theme-density($theme);
   $height: compatibility.private-density-prop-value(tree-variables.$density-config,
     $density-scale, height);
 
@@ -46,21 +42,16 @@
   }
 }
 
-@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-tree') {
-    $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/core/typography/_typography-deprecated.scss

@@ -1,39 +0,0 @@
-@use 'typography';
-
-// @deprecated Use `define-typography-level`.
-@function level(
-  $font-size,
-  $line-height: $font-size,
-  $font-weight: 400,
-  $font-family: null,
-  $letter-spacing: normal) {
-  @return typography.define-typography-level($font-size, $line-height, $font-weight, $font-family,
-    $letter-spacing);
-}
-
-// @deprecated Use `typography-hierarchy`.
-@mixin base-typography($config-or-theme, $selector: '.mat-typography') {
-  @include typography.legacy-typography-hierarchy($config-or-theme, $selector);
-}
-
-// @deprecated Use `define-typography-config`.
-@function config(
-  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
-  $display-4:     typography.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
-  $display-3:     typography.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
-  $display-2:     typography.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
-  $display-1:     typography.define-typography-level(34px, 40px, 400),
-  $headline:      typography.define-typography-level(24px, 32px, 400),
-  $title:         typography.define-typography-level(20px, 32px, 500),
-  $subheading-2:  typography.define-typography-level(16px, 28px, 400),
-  $subheading-1:  typography.define-typography-level(15px, 24px, 400),
-  $body-2:        typography.define-typography-level(14px, 24px, 500),
-  $body-1:        typography.define-typography-level(14px, 20px, 400),
-  $caption:       typography.define-typography-level(12px, 20px, 400),
-  $button:        typography.define-typography-level(14px, 14px, 500),
-  $input:         typography.define-typography-level(inherit, 1.125, 400)
-) {
-  @return typography.define-legacy-typography-config($font-family, $display-4, $display-3,
-    $display-2, $display-1, $headline, $title, $subheading-2, $subheading-1, $body-2,
-    $body-1, $caption, $button, $input);
-}