Add status bold and content foreground bold tokens

.changeset/afraid-jobs-do.md

@@ -0,0 +1,15 @@
+---
+"@salt-ds/theme": minor
+---
+
+Added status bold background and content bold foreground tokens
+
+```
+--salt-status-info-bold-background
+--salt-status-error-bold-background
+--salt-status-warning-bold-background
+--salt-status-success-bold-background
+
+--salt-content-bold-foreground
+--salt-content-bold-foreground-disabled
+```

.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 },

packages/theme/css/characteristics/content-next.css

@@ -4,6 +4,9 @@
   --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary);
   --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled);
 
+  --salt-content-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+
   --salt-content-foreground-hover: var(--salt-palette-foreground-hover);
   --salt-content-foreground-active: var(--salt-palette-foreground-active);
   --salt-content-foreground-visited: var(--salt-palette-foreground-visited);

packages/theme/css/characteristics/content.css

@@ -5,6 +5,9 @@
   --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
   --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
 
+  --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
+  --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
+
   --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
   --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
   --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);

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);

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);

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);

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);

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);

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);

packages/theme/stories/characteristics/content.mdx

@@ -0,0 +1,26 @@
+import { Meta } from "@storybook/blocks";
+import { ColorContainer } from "docs/components/ColorContainer";
+import { ColorItem, ColorPalette } from "@storybook/blocks";
+
+<Meta title="Theme/Characteristics/Content" />
+
+## Foreground
+
+<ColorContainer className="paletteContainer">
+  <ColorPalette>
+    <ColorItem
+      title="Bold"
+      subtitle={`--salt-content-bold-foreground`}
+      colors={{
+        [`--salt-content-bold-foreground`]: `var(--salt-content-bold-foreground)`,
+      }}
+    />
+    <ColorItem
+      title="Bold disabled"
+      subtitle={`--salt-content-bold-foreground-disabled`}
+      colors={{
+        [`--salt-content-bold-foreground-disabled`]: `var(--salt-content-bold-foreground-disabled)`,
+      }}
+    />
+  </ColorPalette>
+</ColorContainer>

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>