feat(palettes): switch to relative CSS colors in the palettes (#329)

.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,

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
+```

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

@@ -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.

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);
             }
         }

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,