fix(multiple): remove usages of Sass globals (#29972)

In the latest version of Sass, the compiler logs a warning for usages of global functions. These changes switch our code to import the functions instead.

(cherry picked from commit 3a3be4c)

Author: crisbeto

package.json

@@ -160,7 +160,7 @@
     "requirejs": "^2.3.6",
     "rollup": "^2.66.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "sass": "^1.77.8",
+    "sass": "^1.80.6",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.5",
     "send": "^0.17.2",

src/material/core/m2/_theming.scss

@@ -1,6 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
+@use 'sass:color';
 @use '../theming/theming';
 @use './palette';
 
@@ -82,7 +83,7 @@
     @return $color;
   }
 
-  @return rgba($color, if($opacity == null, opacity($color), $opacity));
+  @return rgba($color, if($opacity == null, color.opacity($color), $opacity));
 }
 
 // Validates the specified theme by ensuring that the optional color config defines

src/material/core/theming/_theming.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:color';
 
 // Whether to enable compatibility with legacy methods for accessing theme information.
 $theme-legacy-inspection-api-compatibility: true !default;
@@ -332,7 +333,7 @@ $private-internal-name: _mat-theming-internals-do-not-access;
   // We convert the rgba color into a solid one by taking the opacity from the rgba
   // value and using it to determine the percentage of the background to put
   // into foreground when mixing the colors together.
-  @return mix($background-color, rgba($color, 1), (1 - opacity($color)) * 100%);
+  @return color.mix($background-color, rgba($color, 1), (1 - color.opacity($color)) * 100%);
 }
 
 // Clamps the density scale to a number between the given min and max.

src/material/core/tokens/_m3-tokens.scss

@@ -130,7 +130,7 @@ $_cached-token-slots: null;
 @function create-map($keys, $prefix) {
   $result: ();
   @each $key in $keys {
-    $result: map-merge($result, ($key: var(--#{$prefix}-#{$key})));
+    $result: map.merge($result, ($key: var(--#{$prefix}-#{$key})));
   }
   @return $result;
 }
@@ -191,8 +191,8 @@ $_cached-token-slots: null;
             'tertiary-fixed',
             'tertiary-fixed-dim'
     );
-    @return map-merge(create-map($keys, $prefix), (
-            shadow: map.get($mdc-sys-color, shadow)
+    @return map.merge(create-map($keys, $prefix), (
+      shadow: map.get($mdc-sys-color, shadow)
     ));
   }
 

src/material/core/tokens/m2/mat/_badge.scss

@@ -56,7 +56,7 @@ $prefix: (mat, badge);
   // the value to determine the percentage of the background to put into foreground when
   // mixing the colors together.
   @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) {
-    $badge-opacity: opacity($disabled-background);
+    $badge-opacity: color.opacity($disabled-background);
     $disabled-background: color.mix($app-background,
       rgba($disabled-background, 1), (1 - $badge-opacity) * 100%);
   }

src/material/core/tokens/m2/mat/_datepicker.scss

@@ -60,7 +60,7 @@ $private-default-overlap-color: #a8dab5;
   // for a solid border, but because we're using a dashed border for the
   // preview range, we need to bump its opacity to ensure that it's visible.
   @if meta.type-of($preview-outline-color) == color {
-    $preview-outline-opacity: math.min(opacity($preview-outline-color) * 2, 1);
+    $preview-outline-opacity: math.min(color.opacity($preview-outline-color) * 2, 1);
     $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity);
   }
 

src/material/core/tokens/m2/mat/_sort.scss

@@ -26,7 +26,7 @@ $prefix: (mat, sort);
   // when mixing the colors together. Otherwise, if it resolves to something different
   // (e.g. it resolves to a CSS variable), we use the color directly.
   @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
-    $text-opacity: opacity($text-color);
+    $text-opacity: color.opacity($text-color);
     $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
   }
   @else {

yarn.lock

@@ -14471,14 +14471,16 @@ [email protected]:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-sass@^1.77.8:
-  version "1.77.8"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
-  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
+sass@^1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.80.6.tgz#5d0aa55763984effe41e40019c9571ab73e6851f"
+  integrity sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==
   dependencies:
-    chokidar ">=3.0.0 <4.0.0"
+    chokidar "^4.0.0"
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
+  optionalDependencies:
+    "@parcel/watcher" "^2.4.1"
 
 saucelabs@^1.5.0:
   version "1.5.0"