refactor(*): use CSS relative colors (#137)

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 to the (`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
+```

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"
   }
 }

sass/color/_functions.scss

@@ -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: hsl($h $s $l);
+        }
+
+        @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: hsl($h $s $l);
+        }
 
         @return (raw: $raw, hsl: $hsl);
     }
@@ -184,7 +192,7 @@ $_enhanced-accessibility: false;
     $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/ if($opacity, $opacity, $a));
     $_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);
 
     @if not($palette) or not($meta) {

sass/color/_mixins.scss

@@ -36,10 +36,11 @@
 
 // Generates CSS variables for a shade color
 // @access private
-@mixin _shade($color, $shade, $value, $contrast) {
+@mixin _shade($color, $shade, $value, $contrast, $variant) {
     $_shade: meta.type-of($shade) == 'string';
     $_hsl: if($_shade, string.index($shade, 'hsl'), false);
     $_contrast: if($_shade, string.index($shade, 'contrast'), false);
+    $_variant: if($_shade, string.index($shade, 'variant'), false);
     $_color: '' + $color;
 
     @if $_hsl {
@@ -48,7 +49,7 @@
         --ig-#{$_color}-#{$variant}: #{$value};
     }
 
-    @if not($_hsl) and not($_contrast) {
+    @if not($_hsl) and not($_contrast) and not($_variant) {
         --ig-#{$_color}-#{$shade}: #{$value};
     }
 
@@ -68,12 +69,13 @@
 /// @require {function} is-root
 @mixin palette($palette, $contrast: true) {
     $scope: if(is-root(), ':root', '&');
+    $variant: map.get($palette, '_meta', 'variant');
 
     #{$scope} {
         @each $color, $shades in map.remove($palette, '_meta') {
             @each $shade, $value in $shades {
                 @include _base($color, $shade, $value);
-                @include _shade($color, $shade, $value, $contrast);
+                @include _shade($color, $shade, $value, $contrast, $variant);
             }
         }
     }

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,