fix(core): cast color name to a string in Sass interpolation to remove warnings

Author: joselrio

core/src/css/ionic/core.ionic.scss

@@ -12,7 +12,7 @@
   @include globals.generate-color-variables();
 
   @each $color-name, $value in globals.$ionic-colors {
-    .ion-color-#{$color-name} {
+    .ion-color-#{"" + $color-name} {
       @include globals.generate-color($color-name);
     }
   }

core/src/themes/functions.color.scss

@@ -142,6 +142,7 @@
   $color-variants: map.get($hue-colors, $hue);
 
   $prefix: if($hue == "subtle", "-subtle", "");
+  $name: "" + $color-name;
 
   // TODO(FW-6417) this @if can be removed if we add subtle colors for ios and md
   // Only proceed if the color variants exist
@@ -156,21 +157,21 @@
     $foreground: map.get($color-variants, foreground);
 
     // Generate CSS variables dynamically
-    --ion-color#{$prefix}-base: var(--ion-color-#{$color-name}#{$prefix}, #{$base}) !important;
-    --ion-color#{$prefix}-base-rgb: var(--ion-color-#{$color-name}#{$prefix}-rgb, #{$base-rgb}) !important;
-    --ion-color#{$prefix}-contrast: var(--ion-color-#{$color-name}#{$prefix}-contrast, #{$contrast}) !important;
+    --ion-color#{$prefix}-base: var(--ion-color-#{$name}#{$prefix}, #{$base}) !important;
+    --ion-color#{$prefix}-base-rgb: var(--ion-color-#{$name}#{$prefix}-rgb, #{$base-rgb}) !important;
+    --ion-color#{$prefix}-contrast: var(--ion-color-#{$name}#{$prefix}-contrast, #{$contrast}) !important;
     --ion-color#{$prefix}-contrast-rgb: var(
-      --ion-color-#{$color-name}#{$prefix}-contrast-rgb,
+      --ion-color-#{$name}#{$prefix}-contrast-rgb,
       #{$contrast-rgb}
     ) !important;
-    --ion-color#{$prefix}-shade: var(--ion-color-#{$color-name}#{$prefix}-shade, #{$shade}) !important;
-    --ion-color#{$prefix}-tint: var(--ion-color-#{$color-name}#{$prefix}-tint, #{$tint}) !important;
+    --ion-color#{$prefix}-shade: var(--ion-color-#{$name}#{$prefix}-shade, #{$shade}) !important;
+    --ion-color#{$prefix}-tint: var(--ion-color-#{$name}#{$prefix}-tint, #{$tint}) !important;
     // TODO(FW-6417): remove the fallback variable when the foreground variable is
     // required by all palettes for all themes:
-    // --ion-color#{$prefix}-foreground: var(--ion-color-#{$color-name}#{$prefix}-foreground, #{$foreground}) !important;
+    // --ion-color#{$prefix}-foreground: var(--ion-color-#{$name}#{$prefix}-foreground, #{$foreground}) !important;
     --ion-color#{$prefix}-foreground: var(
-      --ion-color-#{$color-name}#{$prefix}-foreground,
-      var(--ion-color-#{$color-name}#{$prefix}, #{$foreground})
+      --ion-color-#{$name}#{$prefix}-foreground,
+      var(--ion-color-#{$name}#{$prefix}, #{$foreground})
     ) !important;
   }
 }
@@ -229,24 +230,26 @@
   }
 
   @each $color-name, $value in $theme-colors {
+    $name: "" + $color-name;
+
     @each $hue in (bold, subtle) {
       $colors: map.get($value, $hue);
 
       @if $colors != null {
         $prefix: if($hue == subtle, "-subtle", "");
 
-        --ion-color-#{$color-name}#{$prefix}: #{map.get($colors, base)};
-        --ion-color-#{$color-name}#{$prefix}-rgb: #{map.get($colors, base-rgb)};
-        --ion-color-#{$color-name}#{$prefix}-contrast: #{map.get($colors, contrast)};
-        --ion-color-#{$color-name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};
-        --ion-color-#{$color-name}#{$prefix}-shade: #{map.get($colors, shade)};
-        --ion-color-#{$color-name}#{$prefix}-tint: #{map.get($colors, tint)};
+        --ion-color-#{$name}#{$prefix}: #{map.get($colors, base)};
+        --ion-color-#{$name}#{$prefix}-rgb: #{map.get($colors, base-rgb)};
+        --ion-color-#{$name}#{$prefix}-contrast: #{map.get($colors, contrast)};
+        --ion-color-#{$name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};
+        --ion-color-#{$name}#{$prefix}-shade: #{map.get($colors, shade)};
+        --ion-color-#{$name}#{$prefix}-tint: #{map.get($colors, tint)};
         // TODO(FW-6417): this "if" can be removed when foreground is defined for ios/md
         // themes. It should not be added until we want foreground to be required for
         // ios and md because this will be a breaking change, requiring users to add
         // `--ion-color-{color}-foreground` in order to override the default colors
         @if (map.get($colors, foreground)) {
-          --ion-color-#{$color-name}#{$prefix}-foreground: #{map.get($colors, foreground)};
+          --ion-color-#{$name}#{$prefix}-foreground: #{map.get($colors, foreground)};
         }
       }
     }