refactor(theme-chalk): update Sass functions to prep for 3.0.0 (#18579)

* refactor(theme-chalk): update Sass functions to prep for 3.0.0

Replaced deprecated global built-in functions with the recommended alternatives to avoid future
issues when upgrading to Dart Sass 3.0.0. This change ensures compatibility with newer versions and
removes the warning messages.

* refactor(theme-chalk): update Sass functions to prep for 3.0.0

packages/theme-chalk/src/color/index.scss

@@ -2,7 +2,7 @@
 @use 'sass:string';
 
 @function rgb2hex($color) {
-  @return unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
+  @return string.unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
 }
 
 // rgba color above solid color

packages/theme-chalk/src/common/var.scss

@@ -1,6 +1,7 @@
 /* Element Chalk Variables */
 @use 'sass:math';
 @use 'sass:map';
+@use 'sass:color';
 
 @use '../mixins/function.scss' as *;
 
@@ -60,7 +61,7 @@ $color-info: map.get($colors, 'info', 'base') !default;
     (
       $type: (
         '#{$mode}-#{$number}':
-          mix(
+          color.mix(
             $mix-color,
             map.get($colors, $type, 'base'),
             math.percentage(math.div($number, 10))

packages/theme-chalk/src/dark/var.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use 'sass:math';
+@use 'sass:color';
 
 @use '../common/var.scss' as common;
 @use '../mixins/mixins.scss' as *;
@@ -30,7 +31,7 @@ $colors: () !default;
     (
       $type: (
         '#{$mode}-#{$number}':
-          mix(
+          color.mix(
             $mix-color,
             map.get($colors, $type, 'base'),
             math.percentage(math.div($number, 10))

packages/theme-chalk/src/mixins/function.scss

@@ -1,16 +1,18 @@
 @use 'config';
+@use 'sass:meta';
+@use 'sass:string';
 
 // BEM support Func
 @function selectorToString($selector) {
-  $selector: inspect($selector);
-  $selector: str-slice($selector, 2, -2);
+  $selector: meta.inspect($selector);
+  $selector: string.slice($selector, 2, -2);
   @return $selector;
 }
 
 @function containsModifier($selector) {
   $selector: selectorToString($selector);
 
-  @if str-index($selector, config.$modifier-separator) {
+  @if string.index($selector, config.$modifier-separator) {
     @return true;
   } @else {
     @return false;
@@ -20,7 +22,7 @@
 @function containWhenFlag($selector) {
   $selector: selectorToString($selector);
 
-  @if str-index($selector, '.' + config.$state-prefix) {
+  @if string.index($selector, '.' + config.$state-prefix) {
     @return true;
   } @else {
     @return false;
@@ -30,7 +32,7 @@
 @function containPseudoClass($selector) {
   $selector: selectorToString($selector);
 
-  @if str-index($selector, ':') {
+  @if string.index($selector, ':') {
     @return true;
   } @else {
     @return false;

packages/theme-chalk/src/mixins/mixins.scss

@@ -5,12 +5,14 @@
 @forward 'function';
 @forward '_var';
 @use 'config' as *;
+@use 'sass:string';
+@use "sass:map";
 
 // Break-points
 @mixin res($key, $map: $breakpoints) {
   // loop breakpoint Map, return if present
-  @if map-has-key($map, $key) {
-    @media only screen and #{unquote(map-get($map, $key))} {
+  @if map.has-key($map, $key) {
+    @media only screen and #{string.unquote(map.get($map, $key))} {
       @content;
     }
   } @else {