From 875b66a4e16cdafb654933a754de335bfe1131c2 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 17 Jul 2024 10:16:01 +0200
Subject: [PATCH] refactor(material/core): remove unused/unnecessary utilities

Removes a few utilities that either aren't necessary anymore or aren't being used.
---
 src/material/core/_core.scss                  |  33 +++--
 .../core/mdc-helpers/_mdc-helpers.scss        |  60 ---------
 src/material/core/tokens/_token-utils.scss    |  62 +++++++++
 .../core/tokens/m2/mat/_fab-small.scss        |   3 +-
 src/material/core/tokens/m2/mat/_fab.scss     |   3 +-
 .../core/tokens/m2/mat/_filled-button.scss    |   3 +-
 .../core/tokens/m2/mat/_protected-button.scss |   3 +-
 .../core/tokens/m2/mdc/_checkbox.scss         |   3 +-
 .../core/tokens/m2/mdc/_filled-button.scss    |   3 +-
 .../core/tokens/m2/mdc/_protected-button.scss |   3 +-
 src/material/dialog/dialog.scss               |  15 +--
 src/material/table/table.scss                 | 125 +++++++++---------
 12 files changed, 149 insertions(+), 167 deletions(-)
 delete mode 100644 src/material/core/mdc-helpers/_mdc-helpers.scss

diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss
index ef7bb5287080..a71d1e67c67b 100644
--- a/src/material/core/_core.scss
+++ b/src/material/core/_core.scss
@@ -4,7 +4,6 @@
 @use './ripple/ripple';
 @use './style/elevation';
 @use './focus-indicators/private';
