remove styled-react and styled-components

siddharthkp · siddharthkp · commit fd4f9c6e319a · 2025-10-28T22:19:36.000+01:00
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -11,11 +11,9 @@
   },
   "dependencies": {
     "@primer/react": "38.0.0",
-    "@primer/styled-react": "0.2.0",
     "next": "^15.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "styled-components": "5.x",
     "typescript": "^5.9.2"
   },
   "devDependencies": {
diff --git a/examples/nextjs/src/app/global.css b/examples/nextjs/src/app/global.css
@@ -1,8 +1,3 @@
 @import '@primer/primitives/dist/css/primitives.css';
 @import '@primer/primitives/dist/css/functional/themes/light.css';
 @import '@primer/primitives/dist/css/functional/themes/dark.css';
-
-body {
-  color: var(--fgColor-default);
-  background-color: var(--bgColor-default);
-}
diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import './global.css'
-import {ThemeProvider, BaseStyles} from '@primer/styled-react'
-import {StyledComponentsRegistry} from './registry'
+import {ThemeProvider, BaseStyles} from '@primer/react'
 
 export const metadata = {
   title: 'Next.js',
@@ -13,11 +12,9 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
     // that cause hydration mismatch errors
     <html lang="en" suppressHydrationWarning>
       <body>
-        <StyledComponentsRegistry>
-          <ThemeProvider>
-            <BaseStyles>{children}</BaseStyles>
-          </ThemeProvider>
-        </StyledComponentsRegistry>
+        <ThemeProvider colorMode="auto">
+          <BaseStyles style={{backgroundColor: 'var(--bgColor-default)', height: '100vh'}}>{children}</BaseStyles>
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
@@ -1,41 +1,5 @@
-'use client'
-
-import {Button, Stack} from '@primer/react'
-import {useTheme} from '@primer/styled-react'
-import styled from 'styled-components'
-
-const StyledDiv = styled.div(({theme}) => {
-  return {
-    padding: theme.space[5],
-    backgroundColor: theme.colors.btn.primary.bg,
-  }
-})
-
-const ThemeUser = () => {
-  const {theme} = useTheme()
-  return (
-    <div
-      style={{
-        padding: theme?.space[5],
-        backgroundColor: theme?.colors.btn.primary.bg,
-      }}
-    >
-      Hello world
-    </div>
-  )
-}
+import {Button} from '@primer/react'
 
 export default function IndexPage() {
-  return (
-    <Stack direction="horizontal">
-      <Button variant="primary" style={{padding: 'var(--base-size-32)'}}>
-        Hello world
-      </Button>
-      <div style={{padding: 'var(--base-size-32)', backgroundColor: 'var(--button-primary-bgColor-rest)'}}>
-        Hello world
-      </div>
-      <StyledDiv>Hello world</StyledDiv>
-      <ThemeUser />
-    </Stack>
-  )
+  return <Button>Hello world</Button>
 }
diff --git a/examples/nextjs/src/app/registry.tsx b/examples/nextjs/src/app/registry.tsx
diff --git a/package-lock.json b/package-lock.json
