primer/react: Remove StyledComponentsThemeProvider from ThemeProvider

.changeset/yellow-pens-kiss.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+ThemeProvider: Remove styled-components ThemeProvider

packages/react/src/ThemeProvider.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import {ThemeProvider as SCThemeProvider} from 'styled-components'
 import defaultTheme from './theme'
 import deepmerge from 'deepmerge'
 import {useId} from './hooks'
@@ -16,7 +15,6 @@ type ColorMode = 'day' | 'night' | 'light' | 'dark'
 export type ColorModeWithAuto = ColorMode | 'auto'
 
 export type ThemeProviderProps = {
-  theme?: Theme
   colorMode?: ColorModeWithAuto
   dayScheme?: string
   nightScheme?: string
@@ -61,7 +59,7 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
   } = useTheme()
 
   // Initialize state
-  const theme = props.theme ?? fallbackTheme ?? defaultTheme
+  const theme = fallbackTheme ?? defaultTheme
 
   const uniqueDataId = useId()
   const {resolvedServerColorMode} = getServerHandoff(uniqueDataId)
@@ -120,7 +118,11 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
         setNightScheme,
       }}
     >
-      <SCThemeProvider theme={resolvedTheme}>
+      <div
+        data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme.includes('dark') ? 'dark' : 'light'}
+        data-light-theme={dayScheme}
+        data-dark-theme={nightScheme}
+      >
         {children}
         {props.preventSSRMismatch ? (
           <script
@@ -129,7 +131,7 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
             dangerouslySetInnerHTML={{__html: JSON.stringify({resolvedServerColorMode: resolvedColorMode})}}
           />
         ) : null}
-      </SCThemeProvider>
+      </div>
     </ThemeContext.Provider>
   )
 }