docs: SB改善 season 2

client/.storybook/preview.ts

@@ -9,6 +9,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    layout: "fullscreen",
   },
 };
 

client/src/components/loading-overlay/__stories__/loading-overlay.stories.tsx

@@ -9,12 +9,22 @@ const meta = {
 
 export default meta;
 
-export const Overview = () => (
+const Common = () => (
+  <LoadingOverlayContext.Provider
+    value={{ isLoading: true, setIsLoading: () => {} }}
+  >
+    <LoadingOverlay />
+  </LoadingOverlayContext.Provider>
+);
+
+export const Light = () => (
   <Theme.Light>
-    <LoadingOverlayContext.Provider
-      value={{ isLoading: true, setIsLoading: () => {} }}
-    >
-      <LoadingOverlay />
-    </LoadingOverlayContext.Provider>
+    <Common />
   </Theme.Light>
 );
+
+export const Dark = () => (
+  <Theme.Dark>
+    <Common />
+  </Theme.Dark>
+);

client/src/features/onboarding/pages/top/__stories__/top.stories.tsx

@@ -5,15 +5,18 @@ import { Theme } from "@/styles/__stories__/Theme";
 
 const meta = {
   title: "Pages/Onboarding",
-  parameters: {
-    layout: "fullscreen",
-  },
 } satisfies Meta;
 
 export default meta;
 
-export const Overview = () => (
-  <Theme.Light>
+export const Light = () => (
+  <Theme.Light full>
     <OnboardingPage />
   </Theme.Light>
 );
+
+export const Dark = () => (
+  <Theme.Dark full>
+    <OnboardingPage />
+  </Theme.Dark>
+);

client/src/styles/__stories__/Theme.tsx

@@ -1,19 +1,31 @@
 import "../global.css";
-import { vars } from "../theme.css";
+import { vars } from "..";
 
-const styles = {
-  background: vars.color.gray[1],
+const styles = (full: boolean) => ({
+  background: vars.color.gray[2],
   color: vars.color.gray[12],
-};
+  padding: full ? "0" : "16px",
+});
 
-const LightWrapper = ({ children }: { children: React.ReactNode }) => (
-  <div className="light" style={styles}>
+const LightWrapper = ({
+  children,
+  full = false,
+}: {
+  children: React.ReactNode;
+  full?: boolean;
+}) => (
+  <div className="light" style={styles(full)}>
     {children}
   </div>
 );
-
-const DarkWrapper = ({ children }: { children: React.ReactNode }) => (
-  <div className="dark" style={styles}>
+const DarkWrapper = ({
+  children,
+  full = false,
+}: {
+  children: React.ReactNode;
+  full?: boolean;
+}) => (
+  <div className="dark" style={styles(full)}>
     {children}
   </div>
 );

client/src/styles/__stories__/color-tokens.stories.tsx

@@ -4,9 +4,6 @@ import { Theme } from "./Theme";
 
 const meta = {
   title: "Styles/Color Tokens",
-  parameters: {
-    layout: "fullscreen",
-  },
 } satisfies Meta;
 
 export default meta;