refactor(material/sort): switch to token theming API (#27963)

Reworks the sort header to use the new tokens theming API.

(cherry picked from commit f2ad334)

Author: crisbeto

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

@@ -0,0 +1,60 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use '../../token-utils';
+@use '../../../theming/inspection';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, sort);
+
+// 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) {
+  $table-background: inspection.get-theme-color($theme, background, card);
+  $text-color: inspection.get-theme-color($theme, foreground, secondary-text);
+  $arrow-color: null;
+
+  // 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
+  // *type*, we convert it into a solid color by taking the opacity from the rgba value and
+  // using the value to determine the percentage of the background to put into foreground
+  // when mixing the colors together. Otherwise, if it resolves to something different
+  // (e.g. it resolves to a CSS variable), we use the color directly.
+  @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
+    $text-opacity: opacity($text-color);
+    $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
+  }
+  @else {
+    $arrow-color: $text-color;
+  }
+
+  @return (
+    arrow-color: $arrow-color,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  @return ();
+}
+
+// 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/sort/_sort-theme.scss

@@ -1,36 +1,34 @@
-@use 'sass:color';
-@use 'sass:meta';
+@use '../core/tokens/m2/mat/sort' as tokens-mat-sort;
+@use '../core/style/sass-utils';
+@use '../core/typography/typography';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
 
-@mixin base($theme) {
-  // TODO(mmalerba): Move sort header base tokens here
-}
+@mixin base($theme) {}
 
 @mixin color($theme) {
-  .mat-sort-header-arrow {
-    $table-background: inspection.get-theme-color($theme, background, card);
-    $text-color: inspection.get-theme-color($theme, foreground, secondary-text);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-sort.$prefix,
+      tokens-mat-sort.get-color-tokens($theme));
+  }
+}
 
-    // 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
-    // *type*, we convert it into a solid color by taking the opacity from the rgba value and
-    // using the value to determine the percentage of the background to put into foreground
-    // when mixing the colors together. Otherwise, if it resolves to something different
-    // (e.g. it resolves to a CSS variable), we use the color directly.
-    @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
-      $text-opacity: opacity($text-color);
-      color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
-    }
-    @else {
-      color: $text-color;
-    }
+@mixin typography($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-sort.$prefix,
+      tokens-mat-sort.get-typography-tokens($theme));
   }
 }
 
-@mixin typography($theme) {}
+@mixin density($theme) {
+  $density-scale: inspection.get-theme-density($theme);
 
-@mixin density($theme) {}
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-sort.$prefix,
+      tokens-mat-sort.get-density-tokens($theme));
+  }
+}
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {

src/material/sort/sort-header.scss

@@ -1,5 +1,7 @@
 @use '@angular/cdk';
 
+@use '../core/tokens/m2/mat/sort' as tokens-mat-sort;
+@use '../core/tokens/token-utils';
 @use '../core/focus-indicators/private';
 
 $header-arrow-margin: 6px;
@@ -56,6 +58,10 @@ $header-arrow-hint-opacity: 0.38;
   position: relative;
   display: flex;
 
+  @include token-utils.use-tokens(tokens-mat-sort.$prefix, tokens-mat-sort.get-token-slots()) {
+    @include token-utils.create-token-slot(color, arrow-color);
+  }
+
   // Start off at 0 since the arrow may become visible while parent are animating.
   // This will be overwritten when the arrow animations kick in. See #11819.
   opacity: 0;