refactor: remove support for styled-components from Primer

packages/react/babel.config.js

@@ -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

@@ -46,7 +46,6 @@
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
     "build:components.json": "tsx script/components-json/build.ts",
     "build:hooks.json": "tsx script/hooks-json/build.ts",
-    "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
     "storybook": "storybook",
     "type-check": "tsc --noEmit",
     "type-css-modules": "tcm -p src/**/*.module.css"
@@ -91,12 +90,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",
@@ -106,8 +99,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",
@@ -148,7 +140,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",
@@ -159,7 +150,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",
@@ -193,7 +183,6 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-visualizer": "6.0.3",
     "storybook": "^9.1.5",
-    "styled-components": "5.3.11",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.20.3",
@@ -209,11 +198,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": {
@@ -224,9 +211,6 @@
     },
     "@types/react-is": {
       "optional": true
-    },
-    "@types/styled-components": {
-      "optional": true
     }
   }
 }

packages/react/script/build

@@ -5,9 +5,6 @@ set -e
 # Clean up
 npm run clean
 
-# Generate color schemes
-npm run build:precompile-color-schemes
-
 # Generate types for CSS Modules
 npm run type-css-modules