refactor(color): update color function to work with named colors

sass/color/_functions.scss

@@ -185,15 +185,15 @@ $_enhanced-accessibility: false;
 ///   .my-component-2 {
 ///      background: color($my-palette, 'primary', 200, .5);
 ///    }
-@function color($palette: null, $color: 'primary', $variant: 500, $opacity: null) {
+@function color($palette: null, $color: primary, $variant: 500, $opacity: null) {
     $s: #{var(--ig-#{$color}-#{$variant})};
     $contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false);
     $_alpha: if($opacity, $opacity, 1);
     $_hsl-alpha: hsl(from $s h s l / $_alpha);
     $_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);
 
     @if $palette {
-        $s: map.get($palette, $color);
+        $s: map.get($palette, #{$color});
         $base: map.get($s, $variant);
         $raw: if($contrast, map.get($s, #{$variant}-contrast), map.get($s, #{$variant}-raw));
 

sass/elevations/presets/_index.scss

@@ -1,3 +1,8 @@
+////
+/// @package theming
+/// @group elevations
+////
+
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
 /// @access private

test/_color.spec.scss

@@ -290,6 +290,16 @@ $_palette: palette(
             $_ref: color(null, primary, 800);
 
             @include assert-equal($_ref, hsl(from var(--ig-primary-800) h s l / 1));
+
+            @include assert() {
+                @include output() {
+                    color: color($_palette, gray, 100);
+                }
+
+                @include contains() {
+                    color: #fafafa;
+                }
+            }
         }
 
         @include it('should convert a color to a list of HSL values') {