From 6f22ef1fa98001f4f4eb24954414b06a0726f5c9 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Tue, 28 May 2024 08:54:25 +0100
Subject: [PATCH 1/5] Updated status tokens for theme next to match latest
 design

---
 .changeset/silver-spiders-draw.md             |  5 +++++
 .../theme/css/characteristics/status-next.css | 20 ++++++++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/silver-spiders-draw.md

diff --git a/.changeset/silver-spiders-draw.md b/.changeset/silver-spiders-draw.md
new file mode 100644
index 00000000000..ea68d844b07
--- /dev/null
+++ b/.changeset/silver-spiders-draw.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/theme": patch
+---
+
+Updated status tokens for theme next to match latest design
diff --git a/packages/theme/css/characteristics/status-next.css b/packages/theme/css/characteristics/status-next.css
index db973a7c5ee..08962c5385e 100644
--- a/packages/theme/css/characteristics/status-next.css
+++ b/packages/theme/css/characteristics/status-next.css
@@ -1,18 +1,24 @@
 .salt-theme.salt-theme-next {
-  --salt-status-info-foreground: var(--salt-palette-accent);
-  --salt-status-success-foreground: var(--salt-palette-positive);
-  --salt-status-warning-foreground: var(--salt-palette-warning);
-  --salt-status-error-foreground: var(--salt-palette-negative);
-  --salt-status-static-foreground: var(--salt-palette-foreground-secondary); /* TBD */
+  --salt-status-static-foreground: var(--salt-palette-foreground-secondary);
   --salt-status-negative-foreground: var(--salt-palette-negative);
   --salt-status-positive-foreground: var(--salt-palette-positive);
 
-  --salt-status-info-borderColor: var(--salt-palette-accent);
+  --salt-status-info-foreground-decorative: var(--salt-palette-info);
+  --salt-status-success-foreground-decorative: var(--salt-palette-positive);
+  --salt-status-warning-foreground-decorative: var(--salt-palette-warning);
+  --salt-status-error-foreground-decorative: var(--salt-palette-negative);
+
+  --salt-status-info-foreground-informative: var(--salt-palette-info-strong);
+  --salt-status-error-foreground-informative: var(--salt-palette-error-strong);
+  --salt-status-warning-foreground-informative: var(--salt-palette-warning-strong);
+  --salt-status-success-foreground-informative: var(--salt-palette-success-strong);
+
+  --salt-status-info-borderColor: var(--salt-palette-info);
   --salt-status-success-borderColor: var(--salt-palette-positive);
   --salt-status-warning-borderColor: var(--salt-palette-warning);
   --salt-status-error-borderColor: var(--salt-palette-negative);
 
-  --salt-status-info-background: var(--salt-palette-accent-weakest);
+  --salt-status-info-background: var(--salt-palette-info-weak);
   --salt-status-success-background: var(--salt-palette-positive-weak);
   --salt-status-warning-background: var(--salt-palette-warning-weak);
   --salt-status-error-background: var(--salt-palette-negative-weak);

From ad5783998aa1f1ad695cabb1fbec034db01fa1b4 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Tue, 28 May 2024 09:47:10 +0100
Subject: [PATCH 2/5] Adds missing palette strong token

---
 packages/theme/css/palette/info-next.css     | 2 ++
 packages/theme/css/palette/negative-next.css | 2 ++
 packages/theme/css/palette/positive-next.css | 2 ++
 packages/theme/css/palette/warning-next.css  | 2 ++
 4 files changed, 8 insertions(+)

diff --git a/packages/theme/css/palette/info-next.css b/packages/theme/css/palette/info-next.css
index 2f80556ace6..08e2cab8577 100644
--- a/packages/theme/css/palette/info-next.css
+++ b/packages/theme/css/palette/info-next.css
@@ -1,8 +1,10 @@
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-info: var(--salt-color-blue-500);
+  --salt-palette-info-strong: var(--salt-color-blue-600);
   --salt-palette-info-weak: var(--salt-color-blue-100);
 }
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-info: var(--salt-color-blue-500);
+  --salt-palette-info-strong: var(--salt-color-blue-400);
   --salt-palette-info-weak: var(--salt-color-blue-900);
 }
diff --git a/packages/theme/css/palette/negative-next.css b/packages/theme/css/palette/negative-next.css
index ee5b110cfa5..9a4db1744dc 100644
--- a/packages/theme/css/palette/negative-next.css
+++ b/packages/theme/css/palette/negative-next.css
@@ -1,8 +1,10 @@
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-negative: var(--salt-color-red-500);
+  --salt-palette-negative-strong: var(--salt-color-red-600);
   --salt-palette-negative-weak: var(--salt-color-red-100);
 }
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-negative: var(--salt-color-red-500);
+  --salt-palette-negative-strong: var(--salt-color-red-400);
   --salt-palette-negative-weak: var(--salt-color-red-900);
 }
