@angular/material 20.1.0-next.2 → 20.1.0

package/toolbar/_m2-toolbar.scss

@@ -1,55 +1,36 @@
 @use 'sass:map';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
+@function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
-  @return private-get-color-palette-color-tokens(
-    $background-color: map.get($system, surface),
-    $text-color: map.get($system, on-surface),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  $system: m2-utils.get-system($theme);
-  @return (
-    toolbar-title-text-font: map.get($system, title-small-font),
-    toolbar-title-text-line-height: map.get($system, title-small-line-height),
-    toolbar-title-text-size: map.get($system, title-small-size),
-    toolbar-title-text-tracking: map.get($system, title-small-tracking),
-    toolbar-title-text-weight: map.get($system, title-small-weight),
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
-  $standard-scale: (
-    0: 64px,
-    -1: 60px,
-    -2: 56px,
-    -3: 52px,
-  );
-
-  $mobile-scale: (
-    0: 56px,
-    -1: 52px,
-    -2: 48px,
-    -3: 44px,
-  );
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
 
   @return (
-    toolbar-standard-height: map.get($standard-scale, $density-scale),
-    toolbar-mobile-height: map.get($mobile-scale, $density-scale),
+    base: (),
+    color: private-get-color-palette-color-tokens(
+        map.get($system, surface), map.get($system, on-surface)),
+    typography: (
+      toolbar-title-text-font: map.get($system, title-small-font),
+      toolbar-title-text-line-height: map.get($system, title-small-line-height),
+      toolbar-title-text-size: map.get($system, title-small-size),
+      toolbar-title-text-tracking: map.get($system, title-small-tracking),
+      toolbar-title-text-weight: map.get($system, title-small-weight),
+    ),
+    density: (
+      toolbar-standard-height: map.get((
+        0: 64px,
+        -1: 60px,
+        -2: 56px,
+        -3: 52px,
+      ), $density-scale),
+      toolbar-mobile-height: map.get((
+        0: 56px,
+        -1: 52px,
+        -2: 48px,
+        -3: 44px,
+      ), $density-scale),
+    ),
   );
 }
 

package/toolbar/_m3-toolbar.scss

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m3';
 
 /// Generates custom tokens for the mat-toolbar.
@@ -26,7 +25,7 @@
       toolbar-title-text-tracking: map.get($system, title-large-tracking),
       toolbar-title-text-weight: map.get($system, title-large-weight),
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 }
 

package/toolbar/_toolbar-theme.scss

@@ -14,7 +14,7 @@
 }
 
 @mixin base($theme) {
-  $tokens: m2-toolbar.get-unthemable-tokens();
+  $tokens: map.get(m2-toolbar.get-tokens($theme), base);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-toolbar.get-tokens($theme), base);
   }
@@ -23,7 +23,7 @@
 }
 
 @mixin color($theme) {
-  $tokens: m2-toolbar.get-color-tokens($theme);
+  $tokens: map.get(m2-toolbar.get-tokens($theme), color);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-toolbar.get-tokens($theme), color);
   }
@@ -60,7 +60,7 @@
 }
 
   @mixin typography($theme) {
-    $tokens: m2-toolbar.get-typography-tokens($theme);
+    $tokens: map.get(m2-toolbar.get-tokens($theme), typography);
     @if inspection.get-theme-version($theme) == 1 {
       $tokens: map.get(m3-toolbar.get-tokens($theme), typography);
     }
@@ -69,7 +69,7 @@
   }
 
   @mixin density($theme) {
-    $tokens: m2-toolbar.get-density-tokens($theme);
+    $tokens: map.get(m2-toolbar.get-tokens($theme), density);
     @if inspection.get-theme-version($theme) == 1 {
       $tokens: map.get(m3-toolbar.get-tokens($theme), density);
     }

package/tooltip/_m2-tooltip.scss

@@ -1,41 +1,24 @@
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-//
-// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
-// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
-// our CSS.
-@function get-unthemable-tokens() {
-  @return (
-    tooltip-container-shape: 4px,
-    tooltip-supporting-text-line-height: 16px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
+@function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
 
   @return (
-    tooltip-container-color: map.get($system, inverse-surface),
-    tooltip-supporting-text-color: map.get($system, inverse-on-surface),
+    base: (
+      tooltip-container-shape: 4px,
+      tooltip-supporting-text-line-height: 16px,
+    ),
+    color: (
+      tooltip-container-color: map.get($system, inverse-surface),
+      tooltip-supporting-text-color: map.get($system, inverse-on-surface),
+    ),
+    typography: (
+      tooltip-supporting-text-font: map.get($system, body-small-font),
+      tooltip-supporting-text-size: map.get($system, body-small-size),
+      tooltip-supporting-text-weight: map.get($system, body-small-weight),
+      tooltip-supporting-text-tracking: map.get($system, body-small-tracking),
+    ),
+    density: (),
   );
 }
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  $system: m2-utils.get-system($theme);
-  @return (
-    tooltip-supporting-text-font: map.get($system, body-small-font),
-    tooltip-supporting-text-size: map.get($system, body-small-size),
-    tooltip-supporting-text-weight: map.get($system, body-small-weight),
-    tooltip-supporting-text-tracking: map.get($system, body-small-tracking),
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return ();
-}

package/tooltip/_tooltip-theme.scss

@@ -6,7 +6,7 @@
 @use 'sass:map';
 
 @mixin base($theme) {
-  $tokens: m2-tooltip.get-unthemable-tokens();
+  $tokens: map.get(m2-tooltip.get-tokens($theme), base);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-tooltip.get-tokens($theme), base);
   }
@@ -15,7 +15,7 @@
 }
 
 @mixin color($theme) {
-  $tokens: m2-tooltip.get-color-tokens($theme);
+  $tokens: map.get(m2-tooltip.get-tokens($theme), color);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-tooltip.get-tokens($theme), color);
   }
