chore: remove styled components (bye-bye-styled-components)

.changeset/lazy-games-own.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Remove styled-components and styled-system from dependencies

.changeset/small-yaks-own.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+chore: remove theme get from @primer/react

.changeset/tame-insects-think.md

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

.changeset/tiny-parents-peel.md

@@ -0,0 +1,5 @@
+---
+"@primer/styled-react": major
+---
+
+Remove feature flag to fall back to theming from primer/react

.changeset/yellow-pens-kiss.md

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

examples/codesandbox/package.json

@@ -18,6 +18,7 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@primer/react": "38.0.0-rc.9",
+    "@primer/styled-react": "1.0.0-rc.10",
     "styled-components": "5.x",
     "typescript": "^5.9.2",
     "vite": "^7.1.11"

examples/codesandbox/src/main.tsx

@@ -1,4 +1,4 @@
-import {BaseStyles, ThemeProvider} from '@primer/react'
+import {BaseStyles, ThemeProvider} from '@primer/styled-react'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'

examples/theming/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@primer/octicons-react": "^19.14.0",
     "@primer/react": "38.0.0-rc.9",
+    "@primer/styled-react": "1.0.0-rc.10",
     "clsx": "^2.1.1",
     "next": "^15.2.3",
     "react": "18.3.1",

examples/theming/src/app/components/ThemePreference/ThemePreference.tsx

@@ -1,7 +1,9 @@
 'use client'
 
 import {SunIcon, MoonIcon} from '@primer/octicons-react'
-import {Button, useTheme} from '@primer/react'
+import {useTheme} from '@primer/styled-react'
+import {Button} from '@primer/react'
+
 import classes from './ThemePreference.module.css'
 
 export function ThemePreference() {

examples/theming/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import './global.css'
 import {cookies} from 'next/headers'
-import {BaseStyles, ThemeProvider} from '@primer/react'
+import {BaseStyles, ThemeProvider} from '@primer/styled-react'
 import {StyledComponentsRegistry} from './registry'
 
 export const metadata = {

packages/react/.storybook/preview.jsx

@@ -1,6 +1,6 @@
-import {PrimerBreakpoints} from '../src/utils/layout'
 import React, {useEffect} from 'react'
-import {ThemeProvider, BaseStyles} from '../src'
+import {ThemeProvider} from '../src/ThemeProvider'
+import BaseStyles from '../src/BaseStyles'
 import {FeatureFlags} from '../src/FeatureFlags'
 import {DefaultFeatureFlags} from '../src/FeatureFlags/DefaultFeatureFlags'
 import {clsx} from 'clsx'
@@ -9,6 +9,17 @@ import './storybook.css'
 import './primitives-v8.css'
 import {Profiler} from 'react'
 
+// TODO: Update the hard-coded values when the primitives are ready
+const breakpoints = ['544px', '768px', '1012px', '1280px']
+export const PrimerBreakpoints = {
+  xsmall: {width: '320px'},
+  small: {width: breakpoints[0]},
+  medium: {width: breakpoints[1]},
+  large: {width: breakpoints[2]},
+  xlarge: {width: breakpoints[3]},
+  xxlarge: {width: '1400px'},
+}
+
 let storybookViewports = {}
 Object.entries(PrimerBreakpoints).forEach(([viewport, value]) => {
   const {width} = value

packages/react/babel.config.cjs

@@ -16,7 +16,6 @@ const sharedPlugins = [
   'macros',
   'dev-expression',
   'add-react-displayname',
-  'babel-plugin-styled-components',
   '@babel/plugin-proposal-nullish-coalescing-operator',
   '@babel/plugin-proposal-optional-chaining',
 ]

packages/react/package.json

@@ -79,12 +79,6 @@
     "@primer/live-region-element": "^0.7.1",
     "@primer/octicons-react": "^19.13.0",
     "@primer/primitives": "10.x || 11.x",
-    "@styled-system/css": "^5.1.5",
-    "@styled-system/props": "^5.1.5",
-    "@styled-system/theme-get": "^5.1.2",
-    "@types/styled-system": "^5.1.23",
-    "@types/styled-system__css": "^5.0.16",
-    "@types/styled-system__theme-get": "^5.0.1",
     "clsx": "^2.1.1",
     "color2k": "^2.0.3",
     "deepmerge": "^4.3.1",
@@ -94,8 +88,7 @@
     "lodash.isempty": "^4.4.0",
     "lodash.isobject": "^3.0.2",
     "react-compiler-runtime": "^19.1.0-rc.2",
-    "react-intersection-observer": "^9.16.0",
-    "styled-system": "^5.1.5"
+    "react-intersection-observer": "^9.16.0"
   },
   "devDependencies": {
     "@actions/core": "1.11.1",
@@ -137,7 +130,6 @@
     "@types/react-dom": "18.3.1",
     "@types/react-is": "18.3.1",
     "@types/react-test-renderer": "18.3.1",
-    "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.3.3",
     "afterframe": "^1.0.2",
     "ajv": "8.16.0",
@@ -148,7 +140,6 @@
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
     "babel-plugin-react-compiler": "^19.1.0-rc.3",
-    "babel-plugin-styled-components": "2.1.4",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
     "chalk": "^5.4.1",
@@ -183,7 +174,6 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "6.0.3",
     "storybook": "^9.1.10",
-    "styled-components": "5.3.11",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.20.3",
@@ -199,11 +189,9 @@
     "@types/react": "18.x || 19.x",
     "@types/react-dom": "18.x || 19.x",
     "@types/react-is": "18.x || 19.x",
-    "@types/styled-components": "^5.1.11",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x",
-    "react-is": "18.x || 19.x",
-    "styled-components": "5.x"
+    "react-is": "18.x || 19.x"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -214,9 +202,6 @@
     },
     "@types/react-is": {
       "optional": true
-    },
-    "@types/styled-components": {
-      "optional": true
     }
   }
 }