refactor(material/grid-list): switch to tokens theming API (#27533)

Reworks the grid list to use tokens for theming.

(cherry picked from commit 3e23676)

Author: crisbeto

src/material/core/tokens/m2/mat/_grid-list.scss

@@ -0,0 +1,46 @@
+@use '../../token-utils';
+@use '../../../typography/typography-utils';
+@use '../../../style/sass-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, grid-list);
+
+// 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($config) {
+  @return ();
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($config) {
+  @return (
+    // TODO(crisbeto): other components have tokens for all typography dimensions.
+    // Here we only set the font size to maintain the same appearance as the pre-tokens
+    // theming API. Consider adding more tokens for letter spacing, font weight etc.
+    tile-header-primary-text-size: typography-utils.font-size($config, body-1),
+    tile-header-secondary-text-size: typography-utils.font-size($config, caption),
+    tile-footer-primary-text-size: typography-utils.font-size($config, body-1),
+    tile-footer-secondary-text-size: typography-utils.font-size($config, caption),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($config) {
+  @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/grid-list/_grid-list-theme.scss

@@ -1,7 +1,8 @@
 @use '../core/theming/theming';
 @use '../core/typography/typography';
-@use '../core/typography/typography-utils';
-@use '../core/style/list-common';
+@use '../core/tokens/m2/mat/grid-list' as tokens-mat-grid-list;
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
 
 
 // Include this empty mixin for consistency with the other components.
@@ -10,10 +11,10 @@
 @mixin typography($config-or-theme) {
   $config: typography.private-typography-to-2014-config(
       theming.get-typography-config($config-or-theme));
-  .mat-grid-tile-header,
-  .mat-grid-tile-footer {
-    @include list-common.base(typography-utils.font-size($config, caption));
-    font-size: typography-utils.font-size($config, body-1);
+
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-grid-list.$prefix,
+      tokens-mat-grid-list.get-typography-tokens($config));
   }
 }
 

src/material/grid-list/grid-list.scss

@@ -1,5 +1,7 @@
 @use '../core/style/list-common';
 @use '../core/style/layout-common';
+@use '../core/tokens/m2/mat/grid-list' as tokens-mat-grid-list;
+@use '../core/tokens/token-utils';
 
 
 // height of tile header or footer if it has one line
@@ -68,6 +70,24 @@ $text-padding: 16px;
   }
 }
 
+.mat-grid-tile-header {
+  @include token-utils.use-tokens(
+    tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
+    $secondary-token-name: token-utils.get-token-variable(tile-header-secondary-text-size);
+    @include list-common.base(var(#{$secondary-token-name}));
+    @include token-utils.create-token-slot(font-size, tile-header-primary-text-size);
+  }
+}
+
+.mat-grid-tile-footer {
+  @include token-utils.use-tokens(
+    tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
+    $secondary-token-name: token-utils.get-token-variable(tile-footer-secondary-text-size);
+    @include list-common.base(var(#{$secondary-token-name}));
+    @include token-utils.create-token-slot(font-size, tile-footer-primary-text-size);
+  }
+}
+
 .mat-grid-tile-content {
   @include layout-common.fill;
   display: flex;