chore(sass): Removing warnings by updating the code (#3695)

* chore(sass): Removing warnings by updating the code!

* chore(sass): Using color.mix in range.scss

src/implementations/vanilla/components/datepicker/datepicker.scss

@@ -5,9 +5,7 @@
 
 @use 'sass:map';
 @use '@ecl/vanilla-layout-grid/mixins/breakpoints';
-
-/* stylelint-disable-next-line scss/load-partial-extension, no-invalid-position-at-import-rule */
-@import 'pikaday/scss/pikaday.scss';
+@use 'pikaday/scss/pikaday';
 
 // Exposed variables
 $theme: null !default;

src/implementations/vanilla/layout/grid/mixins/_breakpoints.scss

@@ -71,7 +71,7 @@ Breakpoints are defined as a map of (name: minimum width), order from small to l
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
 @mixin up($name, $breakpoints: map.get($theme, 'breakpoint')) {
-  @if map_has_key($breakpoints, $name) {
+  @if map.has-key($breakpoints, $name) {
     $min: ecl-min($name, $breakpoints);
 
     @if $min {
@@ -90,7 +90,7 @@ Breakpoints are defined as a map of (name: minimum width), order from small to l
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
 @mixin down($name, $breakpoints: map.get($theme, 'breakpoint')) {
-  @if map_has_key($breakpoints, $name) {
+  @if map.has-key($breakpoints, $name) {
     $max: ecl-max($name, $breakpoints);
 
     @if $max {

src/themes/ec/variables/_range.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
+@use 'sass:color';
 @use '../index' as *;
 
-// stylelint-disable scss/no-global-function-names
 $range: (
   bar-color: var(--c-n),
   disabled-color: var(--c-n-60),
   active-color: var(--c-p-160),
   invalid-color: var(--c-er),
   invalid-hover-color: var(--c-er),
-  invalid-active-color: mix(#da1e28, #26324b, 50%),
+  invalid-active-color: color.mix(#da1e28, #26324b, 50%),
   value-color: var(--c-d),
   value-font: var(--f-s),
   range-margin-top: var(--s-xs),
@@ -19,4 +19,3 @@ $range: (
   outline-color: var(--c-p-20),
   outline-offset: 0,
 );
-// stylelint-enable scss/no-global-function-names