refactor(material/core): remove unused/unnecessary utilities (#29444)

Removes a few utilities that either aren't necessary anymore or aren't being used.

(cherry picked from commit 174cf42)

Author: crisbeto

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);
         }
       }
     }

src/material/core/mdc-helpers/_mdc-helpers.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: ();

src/material/core/tokens/_token-utils.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;

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);
@@ -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;

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, 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);

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, 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);

src/material/core/tokens/m2/mat/_protected-button.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 {

src/material/core/tokens/m2/mdc/_checkbox.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 {

src/material/core/tokens/m2/mdc/_filled-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 {

src/material/core/tokens/m2/mdc/_protected-button.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;
   }
 }