From d2a6f7ae8377af9a523d4691badfe47860d72240 Mon Sep 17 00:00:00 2001
From: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
Date: Mon, 27 Jan 2025 20:54:03 +0000
Subject: [PATCH] Fix tertiary card disabled styles

---
 .changeset/lovely-bats-kick.md                |  5 ++++
 .../interactable-card/InteractableCard.css    | 10 +++++++-
 .../interactable-card.qa.stories.tsx          | 24 +++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lovely-bats-kick.md

diff --git a/.changeset/lovely-bats-kick.md b/.changeset/lovely-bats-kick.md
new file mode 100644
index 00000000000..1b11996b454
--- /dev/null
+++ b/.changeset/lovely-bats-kick.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed secondary and tertiary InteractableCards having incorrect disabled styling.
diff --git a/packages/core/src/interactable-card/InteractableCard.css b/packages/core/src/interactable-card/InteractableCard.css
index 66c1992fb9b..c475da87989 100644
--- a/packages/core/src/interactable-card/InteractableCard.css
+++ b/packages/core/src/interactable-card/InteractableCard.css
@@ -126,10 +126,18 @@
 .saltInteractableCard-secondary.saltInteractableCard-disabled,
 .saltInteractableCard-secondary.saltInteractableCard-disabled:focus,
 .saltInteractableCard-secondary.saltInteractableCard-disabled:active {
-  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background));
+  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background-disabled));
   border-color: var(--salt-container-secondary-borderColor-disabled);
 }
 
+/* Styles applied to InteractableCard tertiary variant if `disabled={true}` */
+.saltInteractableCard-tertiary.saltInteractableCard-disabled,
+.saltInteractableCard-tertiary.saltInteractableCard-disabled:focus,
+.saltInteractableCard-tertiary.saltInteractableCard-disabled:active {
+  background: var(--salt-container-tertiary-background-disabled);
+  border-color: var(--salt-container-tertiary-borderColor-disabled);
+}
+
 /* Styles applied to InteractableCard if `selected={true}`and `disabled={true}` */
 .saltInteractableCard-selected.saltInteractableCard-disabled,
 .saltInteractableCard-selected.saltInteractableCard-disabled:focus,
diff --git a/packages/core/stories/interactable-card/interactable-card.qa.stories.tsx b/packages/core/stories/interactable-card/interactable-card.qa.stories.tsx
index 149c9dce127..3e3bea7d4c6 100644
--- a/packages/core/stories/interactable-card/interactable-card.qa.stories.tsx
+++ b/packages/core/stories/interactable-card/interactable-card.qa.stories.tsx
@@ -55,6 +55,18 @@ export const AllExamples: StoryFn<QAContainerProps & { className?: string }> = (
           <Text>Content</Text>
         </InteractableCard>
       </InteractableCardGroup>
+      <InteractableCard disabled>
+        <H1>Disabled primary</H1>
+        <Text>Content</Text>
+      </InteractableCard>
+      <InteractableCard disabled variant="secondary">
+        <H1>Disabled secondary</H1>
+        <Text>Content</Text>
+      </InteractableCard>
+      <InteractableCard disabled variant="tertiary">
+        <H1>Disabled tertiary</H1>
+        <Text>Content</Text>
+      </InteractableCard>
     </QAContainer>
   );
 };
@@ -117,6 +129,18 @@ export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
         <Text>Content</Text>
       </InteractableCard>
     </InteractableCardGroup>
+    <InteractableCard disabled>
+      <H1>Disabled primary</H1>
+      <Text>Content</Text>
+    </InteractableCard>
+    <InteractableCard disabled variant="secondary">
+      <H1>Disabled secondary</H1>
+      <Text>Content</Text>
+    </InteractableCard>
+    <InteractableCard disabled variant="tertiary">
+      <H1>Disabled tertiary</H1>
+      <Text>Content</Text>
+    </InteractableCard>
   </QAContainerNoStyleInjection>
 );