Fix play functions and base theme

src/components/Container.tsx

@@ -1,10 +1,10 @@
-import { background, styled } from "@storybook/theming";
+import { styled } from "@storybook/theming";
 
-export const Container = styled.div({
-  background: background.app,
+export const Container = styled.div(({ theme }) => ({
+  background: theme.background.app,
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   justifyContent: "center",
   height: "100%",
-});
+}));

src/screens/Onboarding/Onboarding.stories.tsx

@@ -5,6 +5,7 @@ import { rest } from "msw";
 
 import { storyWrapper } from "../../utils/graphQLClient";
 import { Onboarding } from "./Onboarding";
+import { playAll } from "../../utils/playAll";
 
 const meta = {
   component: Onboarding,
@@ -47,32 +48,28 @@ type Story = StoryObj<typeof meta>;
 export const Welcome: Story = {};
 
 export const SignIn: Story = {
-  play: async ({ canvasElement }) => {
+  play: playAll(async ({ canvasElement }) => {
     const button = await findByRole(canvasElement, "button", {
       name: "Enable",
     });
     await userEvent.click(button);
-  },
+  }),
 };
 
 export const SSO: Story = {
-  play: async (context) => {
-    await SignIn.play(context);
-
+  play: playAll(SignIn, async (context) => {
     const button = await findByRole(context.canvasElement, "button", {
       name: "Sign into Chromatic with SSO",
     });
     await userEvent.click(button);
-  },
+  }),
 };
 
 export const Verify: Story = {
-  play: async (context) => {
-    await SignIn.play(context);
-
+  play: playAll(SignIn, async (context) => {
     const button = await findByRole(context.canvasElement, "button", {
       name: "Sign in with Chromatic",
     });
     await userEvent.click(button);
-  },
+  }),
 };

src/utils/playAll.ts

@@ -0,0 +1,18 @@
+import { StoryObj } from "@storybook/react";
+
+export function playAll<Story extends StoryObj>(
+  ...sequence: (Story | Story["play"])[]
+): Story["play"] {
+  return async (context) => {
+    const canvasNodes = context.canvasElement.querySelectorAll<HTMLElement>("[data-canvas]");
+    const canvasElements = canvasNodes.length ? Array.from(canvasNodes) : [context.canvasElement];
+
+    await Promise.all(
+      sequence.flatMap((storyOrPlay) =>
+        typeof storyOrPlay === "function"
+          ? canvasElements.map((canvasElement) => storyOrPlay({ ...context, canvasElement }))
+          : storyOrPlay?.play?.(context)
+      )
+    );
+  };
+}