From 7a25caa7c0b237185a6cd80d101e20e01c3a1f22 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 20 May 2026 09:59:45 +0300
Subject: [PATCH 1/3] feat(color): add seed variables for palette colors

---
 packages/theming/sass/color/_functions.scss | 12 ++++++-
 packages/theming/tests/_color.spec.scss     | 39 +++++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/packages/theming/sass/color/_functions.scss b/packages/theming/sass/color/_functions.scss
index a995f57d..c479de5a 100644
--- a/packages/theming/sass/color/_functions.scss
+++ b/packages/theming/sass/color/_functions.scss
@@ -67,6 +67,7 @@ $_enhanced-accessibility: false;
 ) {
     $color-shades: types.$IColorShades;
     $gray-shades: types.$IGrayShades;
+    $gray: if($gray, $gray, if(luminance($surface) > 0.5, #000, #fff));
     $primary-palette: shades('primary', $primary, $color-shades);
     $secondary-palette: shades('secondary', $secondary, $color-shades);
     $surface-palette: shades('surface', $surface, $color-shades);
@@ -74,7 +75,7 @@ $_enhanced-accessibility: false;
     $info-palette: if($info, shades('info', $info, $color-shades), ());
     $success-palette: if($success, shades('success', $success, $color-shades), ());
     $warn-palette: if($warn, shades('warn', $warn, $color-shades), ());
-    $error-palette: if($success, shades('error', $error, $color-shades), ());
+    $error-palette: if($error, shades('error', $error, $color-shades), ());
 
     @return (
         'primary': $primary-palette,
@@ -126,6 +127,15 @@ $_enhanced-accessibility: false;
         );
     }
 
+    @if $color {
+        $result: map.merge(
+            $result,
+            (
+                'seed': #{$color},
+            )
+        );
+    }
+
     @return $result;
 }
 
diff --git a/packages/theming/tests/_color.spec.scss b/packages/theming/tests/_color.spec.scss
index 12b525fb..125d30f4 100644
--- a/packages/theming/tests/_color.spec.scss
+++ b/packages/theming/tests/_color.spec.scss
@@ -17,6 +17,18 @@ $_success: green;
 $_info: blue;
 $_warn: orange;
 $_error: red;
+$_gray: #333;
+$_palette-with-gray: palette(
+    $primary: $_primary,
+    $secondary: $_secondary,
+    $surface: $_surface,
+    $success: $_success,
+    $info: $_info,
+    $warn: $_warn,
+    $error: $_error,
+    $gray: $_gray,
+    $variant: 'material',
+);
 $_palette: palette(
     $primary: $_primary,
     $secondary: $_secondary,
@@ -368,5 +380,32 @@ $_palette: palette(
                 }
             }
         }
+
+        @include describe('seed color variables') {
+            @include it('stores the user-provided color; derives gray seed from surface when gray is omitted') {
+                @include assert-equal(map.get($_palette, '_meta', 'seeds', 'primary'), $_primary);
+
+                // gray omitted — derived from surface luminance (#fff → #000)
+                @include assert-equal(map.get($_palette, '_meta', 'seeds', 'gray'), #000);
+
+                // gray provided — stored as-is
+                @include assert-equal(map.get($_palette-with-gray, '_meta', 'seeds', 'gray'), $_gray);
+            }
+
+            @include it('emits seed CSS variables for all palette colors including derived gray') {
+                @include assert() {
+                    @include output($selector: false) {
+                        @include palette($_palette-with-gray);
+                    }
+
+                    @include contains($selector: false) {
+                        :root {
+                            --ig-primary-seed: #{$_primary};
+                            --ig-gray-seed: #{$_gray};
+                        }
+                    }
+                }
+            }
+        }
     }
 }

From 9aa329351f1344409b9034a004e462612a82bd2f Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 20 May 2026 10:26:15 +0300
Subject: [PATCH 2/3] test(color): fix seed variables test

---
 packages/theming/tests/_color.spec.scss | 27 +++++++++++++++----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/theming/tests/_color.spec.scss b/packages/theming/tests/_color.spec.scss
