fix: Allow inherit background color on system icon (#2932)

Fixes: #2930

[category:Components]

Co-authored-by: manuel.carrera <manuel.carrera@workday.com>

modules/react/icon/lib/SystemIcon.tsx

@@ -151,18 +151,18 @@ 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),
     },
     '& .wd-icon-accent, & .wd-icon-accent2': {
       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')
+      ),
     },
   }),
 });