@@ -24,7 +24,7 @@
 }
 
 @mixin typography($theme) {
-  $tokens: m2-tooltip.get-typography-tokens($theme);
+  $tokens: map.get(m2-tooltip.get-tokens($theme), typography);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-tooltip.get-tokens($theme), typography);
   }
@@ -33,7 +33,7 @@
 }
 
 @mixin density($theme) {
-  $tokens: m2-tooltip.get-density-tokens($theme);
+  $tokens: map.get(m2-tooltip.get-tokens($theme), density);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-tooltip.get-tokens($theme), density);
   }

package/tree/_m2-tree.scss

@@ -1,48 +1,30 @@
 @use 'sass:map';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $system: m2-utils.get-system($theme);
-
-  @return (
-    tree-container-background-color: map.get($system, surface),
-    tree-node-text-color: map.get($system, on-surface),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
+@function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
-  @return (
-    tree-node-text-font: map.get($system, body-medium-font),
-    tree-node-text-size: map.get($system, body-medium-size),
-    tree-node-text-weight: map.get($system, body-medium-weight),
-
-    // TODO(crisbeto): provide tokens for line height and letter spacing to match other components.
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
-  $min-height-scale: (
-    0: 48px,
-    -1: 44px,
-    -2: 40px,
-    -3: 36px,
-    -4: 28px,
-  );
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -4);
 
   @return (
-    tree-node-min-height: map.get($min-height-scale, $density-scale)
+    base: (),
+    color: (
+      tree-container-background-color: map.get($system, surface),
+      tree-node-text-color: map.get($system, on-surface),
+    ),
+    typography: (
+      // TODO(crisbeto): provide tokens for line height and letter spacing
+      tree-node-text-font: map.get($system, body-medium-font),
+      tree-node-text-size: map.get($system, body-medium-size),
+      tree-node-text-weight: map.get($system, body-medium-weight),),
+    density: (
+      tree-node-min-height: map.get((
+        0: 48px,
+        -1: 44px,
+        -2: 40px,
+        -3: 36px,
+        -4: 28px,
+      ), $density-scale)
+    ),
   );
 }

package/tree/_m3-tree.scss

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use '../core/tokens/m3-utils';
 @use '../core/theming/theming';
-@use '../core/theming/inspection';
 @use '../core/tokens/m3';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -23,7 +22,7 @@ $prefix: (mat, tree);
       tree-node-text-size: map.get($system, body-large-size),
       tree-node-text-weight: map.get($system, body-large-weight),
     ),
-    density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
+    density: get-density-tokens(map.get($system, density-scale)),
   );
 }
 

package/tree/_tree-theme.scss

@@ -6,7 +6,7 @@
 @use './m3-tree';
 
 @mixin base($theme) {
-  $tokens: m2-tree.get-unthemable-tokens();
+  $tokens: map.get(m2-tree.get-tokens($theme), base);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-tree.get-tokens($theme), base);
   }
@@ -15,7 +15,7 @@
 }
 
 @mixin color($theme) {
-  $tokens: m2-tree.get-color-tokens($theme);
+  $tokens: map.get(m2-tree.get-tokens($theme), color);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-tree.get-tokens($theme), color);
   }
@@ -24,7 +24,7 @@
 }
 
 @mixin typography($theme) {
-  $tokens: m2-tree.get-typography-tokens($theme);
+  $tokens: map.get(m2-tree.get-tokens($theme), typography);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-tree.get-tokens($theme), typography);
   }
@@ -33,7 +33,7 @@
 }
 
 @mixin density($theme) {
-  $tokens: m2-tree.get-density-tokens($theme);
+  $tokens: map.get(m2-tree.get-tokens($theme), density);
   @if inspection.get-theme-version($theme) == 1 {
     $tokens: map.get(m3-tree.get-tokens($theme), density);
   }