refactor(palettes): always interpolate keys to string type

IgniteUI · Dec 11, 2024 · fe94c1a · fe94c1a
1 parent e56e185
commit fe94c1a
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 118 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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));