refactor(material/tree): switch to tokens theming API (#27980)

Reworks the tree to use the new tokens theming API.

Author: crisbeto

src/material/core/tokens/m2/mat/_tree.scss

@@ -0,0 +1,62 @@
+@use 'sass:map';
+@use '../../token-utils';
+@use '../../../theming/theming';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, tree);
+
+// 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) {
+  $foreground-base: inspection.get-theme-color($theme, foreground, base);
+
+  @return (
+    container-background-color: inspection.get-theme-color($theme, background, card),
+    node-text-color: inspection.get-theme-color($theme, foreground, text),
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    node-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    node-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    node-text-weight: inspection.get-theme-typography($theme, body-2, font-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,
+  );
+
+  @return (
+    node-min-height: map.get($min-height-scale, $density-scale)
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+      get-unthemable-tokens(),
+      get-color-tokens(token-utils.$placeholder-color-config),
+      get-typography-tokens(token-utils.$placeholder-typography-config),
+      get-density-tokens(token-utils.$placeholder-density-config)
+  );
+}

src/material/tree/BUILD.bazel

@@ -37,6 +37,9 @@ sass_library(
 sass_binary(
     name = "tree_scss",
     src = "tree.scss",
+    deps = [
+        ":tree_scss_lib",
+    ],
 )
 
 ng_test_library(

src/material/tree/_tree-theme.scss

@@ -1,48 +1,35 @@
-@use '../core/density/private/compatibility';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
-@use './tree-variables';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mat/tree' as tokens-mat-tree;
 
-@mixin base($theme) {
-  // TODO(mmalerba): Move tree base tokens here
-}
+@mixin base($theme) {}
 
 @mixin color($theme) {
-  .mat-tree {
-    background: inspection.get-theme-color($theme, background, card);
-  }
-
-  .mat-tree-node,
-  .mat-nested-tree-node {
-    color: inspection.get-theme-color($theme, foreground, text);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-tree.$prefix,
+      tokens-mat-tree.get-color-tokens($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: inspection.get-theme-typography($theme, body-2, font-family);
-  }
-
-  .mat-tree-node,
-  .mat-nested-tree-node {
-    font-weight: inspection.get-theme-typography($theme, body-2, font-weight);
-    font-size: inspection.get-theme-typography($theme, body-2, font-size);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-tree.$prefix,
+      tokens-mat-tree.get-typography-tokens($theme));
   }
 }
 
 @mixin density($theme) {
   $density-scale: inspection.get-theme-density($theme);
-  $height: compatibility.private-density-prop-value(tree-variables.$density-config,
-    $density-scale, height);
 
-  @include compatibility.private-density-legacy-compatibility() {
-    .mat-tree-node {
-      min-height: $height;
-    }
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-tree.$prefix,
+      tokens-mat-tree.get-density-tokens($theme));
   }
 }
 

src/material/tree/_tree-variables.scss

@@ -1,12 +1,35 @@
+@use '../core/tokens/m2/mat/tree' as tokens-mat-tree;
+@use '../core/tokens/token-utils';
+
 .mat-tree {
   display: block;
+
+  @include token-utils.use-tokens(tokens-mat-tree.$prefix, tokens-mat-tree.get-token-slots()) {
+    @include token-utils.create-token-slot(background-color, container-background-color);
+  }
+}
+
+.mat-tree-node,
+.mat-nested-tree-node {
+  @include token-utils.use-tokens(tokens-mat-tree.$prefix, tokens-mat-tree.get-token-slots()) {
+    @include token-utils.create-token-slot(color, node-text-color);
+    @include token-utils.create-token-slot(font-family, node-text-font);
+    @include token-utils.create-token-slot(font-size, node-text-size);
+    @include token-utils.create-token-slot(font-weight, node-text-weight);
+  }
 }
 
 .mat-tree-node {
   display: flex;
   align-items: center;
   flex: 1;
   word-wrap: break-word;
+
+  @include token-utils.use-tokens(tokens-mat-tree.$prefix, tokens-mat-tree.get-token-slots()) {
+    // TODO: before tokens were introduced, the `min-height` only applied to the
+    // non-nested tree node. Should it apply to the nested one as well?
+    @include token-utils.create-token-slot(min-height, node-min-height);
+  }
 }
 
 .mat-nested-tree-node {