From 301c1444b6f10096e8764f0639df899af694fdc7 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Mon, 13 Feb 2023 17:25:59 +0200
Subject: [PATCH] fix(palette): don't scope palette variables to * (#68)

* fix(palette): don't scope palette variables to *

* refactor(palettes): remove commented out mixins
---
 sass/color/_mixins.scss | 70 ++++++++++++++++++-----------------------
 test/_color.spec.scss   |  3 --
 2 files changed, 31 insertions(+), 42 deletions(-)

diff --git a/sass/color/_mixins.scss b/sass/color/_mixins.scss
index 0351fbe2..9d6e63da 100644
--- a/sass/color/_mixins.scss
+++ b/sass/color/_mixins.scss
@@ -5,51 +5,35 @@
 @use 'sass:string';
 @use '../utils/meta' as *;
 
-// Generates CSS variables for the base colors.
+// Generates CSS variables for a base color
 // @access private
-@mixin _base-colors($palette) {
-    $scope: if(is-root(), ':root', '&');
-
-    #{$scope} {
-        @each $color, $shades in map.remove($palette, '_meta') {
-            @each $shade, $value in $shades {
-                $_shade: $shade == 500;
-                $_valid: meta.type-of($value == 'color');
-
-                @if $_shade and $_valid {
-                    --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)};
-                }
-            }
-        }
+@mixin _base($color, $shade, $value) {
+    $_shade: $shade == 500;
+    $_valid: meta.type-of($value == 'color');
+
+    @if $_shade and $_valid {
+        --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)};
     }
 }
 
-// Generates shade CSS variables from the base colors.
+// Generates CSS variables for a shade color
 // @access private
-@mixin _shade-colors($palette, $contrast: true) {
-    $scope: if(is-root(), '*', '&');
-
-    #{$scope} {
-        @each $color, $shades in map.remove($palette, '_meta') {
-            @each $shade, $value in $shades {
-                $_shade: meta.type-of($shade) == 'string';
-                $_hsl: if($_shade, string.index($shade, 'hsl'), false);
-                $_contrast: if($_shade, string.index($shade, 'contrast'), false);
+@mixin _shade($color, $shade, $value, $contrast) {
+    $_shade: meta.type-of($shade) == 'string';
+    $_hsl: if($_shade, string.index($shade, 'hsl'), false);
+    $_contrast: if($_shade, string.index($shade, 'contrast'), false);
 
-                @if $_hsl {
-                    $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
+    @if $_hsl {
+        $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
 
-                    --ig-#{$color}-#{$variant}: #{$value};
-                }
+        --ig-#{$color}-#{$variant}: #{$value};
+    }
 
-                @if $_contrast and $contrast {
-                    --ig-#{$color}-#{$shade}: #{$value};
-                }
-            }
-        }
+    @if $_contrast and $contrast {
+        --ig-#{$color}-#{$shade}: #{$value};
     }
 }
 
@@ -63,6 +47,14 @@
 ///    @include palette($palette);
 /// @require {function} is-root
 @mixin palette($palette, $contrast: true) {
-    @include _base-colors($palette);
-    @include _shade-colors($palette, $contrast);
+    $scope: if(is-root(), ':root', '&');
+
+    #{$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);
+            }
+        }
+    }
 }
diff --git a/test/_color.spec.scss b/test/_color.spec.scss
index f7cde221..6b5ce456 100644
--- a/test/_color.spec.scss
+++ b/test/_color.spec.scss
@@ -234,9 +234,6 @@ $_palette: palette(
                         --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),