diff --git a/sass/color/_functions.scss b/sass/color/_functions.scss
index e26012a0..fee683e0 100644
--- a/sass/color/_functions.scss
+++ b/sass/color/_functions.scss
@@ -137,7 +137,7 @@ $_enhanced-accessibility: false;
         $color: if($color, $color, if($lum > 0.5, #000, #fff));
         $lmap: map.get(multipliers.$grayscale, 'l');
         $len: list.length($lmap);
-        $i: list.index(map.keys($lmap), $shade);
+        $i: list.index(map.keys($lmap), #{$shade});
         $l: list.nth(map.values($lmap), if($lum > 0.5, $len - $i + 1, $i));
         $raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l);
         $hsl: #{hsl(from var(--ig-#{$name}-500) h s $l)};
@@ -148,8 +148,8 @@ $_enhanced-accessibility: false;
 
         @return (raw: $raw, hsl: $hsl);
     } @else {
-        $sx: map.get(multipliers.$color, 's', $shade);
-        $lx: map.get(multipliers.$color, 'l', $shade);
+        $sx: map.get(multipliers.$color, 's', #{$shade});
+        $lx: map.get(multipliers.$color, 'l', #{$shade});
         $raw: hsl(
             to-fixed(color.hue($color)),
             to-fixed(color.saturation($color) * $sx),
@@ -194,10 +194,10 @@ $_enhanced-accessibility: false;
 
     @if $palette {
         $s: map.get($palette, #{$color});
-        $base: map.get($s, $variant);
+        $base: map.get($s, #{$variant});
         $raw: if($contrast, map.get($s, #{$variant}-contrast), map.get($s, #{$variant}-raw));
 
-        @return if($raw and $variant != 500, rgba($raw, $_alpha), rgba($base, $_alpha));
+        @return if($raw and $variant != '500', rgba($raw, $_alpha), rgba($base, $_alpha));
     }
 
     @return if($contrast, $_mix-alpha, $_hsl-alpha);
diff --git a/sass/color/_multipliers.scss b/sass/color/_multipliers.scss
index f6f0356b..333fbdc5 100644
--- a/sass/color/_multipliers.scss
+++ b/sass/color/_multipliers.scss
@@ -1,31 +1,31 @@
 $color: (
     s: (
-        50: 1.23,
-        100: 0.8,
-        200: 0.64,
-        300: 0.73,
-        400: 0.875,
-        500: 1,
-        600: 1.26,
-        700: 1.26,
-        800: 1.26,
-        900: 1.26,
+        '50': 1.23,
+        '100': 0.8,
+        '200': 0.64,
+        '300': 0.73,
+        '400': 0.875,
+        '500': 1,
+        '600': 1.26,
+        '700': 1.26,
+        '800': 1.26,
+        '900': 1.26,
         'A100': 1.23,
         'A200': 1.22,
         'A400': 1.23,
         'A700': 1.23,
     ),
     l: (
-        50: 1.78,
-        100: 1.66,
-        200: 1.43,
-        300: 1.19,
-        400: 1.08,
-        500: 1,
-        600: 0.89,
-        700: 0.81,
-        800: 0.73,
-        900: 0.64,
+        '50': 1.78,
+        '100': 1.66,
+        '200': 1.43,
+        '300': 1.19,
+        '400': 1.08,
+        '500': 1,
+        '600': 0.89,
+        '700': 0.81,
+        '800': 0.73,
+        '900': 0.64,
         'A100': 1.34,
         'A200': 1.16,
         'A400': 0.91,
@@ -34,15 +34,15 @@ $color: (
 );
 $grayscale: (
     l: (
-        50: 13%,
-        100: 26%,
-        200: 38%,
-        300: 54%,
-        400: 62%,
-        500: 74%,
-        600: 88%,
-        700: 93%,
-        800: 96%,
-        900: 98%,
+        '50': 13%,
+        '100': 26%,
+        '200': 38%,
+        '300': 54%,
+        '400': 62%,
+        '500': 74%,
+        '600': 88%,
+        '700': 93%,
+        '800': 96%,
+        '900': 98%,
     ),
 );
diff --git a/sass/color/_types.scss b/sass/color/_types.scss
index c9face5f..d16eb6eb 100644
--- a/sass/color/_types.scss
+++ b/sass/color/_types.scss
@@ -9,7 +9,7 @@
 /// A list consisting of all generated gray shades
 /// @type Map
 /// @access private
-$IGrayShades: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
+$IGrayShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900');
 
 /// A list consisting of all generated shades for palette colors
 /// @type Map
diff --git a/test/_color.spec.scss b/test/_color.spec.scss
index a09d274b..95ebbc7c 100644
--- a/test/_color.spec.scss
+++ b/test/_color.spec.scss
@@ -248,7 +248,7 @@ $_palette: palette(
                     // Test if each shade exists
                     @include assert-true(map.get($_palette, $color, $shade));
 
-                    @if $shade != variant{
+                    @if $shade != variant {
                         // Test if each contrast shade exits
                         @include assert-true(map.get($_palette, $color, #{$shade}-contrast));
 
diff --git a/test/styles/_mocks.scss b/test/styles/_mocks.scss
index 88cc3faf..2e8a9aab 100644
--- a/test/styles/_mocks.scss
+++ b/test/styles/_mocks.scss
@@ -2,25 +2,25 @@
 
 $handmade-palette: (
     'primary': (
-        50: #e6eff8,
+        '50': #e6eff8,
         '50-contrast': black,
-        100: #bfd7f2,
+        '100': #bfd7f2,
         '100-contrast': black,
-        200: #98bfec,
+        '200': #98bfec,
         '200-contrast': black,
-        300: #85b5e9,
+        '300': #85b5e9,
         '300-contrast': white,
-        400: #73a6e4,
+        '400': #73a6e4,
         '400-contrast': white,
-        500: #6797de,
+        '500': #6797de,
         '500-contrast': white,
-        600: #3681dd,
+        '600': #3681dd,
         '600-contrast': white,
-        700: #357fda,
+        '700': #357fda,
         '700-contrast': white,
-        800: #306dc8,
+        '800': #306dc8,
         '800-contrast': white,
-        900: #284ea8,
+        '900': #284ea8,
         '900-contrast': white,
         'A100': #98bfec,
         'A100-contrast': white,
@@ -32,25 +32,25 @@ $handmade-palette: (
         'A700-contrast': white,
     ),
     'secondary': (
-        50: #fef7e2,
+        '50': #fef7e2,
         '50-contrast': black,
-        100: #fdeab7,
+        '100': #fdeab7,
         '100-contrast': black,
-        200: #fbdd89,
+        '200': #fbdd89,
         '200-contrast': black,
-        300: #fad15c,
+        '300': #fad15c,
         '300-contrast': black,
-        400: #f9c63f,
+        '400': #f9c63f,
         '400-contrast': black,
-        500: #f7bd32,
+        '500': #f7bd32,
         '500-contrast': white,
-        600: #f6b02d,
+        '600': #f6b02d,
         '600-contrast': white,
-        700: #f49e2a,
+        '700': #f49e2a,
         '700-contrast': white,
-        800: #f38e28,
+        '800': #f38e28,
         '800-contrast': white,
-        900: #f38e28,
+        '900': #f38e28,
         '900-contrast': white,
         'A100': #fbdd89,
         'A100-contrast': black,
@@ -62,51 +62,51 @@ $handmade-palette: (
         'A700-contrast': white,
     ),
     'tertiary': (
-        500: #f7bd32,
+        '500': #f7bd32,
         '500-contrast': white,
     ),
     'gray': (
-        50: #fff,
+        '50': #fff,
         '50-contrast': black,
-        100: #fafafa,
+        '100': #fafafa,
         '100-contrast': black,
-        200: #f5f5f5,
+        '200': #f5f5f5,
         '200-contrast': black,
-        300: #f0f0f0,
+        '300': #f0f0f0,
         '300-contrast': black,
-        400: #dedede,
+        '400': #dedede,
         '400-contrast': black,
-        500: #b3b2b2,
+        '500': #b3b2b2,
         '500-contrast': black,
-        600: #979696,
+        '600': #979696,
         '600-contrast': white,
-        700: #7b7a7a,
+        '700': #7b7a7a,
         '700-contrast': white,
-        800: #404040,
+        '800': #404040,
         '800-contrast': white,
-        900: #1a1a1a,
+        '900': #1a1a1a,
         '900-contrast': white,
     ),
     'info': (
-        50: #fef7e2,
+        '50': #fef7e2,
         '50-contrast': black,
-        100: #fdeab7,
+        '100': #fdeab7,
         '100-contrast': black,
-        200: #fbdd89,
+        '200': #fbdd89,
         '200-contrast': black,
-        300: #fad15c,
+        '300': #fad15c,
         '300-contrast': black,
-        400: #f9c63f,
+        '400': #f9c63f,
         '400-contrast': black,
-        500: #f7bd32,
+        '500': #f7bd32,
         '500-contrast': white,
-        600: #f6b02d,
+        '600': #f6b02d,
         '600-contrast': white,
-        700: #f49e2a,
+        '700': #f49e2a,
         '700-contrast': white,
-        800: #f38e28,
+        '800': #f38e28,
         '800-contrast': white,
-        900: #f38e28,
+        '900': #f38e28,
         '900-contrast': white,
         'A100': #fbdd89,
         'A100-contrast': black,
@@ -118,25 +118,25 @@ $handmade-palette: (
         'A700-contrast': white,
     ),
     'success': (
-        50: #fef7e2,
+        '50': #fef7e2,
         '50-contrast': black,
-        100: #fdeab7,
+        '100': #fdeab7,
         '100-contrast': black,
-        200: #fbdd89,
+        '200': #fbdd89,
         '200-contrast': black,
-        300: #fad15c,
+        '300': #fad15c,
         '300-contrast': black,
-        400: #f9c63f,
+        '400': #f9c63f,
         '400-contrast': black,
-        500: #f7bd32,
+        '500': #f7bd32,
         '500-contrast': white,
-        600: #f6b02d,
+        '600': #f6b02d,
         '600-contrast': white,
-        700: #f49e2a,
+        '700': #f49e2a,
         '700-contrast': white,
-        800: #f38e28,
+        '800': #f38e28,
         '800-contrast': white,
-        900: #f38e28,
+        '900': #f38e28,
         '900-contrast': white,
         'A100': #fbdd89,
         'A100-contrast': black,
@@ -148,25 +148,25 @@ $handmade-palette: (
         'A700-contrast': white,
     ),
     'warn': (
-        50: #fef7e2,
+        '50': #fef7e2,
         '50-contrast': black,
-        100: #fdeab7,
+        '100': #fdeab7,
         '100-contrast': black,
-        200: #fbdd89,
+        '200': #fbdd89,
         '200-contrast': black,
-        300: #fad15c,
+        '300': #fad15c,
         '300-contrast': black,
-        400: #f9c63f,
+        '400': #f9c63f,
         '400-contrast': black,
-        500: #f7bd32,
+        '500': #f7bd32,
         '500-contrast': white,
-        600: #f6b02d,
+        '600': #f6b02d,
         '600-contrast': white,
-        700: #f49e2a,
+        '700': #f49e2a,
         '700-contrast': white,
-        800: #f38e28,
+        '800': #f38e28,
         '800-contrast': white,
-        900: #f38e28,
+        '900': #f38e28,
         '900-contrast': white,
         'A100': #fbdd89,
         'A100-contrast': black,
@@ -178,25 +178,25 @@ $handmade-palette: (
         'A700-contrast': white,
     ),
     'error': (
-        50: #fef7e2,
+        '50': #fef7e2,
         '50-contrast': black,
-        100: #fdeab7,
+        '100': #fdeab7,
         '100-contrast': black,
-        200: #fbdd89,
+        '200': #fbdd89,
         '200-contrast': black,
-        300: #fad15c,
+        '300': #fad15c,
         '300-contrast': black,
-        400: #f9c63f,
+        '400': #f9c63f,
         '400-contrast': black,
-        500: #f7bd32,
+        '500': #f7bd32,
         '500-contrast': white,
-        600: #f6b02d,
+        '600': #f6b02d,
         '600-contrast': white,
-        700: #f49e2a,
+        '700': #f49e2a,
         '700-contrast': white,
-        800: #f38e28,
+        '800': #f38e28,
         '800-contrast': white,
-        900: #f38e28,
+        '900': #f38e28,
         '900-contrast': white,
         'A100': #fbdd89,
         'A100-contrast': black,
@@ -208,25 +208,25 @@ $handmade-palette: (
         'A700-contrast': white,
     ),
     'surface': (
-        50: #fef7e2,
+        '50': #fef7e2,
         '50-contrast': black,
-        100: #fdeab7,
+        '100': #fdeab7,
         '100-contrast': black,
-        200: #fbdd89,
+        '200': #fbdd89,
         '200-contrast': black,
-        300: #fad15c,
+        '300': #fad15c,
         '300-contrast': black,
-        400: #f9c63f,
+        '400': #f9c63f,
         '400-contrast': black,
-        500: #f7bd32,
+        '500': #f7bd32,
         '500-contrast': white,
-        600: #f6b02d,
+        '600': #f6b02d,
         '600-contrast': white,
-        700: #f49e2a,
+        '700': #f49e2a,
         '700-contrast': white,
-        800: #f38e28,
+        '800': #f38e28,
         '800-contrast': white,
-        900: #f38e28,
+        '900': #f38e28,
         '900-contrast': white,
         'A100': #fbdd89,
         'A100-contrast': black,