-@use './mdc-helpers/mdc-helpers';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin core() {
@@ -20,24 +19,22 @@
   // user's content isn't inside of a `mat-sidenav-container`.
   @at-root {
     // Note: we need to emit fallback values here to avoid errors in internal builds.
-    @include mdc-helpers.disable-mdc-fallback-declarations {
-      @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
-        .mat-app-background {
-          @include token-utils.create-token-slot(background-color, background-color, transparent);
-          @include token-utils.create-token-slot(color, text-color, inherit);
-        }
+    @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
+      .mat-app-background {
+        @include token-utils.create-token-slot(background-color, background-color, transparent);
+        @include token-utils.create-token-slot(color, text-color, inherit);
+      }
 
-        // Provides external CSS classes for each elevation value. Each CSS class is formatted as
-        // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element
-        // is elevated.
-        @for $zValue from 0 through 24 {
-          $selector: elevation.$prefix + $zValue;
-          // We need the `mat-mdc-elevation-specific`, because some MDC mixins
-          // come with elevation baked in and we don't have a way of removing it.
-          .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
-            @include token-utils.create-token-slot(box-shadow, 'elevation-shadow-level-#{$zValue}',
-              none);
-          }
+      // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+      // `mat-elevation-z$z-value` where `$z-value` corresponds to the z-space to which the element
+      // is elevated.
+      @for $z-value from 0 through 24 {
+        $selector: elevation.$prefix + $z-value;
+        // We need the `mat-mdc-elevation-specific`, because some MDC mixins
+        // come with elevation baked in and we don't have a way of removing it.
+        .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
+          @include token-utils.create-token-slot(box-shadow, 'elevation-shadow-level-#{$z-value}',
+            none);
         }
       }
     }
diff --git a/src/material/core/mdc-helpers/_mdc-helpers.scss b/src/material/core/mdc-helpers/_mdc-helpers.scss
deleted file mode 100644
index b963e10d1fbd..000000000000
--- a/src/material/core/mdc-helpers/_mdc-helpers.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-// TODO(mmalerba): this file should be split into separate cohesive partials for things like
-//  "theming", "typography", "core".
-@use 'sass:string';
-@use '../typography/typography';
-@use '@material/feature-targeting' as mdc-feature-targeting;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/css' as mdc-theme-css;
-
-// A set of standard queries to use with MDC's queryable mixins.
-$mdc-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
-$mdc-base-styles-without-animation-query:
-    mdc-feature-targeting.all($mdc-base-styles-query, mdc-feature-targeting.without(animation));
-$mdc-theme-styles-query: color;
-$mdc-typography-styles-query: typography;
-
-// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
-// This function falls back to determining the tone based on whether the theme is light or dark.
-@function variable-safe-contrast-tone($value, $is-dark) {
-  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
-    @return mdc-theme-color.contrast-tone($value);
-  }
-
-  @return if($is-dark, 'light', 'dark');
-}
-
-// Function to create an Angular Material typography config from MDC's predefined typography levels.
-// This is used for components where we accidentally ended up supporting null typography configs
-// that were silently falling back to MDC's typography. At the moment of writing this includes
-// `dialog`, `slider` and `tooltip`.
-// Important! We shouldn't introduce any new usages of this pattern and we should eventually clean
-// up any existing usages.
-@function private-fallback-typography-from-mdc() {
-  // This is very close to what we have in `define-typography-config`, but we can't use it here,
-  // because it would cause a circular import and moving it here doesn't make sense.
-  $font-family: string.unquote('Roboto, sans-serif');
-  @return (
-    font-family: $font-family,
-    headline-1: typography.typography-config-level-from-mdc(headline1, $font-family),
-    headline-2: typography.typography-config-level-from-mdc(headline2, $font-family),
-    headline-3: typography.typography-config-level-from-mdc(headline3, $font-family),
-    headline-4: typography.typography-config-level-from-mdc(headline4, $font-family),
-    headline-5: typography.typography-config-level-from-mdc(headline5, $font-family),
-    headline-6: typography.typography-config-level-from-mdc(headline6, $font-family),
-    subtitle-1: typography.typography-config-level-from-mdc(subtitle1, $font-family),
-    subtitle-2: typography.typography-config-level-from-mdc(subtitle2, $font-family),
-    body-1: typography.typography-config-level-from-mdc(body1, $font-family),
-    body-2: typography.typography-config-level-from-mdc(body2, $font-family),
-    caption: typography.typography-config-level-from-mdc(caption, $font-family),
-    button: typography.typography-config-level-from-mdc(button, $font-family),
-    overline: typography.typography-config-level-from-mdc(overline, $font-family),
-  );
-}
-
-// Disables MDC's CSS custom property fallbacks for the specified mixin content.
-@mixin disable-mdc-fallback-declarations {
-  $previous-value: mdc-theme-css.$enable-fallback-declarations;
-  mdc-theme-css.$enable-fallback-declarations: false;
-  @content;
-  mdc-theme-css.$enable-fallback-declarations: $previous-value;
-}
diff --git a/src/material/core/tokens/_token-utils.scss b/src/material/core/tokens/_token-utils.scss
index 66e9bf40eb3f..22240ad24ca5 100644
--- a/src/material/core/tokens/_token-utils.scss
+++ b/src/material/core/tokens/_token-utils.scss
@@ -2,6 +2,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
+@use 'sass:color';
+@use 'sass:math';
 @use '@material/tokens/v0_161' as mdc-tokens;
 @use '../style/elevation';
 @use '../style/sass-utils';
@@ -367,6 +369,66 @@ $_component-prefix: null;
   @return $result;
 }
 
