Fixes dart sass 2.0.0 deprecation warnings

src/assets/styles/spec/settings/materialColors.scss

@@ -547,4 +547,4 @@ $md-colors: (
   blue-grey-700         : #455a64,
   blue-grey-800         : #37474f,
   blue-grey-900         : #263238,
-) !global;
+);

src/assets/styles/spec/utils/colors.scss

@@ -10,11 +10,11 @@
 // ---------------------------------------------------------
 
 @each $item, $color in $md-colors {
-  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
-  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
-  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
-  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
-  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+  .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
+  .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
+  .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
+  .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
+  .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
 }
 
 // ---------------------------------------------------------
@@ -22,9 +22,9 @@
 // ---------------------------------------------------------
 
 @each $item, $color in $grey-colors-alt {
-  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
-  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
-  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
-  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
-  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+  .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
+  .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
+  .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
+  .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
+  .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
 }