Add status bold tokens

jpmorganchase · Jun 21, 2024 · f731417 · f731417
1 parent 5b3894c
commit f731417
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 14 deletions.
diff --git a/.changeset/afraid-jobs-do.md b/.changeset/afraid-jobs-do.md
@@ -0,0 +1,12 @@
+---
+"@salt-ds/theme": minor
+---
+
+Added status bold background tokens
+
+```
+--salt-status-info-bold-background
+--salt-status-error-bold-background
+--salt-status-warning-bold-background
+--salt-status-success-bold-background
+```
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -22,7 +22,7 @@ import { withResponsiveWrapper } from "docs/decorators/withResponsiveWrapper";
 import { WithTextSpacingWrapper } from "docs/decorators/withTextSpacingWrapper";
 import { withScaffold } from "docs/decorators/withScaffold";
 import { withDateMock } from "docs/decorators/withDateMock";
-import { SaltProvider } from "@salt-ds/core";
+import { SaltProvider, UNSTABLE_SaltProviderNext } from "@salt-ds/core";
 import { DocsContainer } from "@storybook/addon-docs";
 import { initialize, mswLoader } from "msw-storybook-addon";
 
@@ -147,20 +147,29 @@ export const parameters: Parameters = {
       children,
       context,
       ...rest
-    }: ComponentProps<typeof DocsContainer>) => (
-      <DocsContainer context={context} {...rest}>
-        <SaltProvider
-          /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
-          mode={context.store.globals.globals?.mode}
-          enableStyleInjection={
+    }: ComponentProps<typeof DocsContainer>) => {
+      const ChosenProvider =
+        /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
+        context.store.globals.globals?.themeNext === "enable"
+          ? UNSTABLE_SaltProviderNext
+          : SaltProvider;
+      return (
+        <DocsContainer context={context} {...rest}>
+          <ChosenProvider
             /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
-            context.store.globals.globals?.styleInjection === "enable"
-          }
-        >
-          {children}
-        </SaltProvider>
-      </DocsContainer>
-    ),
+            mode={context.store.globals.globals?.mode}
+            enableStyleInjection={
+              /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
+              context.store.globals.globals?.styleInjection === "enable"
+            }
+            /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
+            accent={context.store.globals.globals?.accent}
+          >
+            {children}
+          </ChosenProvider>
+        </DocsContainer>
+      );
+    },
   },
   // disables snapshotting on a global level
   chromatic: { disableSnapshot: true },

diff --git a/packages/theme/css/characteristics/status-next.css b/packages/theme/css/characteristics/status-next.css
@@ -23,6 +23,11 @@
   --salt-status-warning-background: var(--salt-palette-warning-weak);
   --salt-status-error-background: var(--salt-palette-negative-weak);
 
+  --salt-status-info-bold-background: var(--salt-palette-info);
+  --salt-status-error-bold-background: var(--salt-palette-negative);
+  --salt-status-warning-bold-background: var(--salt-palette-warning);
+  --salt-status-success-bold-background: var(--salt-palette-positive);
+
   --salt-status-success-background-selected: var(--salt-palette-positive-weak);
   --salt-status-warning-background-selected: var(--salt-palette-warning-weak);
   --salt-status-error-background-selected: var(--salt-palette-negative-weak);

diff --git a/packages/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css
@@ -23,6 +23,11 @@
   --salt-status-warning-background: var(--salt-palette-warning-background);
   --salt-status-success-background: var(--salt-palette-success-background);
 
+  --salt-status-info-bold-background: var(--salt-palette-info-bold-background);
+  --salt-status-error-bold-background: var(--salt-palette-error-bold-background);
+  --salt-status-warning-bold-background: var(--salt-palette-warning-bold-background);
+  --salt-status-success-bold-background: var(--salt-palette-success-bold-background);
+
   --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
   --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
   --salt-status-success-background-selected: var(--salt-palette-success-background-selected);

diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css
@@ -1,5 +1,6 @@
 .salt-theme[data-mode="light"] {
   --salt-palette-error-background: var(--salt-color-red-10);
+  --salt-palette-error-bold-background: var(--salt-color-red-500);
   --salt-palette-error-background-selected: var(--salt-color-red-20);
   --salt-palette-error-border: var(--salt-color-red-500);
   --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
@@ -8,6 +9,7 @@
 
 .salt-theme[data-mode="dark"] {
   --salt-palette-error-background: var(--salt-color-red-900);
+  --salt-palette-error-bold-background: var(--salt-color-red-500);
   --salt-palette-error-background-selected: var(--salt-color-red-900);
   --salt-palette-error-border: var(--salt-color-red-400);
   --salt-palette-error-foreground-decorative: var(--salt-color-red-400);

diff --git a/packages/theme/css/palette/info.css b/packages/theme/css/palette/info.css
@@ -1,12 +1,14 @@
 .salt-theme[data-mode="light"] {
   --salt-palette-info-background: var(--salt-color-blue-10);
+  --salt-palette-info-bold-background: var(--salt-color-blue-500);
   --salt-palette-info-border: var(--salt-color-blue-500);
   --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
   --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
 }
 
 .salt-theme[data-mode="dark"] {
   --salt-palette-info-background: var(--salt-color-blue-900);
+  --salt-palette-info-bold-background: var(--salt-color-blue-500);
   --salt-palette-info-border: var(--salt-color-blue-400);
   --salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
   --salt-palette-info-foreground-informative: var(--salt-color-blue-200);

diff --git a/packages/theme/css/palette/success.css b/packages/theme/css/palette/success.css
@@ -1,5 +1,6 @@
 .salt-theme[data-mode="light"] {
   --salt-palette-success-background: var(--salt-color-green-10);
+  --salt-palette-success-bold-background: var(--salt-color-green-500);
   --salt-palette-success-background-selected: var(--salt-color-green-20);
   --salt-palette-success-border: var(--salt-color-green-500);
   --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
@@ -8,6 +9,7 @@
 
 .salt-theme[data-mode="dark"] {
   --salt-palette-success-background: var(--salt-color-green-900);
+  --salt-palette-success-bold-background: var(--salt-color-green-500);
   --salt-palette-success-background-selected: var(--salt-color-green-900);
   --salt-palette-success-border: var(--salt-color-green-400);
   --salt-palette-success-foreground-decorative: var(--salt-color-green-400);

diff --git a/packages/theme/css/palette/warning.css b/packages/theme/css/palette/warning.css
@@ -1,5 +1,6 @@
 .salt-theme[data-mode="light"] {
   --salt-palette-warning-background: var(--salt-color-orange-10);
+  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
   --salt-palette-warning-background-selected: var(--salt-color-orange-20);
   --salt-palette-warning-border: var(--salt-color-orange-700);
   --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
@@ -8,6 +9,7 @@
 
 .salt-theme[data-mode="dark"] {
   --salt-palette-warning-background: var(--salt-color-orange-900);
+  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
   --salt-palette-warning-background-selected: var(--salt-color-orange-900);
   --salt-palette-warning-border: var(--salt-color-orange-500);
   --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);

diff --git a/packages/theme/stories/characteristics/status.mdx b/packages/theme/stories/characteristics/status.mdx
@@ -0,0 +1,42 @@
+import { Meta } from "@storybook/blocks";
+import { ColorContainer } from "docs/components/ColorContainer";
+import { ColorItem, ColorPalette } from "@storybook/blocks";
+
+<Meta title="Theme/Characteristics/Status" />
+
+# Status
+
+## Bold Background
+
+<ColorContainer className="paletteContainer">
+  <ColorPalette>
+    <ColorItem
+      title="Info"
+      subtitle={`--salt-status-info-bold-background`}
+      colors={{
+        [`--salt-status-info-bold-background`]: `var(--salt-status-info-bold-background)`,
+      }}
+    />
+    <ColorItem
+      title="Error"
+      subtitle={`--salt-status-error-bold-background`}
+      colors={{
+        [`--salt-status-error-bold-background`]: `var(--salt-status-error-bold-background)`,
+      }}
+    />
+    <ColorItem
+      title="Warning"
+      subtitle={`--salt-status-warning-bold-background`}
+      colors={{
+        [`--salt-status-warning-bold-background`]: `var(--salt-status-warning-bold-background)`,
+      }}
+    />
+    <ColorItem
+      title="Success"
+      subtitle={`--salt-status-success-bold-background`}
+      colors={{
+        [`--salt-status-success-bold-background`]: `var(--salt-status-success-bold-background)`,
+      }}
+    />
+  </ColorPalette>
+</ColorContainer>