diff --git a/.stylelintrc.json b/.stylelintrc.json
index 2c35ceaf..e199ca0a 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -50,6 +50,7 @@
             }
         ],
         "shorthand-property-no-redundant-values": true,
+        "alpha-value-notation": "number",
         "value-keyword-case": "lower",
         "value-no-vendor-prefix": true,
         "scss/at-mixin-pattern": null,
diff --git a/README.md b/README.md
index 0054f33d..7bf4c78e 100644
--- a/README.md
+++ b/README.md
@@ -102,3 +102,12 @@ To start the docs in your browser, run
 ```
 npm run serve:docs
 ```
+
+## Testing and Debugging
+
+### Preview Palettes
+To preview a palette you can pass the palette (`material`, `bootstrap`, `fluent`, `indigo`) and variant (`light` or `dark`) to the `palette` and `variant` arguments respectively. If you want to output the result to a file in the `./dist` folder add the `out` option.
+
+```
+npm run preview:palette -- --palette=material --variant=light --out
+```
diff --git a/package-lock.json b/package-lock.json
index 1eb94173..7b3c0bb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,11 +27,10 @@
         "shx": "^0.3.4",
         "stylelint": "^15.6.2",
         "stylelint-config-standard-scss": "^7.0.1",
-        "stylelint-scss": "^4.7.0",
-        "yargs": "^17.7.2"
+        "stylelint-scss": "^4.7.0"
       },
       "peerDependencies": {
-        "sass": "^1.58.1"
+        "sass": "^1.69.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -7899,9 +7898,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.58.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.1.tgz",
-      "integrity": "sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==",
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
       "peer": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -7912,7 +7911,7 @@
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/sass-convert": {
@@ -15964,9 +15963,9 @@
       }
     },
     "sass": {
-      "version": "1.58.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.1.tgz",
-      "integrity": "sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==",
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
       "peer": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
diff --git a/package.json b/package.json
index a52a3f45..3dab31f8 100644
--- a/package.json
+++ b/package.json
@@ -93,10 +93,9 @@
     "shx": "^0.3.4",
     "stylelint": "^15.6.2",
     "stylelint-config-standard-scss": "^7.0.1",
-    "stylelint-scss": "^4.7.0",
-    "yargs": "^17.7.2"
+    "stylelint-scss": "^4.7.0"
   },
   "peerDependencies": {
-    "sass": "^1.58.1"
+    "sass": "^1.69.5"
   }
 }
diff --git a/sass/color/_functions.scss b/sass/color/_functions.scss
index 98aaec6d..79ffb820 100644
--- a/sass/color/_functions.scss
+++ b/sass/color/_functions.scss
@@ -103,13 +103,13 @@ $_enhanced-accessibility: false;
         $result: map.merge(
             $result,
             (
-                $variant: map.get($shade, 'raw'),
+                $variant: map.get($shade, 'hsl'),
                 #{$variant}-contrast:
                     text-contrast(
                         $background: map.get($shade, 'raw'),
                         $contrast: 'AA',
                     ),
-                #{$variant}-hsl: map.get($shade, 'hsl'),
+                raw: map.get($shade, 'raw'),
             )
         );
     }
@@ -139,8 +139,14 @@ $_enhanced-accessibility: false;
         $len: list.length($lmap);
         $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)};
 
-        @return (raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l), hsl: #{$h, $s, $l});
+        @if #{$shade} == '500' {
+            $hsl: $raw;
+        }
+
+        @return (raw: $raw, hsl: $hsl);
     } @else {
         $sx: map.get(multipliers.$color, 's', $shade);
         $lx: map.get(multipliers.$color, 'l', $shade);
@@ -149,9 +155,11 @@ $_enhanced-accessibility: false;
             to-fixed(color.saturation($color) * $sx),
             to-fixed(color.lightness($color) * $lx)
         );
+        $hsl: #{hsl(from var(--ig-#{$name}-500) h calc(s * $sx) calc(l * $lx))};
 
-        // prettier-ignore
-        $hsl: #{$h, calc(#{$s} * #{$sx}), calc(#{$l} * #{$lx})};
+        @if #{$shade} == '500' {
+            $hsl: $color;
+        }
 
         @return (raw: $raw, hsl: $hsl);
     }
