fixup! refactor(material/table): switch to tokens API

Author: crisbeto

src/material/core/tokens/_token-utils.scss

@@ -71,12 +71,13 @@ $_component-prefix: null;
 
 // Emits a slot for the given token, provided that it has a non-null value in the token map passed
 // to `use-tokens`.
-@mixin create-token-slot($property, $token) {
+@mixin create-token-slot($property, $token, $emit-fallback: false) {
   @if $_component-prefix == null or $_tokens == null {
     @error '`create-token-slot` must be used within `use-tokens`';
   }
   @if map.get($_tokens, $token) != null {
-    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}');
+    $fallback: if($emit-fallback, map.get($_tokens, $token), null);
+    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}', $fallback: $fallback);
     @include mdc-theme.property($property, $value);
   }
 }

src/material/table/table.scss

@@ -2,7 +2,6 @@
 @use '@material/data-table/data-table-cell' as mdc-data-table-cell;
 @use '@material/data-table/data-table-header-cell' as mdc-data-table-header-cell;
 @use '@material/data-table' as mdc-data-table-theme;
-@use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/table' as tokens-mat-table;
@@ -25,47 +24,47 @@
   }
 }
 
-@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
-  @include mdc-data-table.static-styles($query: mdc-helpers.$mdc-base-styles-query);
-  @include mdc-data-table-cell.static-styles($query: mdc-helpers.$mdc-base-styles-query);
-  @include mdc-data-table-header-cell.static-styles($query: mdc-helpers.$mdc-base-styles-query);
-  @include mdc-data-table-theme.cell-padding(
-    $leading-padding: mdc-data-table-theme.$cell-leading-padding,
-    $trailing-padding: mdc-data-table-theme.$cell-trailing-padding,
-    $query: mdc-helpers.$mdc-base-styles-query
-  );
-  @include table-flex-styles.private-table-flex-styles();
-
-  .mat-mdc-table {
-    @include token-utils.create-token-values(
-      tokens-mat-table.$prefix, tokens-mat-table.get-unthemable-tokens());
-
-    // MDC Table applies `table-layout: fixed`, but this is a backwards incompatible
-    // change since the table did not previously apply it.
-    // TODO: Add a mixin to MDC to set the layout instead of including this override,
-    // see this issue: https://github.com/material-components/material-components-web/issues/6412
-    table-layout: auto;
-
-    // The MDC table does not allow text to wrap within the cell. This allows for text to
-    // wrap when the cell reaches its maximum width.
-    white-space: normal;
-
-    @include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) {
-      @include token-utils.create-token-slot(background-color, background-color);
-    }
+@include mdc-data-table.static-styles($query: mdc-helpers.$mdc-base-styles-query);
+@include mdc-data-table-cell.static-styles($query: mdc-helpers.$mdc-base-styles-query);
+@include mdc-data-table-header-cell.static-styles($query: mdc-helpers.$mdc-base-styles-query);
+@include mdc-data-table-theme.cell-padding(
+  $leading-padding: mdc-data-table-theme.$cell-leading-padding,
+  $trailing-padding: mdc-data-table-theme.$cell-trailing-padding,
+  $query: mdc-helpers.$mdc-base-styles-query
+);
+@include table-flex-styles.private-table-flex-styles();
+
+.mat-mdc-table {
+  @include token-utils.create-token-values(
+    tokens-mat-table.$prefix, tokens-mat-table.get-unthemable-tokens());
+
+  // MDC Table applies `table-layout: fixed`, but this is a backwards incompatible
+  // change since the table did not previously apply it.
+  // TODO: Add a mixin to MDC to set the layout instead of including this override,
+  // see this issue: https://github.com/material-components/material-components-web/issues/6412
+  table-layout: auto;
+
+  // The MDC table does not allow text to wrap within the cell. This allows for text to
+  // wrap when the cell reaches its maximum width.
+  white-space: normal;
+
+  @include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) {
+    @include token-utils.create-token-slot(background-color, background-color);
   }
+}
 
+@include mdc-helpers.disable-mdc-fallback-declarations {
   @include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) {
     .mat-mdc-header-row {
-      @include token-utils.create-token-slot(height, header-container-height);
+      @include token-utils.create-token-slot(height, header-container-height, true);
     }
 
     .mat-mdc-row {
-      @include token-utils.create-token-slot(height, row-item-container-height);
+      @include token-utils.create-token-slot(height, row-item-container-height, true);
     }
 
     .mat-mdc-footer-row {
-      @include token-utils.create-token-slot(height, footer-container-height);
+      @include token-utils.create-token-slot(height, footer-container-height, true);
     }
 
     .mat-mdc-header-cell {
@@ -75,7 +74,7 @@
       @include token-utils.create-token-slot(line-height, header-headline-line-height);
       @include token-utils.create-token-slot(font-size, header-headline-size);
       @include token-utils.create-token-slot(letter-spacing, header-headline-tracking);
-      @include token-utils.create-token-slot(font-weight, header-headline-weight);
+      @include token-utils.create-token-slot(font-weight, header-headline-weight, true);
     }
 
     .mat-mdc-cell {