+/// Inherited function from MDC that computes which contrast tone to use on top of a color.
+/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
+/// backwards compatibility.
+/// @param {Color} $value Color for which we're calculating the contrast tone.
+/// @param {Boolean} $is-dark Whether the current theme is dark.
+/// @return {Map} Either `dark` or `light`.
+@function contrast-tone($value, $is-dark) {
+  @if ($value == 'dark') {
+    @return 'light';
+  }
+
+  @if ($value == 'light') {
+    @return 'dark';
+  }
+
+  // Fallback if the app is using a non-color palette (e.g. CSS variable based).
+  @if (meta.type-of($value) != 'color') {
+    @return if($is-dark, 'light', 'dark');
+  }
+
+  $minimum-contrast: 3.1;
+  $light-contrast: _contrast($value, #fff);
+  $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87));
+
+  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
+    @return 'dark';
+  }
+
+  @return 'light';
+}
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+
+  @if ($normalized-channel-value < 0.03928) {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _contrast($back, $front) {
+  $back-lum: _luminance($back) + 0.05;
+  $fore-lum: _luminance($front) + 0.05;
+
+  @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum));
+}
+
 /// Verifies that the token overrides exist and are used in one of the given token maps.
 @mixin _validate-token-overrides($overrides: (), $token-maps) {
   $valid-token-names: ();
diff --git a/src/material/core/tokens/m2/mat/_fab-small.scss b/src/material/core/tokens/m2/mat/_fab-small.scss
index f7e514cdd3e3..ab2d03622b7c 100644
--- a/src/material/core/tokens/m2/mat/_fab-small.scss
+++ b/src/material/core/tokens/m2/mat/_fab-small.scss
@@ -3,7 +3,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, fab-small);
@@ -63,7 +62,7 @@ $prefix: (mat, fab-small);
   @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $color: if($contrast-tone == 'dark', #000, #fff);
     $foreground-color: $color;
     $state-layer-color: $color;
diff --git a/src/material/core/tokens/m2/mat/_fab.scss b/src/material/core/tokens/m2/mat/_fab.scss
index 687c252a0b36..94bfde283a28 100644
--- a/src/material/core/tokens/m2/mat/_fab.scss
+++ b/src/material/core/tokens/m2/mat/_fab.scss
@@ -3,7 +3,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, fab);
@@ -63,7 +62,7 @@ $prefix: (mat, fab);
   @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $color: if($contrast-tone == 'dark', #000, #fff);
     $foreground-color: $color;
     $state-layer-color: $color;
diff --git a/src/material/core/tokens/m2/mat/_filled-button.scss b/src/material/core/tokens/m2/mat/_filled-button.scss
index e89b6e76828a..05d3873079b7 100644
--- a/src/material/core/tokens/m2/mat/_filled-button.scss
+++ b/src/material/core/tokens/m2/mat/_filled-button.scss
@@ -3,7 +3,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, filled-button);
@@ -60,7 +59,7 @@ $prefix: (mat, filled-button);
   @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $color: if($contrast-tone == 'dark', #000, #fff);
     $state-layer-color: $color;
     $ripple-color: rgba($color, 0.1);
diff --git a/src/material/core/tokens/m2/mat/_protected-button.scss b/src/material/core/tokens/m2/mat/_protected-button.scss
index 13c4cfa7fdaf..ee0d3fb81a88 100644
--- a/src/material/core/tokens/m2/mat/_protected-button.scss
+++ b/src/material/core/tokens/m2/mat/_protected-button.scss
@@ -3,7 +3,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, protected-button);
@@ -60,7 +59,7 @@ $prefix: (mat, protected-button);
   @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $color: if($contrast-tone == 'dark', #000, #fff);
     $state-layer-color: $color;
     $ripple-color: rgba($color, 0.1);
diff --git a/src/material/core/tokens/m2/mdc/_checkbox.scss b/src/material/core/tokens/m2/mdc/_checkbox.scss
index 5a230ebe7c1f..f67a65eaa48e 100644
--- a/src/material/core/tokens/m2/mdc/_checkbox.scss
+++ b/src/material/core/tokens/m2/mdc/_checkbox.scss
@@ -4,7 +4,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -61,7 +60,7 @@ $prefix: (mdc, checkbox);
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   @if (token-utils.$private-is-internal-build) {
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($palette-selected, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($palette-selected, $is-dark);
     $selected-checkmark-color: if($contrast-tone == 'dark', #000, #fff);
   }
   @else {
diff --git a/src/material/core/tokens/m2/mdc/_filled-button.scss b/src/material/core/tokens/m2/mdc/_filled-button.scss
index 93800ea7261e..db5ddae0e07b 100644
--- a/src/material/core/tokens/m2/mdc/_filled-button.scss
+++ b/src/material/core/tokens/m2/mdc/_filled-button.scss
@@ -3,7 +3,6 @@
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, filled-button);
@@ -71,7 +70,7 @@ $prefix: (mdc, filled-button);
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   @if (token-utils.$private-is-internal-build) {
     $is-dark: inspection.get-theme-type($theme) == dark;
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $label-text-color: if($contrast-tone == 'dark', #000, #fff);
   }
   @else {
diff --git a/src/material/core/tokens/m2/mdc/_protected-button.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss
index 072d82bd938a..c6699b78858d 100644
--- a/src/material/core/tokens/m2/mdc/_protected-button.scss
+++ b/src/material/core/tokens/m2/mdc/_protected-button.scss
@@ -4,7 +4,6 @@
 @use '../../../style/elevation';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, protected-button);
@@ -77,7 +76,7 @@ $prefix: (mdc, protected-button);
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   @if (token-utils.$private-is-internal-build) {
     $is-dark: inspection.get-theme-type($theme) == dark;
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $label-text-color: if($contrast-tone == 'dark', #000, #fff);
   }
   @else {
diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss
index 57a831033745..7048d9277449 100644
--- a/src/material/dialog/dialog.scss
+++ b/src/material/dialog/dialog.scss
@@ -1,7 +1,6 @@
 @use '@angular/cdk';
 @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
 @use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/tokens/token-utils';
 @use '../core/style/variables';
 
@@ -18,20 +17,14 @@ $mat-dialog-button-horizontal-margin: 8px !default;
 $_emit-fallbacks: true;
 
 @mixin _use-mat-tokens {
-  @include mdc-helpers.disable-mdc-fallback-declarations {
-    @include token-utils.use-tokens(tokens-mat-dialog.$prefix,
-      tokens-mat-dialog.get-token-slots()) {
-      @content;
-    }
+  @include token-utils.use-tokens(tokens-mat-dialog.$prefix, tokens-mat-dialog.get-token-slots()) {
+    @content;
   }
 }
 
 @mixin _use-mdc-tokens {
-  @include mdc-helpers.disable-mdc-fallback-declarations {
-    @include token-utils.use-tokens(tokens-mdc-dialog.$prefix,
-      tokens-mdc-dialog.get-token-slots()) {
-      @content;
-    }
+  @include token-utils.use-tokens(tokens-mdc-dialog.$prefix, tokens-mdc-dialog.get-token-slots()) {
+    @content;
   }
 }
 
diff --git a/src/material/table/table.scss b/src/material/table/table.scss
index 42e05e907c3f..d4cfe5707701 100644
--- a/src/material/table/table.scss
+++ b/src/material/table/table.scss
@@ -1,4 +1,3 @@
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/table' as tokens-mat-table;
 @use '../core/style/vendor-prefixes';
@@ -47,78 +46,76 @@
   padding: 0 16px;
 }
 
-@include mdc-helpers.disable-mdc-fallback-declarations {
-  @include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) {
-    // TODO(crisbeto): these tokens have default values in order to make the initial token
-    // work easier to land in g3. Eventually we should remove them.
-    .mat-mdc-header-row {
-      @include vendor-prefixes.smooth-font;
-      @include token-utils.create-token-slot(height, header-container-height, 56px);
-      @include token-utils.create-token-slot(color, header-headline-color, true);
-      @include token-utils.create-token-slot(font-family, header-headline-font, true);
-      @include token-utils.create-token-slot(line-height, header-headline-line-height);
-      @include token-utils.create-token-slot(font-size, header-headline-size, 14px);
-      @include token-utils.create-token-slot(font-weight, header-headline-weight, 500);
-    }
+@include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) {
+  // TODO(crisbeto): these tokens have default values in order to make the initial token
+  // work easier to land in g3. Eventually we should remove them.
+  .mat-mdc-header-row {
+    @include vendor-prefixes.smooth-font;
+    @include token-utils.create-token-slot(height, header-container-height, 56px);
+    @include token-utils.create-token-slot(color, header-headline-color, true);
+    @include token-utils.create-token-slot(font-family, header-headline-font, true);
+    @include token-utils.create-token-slot(line-height, header-headline-line-height);
+    @include token-utils.create-token-slot(font-size, header-headline-size, 14px);
+    @include token-utils.create-token-slot(font-weight, header-headline-weight, 500);
+  }
 
-    .mat-mdc-row {
-      @include token-utils.create-token-slot(height, row-item-container-height, 52px);
-      @include token-utils.create-token-slot(color, row-item-label-text-color, true);
-    }
+  .mat-mdc-row {
+    @include token-utils.create-token-slot(height, row-item-container-height, 52px);
+    @include token-utils.create-token-slot(color, row-item-label-text-color, true);
+  }
 
-    // Note that while it's redundant to apply the typography both to the row
-    // and the content element since the cell inherit from both of them,
-    // applying it only to one results in sub-pixel differences in the
-    // letter spacing which leads to a lot of internal screenshot diffs.
-    .mat-mdc-row,
-    .mdc-data-table__content {
-      @include vendor-prefixes.smooth-font;
-      @include token-utils.create-token-slot(font-family, row-item-label-text-font, true);
-      @include token-utils.create-token-slot(line-height, row-item-label-text-line-height);
-      @include token-utils.create-token-slot(font-size, row-item-label-text-size, 14px);
-      @include token-utils.create-token-slot(font-weight, row-item-label-text-weight);
-    }
+  // Note that while it's redundant to apply the typography both to the row
+  // and the content element since the cell inherit from both of them,
+  // applying it only to one results in sub-pixel differences in the
+  // letter spacing which leads to a lot of internal screenshot diffs.
+  .mat-mdc-row,
+  .mdc-data-table__content {
+    @include vendor-prefixes.smooth-font;
+    @include token-utils.create-token-slot(font-family, row-item-label-text-font, true);
+    @include token-utils.create-token-slot(line-height, row-item-label-text-line-height);
+    @include token-utils.create-token-slot(font-size, row-item-label-text-size, 14px);
+    @include token-utils.create-token-slot(font-weight, row-item-label-text-weight);
+  }
 
-    .mat-mdc-footer-row {
-      @include vendor-prefixes.smooth-font;
-      @include token-utils.create-token-slot(height, footer-container-height, 52px);
-      @include token-utils.create-token-slot(color, row-item-label-text-color, true);
-      @include token-utils.create-token-slot(font-family, footer-supporting-text-font, true);
-      @include token-utils.create-token-slot(line-height, footer-supporting-text-line-height);
-      @include token-utils.create-token-slot(font-size, footer-supporting-text-size, 14px);
-      @include token-utils.create-token-slot(font-weight, footer-supporting-text-weight);
-      @include token-utils.create-token-slot(letter-spacing, footer-supporting-text-tracking);
-    }
+  .mat-mdc-footer-row {
+    @include vendor-prefixes.smooth-font;
+    @include token-utils.create-token-slot(height, footer-container-height, 52px);
+    @include token-utils.create-token-slot(color, row-item-label-text-color, true);
+    @include token-utils.create-token-slot(font-family, footer-supporting-text-font, true);
+    @include token-utils.create-token-slot(line-height, footer-supporting-text-line-height);
+    @include token-utils.create-token-slot(font-size, footer-supporting-text-size, 14px);
+    @include token-utils.create-token-slot(font-weight, footer-supporting-text-weight);
+    @include token-utils.create-token-slot(letter-spacing, footer-supporting-text-tracking);
+  }
 
-    .mat-mdc-header-cell {
-      @include _cell-border;
-      @include token-utils.create-token-slot(letter-spacing, header-headline-tracking);
-      font-weight: inherit;
-      line-height: inherit;
-      box-sizing: border-box;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      outline: none;
-      text-align: left;
-
-      [dir='rtl'] & {
-        text-align: right;
-      }
+  .mat-mdc-header-cell {
+    @include _cell-border;
+    @include token-utils.create-token-slot(letter-spacing, header-headline-tracking);
+    font-weight: inherit;
+    line-height: inherit;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    outline: none;
+    text-align: left;
+
+    [dir='rtl'] & {
+      text-align: right;
     }
+  }
 
-    .mat-mdc-cell {
-      @include _cell-border;
-      @include token-utils.create-token-slot(letter-spacing, row-item-label-text-tracking);
-      line-height: inherit;
+  .mat-mdc-cell {
+    @include _cell-border;
+    @include token-utils.create-token-slot(letter-spacing, row-item-label-text-tracking);
+    line-height: inherit;
 
-      .mdc-data-table__row:last-child & {
-        border-bottom: none;
-      }
+    .mdc-data-table__row:last-child & {
+      border-bottom: none;
     }
+  }
 
-    .mat-mdc-footer-cell {
-      @include token-utils.create-token-slot(letter-spacing, row-item-label-text-tracking);
-    }
+  .mat-mdc-footer-cell {
+    @include token-utils.create-token-slot(letter-spacing, row-item-label-text-tracking);
   }
 }