Merge pull request #2942 from mi6/2910-ic-badge-dark-mode-info-varian…

…t-icons-are-showing-as-the-wrong-colour 2910 ic badge dark mode info variant icons are showing as the wrong colour
mi6 · Jan 2, 2025 · 0756606 · 0756606
2 parents d6cfe91 + 0e65b33
commit 0756606
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 2 deletions.
diff --git a/...eact/cypress-image-diff-screenshots/baseline/IcBadge.cy.tsx-theme-dark-icon.png b/...eact/cypress-image-diff-screenshots/baseline/IcBadge.cy.tsx-theme-dark-icon.png
diff --git a/packages/react/src/component-tests/IcBadge/IcBadge.cy.tsx b/packages/react/src/component-tests/IcBadge/IcBadge.cy.tsx
@@ -12,6 +12,7 @@ import {
   PositionNear,
   PositionInline,
   ThemeDark,
+  ThemeDarkIcon,
 } from "./IcBadgeTestData";
 import { setThresholdBasedOnEnv } from "../../../cypress/utils/helpers";
 
@@ -196,6 +197,18 @@ describe("IcBadge visual regression and a11y tests", () => {
       testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
     });
   });
+
+  it("should render badge with dark theme and icon", () => {
+    mount(<ThemeDarkIcon />);
+
+    cy.checkHydrated(IC_BADGE_SELECTOR);
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "theme-dark-icon",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
+    });
+  });
 });
 
 describe.skip("IcBadge visual regression tests in high contrast mode", () => {

diff --git a/packages/react/src/component-tests/IcBadge/IcBadgeTestData.tsx b/packages/react/src/component-tests/IcBadge/IcBadgeTestData.tsx
@@ -381,3 +381,76 @@ export const ThemeDark = (): ReactElement => {
     </div>
   );
 };
+
+export const ThemeDarkIcon = (): ReactElement => {
+  return (
+    <div style={{ backgroundColor: "black", padding: "16px" }}>
+      <IcButton
+        variant="secondary"
+        theme="dark"
+        monochrome
+        style={{ marginRight: "16px" }}
+      >
+        <IcBadge type="icon" slot="badge" theme="dark">
+          <ReusableSlottedIcon />
+        </IcBadge>
+        Neutral
+      </IcButton>
+      <IcButton
+        variant="secondary"
+        theme="dark"
+        monochrome
+        style={{ marginRight: "16px" }}
+      >
+        <IcBadge type="icon" slot="badge" theme="dark" variant="light">
+          <ReusableSlottedIcon />
+        </IcBadge>
+        Light
+      </IcButton>
+      <IcButton
+        variant="secondary"
+        theme="dark"
+        monochrome
+        style={{ marginRight: "16px" }}
+      >
+        <IcBadge type="icon" slot="badge" theme="dark" variant="error">
+          <ReusableSlottedIcon />
+        </IcBadge>
+        Error
+      </IcButton>
+      <IcButton
+        variant="secondary"
+        theme="dark"
+        monochrome
+        style={{ marginRight: "16px" }}
+      >
+        <IcBadge type="icon" slot="badge" theme="dark" variant="success">
+          <ReusableSlottedIcon />
+        </IcBadge>
+        Success
+      </IcButton>
+      <IcButton
+        variant="secondary"
+        theme="dark"
+        monochrome
+        style={{ marginRight: "16px" }}
+      >
+        <IcBadge type="icon" slot="badge" theme="dark" variant="warning">
+          <ReusableSlottedIcon />
+        </IcBadge>
+        Warning
+      </IcButton>
+      <IcButton
+        variant="secondary"
+        theme="dark"
+        monochrome
+        style={{ marginRight: "16px" }}
+      >
+        <IcBadge type="icon" slot="badge" theme="dark" variant="info">
+          <ReusableSlottedIcon />
+        </IcBadge>
+        Info
+      </IcButton>
+    </div>
+  );
+};
diff --git a/packages/web-components/src/global/color-mode.css b/packages/web-components/src/global/color-mode.css
@@ -1693,7 +1693,7 @@ ic-theme,
 
     /* Badge */
     --ic-badge-text: var(--ic-color-text-inverse);
-    --ic-badge-icon: var(--ic-color-icon-inverted);
+    --ic-badge-icon: var(--ic-color-icon-neutral);
     --ic-badge-warning-text: var(--ic-color-text-inverse);
     --ic-badge-warning-icon: var(--ic-color-icon-neutral);
     --ic-badge-text-monochrome: var(--ic-color-text-primary);
@@ -3073,7 +3073,7 @@ ic-theme,
 
   /* Badge */
   --ic-badge-text: var(--ic-color-text-inverse);
-  --ic-badge-icon: var(--ic-color-icon-inverted);
+  --ic-badge-icon: var(--ic-color-icon-neutral);
   --ic-badge-warning-text: var(--ic-color-text-inverse);
   --ic-badge-warning-icon: var(--ic-color-icon-neutral);
   --ic-badge-text-monochrome: var(--ic-color-text-primary);