From 5c6effb4506af3bcf994b1de4e6df42ca88379af Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 8 Aug 2025 15:20:08 +0000
Subject: [PATCH 1/2] Initial plan


From 84610d418647fe619339d855085b9540b077a476 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 8 Aug 2025 15:37:10 +0000
Subject: [PATCH 2/2] Update ThemeProvider.stories.tsx to no longer use
 styled-components

Co-authored-by: hectahertz <24622853+hectahertz@users.noreply.github.com>
---
 packages/react/.storybook/manager-head.html   |  1 +
 .../src/stories/ThemeProvider.stories.tsx     | 34 +++++--------------
 .../stories/ThemeProviderStories.module.css   | 18 ++++++++++
 3 files changed, 27 insertions(+), 26 deletions(-)
 create mode 100644 packages/react/.storybook/manager-head.html

diff --git a/packages/react/.storybook/manager-head.html b/packages/react/.storybook/manager-head.html
new file mode 100644
index 00000000000..be00d6026b4
--- /dev/null
+++ b/packages/react/.storybook/manager-head.html
@@ -0,0 +1 @@
+<base href="/react/storybook/" />
diff --git a/packages/react/src/stories/ThemeProvider.stories.tsx b/packages/react/src/stories/ThemeProvider.stories.tsx
index 46bf8345c0b..3d5700c1169 100644
--- a/packages/react/src/stories/ThemeProvider.stories.tsx
+++ b/packages/react/src/stories/ThemeProvider.stories.tsx
@@ -1,8 +1,8 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
-import {ThemeProvider, BaseStyles, Box, useTheme} from '..'
+import {ThemeProvider, BaseStyles, useTheme} from '..'
 import type {ThemeProviderProps} from '../ThemeProvider'
-import './ThemeProviderStories.module.css'
+import classes from './ThemeProviderStories.module.css'
 
 export default {
   title: 'Behaviors/ThemeProvider',
@@ -41,18 +41,9 @@ Default.args = {
 function NightMode() {
   return (
     <ThemeProvider colorMode="night">
-      <Box
-        my={3}
-        p={3}
-        color="fg.default"
-        bg="canvas.default"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor="border.default"
-        borderRadius={2}
-      >
+      <div className={classes.ThemeBox}>
         Always night mode (<ActiveColorScheme />)
-      </Box>
+      </div>
     </ThemeProvider>
   )
 }
@@ -61,18 +52,9 @@ function InverseMode() {
   const {resolvedColorMode} = useTheme()
   return (
     <ThemeProvider colorMode={resolvedColorMode === 'day' ? 'night' : 'day'}>
-      <Box
-        my={3}
-        p={3}
-        color="fg.default"
-        bg="canvas.default"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor="border.default"
-        borderRadius={2}
-      >
+      <div className={classes.ThemeBox}>
         Always inverse of parent mode (<ActiveColorScheme />)
-      </Box>
+      </div>
     </ThemeProvider>
   )
 }
@@ -93,10 +75,10 @@ const AutoContents = () => {
   const {colorMode, resolvedColorMode} = useTheme()
 
   return (
-    <Box sx={{padding: 10, backgroundColor: 'canvas.inset', color: 'fg.default'}}>
+    <div className={classes.AutoContents}>
       colorMode: {colorMode} <br />
       resolvedColorMode: {resolvedColorMode} <br />
-    </Box>
+    </div>
   )
 }
 
diff --git a/packages/react/src/stories/ThemeProviderStories.module.css b/packages/react/src/stories/ThemeProviderStories.module.css
index 2461d6ad654..92c398b004b 100644
--- a/packages/react/src/stories/ThemeProviderStories.module.css
+++ b/packages/react/src/stories/ThemeProviderStories.module.css
@@ -1,3 +1,21 @@
 :global(body) {
   background-color: var(--bgColor-default);
 }
+
+.ThemeBox {
+  margin-top: var(--base-size-12);
+  margin-bottom: var(--base-size-12);
+  padding: var(--base-size-12);
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
+  border-width: var(--borderWidth-thin);
+  border-style: solid;
+  border-color: var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+}
+
+.AutoContents {
+  padding: var(--base-size-40);
+  background-color: var(--bgColor-inset);
+  color: var(--fgColor-default);
+}