fix Dart Sass deprecation warning

main/scss/_config.scss

@@ -6,17 +6,17 @@
 
 // functions
 @function str-remove-whitespace($str) {
-  @while (str-index($str, ' ') != null) {
-    $index: str-index($str, ' ');
-    $str: "#{str-slice($str, 0, $index - 1)}#{str-slice($str, $index + 1)}";
+  @while (string.index($str, ' ') != null) {
+    $index: string.index($str, ' ');
+    $str: "#{string.slice($str, 0, $index - 1)}#{string.slice($str, $index + 1)}";
   }
   @return $str;
 }
 
 @function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
   }
   @return $string;
 }
@@ -65,31 +65,31 @@
 }
 
 @function to-number($value) {
-  @if type-of($value) == 'number' {
+  @if meta.type-of($value) == 'number' {
     @return $value;
-  } @else if type-of($value) != 'string' {
+  } @else if meta.type-of($value) != 'string' {
     $_: log('Value for `to-number` should be a number or a string.');
   }
 
   $result: 0;
   $digits: 0;
-  $minus: str-slice($value, 1, 1) == '-';
+  $minus: string.slice($value, 1, 1) == '-';
   $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
 
-  @for $i from if($minus, 2, 1) through str-length($value) {
-    $character: str-slice($value, $i, $i);
+  @for $i from if($minus, 2, 1) through string.length($value) {
+    $character: string.slice($value, $i, $i);
 
-    @if not (index(map-keys($numbers), $character) or $character == '.') {
-      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
+    @if not (list.index(map.keys($numbers), $character) or $character == '.') {
+      @return to-length(if($minus, -$result, $result), string.slice($value, $i))
     }
 
     @if $character == '.' {
       $digits: 1; 
     } @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);  
+      $result: $result * 10 + map.get($numbers, $character);  
     } @else {
       $digits: $digits * 10;
-      $result: $result + math.div(map-get($numbers, $character), $digits);
+      $result: $result + math.div(map.get($numbers, $character), $digits);
     }
   }
 
@@ -99,11 +99,11 @@
 @function to-length($value, $unit) {
   $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
 
-  @if not index(map-keys($units), $unit) {
+  @if not list.index(map.keys($units), $unit) {
     $_: log('Invalid unit `#{$unit}`.');
   }
 
-  @return $value * map-get($units, $unit);
+  @return $value * map.get($units, $unit);
 }
 
 // define HSL color variable
@@ -124,11 +124,11 @@ $breakpoints: (
 ) !default;
 
 @mixin min-width($breakpoint) {
-  @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
+  @media (min-width: map.get($map: $breakpoints, $key: $breakpoint)) { @content; }
 }
 
 @mixin max-width($breakpoint) {
-  @media not all and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
+  @media not all and (min-width: map.get($map: $breakpoints, $key: $breakpoint)) { @content; }
 }
 
 // grid
@@ -487,9 +487,9 @@ $z-index: (
 // breakpoint (deprecated → use the min-width mixin)
 @mixin breakpoint($breakpoint, $logic: false) {
   @if( $logic ) {
-    @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
+    @media #{$logic} and (min-width: map.get($map: $breakpoints, $key: $breakpoint)) { @content; }
   } @else {
-    @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
+    @media (min-width: map.get($map: $breakpoints, $key: $breakpoint)) { @content; }
   }
 }
 

main/scss/util.scss

@@ -1267,9 +1267,9 @@ $grad-labels: map.get($gradients, "default");
       $list: list.append($list, #{$variation});
     }
     $linear-gradient-stops: '';
-    @for $i from 1 through length($list) {
+    @for $i from 1 through list.length($list) {
       $linear-gradient-stops: $linear-gradient-stops + var(--gradient-#{$main-color}-#{list.nth($list, $i)});
-      @if($i < length($list)) {
+      @if($i < list.length($list)) {
         $linear-gradient-stops: $linear-gradient-stops + ', '
       }
     }
@@ -1407,17 +1407,17 @@ $grad-labels: map.get($gradients, "default");
 }
 
 // alt approach - max-width is equal to current breakpoint
-$breakpoints-nr: length($breakpoints);
+$breakpoints-nr: list.length($breakpoints);
 @each $breakpoint, $value in $breakpoints {
-  $i: index($breakpoints, $breakpoint $value);
+  $i: list.index($breakpoints, $breakpoint $value);
   @if $i == 1 {
     [class^="#{$util-prefix}max-width-adaptive"], [class*=" #{$util-prefix}max-width-adaptive"] {
-      max-width: string.unquote(map-get($map: $breakpoints, $key: #{$breakpoint}));
+      max-width: string.unquote(map.get($map: $breakpoints, $key: #{$breakpoint}));
     }
   } @else {
     $class-list : '';
     @each $sub-breakpoint, $sub-value in $breakpoints {
-      $j: index($breakpoints, $sub-breakpoint $sub-value);
+      $j: list.index($breakpoints, $sub-breakpoint $sub-value);
       @if $j == $i {
         $class-list: '.#{$util-prefix}max-width-adaptive-#{$sub-breakpoint}';
       } @else if $j > $i {
@@ -1426,7 +1426,7 @@ $breakpoints-nr: length($breakpoints);
     }
     @media (min-width: #{$value}) {
       #{$class-list} {
-        max-width: string.unquote(map-get($map: $breakpoints, $key: #{$breakpoint}));
+        max-width: string.unquote(map.get($map: $breakpoints, $key: #{$breakpoint}));
       }
     }
   }
@@ -1895,9 +1895,9 @@ $grad-labels: map.get($gradients, "default");
       $list: list.append($list, #{$variation});
     }
     $gradient-stops: '';
-    @for $i from 1 through length($list) {
+    @for $i from 1 through list.length($list) {
       $gradient-stops: $gradient-stops + var(--gradient-#{$main-color}-#{list.nth($list, $i)});
-      @if($i < length($list)) {
+      @if($i < list.length($list)) {
         $gradient-stops: $gradient-stops + ', '
       }
     }
@@ -2072,9 +2072,9 @@ $grad-labels: map.get($gradients, "default");
       $list: list.append($list, #{$variation});
     }
     $gradient-stops: '';
-    @for $i from 1 through length($list) {
+    @for $i from 1 through list.length($list) {
       $gradient-stops: $gradient-stops + var(--gradient-#{$main-color}-#{list.nth($list, $i)});
-      @if($i < length($list)) {
+      @if($i < list.length($list)) {
         $gradient-stops: $gradient-stops + ', '
       }
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codyframe",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "The intuitive CSS framework.",
   "keywords": [
     "html",