fix: update deprecated Sass functions to modern syntax

src/scss/_general.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 body {
   font-family: $theme-font-family;
   font-size: $theme-font-size;
@@ -312,7 +314,7 @@ p.text-muted {
     &:active,
     &:focus,
     &:hover {
-      background: transparentize($primary-color, 0.9);
+      background: color.adjust($primary-color, $alpha: -0.9);
 
       > a {
         background: transparent;

src/scss/_generic.scss

@@ -1,6 +1,9 @@
 /**  =====================
       Generic-class css start
 ========================== **/
+
+@use "sass:list";
+
 /*====== Padding , Margin css starts ======*/
 $i: 0;
 @while $i<=50 {
@@ -52,20 +55,20 @@ $i: 0;
 
 /*====== text-color, background color css starts ======*/
 @each $value in $color-name {
-  $i: index($color-name, $value);
+  $i: list.index($color-name, $value);
   .bg-#{$value} {
-    background: nth($color-color, $i);
+    background: list.nth($color-color, $i);
   }
   .text-#{$value} {
-    color: nth($color-color, $i);
+    color: list.nth($color-color, $i);
   }
 }
 /*====== text-color css ends ======*/
 /*====== Card top border css starts ======*/
 @each $value in $color-name {
-  $i: index($color-name, $value);
+  $i: list.index($color-name, $value);
   .card-border-#{$value} {
-    border-top: 4px solid nth($color-color, $i);
+    border-top: 4px solid list.nth($color-color, $i);
   }
 }
 /*====== Card top border ends ======*/

src/scss/_variables.scss

@@ -2,6 +2,9 @@
 //     List of variables for layout
 // =======================================
 
+@use "sass:color";
+@use "sass:map";
+
 $header-height: 70px;
 $Menu-width: 264px;
 $Menu-collapsed-width: 80px;
@@ -47,16 +50,16 @@ $dark-layout-font: #adb7be;
 $menu-icon-color: $primary-color, #ff5252, #01a9ac, #9575cd, #23b7e5, $warning-color;
 // Header background
 $color-header-name: blue, red, purple, lightblue, dark;
-$color-header-color: $primary-color, #ff5252, #9575cd, #23b7e5, lighten($dark-layout, 7%);
+$color-header-color: $primary-color, #ff5252, #9575cd, #23b7e5, color.adjust($dark-layout, $lightness: 7%);
 // Menu background
 $color-menu-name: blue, red, purple, lightblue, dark;
-$color-menu-color: $primary-color, #ff5252, #9575cd, #23b7e5, lighten($dark-layout, 7%);
+$color-menu-color: $primary-color, #ff5252, #9575cd, #23b7e5, color.adjust($dark-layout, $lightness: 7%);
 // Active background color
 $color-active-name: blue, red, purple, lightblue, dark;
-$color-active-color: $primary-color, #ff5252, #9575cd, #23b7e5, lighten($dark-layout, 7%);
+$color-active-color: $primary-color, #ff5252, #9575cd, #23b7e5, color.adjust($dark-layout, $lightness: 7%);
 // Menu title color
 $color-title-name: blue, red, purple, lightblue, dark;
-$color-title-color: $primary-color, #ff5252, #9575cd, #23b7e5, lighten($dark-layout, 7%);
+$color-title-color: $primary-color, #ff5252, #9575cd, #23b7e5, color.adjust($dark-layout, $lightness: 7%);
 
 $theme-font-family: 'Open Sans', sans-serif;
 $theme-font-size: 14px;
@@ -74,7 +77,7 @@ $form-bg: #f0f3f6;
 
 $theme-colors: () !default;
 
-$theme-colors: map-merge(
+$theme-colors: map.merge(
   (
     'primary': $primary-color,
     'secondary': $secondary-color,

src/scss/menu/_menu-lite.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // new logo start
 
 .b-brand {
@@ -382,7 +384,7 @@
           }
 
           &.notification:hover {
-            background: transparentize($primary-color, 0.9);
+            background: color.adjust($primary-color, $alpha: -0.9);
           }
 
           p {
@@ -474,7 +476,7 @@
           &:active,
           &:focus,
           &:hover {
-            background: transparentize($primary-color, 0.9);
+            background: color.adjust($primary-color, $alpha: -0.9);
 
             > a {
               background: transparent;
@@ -825,7 +827,7 @@
   color: $menu-dark-text-color;
 
   .pcoded-submenu {
-    background: darken($header-dark-background, 3%);
+    background: color.adjust($header-dark-background, $lightness: -3%);
     padding: 15px 0;
   }
 
@@ -936,7 +938,7 @@
               left: calc(calc(#{$Menu-collapsed-width} / 2) - 3px);
               width: 2px;
               height: calc(100% - 5px);
-              background: transparentize($menu-dark-text-color, 0.9);
+              background: color.adjust($menu-dark-text-color, $alpha: -0.9);
             }
 
             li {
@@ -1101,7 +1103,7 @@
         }
 
         > a {
-          background: darken($menu-dark-background, 6%);
+          background: color.adjust($menu-dark-background, $lightness: -6%);
           color: $white;
         }
       }

src/scss/mixins/_buttons.scss

@@ -1,14 +1,16 @@
+@use "sass:color";
+
 // Button variants
 //
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 @mixin button-variant(
   $background,
   $border,
-  $hover-background: darken($background, 7.5%),
-  $hover-border: darken($border, 10%),
-  $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%)
+  $hover-background: color.adjust($background, $lightness: -7.5%),
+  $hover-border: color.adjust($border, $lightness: -10%),
+  $active-background: color.adjust($background, $lightness: -10%),
+  $active-border: color.adjust($border, $lightness: -12.5%)
 ) {
   color: color-yiq($background);
   background-color: $border;
@@ -77,12 +79,12 @@
 }
 @mixin button-glow-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
   box-shadow:
-    0 1px 6px 2px transparentize($color, 0.44),
-    0 6px 11px 2px transparentize($color, 0.8);
+    0 1px 6px 2px color.adjust($color, $alpha: -0.44),
+    0 6px 11px 2px color.adjust($color, $alpha: -0.8);
   &:hover {
     box-shadow:
-      0 1px 4px 2px transparentize($color, 0.44),
-      0 4px 9px 2px transparentize($color, 0.9);
+      0 1px 4px 2px color.adjust($color, $alpha: -0.44),
+      0 4px 9px 2px color.adjust($color, $alpha: -0.9);
   }
   &:not(:disabled):not(.disabled).active,
   &:not(:disabled):not(.disabled):active:focus,

src/scss/mixins/_function.scss

@@ -1,7 +1,9 @@
+@use "sass:color";
+
 @function color-yiq($color) {
-  $r: red($color);
-  $g: green($color);
-  $b: blue($color);
+  $r: color.channel($color, "red", $space: rgb);
+  $g: color.channel($color, "green", $space: rgb);
+  $b: color.channel($color, "blue", $space: rgb);
   $yiq: calc((($r * 299) + ($g * 587) + ($b * 114)) / 1000);
   @if ($yiq >= $yiq-contrasted-threshold) {
     @return $yiq-dark-color;
@@ -16,5 +18,5 @@
   $color: theme-color($color-name);
   $color-base: if($level > 0, $yiq-dark-color, $yiq-light-color);
   $level: abs($level);
-  @return mix($color-base, $color, $level * $theme-color-interval);
+  @return color.mix($color-base, $color, $level * $theme-color-interval);
 }

src/scss/theme-elements/_data-tables.scss

@@ -2,6 +2,8 @@
       Data Tables css start
 ==========================  **/
 
+@use "sass:color";
+
 .table {
   td,
   th {
@@ -32,15 +34,15 @@
 
 .table-striped {
   tbody tr:nth-of-type(2n + 1) {
-    background-color: transparentize($primary-color, 0.95);
+    background-color: color.adjust($primary-color, $alpha: -0.95);
   }
 }
 // Hover effect
 
 .table-hover {
   tbody tr {
     &:hover {
-      background-color: transparentize($primary-color, 0.95);
+      background-color: color.adjust($primary-color, $alpha: -0.95);
     }
   }
 }
@@ -51,7 +53,7 @@
     th {
       color: $white;
       background-color: $dark-color;
-      border-color: darken($dark-color, 10%);
+      border-color: color.adjust($dark-color, $lightness: -10%);
     }
   }
 }
@@ -63,19 +65,19 @@
   td,
   th,
   thead th {
-    border-color: darken($dark-color, 10%);
+    border-color: color.adjust($dark-color, $lightness: -10%);
   }
 
   &.table-striped {
     tbody tr:nth-of-type(odd) {
-      background-color: darken($dark-color, 2%);
+      background-color: color.adjust($dark-color, $lightness: -2%);
     }
   }
 
   &.table-hover {
     tbody tr {
       &:hover {
-        background-color: darken($dark-color, 5%);
+        background-color: color.adjust($dark-color, $lightness: -5%);
       }
     }
   }

src/scss/theme-elements/_labels-badges.scss

@@ -2,17 +2,19 @@
       Label & Badges css start
 ==========================  **/
 
+@use "sass:list";
+
 .label {
   padding: 4px 10px;
   min-height: auto;
   position: relative;
   margin-right: 5px;
   margin-bottom: 5px;
   @each $value in $color-bt-name {
-    $i: index($color-bt-name, $value);
+    $i: list.index($color-bt-name, $value);
 
     &.label-#{$value} {
-      background: nth($color-bt-color, $i);
+      background: list.nth($color-bt-color, $i);
       color: #ffffff;
     }
   }

src/scss/theme-elements/_radiobox-checkbox.scss

@@ -1,6 +1,9 @@
 /**  =====================
       Radio & Checked css start
 ==========================  **/
+
+@use "sass:list";
+
 .checkbox {
   padding: 10px 0;
   min-height: auto;
@@ -101,17 +104,17 @@
     }
   }
   @each $value in $color-bt-name {
-    $i: index($color-bt-name, $value);
+    $i: list.index($color-bt-name, $value);
 
     &.checkbox-#{$value} input[type='checkbox']:checked + .cr:before {
-      background: nth($color-bt-color, $i);
-      border-color: nth($color-bt-color, $i);
+      background: list.nth($color-bt-color, $i);
+      border-color: list.nth($color-bt-color, $i);
       color: #ffffff;
     }
 
     &.checkbox-fill.checkbox-#{$value} input[type='checkbox']:checked + .cr:before {
       background: transparent;
-      color: nth($color-bt-color, $i);
+      color: list.nth($color-bt-color, $i);
       border-color: transparent;
     }
   }
@@ -201,15 +204,15 @@
     }
   }
   @each $value in $color-bt-name {
-    $i: index($color-bt-name, $value);
+    $i: list.index($color-bt-name, $value);
 
     &.radio-#{$value} input[type='radio']:checked + .cr {
       &:before {
-        border-color: nth($color-bt-color, $i);
+        border-color: list.nth($color-bt-color, $i);
       }
 
       &:after {
-        background: nth($color-bt-color, $i);
+        background: list.nth($color-bt-color, $i);
       }
     }
   }