From 11bd36764d4967f440e2d2fe52b78960380332bb Mon Sep 17 00:00:00 2001
From: "manuel.carrera" <manuel.carrera@workday.com>
Date: Thu, 19 Sep 2024 12:28:01 -0600
Subject: [PATCH] fix: Allow inheriting colors on system icon

---
 modules/react/icon/lib/SystemIcon.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/modules/react/icon/lib/SystemIcon.tsx b/modules/react/icon/lib/SystemIcon.tsx
index f722fba6b3..e274fed753 100644
--- a/modules/react/icon/lib/SystemIcon.tsx
+++ b/modules/react/icon/lib/SystemIcon.tsx
@@ -151,10 +151,10 @@ export const systemIconStencil = createStencil({
      */
     color: '',
     accentColor: '',
-    backgroundColor: 'transparent',
+    backgroundColor: '',
   },
   base: ({accentColor, backgroundColor, color}) => ({
-    [backgroundColor]: 'transparent',
+    [backgroundColor]: cssVar(backgroundColor, 'transparent'),
     '& .wd-icon-fill': {
       fill: cssVar(color, base.licorice200),
     },
@@ -162,7 +162,7 @@ export const systemIconStencil = createStencil({
       fill: cssVar(accentColor, cssVar(color, base.licorice200)),
     },
     '& .wd-icon-background': {
-      fill: backgroundColor,
+      fill: cssVar(backgroundColor, 'transparent'),
     },
     // will be removed eventually
     '&:where(:hover, .hover) .wd-icon-fill': {
@@ -181,7 +181,10 @@ export const systemIconStencil = createStencil({
       ),
     },
     '&:where(:hover, .hover) .wd-icon-background': {
-      fill: cssVar(deprecatedSystemIconVars.backgroundHover, backgroundColor),
+      fill: cssVar(
+        deprecatedSystemIconVars.backgroundHover,
+        cssVar(backgroundColor, 'transparent')
+      ),
     },
   }),
 });