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/core/tokens/m2/mat/_table.scss

@@ -2,6 +2,7 @@
 @use '../../../theming/theming';
 @use '../../../typography/typography-utils';
 @use '../../token-utils';
+@use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, table);
@@ -87,7 +88,7 @@ $prefix: (mat, table);
 // 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 token-utils.merge-all(
+  @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),

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;
@@ -16,56 +15,56 @@
 }
 
 @mixin _cell-border {
-  @include token-utils.create-token-slot(border-bottom-color, row-item-outline-color);
-  @include token-utils.create-token-slot(border-bottom-width, row-item-outline-width);
+  @include token-utils.create-token-slot(border-bottom-color, row-item-outline-color, true);
+  @include token-utils.create-token-slot(border-bottom-width, row-item-outline-width, true);
   border-bottom-style: solid;
 
   .mdc-data-table__row:last-child & {
     border-bottom: none;
   }
 }
 
-@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 {
@@ -119,9 +118,9 @@ mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-f
 // children. Otherwise, the cells grow larger than the row and the layout breaks.
 .mat-mdc-flex-table {
   @include token-utils.create-token-values(tokens-mat-table.$prefix, (
-    header-container-height: unset,
-    footer-container-height: unset,
-    row-item-container-height: unset,
+    header-container-height: auto,
+    footer-container-height: auto,
+    row-item-container-height: auto,
   ));
 }