@@ -178,26 +186,21 @@ $_enhanced-accessibility: false;
 ///      background: color($my-palette, 'primary', 200, .5);
 ///    }
 @function color($palette: null, $color: 'primary', $variant: 500, $opacity: null) {
-    $c: map.get($palette or types.$IPalette, #{$color});
-    $a: var(--ig-#{$color}-a);
     $s: #{var(--ig-#{$color}-#{$variant})};
     $contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false);
-    $meta: if($palette, map.get($palette, '_meta'), null);
     $_alpha: if($opacity, $opacity, 1);
-    $_hsl-alpha: hsla($s, if($opacity, $opacity, $a));
+    $_hsl-alpha: hsl(from $s h s l / $_alpha);
     $_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);
 
-    @if not($palette) or not($meta) {
-        @return if($contrast, $_mix-alpha, $_hsl-alpha);
-    }
-
-    $_shade: map.get($c, $variant);
+    @if $palette and not($contrast) {
+        $s: map.get($palette, $color);
+        $base: map.get($s, $variant);
+        $raw: map.get($s, raw);
 
-    @if meta.type-of($_shade) == 'list' and list.length($_shade) == 3 {
-        $_shade: hsl($_shade...);
+        @return if($raw and $variant != 500, rgba($raw, $_alpha), rgba($base, $_alpha));
     }
 
-    @return rgba($_shade, $alpha: $_alpha);
+    @return if($contrast, $_mix-alpha, $_hsl-alpha);
 }
 
 /// Retrieves a contrast text color for a given color variant from a color palette.
diff --git a/sass/color/_mixins.scss b/sass/color/_mixins.scss
index 88b789da..0b67b981 100644
--- a/sass/color/_mixins.scss
+++ b/sass/color/_mixins.scss
@@ -10,29 +10,8 @@
 /// @package theming
 ////
 
-// Generates CSS variables for a base color
-// @access private
-@mixin _base($color, $shade, $value) {
-    @if $shade == 500 {
-        $_type: meta.type-of($value);
-        $_color: '' + $color;
-
-        @if $_type == 'color' {
-            --ig-#{$_color}-h: #{math.round(color.hue($value))};
-            --ig-#{$_color}-s: #{math.round(color.saturation($value))};
-            --ig-#{$_color}-l: #{math.round(color.lightness($value))};
-            --ig-#{$_color}-a: #{color.alpha($value)};
-        }
-
-        // Cover handmade palettes with hsl values for base color
-        @if $_type == 'list' and list.length($value) == 3 {
-            --ig-#{$_color}-h: #{list.nth($value, 1)};
-            --ig-#{$_color}-s: #{list.nth($value, 2)};
-            --ig-#{$_color}-l: #{list.nth($value, 3)};
-            --ig-#{$_color}-a: 1;
-        }
-    }
-}
+// Tracks added CSS variables for color shades
+$_added: () !default;
 
 // Generates CSS variables for a shade color
 // @access private
@@ -41,18 +20,11 @@
     $_hsl: if($_shade, string.index($shade, 'hsl'), false);
     $_contrast: if($_shade, string.index($shade, 'contrast'), false);
     $_color: '' + $color;
+    $_exists: list.index($_added, #{$_color}-#{$shade});
 
-    @if $_hsl {
-        $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
-
-        --ig-#{$_color}-#{$variant}: #{$value};
-    }
-
-    @if not($_hsl) and not($_contrast) {
-        --ig-#{$_color}-#{$shade}: #{$value};
-    }
+    @if not($_hsl) {
+        $_added: list.append($_added, #{$_color}-#{$shade}) !global;
 
-    @if $_contrast and $contrast {
         --ig-#{$_color}-#{$shade}: #{$value};
     }
 }
@@ -71,8 +43,7 @@
 
     #{$scope} {
         @each $color, $shades in map.remove($palette, '_meta') {
-            @each $shade, $value in $shades {
-                @include _base($color, $shade, $value);
+            @each $shade, $value in map.remove($shades, 'raw') {
                 @include _shade($color, $shade, $value, $contrast);
             }
         }
diff --git a/sass/color/_multipliers.scss b/sass/color/_multipliers.scss
index 6f56de0a..f6f0356b 100644
--- a/sass/color/_multipliers.scss
+++ b/sass/color/_multipliers.scss
@@ -7,9 +7,9 @@ $color: (
         400: 0.875,
         500: 1,
         600: 1.26,
-        700: 1.52,
-        800: 1.5,
-        900: 1.34,
+        700: 1.26,
+        800: 1.26,
+        900: 1.26,
         'A100': 1.23,
         'A200': 1.22,
         'A400': 1.23,
diff --git a/sass/color/presets/dark/_indigo.scss b/sass/color/presets/dark/_indigo.scss
index 827f4247..e32582ff 100644
--- a/sass/color/presets/dark/_indigo.scss
+++ b/sass/color/presets/dark/_indigo.scss
@@ -23,205 +23,205 @@ $surface-shades: shades('surface', #1e1f24, $color-shades);
 /// @prop {Color} surface [#1e1f24] - The surface color.
 $palette: (
     'primary': (
-        50: to-hsl(#c5cdff),
+        50: #c5cdff,
         '50-contrast': black,
-        100: to-hsl(#a3aff6),
+        100: #a3aff6,
         '100-contrast': black,
-        200: to-hsl(#8293f8),
+        200: #8293f8,
         '200-contrast': black,
-        300: to-hsl(#7385f4),
+        300: #7385f4,
         '300-contrast': black,
-        400: to-hsl(#5468d9),
+        400: #5468d9,
         '400-contrast': black,
-        500: to-hsl(#3f51b5),
+        500: #3f51b5,
         '500-contrast': white,
-        600: to-hsl(#39479c),
+        600: #39479c,
         '600-contrast': white,
-        700: to-hsl(#333d83),
+        700: #333d83,
         '700-contrast': white,
-        800: to-hsl(#2e3172),
+        800: #2e3172,
         '800-contrast': white,
-        900: to-hsl(#262851),
+        900: #262851,
         '900-contrast': white,
-        'A100': to-hsl(#39479c),
+        'A100': #39479c,
         'A100-contrast': white,
-        'A200': to-hsl(#333d83),
+        'A200': #333d83,
         'A200-contrast': white,
-        'A400': to-hsl(#2e3172),
+        'A400': #2e3172,
         'A400-contrast': white,
-        'A700': to-hsl(#262851),
+        'A700': #262851,
         'A700-contrast': white,
     ),
     'secondary': (
-        50: to-hsl(#c5cdff),
+        50: #c5cdff,
         '50-contrast': black,
-        100: to-hsl(#a3aff6),
+        100: #a3aff6,
         '100-contrast': black,
-        200: to-hsl(#8293f8),
+        200: #8293f8,
         '200-contrast': black,
-        300: to-hsl(#7385f4),
+        300: #7385f4,
         '300-contrast': black,
-        400: to-hsl(#5468d9),
+        400: #5468d9,
         '400-contrast': black,
-        500: to-hsl(#3f51b5),
+        500: #3f51b5,
         '500-contrast': white,
-        600: to-hsl(#39479c),
+        600: #39479c,
         '600-contrast': white,
-        700: to-hsl(#333d83),
+        700: #333d83,
         '700-contrast': white,
-        800: to-hsl(#2e3172),
+        800: #2e3172,
         '800-contrast': white,
-        900: to-hsl(#262851),
+        900: #262851,
         '900-contrast': white,
-        'A100': to-hsl(#39479c),
+        'A100': #39479c,
         'A100-contrast': white,
-        'A200': to-hsl(#333d83),
+        'A200': #333d83,
         'A200-contrast': white,
-        'A400': to-hsl(#2e3172),
+        'A400': #2e3172,
         'A400-contrast': white,
-        'A700': to-hsl(#262851),
+        'A700': #262851,
         'A700-contrast': white,
     ),
     'gray': (
-        50: to-hsl(#24252c),
+        50: #24252c,
         '50-contrast': white,
-        100: to-hsl(#3b3d47),
+        100: #3b3d47,
         '100-contrast': white,
-        200: to-hsl(#545762),
+        200: #545762,
         '200-contrast': white,
-        300: to-hsl(#6c707a),
+        300: #6c707a,
         '300-contrast': white,
-        400: to-hsl(#9a9da2),
+        400: #9a9da2,
         '400-contrast': black,
-        500: to-hsl(#c3c4c7),
+        500: #c3c4c7,
         '500-contrast': black,
-        600: to-hsl(#d6d8dc),
+        600: #d6d8dc,
         '600-contrast': black,
-        700: to-hsl(#ebedf2),
+        700: #ebedf2,
         '700-contrast': black,
-        800: to-hsl(#f8f8fa),
+        800: #f8f8fa,
         '800-contrast': black,
-        900: to-hsl(#fcfcfd),
+        900: #fcfcfd,
         '900-contrast': black,
     ),
     'info': (
-        50: to-hsl(#f1c3ff),
+        50: #f1c3ff,
         '50-contrast': black,
-        100: to-hsl(#e89eff),
+        100: #e89eff,
         '100-contrast': black,
-        200: to-hsl(#dd71ff),
+        200: #dd71ff,
         '200-contrast': black,
-        300: to-hsl(#da64ff),
+        300: #da64ff,
         '300-contrast': black,
-        400: to-hsl(#bc34d3),
+        400: #bc34d3,
         '400-contrast': white,
-        500: to-hsl(#9c27b0),
+        500: #9c27b0,
         '500-contrast': white,
-        600: to-hsl(#8c16a0),
+        600: #8c16a0,
         '600-contrast': white,
-        700: to-hsl(#7f1192),
+        700: #7f1192,
         '700-contrast': white,
-        800: to-hsl(#6f0a80),
+        800: #6f0a80,
         '800-contrast': white,
-        900: to-hsl(#5c056b),
+        900: #5c056b,
         '900-contrast': white,
-        'A100': to-hsl(#8c16a0),
+        'A100': #8c16a0,
         'A100-contrast': white,
-        'A200': to-hsl(#7f1192),
+        'A200': #7f1192,
         'A200-contrast': white,
-        'A400': to-hsl(#6f0a80),
+        'A400': #6f0a80,
         'A400-contrast': white,
-        'A700': to-hsl(#5c056b),
+        'A700': #5c056b,
         'A700-contrast': white,
     ),
     'success': (
-        50: to-hsl(#edf3e7),
+        50: #edf3e7,
         '50-contrast': black,
-        100: to-hsl(#d2e2c3),
+        100: #d2e2c3,
         '100-contrast': black,
-        200: to-hsl(#b4cf9c),
+        200: #b4cf9c,
         '200-contrast': black,
-        300: to-hsl(#95bc74),
+        300: #95bc74,
         '300-contrast': black,
-        400: to-hsl(#7fad56),
+        400: #7fad56,
         '400-contrast': black,
-        500: to-hsl(#689f38),
+        500: #689f38,
         '500-contrast': black,
-        600: to-hsl(#5a912a),
+        600: #5a912a,
         '600-contrast': black,
-        700: to-hsl(#4e8222),
+        700: #4e8222,
         '700-contrast': white,
-        800: to-hsl(#3d7012),
+        800: #3d7012,
         '800-contrast': white,
-        900: to-hsl(#316109),
+        900: #316109,
         '900-contrast': white,
-        'A100': to-hsl(#5a912a),
+        'A100': #5a912a,
         'A100-contrast': black,
-        'A200': to-hsl(#4e8222),
+        'A200': #4e8222,
         'A200-contrast': white,
-        'A400': to-hsl(#3d7012),
+        'A400': #3d7012,
         'A400-contrast': white,
-        'A700': to-hsl(#316109),
+        'A700': #316109,
         'A700-contrast': white,
     ),
     'warn': (
-        50: to-hsl(#fed7b7),
+        50: #fed7b7,
         '50-contrast': black,
-        100: to-hsl(#ffc696),
+        100: #ffc696,
         '100-contrast': black,
-        200: to-hsl(#ffad67),
+        200: #ffad67,
         '200-contrast': black,
-        300: to-hsl(#fb8f32),
+        300: #fb8f32,
         '300-contrast': black,
-        400: to-hsl(#fa7b0e),
+        400: #fa7b0e,
         '400-contrast': black,
-        500: to-hsl(#f56b1d),
+        500: #f56b1d,
         '500-contrast': black,
-        600: to-hsl(#f05a2b),
+        600: #f05a2b,
         '600-contrast': black,
-        700: to-hsl(#ec4820),
+        700: #ec4820,
         '700-contrast': black,
-        800: to-hsl(#df370e),
+        800: #df370e,
         '800-contrast': black,
-        900: to-hsl(#d22900),
+        900: #d22900,
         '900-contrast': white,
-        'A100': to-hsl(#f05a2b),
+        'A100': #f05a2b,
         'A100-contrast': black,
-        'A200': to-hsl(#ec4820),
+        'A200': #ec4820,
         'A200-contrast': black,
-        'A400': to-hsl(#df370e),
+        'A400': #df370e,
         'A400-contrast': black,
-        'A700': to-hsl(#d22900),
+        'A700': #d22900,
         'A700-contrast': white,
     ),
     'error': (
-        50: to-hsl(#ffebf0),
+        50: #ffebf0,
         '50-contrast': black,
-        100: to-hsl(#ffb0b7),
+        100: #ffb0b7,
         '100-contrast': black,
-        200: to-hsl(#fc7f8a),
+        200: #fc7f8a,
         '200-contrast': black,
-        300: to-hsl(#ec5461),
+        300: #ec5461,
         '300-contrast': black,
-        400: to-hsl(#dd3544),
+        400: #dd3544,
         '400-contrast': black,
-        500: to-hsl(#cf1a2b),
+        500: #cf1a2b,
         '500-contrast': white,
-        600: to-hsl(#c31223),
+        600: #c31223,
         '600-contrast': white,
-        700: to-hsl(#b90415),
+        700: #b90415,
         '700-contrast': white,
-        800: to-hsl(#ae0111),
+        800: #ae0111,
         '800-contrast': white,
-        900: to-hsl(#9f000f),
+        900: #9f000f,
         '900-contrast': white,
-        'A100': to-hsl(#c31223),
+        'A100': #c31223,
         'A100-contrast': white,
-        'A200': to-hsl(#b90415),
+        'A200': #b90415,
         'A200-contrast': white,
-        'A400': to-hsl(#ae0111),
+        'A400': #ae0111,
         'A400-contrast': white,
-        'A700': to-hsl(#9f000f),
+        'A700': #9f000f,
         'A700-contrast': white,
     ),
     'surface': $surface-shades,
diff --git a/sass/color/presets/light/_indigo.scss b/sass/color/presets/light/_indigo.scss
index 850d892f..57a8017b 100644
--- a/sass/color/presets/light/_indigo.scss
+++ b/sass/color/presets/light/_indigo.scss
@@ -23,205 +23,205 @@ $surface-shades: shades('surface', #f8f8fa, $color-shades);
 /// @prop {Color} surface [#f8f8fa] - The surface color.
 $palette: (
     'primary': (
-        50: to-hsl(#c5cdff),
+        50: #c5cdff,
         '50-contrast': black,
-        100: to-hsl(#a3aff6),
+        100: #a3aff6,
         '100-contrast': black,
-        200: to-hsl(#8293f8),
+        200: #8293f8,
         '200-contrast': black,
-        300: to-hsl(#7385f4),
+        300: #7385f4,
         '300-contrast': black,
-        400: to-hsl(#5468d9),
+        400: #5468d9,
         '400-contrast': black,
-        500: to-hsl(#3f51b5),
+        500: #3f51b5,
         '500-contrast': white,
-        600: to-hsl(#39479c),
+        600: #39479c,
         '600-contrast': white,
-        700: to-hsl(#333d83),
+        700: #333d83,
         '700-contrast': white,
-        800: to-hsl(#2e3172),
+        800: #2e3172,
         '800-contrast': white,
-        900: to-hsl(#262851),
+        900: #262851,
         '900-contrast': white,
-        'A100': to-hsl(#39479c),
+        'A100': #39479c,
         'A100-contrast': white,
-        'A200': to-hsl(#333d83),
+        'A200': #333d83,
         'A200-contrast': white,
-        'A400': to-hsl(#2e3172),
+        'A400': #2e3172,
         'A400-contrast': white,
-        'A700': to-hsl(#262851),
+        'A700': #262851,
         'A700-contrast': white,
     ),
     'secondary': (
-        50: to-hsl(#c5cdff),
+        50: #c5cdff,
         '50-contrast': black,
-        100: to-hsl(#a3aff6),
+        100: #a3aff6,
         '100-contrast': black,
-        200: to-hsl(#8293f8),
+        200: #8293f8,
         '200-contrast': black,
-        300: to-hsl(#7385f4),
+        300: #7385f4,
         '300-contrast': black,
-        400: to-hsl(#5468d9),
+        400: #5468d9,
         '400-contrast': black,
-        500: to-hsl(#3f51b5),
+        500: #3f51b5,
         '500-contrast': white,
-        600: to-hsl(#39479c),
+        600: #39479c,
         '600-contrast': white,
-        700: to-hsl(#333d83),
+        700: #333d83,
         '700-contrast': white,
-        800: to-hsl(#2e3172),
+        800: #2e3172,
         '800-contrast': white,
-        900: to-hsl(#262851),
+        900: #262851,
         '900-contrast': white,
-        'A100': to-hsl(#39479c),
+        'A100': #39479c,
         'A100-contrast': white,
-        'A200': to-hsl(#333d83),
+        'A200': #333d83,
         'A200-contrast': white,
-        'A400': to-hsl(#2e3172),
+        'A400': #2e3172,
         'A400-contrast': white,
-        'A700': to-hsl(#262851),
+        'A700': #262851,
         'A700-contrast': white,
     ),
     'gray': (
-        50: to-hsl(#fcfcfd),
+        50: #fcfcfd,
         '50-contrast': black,
-        100: to-hsl(#f8f8fa),
+        100: #f8f8fa,
         '100-contrast': black,
-        200: to-hsl(#ebedf2),
+        200: #ebedf2,
         '200-contrast': black,
-        300: to-hsl(#d6d8dc),
+        300: #d6d8dc,
         '300-contrast': black,
-        400: to-hsl(#c3c4c7),
+        400: #c3c4c7,
         '400-contrast': black,
-        500: to-hsl(#9a9da2),
+        500: #9a9da2,
         '500-contrast': black,
-        600: to-hsl(#6c707a),
+        600: #6c707a,
         '600-contrast': white,
-        700: to-hsl(#545762),
+        700: #545762,
         '700-contrast': white,
-        800: to-hsl(#3b3d47),
+        800: #3b3d47,
         '800-contrast': white,
-        900: to-hsl(#24252c),
+        900: #24252c,
         '900-contrast': white,
     ),
     'info': (
-        50: to-hsl(#f1c3ff),
+        50: #f1c3ff,
         '50-contrast': black,
-        100: to-hsl(#e89eff),
+        100: #e89eff,
         '100-contrast': black,
-        200: to-hsl(#dd71ff),
+        200: #dd71ff,
         '200-contrast': black,
-        300: to-hsl(#da64ff),
+        300: #da64ff,
         '300-contrast': black,
-        400: to-hsl(#bc34d3),
+        400: #bc34d3,
         '400-contrast': white,
-        500: to-hsl(#9c27b0),
+        500: #9c27b0,
         '500-contrast': white,
-        600: to-hsl(#8c16a0),
+        600: #8c16a0,
         '600-contrast': white,
-        700: to-hsl(#7f1192),
+        700: #7f1192,
         '700-contrast': white,
-        800: to-hsl(#6f0a80),
+        800: #6f0a80,
         '800-contrast': white,
-        900: to-hsl(#5c056b),
+        900: #5c056b,
         '900-contrast': white,
-        'A100': to-hsl(#8c16a0),
+        'A100': #8c16a0,
         'A100-contrast': white,
-        'A200': to-hsl(#7f1192),
+        'A200': #7f1192,
         'A200-contrast': white,
-        'A400': to-hsl(#6f0a80),
+        'A400': #6f0a80,
         'A400-contrast': white,
-        'A700': to-hsl(#5c056b),
+        'A700': #5c056b,
         'A700-contrast': white,
     ),
     'success': (
-        50: to-hsl(#edf3e7),
+        50: #edf3e7,
         '50-contrast': black,
-        100: to-hsl(#d2e2c3),
+        100: #d2e2c3,
         '100-contrast': black,
-        200: to-hsl(#b4cf9c),
+        200: #b4cf9c,
         '200-contrast': black,
-        300: to-hsl(#95bc74),
+        300: #95bc74,
         '300-contrast': black,
-        400: to-hsl(#7fad56),
+        400: #7fad56,
         '400-contrast': black,
-        500: to-hsl(#689f38),
+        500: #689f38,
         '500-contrast': black,
-        600: to-hsl(#5a912a),
+        600: #5a912a,
         '600-contrast': black,
-        700: to-hsl(#4e8222),
+        700: #4e8222,
         '700-contrast': white,
-        800: to-hsl(#3d7012),
+        800: #3d7012,
         '800-contrast': white,
-        900: to-hsl(#316109),
+        900: #316109,
         '900-contrast': white,
-        'A100': to-hsl(#5a912a),
+        'A100': #5a912a,
         'A100-contrast': black,
-        'A200': to-hsl(#4e8222),
+        'A200': #4e8222,
         'A200-contrast': white,
-        'A400': to-hsl(#3d7012),
+        'A400': #3d7012,
         'A400-contrast': white,
-        'A700': to-hsl(#316109),
+        'A700': #316109,
         'A700-contrast': white,
     ),
     'warn': (
-        50: to-hsl(#fed7b7),
+        50: #fed7b7,
         '50-contrast': black,
-        100: to-hsl(#ffc696),
+        100: #ffc696,
         '100-contrast': black,
-        200: to-hsl(#ffad67),
+        200: #ffad67,
         '200-contrast': black,
-        300: to-hsl(#fb8f32),
+        300: #fb8f32,
         '300-contrast': black,
-        400: to-hsl(#fa7b0e),
+        400: #fa7b0e,
         '400-contrast': black,
-        500: to-hsl(#f56b1d),
+        500: #f56b1d,
         '500-contrast': black,
-        600: to-hsl(#f05a2b),
+        600: #f05a2b,
         '600-contrast': black,
-        700: to-hsl(#ec4820),
+        700: #ec4820,
         '700-contrast': black,
-        800: to-hsl(#df370e),
+        800: #df370e,
         '800-contrast': black,
-        900: to-hsl(#d22900),
+        900: #d22900,
         '900-contrast': white,
-        'A100': to-hsl(#f05a2b),
+        'A100': #f05a2b,
         'A100-contrast': black,
-        'A200': to-hsl(#ec4820),
+        'A200': #ec4820,
         'A200-contrast': black,
-        'A400': to-hsl(#df370e),
+        'A400': #df370e,
         'A400-contrast': black,
-        'A700': to-hsl(#d22900),
+        'A700': #d22900,
         'A700-contrast': white,
     ),
     'error': (
-        50: to-hsl(#ffebf0),
+        50: #ffebf0,
         '50-contrast': black,
-        100: to-hsl(#ffb0b7),
+        100: #ffb0b7,
         '100-contrast': black,
-        200: to-hsl(#fc7f8a),
+        200: #fc7f8a,
         '200-contrast': black,
-        300: to-hsl(#ec5461),
+        300: #ec5461,
         '300-contrast': black,
-        400: to-hsl(#dd3544),
+        400: #dd3544,
         '400-contrast': black,
-        500: to-hsl(#cf1a2b),
+        500: #cf1a2b,
         '500-contrast': white,
-        600: to-hsl(#c31223),
+        600: #c31223,
         '600-contrast': white,
-        700: to-hsl(#b90415),
+        700: #b90415,
         '700-contrast': white,
-        800: to-hsl(#ae0111),
+        800: #ae0111,
         '800-contrast': white,
-        900: to-hsl(#9f000f),
+        900: #9f000f,
         '900-contrast': white,
-        'A100': to-hsl(#c31223),
+        'A100': #c31223,
         'A100-contrast': white,
-        'A200': to-hsl(#b90415),
+        'A200': #b90415,
         'A200-contrast': white,
-        'A400': to-hsl(#ae0111),
+        'A400': #ae0111,
         'A400-contrast': white,
-        'A700': to-hsl(#9f000f),
+        'A700': #9f000f,
         'A700-contrast': white,
     ),
     'surface': $surface-shades,
diff --git a/sass/elevations/presets/_index.scss b/sass/elevations/presets/_index.scss
index cde757a4..01ff4d15 100644
--- a/sass/elevations/presets/_index.scss
+++ b/sass/elevations/presets/_index.scss
@@ -1,17 +1,17 @@
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
 /// @access private
-$color-1: rgba(0 0 0 / 26%) !default;
+$color-1: rgba(0 0 0 / 0.26) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
 /// @access private
-$color-2: rgba(0 0 0 / 12%) !default;
+$color-2: rgba(0 0 0 / 0.12) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
 /// @access private
-$color-3: rgba(0 0 0 / 8%) !default;
+$color-3: rgba(0 0 0 / 0.08) !default;
 
 @forward './material' as material-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);
 @forward './indigo' as indigo-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);
diff --git a/sass/elevations/presets/_indigo.scss b/sass/elevations/presets/_indigo.scss
index 2a9da528..54f215aa 100644
--- a/sass/elevations/presets/_indigo.scss
+++ b/sass/elevations/presets/_indigo.scss
@@ -9,32 +9,32 @@
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
 /// @access private
-$color-1: rgba(0 0 0 / 26%) !default;
+$color-1: rgba(0 0 0 / 0.26) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
 /// @access private
-$color-2: rgba(0 0 0 / 12%) !default;
+$color-2: rgba(0 0 0 / 0.12) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
 /// @access private
-$color-3: rgba(0 0 0 / 8%) !default;
+$color-3: rgba(0 0 0 / 0.08) !default;
 
 /// All elevation levels
 /// @access private
 $_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));
-$_2: box-shadow((0 3px 6px 0 rgba(0 0 0 / 30%)));
-$_3: box-shadow((0 3px 6px 0 rgba(36 37 44 / 20%)));
-$_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 10%)));
-$_5: box-shadow((0 0 12px 0 rgba(36 37 44 / 20%)));
-$_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 20%)));
-$_7: box-shadow((0 0 12px 0 rgba(0 0 0 / 30%)));
-$_8: box-shadow((0 2px 2px 0 rgba(36 37 44 / 20%)));
-$_9: box-shadow((0 2px 2px 0 rgba(0 0 0 / 30%)));
-$_10: box-shadow((0 2px 6px 0 rgba(36 37 44 / 40%)));
-$_11: box-shadow((0 2px 6px 0 rgba(0 0 0 / 40%)));
-$_12: box-shadow((0 0 16px 0 rgba(36 37 44 / 40%)));
+$_2: box-shadow((0 3px 6px 0 rgba(0 0 0 / 0.3)));
+$_3: box-shadow((0 3px 6px 0 rgba(36 37 44 / 0.2)));
+$_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 0.1)));
+$_5: box-shadow((0 0 12px 0 rgba(36 37 44 / 0.2)));
+$_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 0.2)));
+$_7: box-shadow((0 0 12px 0 rgba(0 0 0 / 0.3)));
+$_8: box-shadow((0 2px 2px 0 rgba(36 37 44 / 0.2)));
+$_9: box-shadow((0 2px 2px 0 rgba(0 0 0 / 0.3)));
+$_10: box-shadow((0 2px 6px 0 rgba(36 37 44 / 0.4)));
+$_11: box-shadow((0 2px 6px 0 rgba(0 0 0 / 0.4)));
+$_12: box-shadow((0 0 16px 0 rgba(36 37 44 / 0.4)));
 $_13: box-shadow((0 7px 8px -4px $color-1, 0 13px 19px 2px $color-2, 0 5px 24px 4px $color-3));
 $_14: box-shadow((0 7px 9px -4px $color-1, 0 14px 21px 2px $color-2, 0 5px 26px 4px $color-3));
 $_15: box-shadow((0 8px 9px -5px $color-1, 0 15px 22px 2px $color-2, 0 6px 28px 5px $color-3));
@@ -45,8 +45,8 @@ $_19: box-shadow((0 9px 12px -6px $color-1, 0 19px 29px 2px $color-2, 0 7px 36px
 $_20: box-shadow((0 10px 13px -6px $color-1, 0 20px 31px 3px $color-2, 0 8px 38px 7px $color-3));
 $_21: box-shadow((0 10px 13px -6px $color-1, 0 21px 33px 3px $color-2, 0 8px 40px 7px $color-3));
 $_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42px 7px $color-3));
-$_23: box-shadow((0 0 16px 0 rgba(0 0 0 / 30%)));
-$_24: box-shadow((0 0 16px 0 rgba(36 37 44 / 40%)));
+$_23: box-shadow((0 0 16px 0 rgba(0 0 0 / 0.3)));
+$_24: box-shadow((0 0 16px 0 rgba(36 37 44 / 0.4)));
 
 /// А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
 /// @type Map
diff --git a/sass/elevations/presets/_material.scss b/sass/elevations/presets/_material.scss
index 406d348b..0f420fd9 100644
--- a/sass/elevations/presets/_material.scss
+++ b/sass/elevations/presets/_material.scss
@@ -9,17 +9,17 @@
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
 /// @access private
-$color-1: rgba(0 0 0 / 26%) !default;
+$color-1: rgba(0 0 0 / 0.26) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
 /// @access private
-$color-2: rgba(0 0 0 / 12%) !default;
+$color-2: rgba(0 0 0 / 0.12) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
 /// @access private
-$color-3: rgba(0 0 0 / 8%) !default;
+$color-3: rgba(0 0 0 / 0.08) !default;
 
 /// All elevation levels
 /// @access private
diff --git a/scripts/buildJSON.mjs b/scripts/buildJSON.mjs
index 26a8dac3..ce4d1cb1 100644
--- a/scripts/buildJSON.mjs
+++ b/scripts/buildJSON.mjs
@@ -1,5 +1,5 @@
 import path from 'path';
-import sass from 'sass';
+import * as sass from 'sass';
 import {exec as _exec} from 'child_process';
 import {mkdirSync as makeDir} from 'fs';
 import {writeFile} from 'fs/promises';
diff --git a/scripts/getArgs.mjs b/scripts/getArgs.mjs
new file mode 100644
index 00000000..ba012099
--- /dev/null
+++ b/scripts/getArgs.mjs
@@ -0,0 +1,20 @@
+export default function getArgs() {
+    const args = {};
+    process.argv.slice(2, process.argv.length).forEach((arg) => {
+        // long arg
+        if (arg.slice(0, 2) === "--") {
+            const longArg = arg.split("=");
+            const longArgFlag = longArg[0].slice(2, longArg[0].length);
+            const longArgValue = longArg.length > 1 ? longArg[1] : true;
+            args[longArgFlag] = longArgValue;
+        }
+        // flags
+        else if (arg[0] === "-") {
+            const flags = arg.slice(1, arg.length).split("");
+            flags.forEach((flag) => {
+                args[flag] = true;
+            });
+        }
+    });
+    return args;
+}
diff --git a/scripts/previewPalette.mjs b/scripts/previewPalette.mjs
index 8320185c..82709b19 100644
--- a/scripts/previewPalette.mjs
+++ b/scripts/previewPalette.mjs
@@ -1,8 +1,28 @@
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-import sass from "sass";
+import path from 'path';
+import { mkdirSync as makeDir } from 'fs';
+import { fileURLToPath } from 'url';
+import { writeFile } from 'fs/promises';
+import * as sass from 'sass';
+import getArgs from './getArgs.mjs';
+import postcss from 'postcss';
 
-const { palette, variant } = yargs(hideBin(process.argv)).parse();
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const DEST_DIR = path.join.bind(null, path.resolve(__dirname, '../dist'));
+
+const {palette, variant, out} = getArgs();
+
+const stripComments = () => {
+    return {
+        postcssPlugin: 'postcss-strip-comments',
+        OnceExit(root) {
+            root.walkComments((node) => node.remove());
+        },
+    };
+};
+
+stripComments.postcss = true;
+
+const postProcessor = postcss([stripComments]);
 
 const styles = `
     @use 'sass:string';
@@ -11,12 +31,40 @@ const styles = `
     @use 'sass/color';
     @use 'sass/color/presets' as *;
 
-    @each $p, $c in map.remove(color.$IPalette, '_meta') {
+    $protoPalette: map.remove(color.$IPalette, '_meta');
+    $result: ();
+
+    @each $p, $c in $protoPalette {
+        $result: map.merge($result, ($p: ()));
+
         @each $v in $c {
-            @debug string.unquote('#{$p}-#{$v}:') color($${variant}-${palette}-palette, $p, $v);
-            @debug string.unquote('#{$p}-#{$v}-contrast:') contrast-color($${variant}-${palette}-palette, $p, $v);
+            $shade: color($${variant}-${palette}-palette, $p, $v);
+            $contrast: contrast-color($${variant}-${palette}-palette, $p, $v);
+            $result: map.merge($result, $p, ($v: $shade, #{$v}-contrast: $contrast));
+        }
+    }
+
+    @each $palette, $color in $result {
+        #{$palette} {
+            @each $shade, $value in $color {
+                #{$shade}: #{$value};
+            } 
         }
     }
 `;
 
-sass.compileString(styles, { loadPaths: ["./"] });
+const result = sass.compileString(styles, {loadPaths: ['./']});
+let cssStr = postProcessor.process(result.css).css;
+
+// Strip BOM if any
+if (cssStr.charCodeAt(0) === 0xfeff) {
+    cssStr = cssStr.substring(1);
+}
+
+console.log(cssStr);
+
+if (out) {
+  const outputFile = DEST_DIR(`${palette}-${variant}.css`);
+  makeDir(path.dirname(outputFile), { recursive: true });
+  await writeFile(outputFile, cssStr, 'utf-8');
+}
diff --git a/test/_color.spec.scss b/test/_color.spec.scss
index 2eaa9ae5..3c94bb57 100644
--- a/test/_color.spec.scss
+++ b/test/_color.spec.scss
@@ -107,13 +107,13 @@ $_palette: palette(
             @include assert-equal(type-of($value), color);
         }
 
-        @include it('should return a shade of type color w/ palette and color as only arguments') {
+        @include it('should return a shade of type color string w/ palette and color as only arguments') {
             $value: color($_palette, secondary);
 
             @include assert-equal($value, $_secondary);
         }
 
-        @include it('should return a shade of type color w/ all arguments passed') {
+        @include it('should return a shade of type string w/ all arguments passed') {
             $value: color($_palette, secondary, 500);
 
             @include assert-equal($value, $_secondary);
@@ -123,28 +123,28 @@ $_palette: palette(
             $value: color();
 
             @include assert-equal(type-of($value), string);
-            @include assert-equal($value, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+            @include assert-equal($value, hsl(from (var(--ig-primary-500)) h s l / 1));
         }
 
         @include it('should return a shade as CSS variable w/ color as only argument') {
             $value: color($color: secondary);
 
             @include assert-equal(type-of($value), string);
-            @include assert-equal($value, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+            @include assert-equal($value, hsl(from (var(--ig-secondary-500)) h s l / 1));
         }
 
         @include it('should return a shade of type string as CSS var w/ color and variant as only arguments') {
             $value: color($color: secondary, $variant: 'A400');
 
             @include assert-equal(type-of($value), string);
-            @include assert-equal($value, hsla(var(--ig-secondary-A400), var(--ig-secondary-a)));
+            @include assert-equal($value, hsl(from (var(--ig-secondary-A400)) h s l / 1));
         }
 
-        @include it('should return a contrast shade of type color w/ palette as only argument') {
+        @include it('should return a contrast shade of type string w/ palette as only argument') {
             $value: contrast-color($_palette, $opacity: .5);
+            $expected: color-mix(in oklch, var(--ig-primary-500-contrast) 50%, transparent);
 
-            @include assert-equal(type-of($value), color);
-            @include assert-equal(text-contrast(color($_palette, primary), $value), $value);
+            @include assert-equal($expected, $value);
         }
 
         @include it('should return a contrast shade of type string as CSS var w/ color and variant as only arguments') {
@@ -160,7 +160,7 @@ $_palette: palette(
             $shade: shade($color, $_primary, $variant, null);
             $expected: (
                 raw: hsl(204deg 100% 44.5%),
-                hsl: #{var(--ig-primary-h), calc(var(--ig-primary-s) * 1.26), calc(var(--ig-primary-l) * .89)}
+                hsl: #{hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89))}
             );
 
             @include assert-equal($shade, $expected);
@@ -173,7 +173,7 @@ $_palette: palette(
             $shade: shade($color, null, $variant, $surface);
             $expected: (
                 raw: hsl(0deg 0% 98%),
-                hsl: #{var(--ig-gray-h), var(--ig-gray-s), 98%}
+                hsl: #{hsl(from var(--ig-gray-500) h s 98%)}
             );
 
             // $surface is bright, return a darker shade of gray
@@ -184,7 +184,7 @@ $_palette: palette(
             $expected: #{var(--ig-#{$color}-h), var(--ig-#{$color}-s), 13%};
             $expected: (
                 raw: hsl(0deg 0% 13%),
-                hsl: #{var(--ig-gray-h), var(--ig-gray-s), 13%}
+                hsl: #{hsl(from var(--ig-gray-500) h s 13%)}
             );
 
             // $surface is dark, return a lighter shade of gray
@@ -205,10 +205,6 @@ $_palette: palette(
                         // Test if each contrast shade exits and is a color
                         @include assert-true(map.get($_palette, $color, #{$shade}-contrast));
                         @include assert-true(meta.type-of(map.get($_palette, $color, #{$shade}-contrast)), 'color');
-
-                        // Test if each hsl list shade exits and is a list
-                        @include assert-true(map.get($_palette, $color, #{$shade}-hsl));
-                        @include assert-true(meta.type-of(map.get($_palette, $color, #{$shade}-hsl)), 'list');
                     }
 
                     @if $shade == variant {
@@ -219,8 +215,6 @@ $_palette: palette(
         }
 
         @include it('should generate correct CSS variables for color and grayscale shades in a palette') {
-            $gray-500: color($_palette, gray, 500);
-
             @include assert() {
                 @include output($selector: false) {
                     @include palette($_palette);
@@ -228,24 +222,13 @@ $_palette: palette(
 
                 @include contains($selector: false) {
                     :root {
-                        --ig-primary-h: #{math.round(color.hue($_primary))};
-                        --ig-primary-s: #{math.round(color.saturation($_primary))};
-                        --ig-primary-l: #{math.round(color.lightness($_primary))};
-                        --ig-primary-a: #{math.round(color.alpha($_primary))};
-                        --ig-gray-h: #{math.round(color.hue($gray-500))};
-                        --ig-gray-s: #{math.round(color.saturation($gray-500))};
-                        --ig-gray-l: #{math.round(color.lightness($gray-500))};
-                        --ig-gray-a: #{math.round(color.alpha($gray-500))};
-                        --ig-primary-500:
-                            #{var(--ig-primary-h),
-                            calc(var(--ig-primary-s) * 1),
-                            calc(var(--ig-primary-l) * 1)};
-                        --ig-primary-500-contrast: #{contrast-color($_palette, primary, 500)};
-                        --ig-gray-500:
-                            #{var(--ig-gray-h),
-                            var(--ig-gray-s),
-                            #{math.round(color.lightness($gray-500))}};
-                        --ig-gray-500-contrast: #{contrast-color($_palette, gray, 500)};
+                        @each $color, $shades in map.remove($IPalette, '_meta') {
+                          @each $shade in $shades {
+                            $value: map.get($_palette, $color, $shade);
+
+                            --ig-#{$color}-#{$shade}: #{$value};
+                          }
+                        }
                     }
                 }
             }
@@ -291,13 +274,6 @@ $_palette: palette(
                           @each $shade in $shades {
                             $value: map.get($_palette, $color, $shade);
 
-                            @if $shade == 500 {
-                              --ig-#{$color}-h: #{list.nth($value, 1)};
-                              --ig-#{$color}-s: #{list.nth($value, 2)};
-                              --ig-#{$color}-l: #{list.nth($value, 3)};
-                              --ig-#{$color}-a: 1;
-                            }
-
                             --ig-#{$color}-#{$shade}: #{$value};
                           }
                         }
@@ -306,13 +282,11 @@ $_palette: palette(
             }
         }
 
-        @include it('should properly get the hex value from handmade palettes') {
+        @include it('should properly get the value from handmade palettes') {
             $_palette: mocks.$handmade-palette;
-            $_hex: color($_palette, primary, 800);
             $_ref: color(null, primary, 800);
 
-            @include assert-equal($_hex, #316ec9);
-            @include assert-equal($_ref, hsla(var(--ig-primary-800), var(--ig-primary-a)));
+            @include assert-equal($_ref, hsl(from var(--ig-primary-800) h s l / 1));
         }
 
         @include it('should convert a color to a list of HSL values') {
diff --git a/test/_elevations.spec.scss b/test/_elevations.spec.scss
index 3de6ef63..905a2e31 100644
--- a/test/_elevations.spec.scss
+++ b/test/_elevations.spec.scss
@@ -3,7 +3,11 @@
 @use 'sass:list';
 @use '../node_modules/sass-true/' as *;
 @use '../sass/elevations/' as *;
-@use '../sass/elevations/presets' as * with ($color-1: red, $color-2: green, $color-3: blue);
+@use '../sass/elevations/presets' as * with (
+    $color-1: red,
+    $color-2: green,
+    $color-3: blue
+);
 
 @include describe('Elevations') {
     @include it('should return an empty list for a list of non box-shadow values') {
@@ -39,9 +43,9 @@
 
     @include it('should produce CSS variables for a map of shadows') {
         $shadows: (
-            small: box-shadow(0 .125rem .25rem rgba(0 0 0 / 75%)),
-            medium: box-shadow(0 .25rem .5rem rgba(0 0 0 / 85%)),
-            large: box-shadow(0 .75rem 1rem rgba(0 0 0 / 95%)),
+            small: box-shadow(0 0.125rem 0.25rem rgba(0 0 0 / 0.75)),
+            medium: box-shadow(0 0.25rem 0.5rem rgba(0 0 0 / 0.85)),
+            large: box-shadow(0 0.75rem 1rem rgba(0 0 0 / 0.95)),
         );
 
         @include assert() {
diff --git a/test/_themes.spec.scss b/test/_themes.spec.scss
index dd5bad10..771432c1 100644
--- a/test/_themes.spec.scss
+++ b/test/_themes.spec.scss
@@ -103,8 +103,8 @@ $schema: (
             $theme: (
                 variant: 'material',
                 type: 'light',
-                background: hsla(var(--ig-primary-400), var(--ig-primary-a)),
-                hover-background: hsla(var(--ig-secondary-700), .26),
+                background: hsl(from var(--ig-primary-400) h s l / 1),
+                hover-background: hsl(from var(--ig-secondary-700) h s l / .26),
                 foreground: color-mix(in oklch, var(--ig-primary-400-contrast) 100%, transparent),
                 hover-foreground: color-mix(in oklch, var(--ig-secondary-700-contrast) 100%, transparent),
                 border-style: solid,
diff --git a/test/e2e/theme.scss b/test/e2e/theme.scss
index 7981abbe..ff7cfc10 100644
--- a/test/e2e/theme.scss
+++ b/test/e2e/theme.scss
@@ -17,5 +17,9 @@
 
 // Test handmade palette
 .handmade {
-    @include palette(mocks.$handmade-palette);
+    $handmade-palette: mocks.$handmade-palette;
+
+    @include palette($handmade-palette);
+
+    color: color($handmade-palette, 'primary', 300);
 }
diff --git a/test/styles/_mocks.scss b/test/styles/_mocks.scss
index f2a08f86..88cc3faf 100644
--- a/test/styles/_mocks.scss
+++ b/test/styles/_mocks.scss
@@ -2,242 +2,239 @@
 
 $handmade-palette: (
     'primary': (
-        50: to-hsl(#e6eff8),
+        50: #e6eff8,
         '50-contrast': black,
-        100: to-hsl(#bfd7f2),
+        100: #bfd7f2,
         '100-contrast': black,
-        200: to-hsl(#98bfec),
+        200: #98bfec,
         '200-contrast': black,
-        300: to-hsl(#85b5e9),
+        300: #85b5e9,
         '300-contrast': white,
-        400: to-hsl(#73a6e4),
+        400: #73a6e4,
         '400-contrast': white,
-        500: to-hsl(#6797de),
+        500: #6797de,
         '500-contrast': white,
-        600: to-hsl(#3681dd),
+        600: #3681dd,
         '600-contrast': white,
-        700: to-hsl(#357fda),
+        700: #357fda,
         '700-contrast': white,
-        800: to-hsl(#306dc8),
+        800: #306dc8,
         '800-contrast': white,
-        900: to-hsl(#284ea8),
+        900: #284ea8,
         '900-contrast': white,
-        'A100': to-hsl(#98bfec),
+        'A100': #98bfec,
         'A100-contrast': white,
-        'A200': to-hsl(#73a6e4),
+        'A200': #73a6e4,
         'A200-contrast': white,
-        'A400': to-hsl(#3681dd),
+        'A400': #3681dd,
         'A400-contrast': white,
-        'A700': to-hsl(#284ea8),
+        'A700': #284ea8,
         'A700-contrast': white,
     ),
     'secondary': (
-        50: to-hsl(#fef7e2),
+        50: #fef7e2,
         '50-contrast': black,
-        100: to-hsl(#fdeab7),
+        100: #fdeab7,
         '100-contrast': black,
-        200: to-hsl(#fbdd89),
+        200: #fbdd89,
         '200-contrast': black,
-        300: to-hsl(#fad15c),
+        300: #fad15c,
         '300-contrast': black,
-        400: to-hsl(#f9c63f),
+        400: #f9c63f,
         '400-contrast': black,
-        500: to-hsl(#f7bd32),
+        500: #f7bd32,
         '500-contrast': white,
-        600: to-hsl(#f6b02d),
+        600: #f6b02d,
         '600-contrast': white,
-        700: to-hsl(#f49e2a),
+        700: #f49e2a,
         '700-contrast': white,
-        800: to-hsl(#f38e28),
+        800: #f38e28,
         '800-contrast': white,
-        900: to-hsl(#f38e28),
+        900: #f38e28,
         '900-contrast': white,
-        'A100': to-hsl(#fbdd89),
+        'A100': #fbdd89,
         'A100-contrast': black,
-        'A200': to-hsl(#f9c63f),
+        'A200': #f9c63f,
         'A200-contrast': black,
-        'A400': to-hsl(#f6b02d),
+        'A400': #f6b02d,
         'A400-contrast': white,
-        'A700': to-hsl(#f38e28),
+        'A700': #f38e28,
         'A700-contrast': white,
     ),
     'tertiary': (
-        500: to-hsl(#f7bd32),
+        500: #f7bd32,
         '500-contrast': white,
     ),
     'gray': (
-        50: to-hsl(#fff),
+        50: #fff,
         '50-contrast': black,
-        100: to-hsl(#fafafa),
+        100: #fafafa,
         '100-contrast': black,
-        200: to-hsl(#f5f5f5),
+        200: #f5f5f5,
         '200-contrast': black,
-        300: to-hsl(#f0f0f0),
+        300: #f0f0f0,
         '300-contrast': black,
-        400: to-hsl(#dedede),
+        400: #dedede,
         '400-contrast': black,
-        500: to-hsl(#b3b2b2),
+        500: #b3b2b2,
         '500-contrast': black,
-        600: to-hsl(#979696),
+        600: #979696,
         '600-contrast': white,
-        700: to-hsl(#7b7a7a),
+        700: #7b7a7a,
         '700-contrast': white,
-        800: to-hsl(#404040),
+        800: #404040,
         '800-contrast': white,
-        900: to-hsl(#1a1a1a),
+        900: #1a1a1a,
         '900-contrast': white,
     ),
     'info': (
-        50: to-hsl(#fef7e2),
+        50: #fef7e2,
         '50-contrast': black,
-        100: to-hsl(#fdeab7),
+        100: #fdeab7,
         '100-contrast': black,
-        200: to-hsl(#fbdd89),
+        200: #fbdd89,
         '200-contrast': black,
-        300: to-hsl(#fad15c),
+        300: #fad15c,
         '300-contrast': black,
-        400: to-hsl(#f9c63f),
+        400: #f9c63f,
         '400-contrast': black,
-        500: to-hsl(#f7bd32),
+        500: #f7bd32,
         '500-contrast': white,
-        600: to-hsl(#f6b02d),
+        600: #f6b02d,
         '600-contrast': white,
-        700: to-hsl(#f49e2a),
+        700: #f49e2a,
         '700-contrast': white,
-        800: to-hsl(#f38e28),
+        800: #f38e28,
         '800-contrast': white,
-        900: to-hsl(#f38e28),
+        900: #f38e28,
         '900-contrast': white,
-        'A100': to-hsl(#fbdd89),
+        'A100': #fbdd89,
         'A100-contrast': black,
-        'A200': to-hsl(#f9c63f),
+        'A200': #f9c63f,
         'A200-contrast': black,
-        'A400': to-hsl(#f6b02d),
+        'A400': #f6b02d,
         'A400-contrast': white,
-        'A700': to-hsl(#f38e28),
+        'A700': #f38e28,
         'A700-contrast': white,
     ),
     'success': (
-        50: to-hsl(#fef7e2),
+        50: #fef7e2,
         '50-contrast': black,
-        100: to-hsl(#fdeab7),
+        100: #fdeab7,
         '100-contrast': black,
-        200: to-hsl(#fbdd89),
+        200: #fbdd89,
         '200-contrast': black,
-        300: to-hsl(#fad15c),
+        300: #fad15c,
         '300-contrast': black,
-        400: to-hsl(#f9c63f),
+        400: #f9c63f,
         '400-contrast': black,
-        500: to-hsl(#f7bd32),
+        500: #f7bd32,
         '500-contrast': white,
-        600: to-hsl(#f6b02d),
+        600: #f6b02d,
         '600-contrast': white,
-        700: to-hsl(#f49e2a),
+        700: #f49e2a,
         '700-contrast': white,
-        800: to-hsl(#f38e28),
+        800: #f38e28,
         '800-contrast': white,
-        900: to-hsl(#f38e28),
+        900: #f38e28,
         '900-contrast': white,
-        'A100': to-hsl(#fbdd89),
+        'A100': #fbdd89,
         'A100-contrast': black,
-        'A200': to-hsl(#f9c63f),
+        'A200': #f9c63f,
         'A200-contrast': black,
-        'A400': to-hsl(#f6b02d),
+        'A400': #f6b02d,
         'A400-contrast': white,
-        'A700': to-hsl(#f38e28),
+        'A700': #f38e28,
         'A700-contrast': white,
     ),
     'warn': (
-        50: to-hsl(#fef7e2),
+        50: #fef7e2,
         '50-contrast': black,
-        100: to-hsl(#fdeab7),
+        100: #fdeab7,
         '100-contrast': black,
-        200: to-hsl(#fbdd89),
+        200: #fbdd89,
         '200-contrast': black,
-        300: to-hsl(#fad15c),
+        300: #fad15c,
         '300-contrast': black,
-        400: to-hsl(#f9c63f),
+        400: #f9c63f,
         '400-contrast': black,
-        500: to-hsl(#f7bd32),
+        500: #f7bd32,
         '500-contrast': white,
-        600: to-hsl(#f6b02d),
+        600: #f6b02d,
         '600-contrast': white,
-        700: to-hsl(#f49e2a),
+        700: #f49e2a,
         '700-contrast': white,
-        800: to-hsl(#f38e28),
+        800: #f38e28,
         '800-contrast': white,
-        900: to-hsl(#f38e28),
+        900: #f38e28,
         '900-contrast': white,
-        'A100': to-hsl(#fbdd89),
+        'A100': #fbdd89,
         'A100-contrast': black,
-        'A200': to-hsl(#f9c63f),
+        'A200': #f9c63f,
         'A200-contrast': black,
-        'A400': to-hsl(#f6b02d),
+        'A400': #f6b02d,
         'A400-contrast': white,
-        'A700': to-hsl(#f38e28),
+        'A700': #f38e28,
         'A700-contrast': white,
     ),
     'error': (
-        50: to-hsl(#fef7e2),
+        50: #fef7e2,
         '50-contrast': black,
-        100: to-hsl(#fdeab7),
+        100: #fdeab7,
         '100-contrast': black,
-        200: to-hsl(#fbdd89),
+        200: #fbdd89,
         '200-contrast': black,
-        300: to-hsl(#fad15c),
+        300: #fad15c,
         '300-contrast': black,
-        400: to-hsl(#f9c63f),
+        400: #f9c63f,
         '400-contrast': black,
-        500: to-hsl(#f7bd32),
+        500: #f7bd32,
         '500-contrast': white,
-        600: to-hsl(#f6b02d),
+        600: #f6b02d,
         '600-contrast': white,
-        700: to-hsl(#f49e2a),
+        700: #f49e2a,
         '700-contrast': white,
-        800: to-hsl(#f38e28),
+        800: #f38e28,
         '800-contrast': white,
-        900: to-hsl(#f38e28),
+        900: #f38e28,
         '900-contrast': white,
-        'A100': to-hsl(#fbdd89),
+        'A100': #fbdd89,
         'A100-contrast': black,
-        'A200': to-hsl(#f9c63f),
+        'A200': #f9c63f,
         'A200-contrast': black,
-        'A400': to-hsl(#f6b02d),
+        'A400': #f6b02d,
         'A400-contrast': white,
-        'A700': to-hsl(#f38e28),
+        'A700': #f38e28,
         'A700-contrast': white,
     ),
     'surface': (
-        50: to-hsl(#fef7e2),
+        50: #fef7e2,
         '50-contrast': black,
-        100: to-hsl(#fdeab7),
+        100: #fdeab7,
         '100-contrast': black,
-        200: to-hsl(#fbdd89),
+        200: #fbdd89,
         '200-contrast': black,
-        300: to-hsl(#fad15c),
+        300: #fad15c,
         '300-contrast': black,
-        400: to-hsl(#f9c63f),
+        400: #f9c63f,
         '400-contrast': black,
-        500: to-hsl(#f7bd32),
+        500: #f7bd32,
         '500-contrast': white,
-        600: to-hsl(#f6b02d),
+        600: #f6b02d,
         '600-contrast': white,
-        700: to-hsl(#f49e2a),
+        700: #f49e2a,
         '700-contrast': white,
-        800: to-hsl(#f38e28),
+        800: #f38e28,
         '800-contrast': white,
-        900: to-hsl(#f38e28),
+        900: #f38e28,
         '900-contrast': white,
-        'A100': to-hsl(#fbdd89),
+        'A100': #fbdd89,
         'A100-contrast': black,
-        'A200': to-hsl(#f9c63f),
+        'A200': #f9c63f,
         'A200-contrast': black,
-        'A400': to-hsl(#f6b02d),
+        'A400': #f6b02d,
         'A400-contrast': white,
-        'A700': to-hsl(#f38e28),
+        'A700': #f38e28,
         'A700-contrast': white,
-    ),
-    _meta: (
-      'variant': 'handmade',
-    ),
+    )
 );