diff --git a/packages/theme/css/palette/positive-next.css b/packages/theme/css/palette/positive-next.css
index 86f627cc222..b6339169495 100644
--- a/packages/theme/css/palette/positive-next.css
+++ b/packages/theme/css/palette/positive-next.css
@@ -1,8 +1,10 @@
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-positive: var(--salt-color-green-500);
+  --salt-palette-positive-strong: var(--salt-color-green-600);
   --salt-palette-positive-weak: var(--salt-color-green-100);
 }
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-positive: var(--salt-color-green-500);
+  --salt-palette-positive-strong: var(--salt-color-green-400);
   --salt-palette-positive-weak: var(--salt-color-green-900);
 }
diff --git a/packages/theme/css/palette/warning-next.css b/packages/theme/css/palette/warning-next.css
index f8ed3b3183d..13243615825 100644
--- a/packages/theme/css/palette/warning-next.css
+++ b/packages/theme/css/palette/warning-next.css
@@ -1,8 +1,10 @@
 .salt-theme.salt-theme-next[data-mode="light"] {
   --salt-palette-warning: var(--salt-color-orange-500);
+  --salt-palette-warning-strong: var(--salt-color-orange-600);
   --salt-palette-warning-weak: var(--salt-color-orange-100);
 }
 .salt-theme.salt-theme-next[data-mode="dark"] {
   --salt-palette-warning: var(--salt-color-orange-500);
+  --salt-palette-warning-strong: var(--salt-color-orange-400);
   --salt-palette-warning-weak: var(--salt-color-orange-900);
 }

From 3ca656dff7cfd0c5f4d837b527e6dd3d37398c69 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Tue, 28 May 2024 10:55:33 +0100
Subject: [PATCH 3/5] Adds text status color to kitchen sink

---
 .../kitchen-sink/kitchen-sink.stories.tsx     | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx
index 652ea62fd8d..127c8828c35 100644
--- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx
+++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx
@@ -152,8 +152,12 @@ export const Example1 = () => {
           <Display1>Masthead</Display1>
           <H1>H1 Header</H1>
           <H2>H2 Subheader</H2>
-          <Text variant="primary">Primary body copy</Text>
-          <Text variant="secondary">Secondary body copy</Text>
+          <Text color="primary">Primary body copy</Text>
+          <Text color="secondary">Secondary body copy</Text>
+          <Text color="error">Error body copy</Text>
+          <Text color="warning">Warning body copy</Text>
+          <Text color="success">Success body copy</Text>
+          <Text color="info">Info body copy</Text>
           <Link>Default link text</Link>
           <Text>
             <code>Code example 123</code>
@@ -163,8 +167,12 @@ export const Example1 = () => {
           <Display1>Masthead</Display1>
           <H1>H1 Header</H1>
           <H2>H2 Subheader</H2>
-          <Text variant="primary">Primary body copy</Text>
-          <Text variant="secondary">Secondary body copy</Text>
+          <Text color="primary">Primary body copy</Text>
+          <Text color="secondary">Secondary body copy</Text>
+          <Text color="error">Error body copy</Text>
+          <Text color="warning">Warning body copy</Text>
+          <Text color="success">Success body copy</Text>
+          <Text color="info">Info body copy</Text>
           <Link>Default link text</Link>
           <Text>
             <code>Code example 123</code>
@@ -175,8 +183,12 @@ export const Example1 = () => {
           <H1>H1 Header</H1>
           <Card variant="secondary">
             <H2>H2 Subheader</H2>
-            <Text variant="primary">Primary body copy</Text>
-            <Text variant="secondary">Secondary body copy</Text>
+            <Text color="primary">Primary body copy</Text>
+            <Text color="secondary">Secondary body copy</Text>
+            <Text color="error">Error body copy</Text>
+            <Text color="warning">Warning body copy</Text>
+            <Text color="success">Success body copy</Text>
+            <Text color="info">Info body copy</Text>
           </Card>
           <Link>Default link text</Link>
           <Text>
@@ -188,8 +200,12 @@ export const Example1 = () => {
           <H1>H1 Header</H1>
           <Card variant="primary">
             <H2>H2 Subheader</H2>
-            <Text variant="primary">Primary body copy</Text>
-            <Text variant="secondary">Secondary body copy</Text>
+            <Text color="primary">Primary body copy</Text>
+            <Text color="secondary">Secondary body copy</Text>
+            <Text color="error">Error body copy</Text>
+            <Text color="warning">Warning body copy</Text>
+            <Text color="success">Success body copy</Text>
+            <Text color="info">Info body copy</Text>
           </Card>
           <Link>Default link text</Link>
           <Text>

From 628d2f1d4bf02f4458b23568b849df214aa33b97 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Wed, 29 May 2024 10:14:09 +0100
Subject: [PATCH 4/5] Adds theme next snapshot

---
 packages/core/stories/text/text.qa.stories.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/core/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx
index d1b879eeb57..38e3f5fe099 100644
--- a/packages/core/stories/text/text.qa.stories.tsx
+++ b/packages/core/stories/text/text.qa.stories.tsx
@@ -91,7 +91,20 @@ export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
 );
 
 AllVariantsGrid.parameters = {
-  chromatic: { disableSnapshot: false },
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disabled",
+      },
+      themeNext: {
+        themeNext: "enabled",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
 };
 
 export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (

From a60e3797a80086f1ea12be9ee98da0e1a0140848 Mon Sep 17 00:00:00 2001
From: origami-z <5257855+origami-z@users.noreply.github.com>
Date: Wed, 29 May 2024 14:38:05 +0100
Subject: [PATCH 5/5] Update QA container use provider next

---
 docs/components/QAContainer.tsx               | 46 +++++++++++++------
 .../theme/css/characteristics/status-next.css |  4 +-
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/docs/components/QAContainer.tsx b/docs/components/QAContainer.tsx
index 2cffd0af89d..03698ed105a 100644
--- a/docs/components/QAContainer.tsx
+++ b/docs/components/QAContainer.tsx
@@ -1,4 +1,10 @@
-import { makePrefixer, Mode, SaltProvider } from "@salt-ds/core";
+import {
+  makePrefixer,
+  Mode,
+  SaltProvider,
+  UNSTABLE_SaltProviderNext,
+  useTheme,
+} from "@salt-ds/core";
 import { clsx } from "clsx";
 import {
   Children,
@@ -52,15 +58,22 @@ const DensityBlock = ({
   children,
 }: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
   mode: Mode;
-}) => (
-  <BackgroundBlock background={mode === "light" ? "white" : undefined}>
-    {DensityValues.map((d, i) => (
-      <SaltProvider mode={mode} density={d} key={i}>
-        <div className="background-item-wrapper">{children}</div>
-      </SaltProvider>
-    ))}
-  </BackgroundBlock>
-);
+}) => {
+  const { themeNext } = useTheme();
+  const ChosenSaltProvider = themeNext
+    ? UNSTABLE_SaltProviderNext
+    : SaltProvider;
+
+  return (
+    <BackgroundBlock background={mode === "light" ? "white" : undefined}>
+      {DensityValues.map((d, i) => (
+        <ChosenSaltProvider mode={mode} density={d} key={i}>
+          <div className="background-item-wrapper">{children}</div>
+        </ChosenSaltProvider>
+      ))}
+    </BackgroundBlock>
+  );
+};
 
 export const QAContainer = ({
   children,
@@ -85,6 +98,11 @@ export const QAContainer = ({
     "--qaContainer-item-width": itemWidthAuto ? "auto" : undefined,
   } as CSSProperties;
 
+  const { themeNext } = useTheme();
+  const ChosenSaltProvider = themeNext
+    ? UNSTABLE_SaltProviderNext
+    : SaltProvider;
+
   return (
     <div
       {...htmlAttributes}
@@ -109,20 +127,20 @@ export const QAContainer = ({
       ) : (
         DensityValues.map((d, i) => (
           <Fragment key={i}>
-            <SaltProvider
+            <ChosenSaltProvider
               mode="light"
               density={d}
               enableStyleInjection={enableStyleInjection}
             >
               <BackgroundBlock background="white">{children}</BackgroundBlock>
-            </SaltProvider>
-            <SaltProvider
+            </ChosenSaltProvider>
+            <ChosenSaltProvider
               mode="dark"
               density={d}
               enableStyleInjection={enableStyleInjection}
             >
               <BackgroundBlock>{children}</BackgroundBlock>
-            </SaltProvider>
+            </ChosenSaltProvider>
           </Fragment>
         ))
       )}
diff --git a/packages/theme/css/characteristics/status-next.css b/packages/theme/css/characteristics/status-next.css
index 08962c5385e..31710238e4f 100644
--- a/packages/theme/css/characteristics/status-next.css
+++ b/packages/theme/css/characteristics/status-next.css
@@ -9,9 +9,9 @@
   --salt-status-error-foreground-decorative: var(--salt-palette-negative);
 
   --salt-status-info-foreground-informative: var(--salt-palette-info-strong);
-  --salt-status-error-foreground-informative: var(--salt-palette-error-strong);
+  --salt-status-success-foreground-informative: var(--salt-palette-positive-strong);
   --salt-status-warning-foreground-informative: var(--salt-palette-warning-strong);
-  --salt-status-success-foreground-informative: var(--salt-palette-success-strong);
+  --salt-status-error-foreground-informative: var(--salt-palette-negative-strong);
 
   --salt-status-info-borderColor: var(--salt-palette-info);
   --salt-status-success-borderColor: var(--salt-palette-positive);