Rename storybook backgrounds to align with semantic naming (#2767)

beaesguerra · web-flow · commit 18715e1c0308 · 2025-08-27T17:24:55.000-06:00
## Summary: Since "darkBlue" and "offWhite" follows the primitive colors for the Classic theme, we rename these options for Storybook backgrounds to make them more generic so they align with the semantic names. The background color options are: `baseDefault`, `neutralStrong`, and `baseSubtle` <img width="189" height="181" alt="image" src="https://github.com/user-attachments/assets/2da02c29-f02a-493b-ad72-f4854857a9fa" /> Issue: WB-2050 ## Test plan: 1. Confirm there are no unexpected changes in Chromatic (note: This PR is based off of the `wb-2050-use-bg-tokens` branch, so snapshots from that PR will show up in this PR if they haven't been approved yet!) Author: beaesguerra Reviewers: kevinb-khan Required Reviewers: Approved By: kevinb-khan Checks: ✅ 12 checks were successful, ⏭️ 2 checks have been skipped Pull Request URL: #2767
diff --git a/.changeset/strange-mayflies-wave.md b/.changeset/strange-mayflies-wave.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.storybook/modes.ts b/.storybook/modes.ts
@@ -21,7 +21,7 @@ export const allModes = {
     },
     // NOTE: This will go away when we fully remove the light variants.
     dark: {
-        background: "darkBlue",
+        background: "neutralStrong",
     },
     // Accessibility
     "themeDefault rtl": {
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -78,18 +78,18 @@ const parameters = {
     // Enable the RenderStateRoot decorator by default.
     enableRenderStateRootDecorator: true,
     backgrounds: {
-        default: "light",
+        default: "baseDefault",
         values: [
             {
-                name: "light",
+                name: "baseDefault",
                 value: semanticColor.core.background.base.default,
             },
             {
-                name: "darkBlue", // TODO(WB-2050): rename to dark
+                name: "neutralStrong",
                 value: semanticColor.core.background.neutral.strong,
             },
             {
-                name: "offWhite", // TODO(WB-2050): rename to subtle
+                name: "baseSubtle",
                 value: semanticColor.core.background.base.subtle,
             },
         ],
diff --git a/__docs__/wonder-blocks-accordion/accordion.stories.tsx b/__docs__/wonder-blocks-accordion/accordion.stories.tsx
@@ -657,7 +657,7 @@ export const BackgroundColorExample: StoryComponentType = {
 
 BackgroundColorExample.parameters = {
     backgrounds: {
-        default: "darkBlue",
+        default: "neutralStrong",
     },
 };
 
diff --git a/__docs__/wonder-blocks-banner/banner.stories.tsx b/__docs__/wonder-blocks-banner/banner.stories.tsx
@@ -170,7 +170,7 @@ export const Layouts: StoryComponentType = () => {
 
 Layouts.parameters = {
     backgrounds: {
-        default: "darkBlue",
+        default: "neutralStrong",
     },
 };
 
@@ -209,7 +209,7 @@ export const DarkBackground: StoryComponentType = () => (
 
 DarkBackground.parameters = {
     backgrounds: {
-        default: "darkBlue",
+        default: "neutralStrong",
     },
     chromatic: {
         // Testing snapshots don't cover dark background case
diff --git a/__docs__/wonder-blocks-cell/compact-cell-testing-snapshots.stories.tsx b/__docs__/wonder-blocks-cell/compact-cell-testing-snapshots.stories.tsx
@@ -30,7 +30,7 @@ export default {
     },
     parameters: {
         backgrounds: {
-            default: "offWhite",
+            default: "baseSubtle",
         },
         chromatic: {
             modes: themeModes,
diff --git a/__docs__/wonder-blocks-cell/detail-cell-testing-snapshots.stories.tsx b/__docs__/wonder-blocks-cell/detail-cell-testing-snapshots.stories.tsx
@@ -35,7 +35,7 @@ export default {
     },
     parameters: {
         backgrounds: {
-            default: "offWhite",
+            default: "baseSubtle",
         },
         chromatic: {
             modes: themeModes,
diff --git a/__docs__/wonder-blocks-clickable/clickable.stories.tsx b/__docs__/wonder-blocks-clickable/clickable.stories.tsx
@@ -148,7 +148,7 @@ Light.parameters = {
         },
     },
     backgrounds: {
-        default: "darkBlue",
+        default: "neutralStrong",
     },
 };
 
diff --git a/__docs__/wonder-blocks-dropdown/action-item-testing-snapshots.stories.tsx b/__docs__/wonder-blocks-dropdown/action-item-testing-snapshots.stories.tsx
@@ -66,7 +66,7 @@ const meta = {
     ],
     parameters: {
         backgrounds: {
-            default: "offWhite",
+            default: "baseSubtle",
         },
         chromatic: {
             modes: themeModes,
diff --git a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
@@ -81,7 +81,7 @@ export default {
             />
         ) as any,
         backgrounds: {
-            default: "offWhite",
+            default: "baseSubtle",
         },
     },
 } as Meta<typeof MultiSelect>;
diff --git a/__docs__/wonder-blocks-dropdown/option-item-testing-snapshots.stories.tsx b/__docs__/wonder-blocks-dropdown/option-item-testing-snapshots.stories.tsx
@@ -68,7 +68,7 @@ const meta = {
     ],
     parameters: {
         backgrounds: {
-            default: "offWhite",
+            default: "baseSubtle",
         },
         chromatic: {
             modes: themeModes,
diff --git a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
@@ -100,7 +100,7 @@ export default {
             />
         ),
         backgrounds: {
-            default: "offWhite",
+            default: "baseSubtle",
         },
     },
 } as Meta<typeof SingleSelect>;
diff --git a/__docs__/wonder-blocks-link/link.stories.tsx b/__docs__/wonder-blocks-link/link.stories.tsx
@@ -77,7 +77,7 @@ export const LightPrimary: StoryComponentType = {
     ),
     parameters: {
         backgrounds: {
-            default: "darkBlue",
+            default: "neutralStrong",
         },
     },
 };
@@ -348,7 +348,7 @@ export const InlineLight: StoryComponentType = {
     ),
     parameters: {
         backgrounds: {
-            default: "darkBlue",
+            default: "neutralStrong",
         },
         chromatic: {
             // Re-enable snapshots for this story since it shows the links in
diff --git a/__docs__/wonder-blocks-progress-spinner/circular-spinner.stories.tsx b/__docs__/wonder-blocks-progress-spinner/circular-spinner.stories.tsx
@@ -122,7 +122,7 @@ export const Light: StoryComponentType = () => <CircularSpinner light={true} />;
 
 Light.parameters = {
     backgrounds: {
-        default: "darkBlue",
+        default: "neutralStrong",
     },
     docs: {
         description: {
diff --git a/__docs__/wonder-blocks-styles/action-styles.stories.tsx b/__docs__/wonder-blocks-styles/action-styles.stories.tsx
@@ -126,7 +126,7 @@ export const InverseOutline: Story = {
     ],
     parameters: {
         backgrounds: {
-            default: "darkBlue",
+            default: "neutralStrong",
         },
         chromatic: {
             // Disabling because this is already covered by the All variants
diff --git a/__docs__/wonder-blocks-toolbar/toolbar.stories.tsx b/__docs__/wonder-blocks-toolbar/toolbar.stories.tsx
@@ -206,7 +206,7 @@ export const Dark: StoryComponentType = {
 
 Dark.parameters = {
     backgrounds: {
-        default: "darkBlue",
+        default: "neutralStrong",
     },
     docs: {
         description: {
