From 1461bcfd871a55407c904b58a9bd114c47d08ba0 Mon Sep 17 00:00:00 2001
From: Josh Wooding <12938082+joshwooding@users.noreply.github.com>
Date: Wed, 30 Oct 2024 08:32:39 +0000
Subject: [PATCH] Fix target characteristic tokens being incorrect in Salt Next

---
 .changeset/hot-tomatoes-hide.md                  |  5 +++++
 .../file-drop-zone/file-drop-zone.qa.stories.tsx | 16 ++++++++++++----
 .../theme/css/characteristics/target-next.css    |  4 ++--
 3 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/hot-tomatoes-hide.md

diff --git a/.changeset/hot-tomatoes-hide.md b/.changeset/hot-tomatoes-hide.md
new file mode 100644
index 00000000000..19da9b9bf4a
--- /dev/null
+++ b/.changeset/hot-tomatoes-hide.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/theme": patch
+---
+
+Fixed target characteristic tokens being incorrect in Salt Next.
diff --git a/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx b/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx
index b63d7a46703..bd4dfc483db 100644
--- a/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx
+++ b/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx
@@ -4,22 +4,30 @@ import {
   FileDropZoneTrigger,
 } from "@salt-ds/core";
 import type { Meta, StoryFn } from "@storybook/react";
-import { AllRenderer } from "docs/components";
+import { QAContainer } from "docs/components";
 
 export default {
   title: "Core/File Drop Zone/File Drop Zone QA",
   component: FileDropZone,
 } as Meta<typeof FileDropZone>;
 
-export const AllExamplesGrid: StoryFn<typeof FileDropZone> = () => {
+export const AllExamplesGrid: StoryFn = () => {
   return (
-    <AllRenderer>
+    <QAContainer cols={2} itemPadding={4}>
       <FileDropZone onDrop={() => console.log("files accepted")}>
         <FileDropZoneIcon />
         <strong>Drop files here or</strong>
         <FileDropZoneTrigger />
       </FileDropZone>
-    </AllRenderer>
+      <FileDropZone
+        className="saltFileDropZone-active"
+        onDrop={() => console.log("files accepted")}
+      >
+        <FileDropZoneIcon />
+        <strong>Drop files here or</strong>
+        <FileDropZoneTrigger />
+      </FileDropZone>
+    </QAContainer>
   );
 };
 
diff --git a/packages/theme/css/characteristics/target-next.css b/packages/theme/css/characteristics/target-next.css
index 29155a8e696..dfcf1d36649 100644
--- a/packages/theme/css/characteristics/target-next.css
+++ b/packages/theme/css/characteristics/target-next.css
@@ -1,4 +1,4 @@
 .salt-theme.salt-theme-next {
-  --salt-target-background-hover: var(--salt-palette-accent);
-  --salt-target-borderColor-hover: var(--salt-palette-accent-weakest);
+  --salt-target-background-hover: var(--salt-palette-accent-weakest);
+  --salt-target-borderColor-hover: var(--salt-palette-accent);
 }