Update status tokens for theme next to match latest design (#3472)

jpmorganchase · May 29, 2024 · 353e917 · 353e917
1 parent ed6d35e
commit 353e917
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 30 deletions.
diff --git a/.changeset/silver-spiders-draw.md 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/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/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> = (

diff --git 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>

diff --git 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-success-foreground-informative: var(--salt-palette-positive-strong);
+  --salt-status-warning-foreground-informative: var(--salt-palette-warning-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);
   --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);

diff --git 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
@@ -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
@@ -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
@@ -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);
 }