index 125d30f4..7d3d0b5d 100644
--- a/packages/theming/tests/_color.spec.scss
+++ b/packages/theming/tests/_color.spec.scss
@@ -382,17 +382,8 @@ $_palette: palette(
         }
 
         @include describe('seed color variables') {
-            @include it('stores the user-provided color; derives gray seed from surface when gray is omitted') {
-                @include assert-equal(map.get($_palette, '_meta', 'seeds', 'primary'), $_primary);
-
-                // gray omitted — derived from surface luminance (#fff → #000)
-                @include assert-equal(map.get($_palette, '_meta', 'seeds', 'gray'), #000);
-
-                // gray provided — stored as-is
-                @include assert-equal(map.get($_palette-with-gray, '_meta', 'seeds', 'gray'), $_gray);
-            }
-
-            @include it('emits seed CSS variables for all palette colors including derived gray') {
+            @include it('emits --ig-{name}-seed CSS variables; uses provided gray or derives from surface') {
+                // palette with explicitly provided gray
                 @include assert() {
                     @include output($selector: false) {
                         @include palette($_palette-with-gray);
@@ -405,6 +396,20 @@ $_palette: palette(
                         }
                     }
                 }
+
+                // palette with gray omitted — derived from surface (#fff → #000)
+                @include assert() {
+                    @include output($selector: false) {
+                        @include palette($_palette);
+                    }
+
+                    @include contains($selector: false) {
+                        :root {
+                            --ig-primary-seed: #{$_primary};
+                            --ig-gray-seed: #000;
+                        }
+                    }
+                }
             }
         }
     }

From a28f7842ccffc142aba847379d963d7cb32e1053 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 21 May 2026 09:35:40 +0300
Subject: [PATCH 3/3] feat(colors): update seed variables logic

---
 packages/theming/sass/color/_functions.scss | 17 ++++++-----------
 packages/theming/sass/color/_types.scss     |  2 +-
 packages/theming/tests/styles/_mocks.scss   | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/theming/sass/color/_functions.scss b/packages/theming/sass/color/_functions.scss
index c479de5a..2629106d 100644
--- a/packages/theming/sass/color/_functions.scss
+++ b/packages/theming/sass/color/_functions.scss
@@ -67,7 +67,6 @@ $_enhanced-accessibility: false;
 ) {
     $color-shades: types.$IColorShades;
     $gray-shades: types.$IGrayShades;
-    $gray: if($gray, $gray, if(luminance($surface) > 0.5, #000, #fff));
     $primary-palette: shades('primary', $primary, $color-shades);
     $secondary-palette: shades('secondary', $secondary, $color-shades);
     $surface-palette: shades('surface', $surface, $color-shades);
@@ -127,15 +126,6 @@ $_enhanced-accessibility: false;
         );
     }
 
-    @if $color {
-        $result: map.merge(
-            $result,
-            (
-                'seed': #{$color},
-            )
-        );
-    }
-
     @return $result;
 }
 
@@ -157,6 +147,11 @@ $_enhanced-accessibility: false;
     @if #{$name} == 'gray' {
         $lum: luminance($surface);
         $color: if($color, $color, if($lum > 0.5, #000, #fff));
+
+        @if #{$shade} == 'seed' {
+            @return (raw: $color, hsl: $color);
+        }
+
         $lmap: map.get(multipliers.$grayscale, 'l');
         $len: list.length($lmap);
         $i: list.index(map.keys($lmap), #{$shade});
@@ -177,7 +172,7 @@ $_enhanced-accessibility: false;
         $hsl: null;
         $raw: null;
 
-        @if #{$shade} == '500' {
+        @if #{$shade} == '500' or #{$shade} == 'seed' {
             $hsl: $color;
             $raw: $color;
         } @else {
diff --git a/packages/theming/sass/color/_types.scss b/packages/theming/sass/color/_types.scss
index cb47d7b8..14c672da 100644
--- a/packages/theming/sass/color/_types.scss
+++ b/packages/theming/sass/color/_types.scss
@@ -9,7 +9,7 @@
 /// A list consisting of all generated gray shades
 /// @type Map
 /// @access public
-$IGrayShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900');
+$IGrayShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'seed');
 
 /// A list consisting of all generated shades for palette colors
 /// @type Map
diff --git a/packages/theming/tests/styles/_mocks.scss b/packages/theming/tests/styles/_mocks.scss
index 23a4d690..40c4074b 100644
--- a/packages/theming/tests/styles/_mocks.scss
+++ b/packages/theming/tests/styles/_mocks.scss
@@ -30,6 +30,8 @@ $handmade-palette: (
         'A400-contrast': white,
         'A700': #284ea8,
         'A700-contrast': white,
+        'seed': #6797de,
+        'seed-contrast': white,
     ),
     'secondary': (
         '50': #fef7e2,
@@ -60,6 +62,8 @@ $handmade-palette: (
         'A400-contrast': white,
         'A700': #f38e28,
         'A700-contrast': white,
+        'seed': #f7bd32,
+        'seed-contrast': white,
     ),
     'tertiary': (
         '500': #f7bd32,
@@ -86,6 +90,8 @@ $handmade-palette: (
         '800-contrast': white,
         '900': #1a1a1a,
         '900-contrast': white,
+        'seed': #b3b2b2,
+        'seed-contrast': black,
     ),
     'info': (
         '50': #fef7e2,
@@ -116,6 +122,8 @@ $handmade-palette: (
         'A400-contrast': white,
         'A700': #f38e28,
         'A700-contrast': white,
+        'seed': #f7bd32,
+        'seed-contrast': white,
     ),
     'success': (
         '50': #fef7e2,
@@ -146,6 +154,8 @@ $handmade-palette: (
         'A400-contrast': white,
         'A700': #f38e28,
         'A700-contrast': white,
+        'seed': #f7bd32,
+        'seed-contrast': white,
     ),
     'warn': (
         '50': #fef7e2,
@@ -176,6 +186,8 @@ $handmade-palette: (
         'A400-contrast': white,
         'A700': #f38e28,
         'A700-contrast': white,
+        'seed': #f7bd32,
+        'seed-contrast': white,
     ),
     'error': (
         '50': #fef7e2,
@@ -206,6 +218,8 @@ $handmade-palette: (
         'A400-contrast': white,
         'A700': #f38e28,
         'A700-contrast': white,
+        'seed': #f7bd32,
+        'seed-contrast': white,
     ),
     'surface': (
         '50': #fef7e2,
@@ -236,5 +250,7 @@ $handmade-palette: (
         'A400-contrast': white,
         'A700': #f38e28,
         'A700-contrast': white,
+        'seed': #f7bd32,
+        'seed-contrast': white,
     )
 );