diff --git a/.changeset/lazy-games-own.md b/.changeset/lazy-games-own.md
new file mode 100644
index 00000000000..f60ca02c7f0
--- /dev/null
+++ b/.changeset/lazy-games-own.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Remove styled-components and styled-system from dependencies
diff --git a/.changeset/small-yaks-own.md b/.changeset/small-yaks-own.md
new file mode 100644
index 00000000000..4450ac67b65
--- /dev/null
+++ b/.changeset/small-yaks-own.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+chore: remove theme get from @primer/react
diff --git a/.changeset/tame-insects-think.md b/.changeset/tame-insects-think.md
new file mode 100644
index 00000000000..e0031e8a484
--- /dev/null
+++ b/.changeset/tame-insects-think.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Remove styled-components from dependencies
diff --git a/.changeset/tiny-parents-peel.md b/.changeset/tiny-parents-peel.md
new file mode 100644
index 00000000000..b0cfb117f20
--- /dev/null
+++ b/.changeset/tiny-parents-peel.md
@@ -0,0 +1,5 @@
+---
+"@primer/styled-react": major
+---
+
+Remove feature flag to fall back to theming from primer/react
diff --git a/.changeset/yellow-pens-kiss.md b/.changeset/yellow-pens-kiss.md
new file mode 100644
index 00000000000..9a456505b25
--- /dev/null
+++ b/.changeset/yellow-pens-kiss.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+ThemeProvider: Remove styled-components ThemeProvider
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png
index 87141d4d00b..7385f0d8a24 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png
index 0f8b806de06..530da321881 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png
index e82903e6799..94c5078cff1 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png
index 87141d4d00b..7385f0d8a24 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png
index 87141d4d00b..7385f0d8a24 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png
index 3df823c2827..a288a970583 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png
index b107bad5c71..3f7955e585e 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png
index 3df823c2827..a288a970583 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-linux.png differ
diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png
index 3df823c2827..a288a970583 100644
Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-Profile-Page-light-tritanopia-linux.png differ
diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json
index 4bc2af40ad5..8d8430f70a5 100644
--- a/examples/codesandbox/package.json
+++ b/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"
diff --git a/examples/codesandbox/src/main.tsx b/examples/codesandbox/src/main.tsx
index ee4c9701ba6..c079068e829 100644
--- a/examples/codesandbox/src/main.tsx
+++ b/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'
diff --git a/examples/theming/package.json b/examples/theming/package.json
index ee8edcc6d62..eeee2acaf1e 100644
--- a/examples/theming/package.json
+++ b/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",
diff --git a/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx b/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx
index d33c3b503a7..63e8310d0d3 100644
--- a/examples/theming/src/app/components/ThemePreference/ThemePreference.tsx
+++ b/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() {
diff --git a/examples/theming/src/app/layout.tsx b/examples/theming/src/app/layout.tsx
index 91614eea628..3f632308872 100644
--- a/examples/theming/src/app/layout.tsx
+++ b/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 = {
diff --git a/package-lock.json b/package-lock.json
index b0f35787c2f..3836c29a746 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,7 +75,8 @@
         "react-dom": "^18.3.1"
       },
       "devDependencies": {
-        "@primer/react": "38.0.0-rc.8",
+        "@primer/react": "38.0.0-rc.9",
+        "@primer/styled-react": "1.0.0-rc.10",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.3",
@@ -88,8 +89,8 @@
       "name": "example-nextjs",
       "version": "0.0.0",
       "dependencies": {
-        "@primer/react": "38.0.0-rc.8",
-        "@primer/styled-react": "1.0.0-rc.9",
+        "@primer/react": "38.0.0-rc.9",
+        "@primer/styled-react": "1.0.0-rc.10",
         "next": "^15.2.3",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -105,7 +106,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@primer/octicons-react": "^19.14.0",
-        "@primer/react": "38.0.0-rc.8",
+        "@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",
@@ -7837,6 +7839,8 @@
     },
     "node_modules/@styled-system/theme-get": {
       "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@styled-system/theme-get/-/theme-get-5.1.2.tgz",
+      "integrity": "sha512-afAYdRqrKfNIbVgmn/2Qet1HabxmpRnzhFwttbGr6F/mJ4RDS/Cmn+KHwHvNXangQsWw/5TfjpWV+rgcqqIcJQ==",
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -8218,12 +8222,16 @@
       }
     },
     "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.5",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
+      "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/react": "*",
         "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*"
       }
     },
     "node_modules/@types/is-empty": {
@@ -8383,6 +8391,8 @@
     },
     "node_modules/@types/styled-components": {
       "version": "5.1.34",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz",
+      "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8392,7 +8402,9 @@
       }
     },
     "node_modules/@types/styled-system": {
-      "version": "5.1.23",
+      "version": "5.1.24",
+      "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.24.tgz",
+      "integrity": "sha512-bItgWb7lQsynxuSoyfPj2LZCNB9aeRCv70NYvMKZN1xbcQ/j6IS2PWsIlQqkIzDQgHbdcrRbWEIg9vKlbbgnGw==",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -8400,6 +8412,8 @@
     },
     "node_modules/@types/styled-system__css": {
       "version": "5.0.21",
+      "resolved": "https://registry.npmjs.org/@types/styled-system__css/-/styled-system__css-5.0.21.tgz",
+      "integrity": "sha512-8S1lPbUbrE8U/2btqjh9X6pK9//kQdbQDe9z3vQl4SWtxtqoAVnrFZE6Xs+IHM7NMZ1uC68XrF9nLdzRHm3VyA==",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -8407,6 +8421,8 @@
     },
     "node_modules/@types/styled-system__theme-get": {
       "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/styled-system__theme-get/-/styled-system__theme-get-5.0.4.tgz",
+      "integrity": "sha512-dbzwxQ+8x6Bo3EKZMo9M3Knzo77ukwoC/isKW+GAuF5TenXlPkvgzx4t4+Lp0+fKs2M4owSef0KO3gtGW3Hpkw==",
       "license": "MIT"
     },
     "node_modules/@types/supports-color": {
@@ -26317,7 +26333,7 @@
     },
     "packages/react": {
       "name": "@primer/react",
-      "version": "38.0.0-rc.8",
+      "version": "38.0.0-rc.9",
       "license": "MIT",
       "dependencies": {
         "@github/mini-throttle": "^2.1.1",
@@ -26329,12 +26345,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",
@@ -26344,8 +26354,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",
@@ -26387,7 +26396,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",
@@ -26398,7 +26406,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",
@@ -26433,7 +26440,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",
@@ -26453,11 +26459,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": {
@@ -26468,9 +26472,6 @@
         },
         "@types/react-is": {
           "optional": true
-        },
-        "@types/styled-components": {
-          "optional": true
         }
       }
     },
@@ -26894,14 +26895,24 @@
     },
     "packages/styled-react": {
       "name": "@primer/styled-react",
-      "version": "1.0.0-rc.9",
+      "version": "1.0.0-rc.10",
+      "dependencies": {
+        "@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",
+        "styled-system": "^5.1.5"
+      },
       "devDependencies": {
         "@babel/preset-react": "^7.27.1",
         "@babel/preset-typescript": "^7.27.1",
-        "@primer/react": "^38.0.0-rc.8",
+        "@primer/react": "^38.0.0-rc.9",
         "@rollup/plugin-babel": "^6.0.4",
         "@types/react": "18.3.11",
         "@types/react-dom": "18.3.1",
+        "@types/styled-components": "^5.1.26",
         "@vitejs/plugin-react": "^4.3.3",
         "babel-plugin-styled-components": "2.1.4",
         "publint": "^0.3.12",
@@ -26914,7 +26925,7 @@
         "typescript": "^5.9.2"
       },
       "peerDependencies": {
-        "@primer/react": "38.0.0-rc.8",
+        "@primer/react": "38.0.0-rc.9",
         "@types/react": "18.x || 19.x",
         "@types/react-dom": "18.x || 19.x",
         "@types/react-is": "18.x || 19.x",
diff --git a/packages/react/.storybook/preview.jsx b/packages/react/.storybook/preview.jsx
index eb783c3ce50..890987353b8 100644
--- a/packages/react/.storybook/preview.jsx
+++ b/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
diff --git a/packages/react/@types/@styled-system/index.d.ts b/packages/react/@types/@styled-system/index.d.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/react/@types/@styled-system/prop-types/index.d.ts b/packages/react/@types/@styled-system/prop-types/index.d.ts
deleted file mode 100644
index 26780a7cfb2..00000000000
--- a/packages/react/@types/@styled-system/prop-types/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '@styled-system/prop-types'
diff --git a/packages/react/@types/@styled-system/props/index.d.ts b/packages/react/@types/@styled-system/props/index.d.ts
deleted file mode 100644
index d1bbf5dad03..00000000000
--- a/packages/react/@types/@styled-system/props/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '@styled-system/props'
diff --git a/packages/react/babel.config.cjs b/packages/react/babel.config.cjs
index 28c28d6ea1c..90e32bd8d7f 100644
--- a/packages/react/babel.config.cjs
+++ b/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',
 ]
diff --git a/packages/react/package.json b/packages/react/package.json
index e77a17bebe3..380f0ade5b7 100644
--- a/packages/react/package.json
+++ b/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
     }
   }
 }
diff --git a/packages/react/src/ActionList/Group.test.tsx b/packages/react/src/ActionList/Group.test.tsx
index 7bbb8d41a0f..83ae6ab53d0 100644
--- a/packages/react/src/ActionList/Group.test.tsx
+++ b/packages/react/src/ActionList/Group.test.tsx
@@ -1,7 +1,8 @@
 import {describe, it, expect, vi} from 'vitest'
 import {render as HTMLRender} from '@testing-library/react'
+import BaseStyles from '../BaseStyles'
 import {ActionList} from '.'
-import {BaseStyles, ActionMenu} from '..'
+import {ActionMenu} from '..'
 
 describe('ActionList.Group', () => {
   it('should throw an error when ActionList.GroupHeading has an `as` prop when it is used within ActionMenu context', async () => {
diff --git a/packages/react/src/ActionList/Heading.test.tsx b/packages/react/src/ActionList/Heading.test.tsx
index 3f3764432aa..0318c0e7bba 100644
--- a/packages/react/src/ActionList/Heading.test.tsx
+++ b/packages/react/src/ActionList/Heading.test.tsx
@@ -1,7 +1,8 @@
 import {describe, it, expect, vi} from 'vitest'
 import {render as HTMLRender} from '@testing-library/react'
+import BaseStyles from '../BaseStyles'
 import {ActionList} from '.'
-import {BaseStyles, ActionMenu} from '..'
+import {ActionMenu} from '..'
 
 describe('ActionList.Heading', () => {
   it('should render the ActionList.Heading component as a heading with the given heading level', async () => {
diff --git a/packages/react/src/ActionMenu/ActionMenu.test.tsx b/packages/react/src/ActionMenu/ActionMenu.test.tsx
index 9b25545f718..1fbd953005a 100644
--- a/packages/react/src/ActionMenu/ActionMenu.test.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.test.tsx
@@ -2,7 +2,8 @@ import {describe, expect, it, vi} from 'vitest'
 import {render as HTMLRender, waitFor, act, within} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type React from 'react'
-import {ActionMenu, ActionList, BaseStyles, Button, IconButton} from '..'
+import BaseStyles from '../BaseStyles'
+import {ActionMenu, ActionList, Button, IconButton} from '..'
 import Tooltip from '../Tooltip'
 import {Tooltip as TooltipV2} from '../TooltipV2/Tooltip'
 import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories'
diff --git a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
index 9fe367c36f6..7442de16784 100644
--- a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`AnchoredOverlay > should render consistently when open 1`] = `
 <div>
   <div
     class="prc-src-BaseStyles-9LBd2"
-    data-color-mode="light"
     data-portal-root="true"
   >
     <button
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index bf0577cee9b..5caa78482e3 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -2,7 +2,8 @@ import type {ChangeEventHandler, RefObject} from 'react'
 import React, {useCallback, useEffect, useRef, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
 
-import {BaseStyles, Stack, registerPortalRoot} from '..'
+import BaseStyles from '../BaseStyles'
+import {Stack, registerPortalRoot} from '..'
 import {Dialog} from '../deprecated/DialogV1'
 import TextInputTokens from '../TextInputWithTokens'
 import Autocomplete from './Autocomplete'
diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
index 4c8bda2827c..5ff009f7b06 100644
--- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx
@@ -1,7 +1,7 @@
 import type React from 'react'
 import {useCallback, useState} from 'react'
 import type {Meta} from '@storybook/react-vite'
-import {BaseStyles} from '..'
+import BaseStyles from '../BaseStyles'
 import Autocomplete from './Autocomplete'
 import FormControl from '../FormControl'
 import type {ComponentProps} from '../utils/types'
diff --git a/packages/react/src/BaseStyles.dev.stories.tsx b/packages/react/src/BaseStyles.dev.stories.tsx
index 4e9b4db17ef..99bb71b9c0a 100644
--- a/packages/react/src/BaseStyles.dev.stories.tsx
+++ b/packages/react/src/BaseStyles.dev.stories.tsx
@@ -1,4 +1,4 @@
-import {BaseStyles} from '.'
+import BaseStyles from './BaseStyles'
 import type {Meta} from '@storybook/react-vite'
 import type {ComponentProps} from './utils/types'
 
diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx
index 9077d733daf..146a9fbdda1 100644
--- a/packages/react/src/BaseStyles.tsx
+++ b/packages/react/src/BaseStyles.tsx
@@ -1,8 +1,6 @@
 import type React from 'react'
 import {type CSSProperties, type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
-import type {SystemCommonProps, SystemTypographyProps} from './constants'
-import {useTheme} from './ThemeProvider'
 
 import classes from './BaseStyles.module.css'
 
@@ -14,40 +12,17 @@ export type BaseStylesProps = PropsWithChildren & {
   className?: string
   style?: CSSProperties
   color?: string // Fixes `color` ts-error
-} & SystemTypographyProps &
-  SystemCommonProps
-
-function BaseStyles({
-  children,
-  color,
-  fontFamily,
-  lineHeight,
-  className,
-  as: Component = 'div',
-  style,
-  ...rest
-}: BaseStylesProps) {
-  const {colorMode, colorScheme, dayScheme, nightScheme} = useTheme()
-
+}
+function BaseStyles({children, color, className, as: Component = 'div', style, ...rest}: BaseStylesProps) {
   const newClassName = clsx(classes.BaseStyles, className)
   const baseStyles = {
     ['--BaseStyles-fgColor']: color,
-    ['--BaseStyles-fontFamily']: fontFamily,
-    ['--BaseStyles-lineHeight']: lineHeight,
   }
 
   return (
     <Component
       className={newClassName}
       data-portal-root
-      /**
-       * We need to map valid primer/react color modes onto valid color modes for primer/primitives
-       * valid color modes for primer/primitives: auto | light | dark
-       * valid color modes for primer/primer: auto | day | night | light | dark
-       */
-      data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'}
-      data-light-theme={dayScheme}
-      data-dark-theme={nightScheme}
       style={{
         ...baseStyles,
         ...style,
diff --git a/packages/react/src/Box/Box.docs.json b/packages/react/src/Box/Box.docs.json
deleted file mode 100644
index 19925efa860..00000000000
--- a/packages/react/src/Box/Box.docs.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "id": "box",
-  "name": "Box",
-  "status": "deprecated",
-  "a11yReviewed": "2025-01-08",
-  "stories": [],
-  "importPath": "@primer/react",
-  "props": [
-    {
-      "name": "ref",
-      "type": "React.RefObject<HTMLDivElement>"
-    },
-    {
-      "name": "as",
-      "type": "React.ElementType",
-      "defaultValue": "\"div\""
-    }
-  ],
-  "subcomponents": []
-}
diff --git a/packages/react/src/Box/Box.features.stories.tsx b/packages/react/src/Box/Box.features.stories.tsx
deleted file mode 100644
index c1e7f6aa4b3..00000000000
--- a/packages/react/src/Box/Box.features.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type {Meta} from '@storybook/react-vite'
-import Box from './Box'
-
-export default {
-  title: 'Deprecated/Components/Box/Features',
-  component: Box,
-} as Meta<typeof Box>
-
-export const Border = () => (
-  <Box sx={{borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default', p: 3}}>Box with border</Box>
-)
-
-export const BorderBottom = () => (
-  <Box sx={{borderBottomWidth: 1, borderBottomStyle: 'solid', borderColor: 'border.default', p: 3}}>
-    Box with bottom border
-  </Box>
-)
-
-export const Flexbox = () => (
-  <Box sx={{display: 'flex'}}>
-    <Box sx={{p: 3, borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default'}}>1</Box>
-    <Box sx={{flexGrow: 1, p: 3, borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default'}}>2</Box>
-    <Box sx={{p: 3, borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default'}}>3</Box>
-  </Box>
-)
-
-export const Grid = () => (
-  <Box sx={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3}}>
-    <Box sx={{p: 3, borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default'}}>1</Box>
-    <Box sx={{p: 3, borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default'}}>2</Box>
-    <Box sx={{p: 3, borderWidth: 1, borderStyle: 'solid', borderColor: 'border.default'}}>3</Box>
-  </Box>
-)
diff --git a/packages/react/src/Box/Box.stories.tsx b/packages/react/src/Box/Box.stories.tsx
deleted file mode 100644
index 69d862ca616..00000000000
--- a/packages/react/src/Box/Box.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type {Meta, StoryFn} from '@storybook/react-vite'
-import Box from './Box'
-
-export default {
-  title: 'Deprecated/Components/Box',
-  component: Box,
-} as Meta<typeof Box>
-
-export const Default = () => <Box>Default Box</Box>
-
-export const Playground: StoryFn<typeof Box> = args => <Box {...args}>Playground</Box>
-
-Playground.args = {
-  as: 'div',
-  sx: {
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: 'border.default',
-    p: 3,
-  },
-}
-
-Playground.argTypes = {
-  forwardedAs: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
-  ref: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
-  theme: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
-}
diff --git a/packages/react/src/Box/Box.tsx b/packages/react/src/Box/Box.tsx
deleted file mode 100644
index f806c7abe71..00000000000
--- a/packages/react/src/Box/Box.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import styled from 'styled-components'
-import type {
-  BackgroundProps,
-  BorderProps,
-  ColorProps,
-  FlexboxProps,
-  GridProps,
-  LayoutProps,
-  PositionProps,
-  ShadowProps,
-  SpaceProps,
-  TypographyProps,
-} from 'styled-system'
-import {background, border, color, flexbox, grid, layout, position, shadow, space, typography} from 'styled-system'
-import type {SxProp} from '../sx'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
-
-type StyledBoxProps = SxProp &
-  SpaceProps &
-  ColorProps &
-  TypographyProps &
-  LayoutProps &
-  FlexboxProps &
-  GridProps &
-  BackgroundProps &
-  BorderProps &
-  PositionProps &
-  ShadowProps
-
-/**
- * @deprecated The Box component is deprecated. Replace with a `div` or
- * appropriate HTML element instead, with CSS modules for styling.
- * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
- */
-const Box = styled.div<StyledBoxProps>(
-  space,
-  color,
-  typography,
-  layout,
-  flexbox,
-  grid,
-  background,
-  border,
-  position,
-  shadow,
-  sx,
-)
-
-/**
- * @deprecated The Box component is deprecated. Replace with a `div` or
- * appropriate HTML element instead, with CSS modules for styling.
- * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
- */
-export type BoxProps = ComponentProps<typeof Box>
-export default Box
diff --git a/packages/react/src/Box/index.ts b/packages/react/src/Box/index.ts
deleted file mode 100644
index 136edb00d51..00000000000
--- a/packages/react/src/Box/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export {default} from './Box'
-export type {BoxProps} from './Box'
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx
index 7543ffb2a41..da3cbcc4cfe 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx
@@ -2,7 +2,8 @@ import type {Meta} from '@storybook/react-vite'
 import ButtonGroup from './ButtonGroup'
 import {Button, IconButton, LinkButton} from '../Button'
 import {CopilotIcon} from '@primer/octicons-react'
-import {Tooltip, BaseStyles} from '..'
+import BaseStyles from '../BaseStyles'
+import {Tooltip} from '..'
 
 const meta: Meta<typeof ButtonGroup> = {
   title: 'Components/ButtonGroup/Dev',
diff --git a/packages/react/src/LabelGroup/LabelGroup.test.tsx b/packages/react/src/LabelGroup/LabelGroup.test.tsx
index 40f263be581..6a48526db7a 100644
--- a/packages/react/src/LabelGroup/LabelGroup.test.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.test.tsx
@@ -1,7 +1,8 @@
 import type React from 'react'
 import {render, waitFor} from '@testing-library/react'
 import {describe, it, expect, vi} from 'vitest'
-import {LabelGroup, Label, BaseStyles} from '..'
+import BaseStyles from '../BaseStyles'
+import {LabelGroup, Label} from '..'
 import userEvent from '@testing-library/user-event'
 
 const ThemeAndStyleContainer: React.FC<React.PropsWithChildren> = ({children}) => <BaseStyles>{children}</BaseStyles>
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 7c0175b8fc1..42a01a4c0f6 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -5,7 +5,6 @@ import VisuallyHidden from '../_VisuallyHidden'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button, IconButton} from '../Button'
 import {clsx} from 'clsx'
-import theme from '../theme'
 import classes from './LabelGroup.module.css'
 
 export type LabelGroupProps = {
@@ -131,8 +130,7 @@ const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>> = ({
     toJSON: () => undefined,
   })
 
-  const overlayPaddingPx = parseInt(theme.space[2], 10)
-
+  const overlayPaddingPx = 8 // var(--base-size-8), hardcoded to do some math
   const hiddenItemIds = Object.keys(visibilityMap).filter(key => !visibilityMap[key])
 
   // `overlayWidth` is only needed when we render an overlay
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 89557b79c29..b4d917154a6 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -11,7 +11,6 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Overlay.module.css'
 import {clsx} from 'clsx'
-import theme from '../theme'
 
 type StyledOverlayProps = {
   width?: keyof typeof widthMap
@@ -191,8 +190,8 @@ const Overlay = React.forwardRef<HTMLDivElement, internalOverlayProps>(
   ): ReactElement => {
     const overlayRef = useRef<HTMLDivElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, overlayRef)
-    const slideAnimationDistance = parseInt(theme.space[2], 10)
-    const slideAnimationEasing = theme.animation.easeOutCubic
+    const slideAnimationDistance = 8 // var(--base-size-8), hardcoded to do some math
+    const slideAnimationEasing = 'cubic-bezier(0.33, 1, 0.68, 1)'
 
     useOverlay({
       overlayRef,
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 6d72072fa04..03d90d0d25b 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -1,6 +1,5 @@
 import {FocusKeys} from '@primer/behaviors'
 import {isFocusable} from '@primer/behaviors/utils'
-import {omit} from '@styled-system/props'
 import type {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject} from 'react'
 import React, {useRef, useState} from 'react'
 import {isValidElementType} from 'react-is'
@@ -102,7 +101,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
   }: TextInputWithTokensProps<TokenComponentType | typeof Token>,
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
-  const {onBlur, onFocus, onKeyDown, ...inputPropsRest} = omit(rest)
+  const {onBlur, onFocus, onKeyDown, ...inputPropsRest} = rest
   const ref = useRef<HTMLInputElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, ref)
   const [selectedTokenIndex, setSelectedTokenIndex] = useState<number | undefined>()
@@ -185,13 +184,13 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     }
   }
 
-  const handleInputFocus: FocusEventHandler = event => {
+  const handleInputFocus: FocusEventHandler<HTMLInputElement> = event => {
     onFocus && onFocus(event)
     setSelectedTokenIndex(undefined)
     visibleTokenCount && setTokensAreTruncated(false)
   }
 
-  const handleInputBlur: FocusEventHandler = event => {
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = event => {
     onBlur && onBlur(event)
 
     // HACK: wait a tick and check the focused element before hiding truncated tokens
@@ -204,7 +203,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
     }, 0)
   }
 
-  const handleInputKeyDown: KeyboardEventHandler = e => {
+  const handleInputKeyDown: KeyboardEventHandler<HTMLInputElement> = e => {
     if (onKeyDown) {
       onKeyDown(e)
     }
diff --git a/packages/react/src/ThemeProvider.tsx b/packages/react/src/ThemeProvider.tsx
index 416e317a540..c3f74c373a8 100644
--- a/packages/react/src/ThemeProvider.tsx
+++ b/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>
   )
 }
diff --git a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
index a548e0a519f..a2b8e1bd25b 100644
--- a/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
+++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx
@@ -3,7 +3,8 @@ import {describe, expect, it, vi} from 'vitest'
 import type {TooltipProps} from '../Tooltip'
 import {Tooltip} from '../Tooltip'
 import {render as HTMLRender} from '@testing-library/react'
-import {Button, IconButton, ActionMenu, ActionList, BaseStyles, ButtonGroup} from '../..'
+import BaseStyles from '../../BaseStyles'
+import {Button, IconButton, ActionMenu, ActionList, ButtonGroup} from '../..'
 import {XIcon} from '@primer/octicons-react'
 
 const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.module.css b/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.module.css
index e2f8c082fb3..36f013fc16d 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.module.css
+++ b/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.module.css
@@ -82,7 +82,7 @@
 }
 
 .ProfileNav {
-  flex-grow: 1;
+  margin-bottom: var(--base-size-16);
 }
 
 .ProfileReadme {
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.tsx
index 683682f0bdd..9efc347f8cf 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.tsx
@@ -114,35 +114,7 @@ const profileItems: {navigation: string; icon: React.FC<IconProps>; counter?: nu
 export const ProfilePage = () => {
   const [selectedIndex, setSelectedIndex] = React.useState<number | null>(1)
   return (
-    <div className={classes.ProfileContainer}>
-      <div className={classes.ProfileSidebar}>
-        <Avatar size={256} src="https://avatars.githubusercontent.com/u/7143434?v=4" alt="mona user avatar" />
-        <div>
-          {/* Initial bio info */}
-          <div className={classes.ProfileBioInfo}>
-            <Heading as="h1" className={classes.ProfileBioName}>
-              Monalisa Octocat
-            </Heading>
-            <Heading as="h1" className={classes.ProfileBioUsername}>
-              mona
-            </Heading>
-          </div>
-          {/* Edit Profile / Profile details */}
-          <div className={classes.ProfileEditSection}>
-            <Button block>Edit Profile</Button>
-            <div className={classes.ProfileFollowRow}>
-              <Octicon icon={PeopleIcon} size={16} className={classes.ProfileFollowerIcon} />
-              <Link href="https://github.com" muted className={classes.ProfileFollowerCount}>
-                47 Followers
-              </Link>
-              <span> · </span>
-              <Link href="https://github.com" muted className={classes.ProfileFollowingCount}>
-                54 Following
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div>
       <div className={classes.ProfileNav}>
         <UnderlineNav aria-label="Repository">
           {profileItems.map((item, index) => (
@@ -161,6 +133,36 @@ export const ProfilePage = () => {
             </UnderlineNav.Item>
           ))}
         </UnderlineNav>
+      </div>
+      <div className={classes.ProfileContainer}>
+        <div className={classes.ProfileSidebar}>
+          <Avatar size={256} src="https://avatars.githubusercontent.com/u/7143434?v=4" alt="mona user avatar" />
+          <div>
+            {/* Initial bio info */}
+            <div className={classes.ProfileBioInfo}>
+              <Heading as="h1" className={classes.ProfileBioName}>
+                Monalisa Octocat
+              </Heading>
+              <Heading as="h1" className={classes.ProfileBioUsername}>
+                mona
+              </Heading>
+            </div>
+            {/* Edit Profile / Profile details */}
+            <div className={classes.ProfileEditSection}>
+              <Button block>Edit Profile</Button>
+              <div className={classes.ProfileFollowRow}>
+                <Octicon icon={PeopleIcon} size={16} className={classes.ProfileFollowerIcon} />
+                <Link href="https://github.com" muted className={classes.ProfileFollowerCount}>
+                  47 Followers
+                </Link>
+                <span> · </span>
+                <Link href="https://github.com" muted className={classes.ProfileFollowingCount}>
+                  54 Following
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
         <div className={classes.ProfileReadme}>
           <Text> mona/README.md</Text>
         </div>
diff --git a/packages/react/src/__tests__/ThemeProvider.test.tsx b/packages/react/src/__tests__/ThemeProvider.test.tsx
index 1caf4f11c30..ce023877820 100644
--- a/packages/react/src/__tests__/ThemeProvider.test.tsx
+++ b/packages/react/src/__tests__/ThemeProvider.test.tsx
@@ -2,8 +2,16 @@ import {render, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {describe, expect, it, vi} from 'vitest'
 import React from 'react'
-import {ThemeProvider, useColorSchemeVar, useTheme} from '../'
-import Box from '../Box'
+import {ThemeProvider, useColorSchemeVar, useTheme} from '../ThemeProvider'
+
+// copied from '@primer/primitives/dist/css/functional/themes/';
+const fgDefaultColors = {
+  light: '#1f2328',
+  // eslint-disable-next-line camelcase
+  light_high_contrast: '#010409',
+  dark: '#f0f6fc',
+  dark_dimmed: '#d1d7e0',
+}
 
 // window.matchMedia() is not implemented by JSDOM so we have to create a mock:
 // https://vijs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
@@ -21,159 +29,48 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 })
 
-const exampleTheme = {
-  colors: {
-    text: '#f00',
-  },
-  colorSchemes: {
-    light: {
-      colors: {
-        text: 'black',
-      },
-    },
-    dark: {
-      colors: {
-        text: 'white',
-      },
-    },
-    dark_dimmed: {
-      colors: {
-        text: 'gray',
-      },
-    },
-  },
-}
-
-it('respects theme prop', () => {
-  const theme = {
-    colors: {
-      text: '#f00',
-    },
-    space: ['0', '0.25rem'],
-  }
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Box color="text" mb={1}>
-        Hello
-      </Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: #f00')
-  expect(screen.getByText('Hello')).toHaveStyle('margin-bottom: 4px')
-})
-
-it('has default theme', () => {
-  render(
-    <ThemeProvider>
-      <Box color="fg.default" mb={1}>
-        Hello
-      </Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toMatchSnapshot()
-})
-
-it('inherits theme from parent', () => {
-  render(
-    <ThemeProvider theme={exampleTheme}>
-      <ThemeProvider>
-        <Box color="text">Hello</Box>
-      </ThemeProvider>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
-})
-
 it('defaults to light color scheme', () => {
   render(
-    <ThemeProvider theme={exampleTheme}>
-      <Box color="text">Hello</Box>
+    <ThemeProvider>
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 })
 
 it('defaults to dark color scheme in night mode', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="night">
-      <Box color="text">Hello</Box>
+    <ThemeProvider colorMode="night">
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
-})
-
-it('defaults to first color scheme when passed an invalid color scheme name', () => {
-  const spy = vi.spyOn(console, 'error').mockImplementationOnce(() => {})
-
-  render(
-    <ThemeProvider theme={exampleTheme} dayScheme="foo">
-      <Box color="text">Hello</Box>
-    </ThemeProvider>,
-  )
-
-  expect(spy).toHaveBeenCalledWith('`foo` scheme not defined in `theme.colorSchemes`')
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
-
-  spy.mockRestore()
+  expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 })
 
 it('respects nightScheme prop', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
-      <Box color="text">Hello</Box>
+    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
-})
-
-it('respects nightScheme prop with colorMode="dark"', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="dark" nightScheme="dark_dimmed">
-      <Box color="text">Hello</Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
-})
-
-it('respects dayScheme prop', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
-      <Box color="text">Hello</Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
-})
-
-it('respects dayScheme prop with colorMode="light"', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
-      <Box color="text">Hello</Box>
-    </ThemeProvider>,
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+  expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark_dimmed}`)
 })
 
 it('works in auto mode', () => {
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Box color="text">Hello</Box>
+    <ThemeProvider colorMode="auto">
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(31, 35, 40)')
 })
 
-it('works in auto mode (dark)', () => {
+// TODO: need to wire up a prefers color scheme mock, vitest-matchmedia-mock?
+it.skip('works in auto mode (dark)', () => {
   const matchMediaSpy = vi.spyOn(window, 'matchMedia').mockImplementation(query => ({
     matches: true, // enable dark mode
     media: query,
@@ -186,12 +83,12 @@ it('works in auto mode (dark)', () => {
   }))
 
   render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Box color="text">Hello</Box>
+    <ThemeProvider colorMode="auto">
+      <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
     </ThemeProvider>,
   )
 
-  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+  expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 
   matchMediaSpy.mockRestore()
 })
@@ -202,8 +99,8 @@ it('updates when colorMode prop changes', async () => {
   function App() {
     const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
-        <Box color="text">{colorMode}</Box>
+      <ThemeProvider colorMode={colorMode}>
+        <span style={{color: 'var(--fgColor-default)'}}>{colorMode}</span>
         <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
           Toggle
         </button>
@@ -214,13 +111,13 @@ it('updates when colorMode prop changes', async () => {
   render(<App />)
 
   // starts in day mode (light scheme)
-  expect(screen.getByText('day')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('day')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
   await user.click(screen.getByRole('button'))
 
   await waitFor(() =>
     // clicking the toggle button enables night mode (dark scheme)
-    expect(screen.getByText('night')).toHaveStyle('color: rgb(255, 255, 255)'),
+    expect(screen.getByText('night')).toHaveStyle(`color: ${fgDefaultColors.dark}`),
   )
 })
 
@@ -230,9 +127,9 @@ it('updates when dayScheme prop changes', async () => {
   function App() {
     const [dayScheme, setDayScheme] = React.useState('light')
     return (
-      <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
-        <Box color="text">{dayScheme}</Box>
-        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+      <ThemeProvider dayScheme={dayScheme}>
+        <span style={{color: 'var(--fgColor-default)'}}>{dayScheme}</span>
+        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'light_high_contrast' : 'light')}>
           Toggle
         </button>
       </ThemeProvider>
@@ -242,13 +139,13 @@ it('updates when dayScheme prop changes', async () => {
   render(<App />)
 
   // starts in day mode (light scheme)
-  expect(screen.getByText('light')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('light')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
   await user.click(screen.getByRole('button'))
 
   await waitFor(() =>
-    // clicking the toggle sets the day scheme to dark_dimmed
-    expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'),
+    // clicking the toggle sets the day scheme to light_high_contrast
+    expect(screen.getByText('light_high_contrast')).toHaveStyle(`color: ${fgDefaultColors.light_high_contrast}`),
   )
 })
 
@@ -258,8 +155,8 @@ it('updates when nightScheme prop changes', async () => {
   function App() {
     const [nightScheme, setNightScheme] = React.useState('dark')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
-        <Box color="text">{nightScheme}</Box>
+      <ThemeProvider colorMode="night" nightScheme={nightScheme}>
+        <span style={{color: 'var(--fgColor-default)'}}>{nightScheme}</span>
         <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
           Toggle
         </button>
@@ -270,13 +167,13 @@ it('updates when nightScheme prop changes', async () => {
   render(<App />)
 
   // starts in night mode (dark scheme)
-  expect(screen.getByText('dark')).toHaveStyle('color: rgb(255, 255, 255)')
+  expect(screen.getByText('dark')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 
   await user.click(screen.getByRole('button'))
 
   await waitFor(() =>
     // clicking the toggle button sets the night scheme to dark_dimmed
-    expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'),
+    expect(screen.getByText('dark_dimmed')).toHaveStyle(`color: ${fgDefaultColors.dark_dimmed}`),
   )
 })
 
@@ -286,12 +183,12 @@ it('inherits colorMode from parent', async () => {
   function App() {
     const [colorMode, setcolorMode] = React.useState<'day' | 'night'>('day')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+      <ThemeProvider colorMode={colorMode}>
         <button type="button" onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>
           Toggle
         </button>
         <ThemeProvider>
-          <Box color="text">{colorMode}</Box>
+          <span style={{color: 'var(--fgColor-default)'}}>{colorMode}</span>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -299,11 +196,11 @@ it('inherits colorMode from parent', async () => {
 
   render(<App />)
 
-  expect(screen.getByText('day')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('day')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
   await user.click(screen.getByRole('button'))
 
-  await waitFor(() => expect(screen.getByText('night')).toHaveStyle('color: rgb(255, 255, 255)'))
+  await waitFor(() => expect(screen.getByText('night')).toHaveStyle(`color: ${fgDefaultColors.dark}`))
 })
 
 it('inherits dayScheme from parent', async () => {
@@ -312,12 +209,12 @@ it('inherits dayScheme from parent', async () => {
   function App() {
     const [dayScheme, setDayScheme] = React.useState('light')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
-        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+      <ThemeProvider colorMode="night" dayScheme={dayScheme}>
+        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'light_high_contrast' : 'light')}>
           Toggle
         </button>
         <ThemeProvider colorMode="day">
-          <Box color="text">{dayScheme}</Box>
+          <span style={{color: 'var(--fgColor-default)'}}>{dayScheme}</span>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -325,11 +222,13 @@ it('inherits dayScheme from parent', async () => {
 
   render(<App />)
 
-  expect(screen.getByText('light')).toHaveStyle('color: rgb(0, 0, 0)')
+  expect(screen.getByText('light')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
   await user.click(screen.getByRole('button'))
 
-  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'))
+  await waitFor(() =>
+    expect(screen.getByText('light_high_contrast')).toHaveStyle(`color: ${fgDefaultColors.light_high_contrast}`),
+  )
 })
 
 it('inherits nightScheme from parent', async () => {
@@ -338,12 +237,12 @@ it('inherits nightScheme from parent', async () => {
   function App() {
     const [nightScheme, setNightScheme] = React.useState('dark')
     return (
-      <ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
+      <ThemeProvider colorMode="day" nightScheme={nightScheme}>
         <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
           Toggle
         </button>
         <ThemeProvider colorMode="night">
-          <Box color="text">{nightScheme}</Box>
+          <span style={{color: 'var(--fgColor-default)'}}>{nightScheme}</span>
         </ThemeProvider>
       </ThemeProvider>
     )
@@ -351,11 +250,11 @@ it('inherits nightScheme from parent', async () => {
 
   render(<App />)
 
-  expect(screen.getByText('dark')).toHaveStyle('color: rgb(255, 255, 255)')
+  expect(screen.getByText('dark')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 
   await user.click(screen.getByRole('button'))
 
-  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'))
+  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle(`color: ${fgDefaultColors.dark_dimmed}`))
 })
 
 describe('setColorMode', () => {
@@ -372,19 +271,19 @@ describe('setColorMode', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Box color="text">Hello</Box>
+      <ThemeProvider colorMode="day">
+        <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
         <ToggleMode />
       </ThemeProvider>,
     )
 
     // starts in day mode (light scheme)
-    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
     await user.click(screen.getByRole('button'))
 
     // clicking the toggle button enables night mode (dark scheme)
-    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
   })
 })
 
@@ -402,19 +301,19 @@ describe('setDayScheme', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Box color="text">Hello</Box>
+      <ThemeProvider colorMode="day">
+        <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
         <ToggleDayScheme />
       </ThemeProvider>,
     )
 
     // starts in day mode (light scheme)
-    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.light}`)
 
     await user.click(screen.getByRole('button'))
 
     // clicking the toggle button sets day scheme to dark
-    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
   })
 })
 
@@ -432,19 +331,19 @@ describe('setNightScheme', () => {
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="night">
-        <Box color="text">Hello</Box>
+      <ThemeProvider colorMode="night">
+        <span style={{color: 'var(--fgColor-default)'}}>Hello</span>
         <ToggleNightScheme />
       </ThemeProvider>,
     )
 
     // starts in night mode (dark scheme)
-    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark}`)
 
     await user.click(screen.getByRole('button'))
 
     // clicking the toggle button sets night scheme to dark_dimmed
-    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
+    expect(screen.getByText('Hello')).toHaveStyle(`color: ${fgDefaultColors.dark_dimmed}`)
   })
 })
 
@@ -471,11 +370,11 @@ describe('useColorSchemeVar', () => {
         'inherit',
       )
 
-      return <Box bg={customBg}>Hello</Box>
+      return <span style={{backgroundColor: customBg}}>Hello</span>
     }
 
     render(
-      <ThemeProvider theme={exampleTheme} nightScheme="dark_dimmed">
+      <ThemeProvider nightScheme="dark_dimmed">
         <CustomBg />
         <ToggleMode />
       </ThemeProvider>,
@@ -503,11 +402,11 @@ describe('useColorSchemeVar', () => {
     function CustomBg() {
       const customBg = useColorSchemeVar({dark: 'blue'}, 'red')
 
-      return <Box bg={customBg}>Hello</Box>
+      return <span style={{backgroundColor: customBg}}>Hello</span>
     }
 
     render(
-      <ThemeProvider theme={exampleTheme}>
+      <ThemeProvider>
         <CustomBg />
         <ToggleMode />
       </ThemeProvider>,
@@ -526,7 +425,7 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Box data-testid="text">{resolvedColorScheme}</Box>
+      return <span data-testid="text">{resolvedColorScheme}</span>
     }
 
     render(<Component />)
@@ -534,38 +433,21 @@ describe('useTheme().resolvedColorScheme', () => {
     expect(screen.getByTestId('text').textContent).toEqual('')
   })
 
-  it('is undefined when the theme has no colorScheme object', () => {
-    const Component = () => {
-      const {resolvedColorScheme} = useTheme()
-
-      return <Box data-testid="text">{resolvedColorScheme}</Box>
-    }
-
-    render(
-      <ThemeProvider theme={{color: 'red'}}>
-        <Component />
-      </ThemeProvider>,
-    )
-
-    expect(screen.getByTestId('text').textContent).toEqual('')
-  })
-
   it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Box data-testid="text">{resolvedColorScheme}</Box>
+      return <span data-testid="text">{resolvedColorScheme}</span>
     }
 
     const schemeToApply = 'dark'
 
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+      <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
         <Component />
       </ThemeProvider>,
     )
 
-    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
     expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
   })
 
@@ -574,22 +456,21 @@ describe('useTheme().resolvedColorScheme', () => {
     const Component = () => {
       const {resolvedColorScheme} = useTheme()
 
-      return <Box data-testid="text">{resolvedColorScheme}</Box>
+      return <span data-testid="text">{resolvedColorScheme}</span>
     }
 
     const schemeToApply = 'totally-invalid-colorscheme'
     render(
-      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+      <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
         <Component />
       </ThemeProvider>,
     )
 
-    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+    const defaultThemeColorScheme = 'light'
 
     expect(spy).toHaveBeenCalledWith('`totally-invalid-colorscheme` scheme not defined in `theme.colorSchemes`')
     expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
-    expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
-    expect(screen.getByTestId('text').textContent).toEqual('light')
+    expect(screen.getByTestId('text').textContent).toEqual(defaultThemeColorScheme)
 
     spy.mockRestore()
   })
@@ -599,20 +480,19 @@ describe('useTheme().resolvedColorScheme', () => {
       const Component = () => {
         const {resolvedColorScheme} = useTheme()
 
-        return <Box data-testid="text">{resolvedColorScheme}</Box>
+        return <span data-testid="text">{resolvedColorScheme}</span>
       }
 
       const schemeToApply = 'dark'
 
       render(
-        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
           <ThemeProvider>
             <Component />
           </ThemeProvider>
         </ThemeProvider>,
       )
 
-      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
       expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
     })
 
@@ -622,24 +502,23 @@ describe('useTheme().resolvedColorScheme', () => {
       const Component = () => {
         const {resolvedColorScheme} = useTheme()
 
-        return <Box data-testid="text">{resolvedColorScheme}</Box>
+        return <span data-testid="text">{resolvedColorScheme}</span>
       }
 
       const schemeToApply = 'totally-invalid-colorscheme'
       render(
-        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
           <ThemeProvider>
             <Component />
           </ThemeProvider>
         </ThemeProvider>,
       )
 
-      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+      const defaultThemeColorScheme = 'light'
 
       expect(spy).toHaveBeenCalledWith('`totally-invalid-colorscheme` scheme not defined in `theme.colorSchemes`')
       expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
-      expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
-      expect(screen.getByTestId('text').textContent).toEqual('light')
+      expect(screen.getByTestId('text').textContent).toEqual(defaultThemeColorScheme)
 
       spy.mockRestore()
     })
diff --git a/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
index 8de8a4e7ff8..4ba921e051b 100644
--- a/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/BaseStyles.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`BaseStyles > has default styles 1`] = `
 <div>
   <div
     class="prc-src-BaseStyles-9LBd2"
-    data-color-mode="light"
     data-portal-root="true"
   >
     Hello
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 5b656c8071e..db884036c2a 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -181,7 +181,6 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type TextProps",
   "theme",
   "ThemeColorPaths",
-  "themeGet",
   "ThemeProvider",
   "type ThemeProviderProps",
   "ThemeShadowPaths",
diff --git a/packages/react/src/__tests__/deprecated/ActionMenu.test.tsx b/packages/react/src/__tests__/deprecated/ActionMenu.test.tsx
index 52f31c74760..cf4ff0ea444 100644
--- a/packages/react/src/__tests__/deprecated/ActionMenu.test.tsx
+++ b/packages/react/src/__tests__/deprecated/ActionMenu.test.tsx
@@ -1,7 +1,7 @@
 import {describe, expect, it, vi, afterEach} from 'vitest'
 import {render as HTMLRender, fireEvent} from '@testing-library/react'
+import BaseStyles from '../../BaseStyles'
 import {ActionMenu} from '../../deprecated'
-import {BaseStyles} from '../..'
 import type {ItemProps} from '../../deprecated/ActionList/Item'
 
 const items = [
diff --git a/packages/react/src/constants.ts b/packages/react/src/constants.ts
deleted file mode 100644
index 998111c4953..00000000000
--- a/packages/react/src/constants.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {themeGet} from '@styled-system/theme-get'
-// eslint-disable-next-line import/no-namespace
-import * as styledSystem from 'styled-system'
-import theme from './theme'
-
-const {get: getKey, compose, system} = styledSystem
-
-export const get = (key: string) => themeGet(key, getKey(theme, key))
-
-// Common props
-
-export const COMMON = compose(styledSystem.space, styledSystem.color, styledSystem.display)
-
-export interface SystemCommonProps
-  extends styledSystem.ColorProps,
-    styledSystem.SpaceProps,
-    styledSystem.DisplayProps {}
-
-// Typography props
-
-const whiteSpace = system({
-  whiteSpace: {
-    property: 'whiteSpace',
-    // cssProperty: 'whiteSpace',
-  },
-})
-
-export const TYPOGRAPHY = compose(styledSystem.typography, whiteSpace)
-
-export interface SystemTypographyProps extends styledSystem.TypographyProps {
-  whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line'
-}
-
-// Border props
-
-export const BORDER = compose(styledSystem.border, styledSystem.shadow)
-
-export interface SystemBorderProps extends styledSystem.BorderProps, styledSystem.ShadowProps {}
-
-// Layout props
-
-export const LAYOUT = styledSystem.layout
-
-export type SystemLayoutProps = styledSystem.LayoutProps
diff --git a/packages/react/src/deprecated/ActionList/Item.tsx b/packages/react/src/deprecated/ActionList/Item.tsx
index 0b4a1ed7816..26af27b9b78 100644
--- a/packages/react/src/deprecated/ActionList/Item.tsx
+++ b/packages/react/src/deprecated/ActionList/Item.tsx
@@ -3,7 +3,6 @@ import React, {useCallback} from 'react'
 import {isValidElementType} from 'react-is'
 import Truncate from '../../Truncate'
 import type {ItemInput} from './List'
-import {useTheme} from '../../ThemeProvider'
 import {useId} from '../../hooks/useId'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic'
 import type {AriaRole} from '../../utils/types'
@@ -171,8 +170,6 @@ export const Item = React.forwardRef((itemProps, ref) => {
     [onAction, disabled, itemProps, onClick],
   )
 
-  const {theme} = useTheme()
-
   return (
     <Component
       ref={ref}
@@ -215,7 +212,7 @@ export const Item = React.forwardRef((itemProps, ref) => {
               </svg>
             </>
           ) : (
-            selected && <CheckIcon fill={theme?.colors.fg.default} />
+            selected && <CheckIcon fill="var(--fgColor-default)" />
           )}
         </div>
       )}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index f443dc8f56e..06e6951cc60 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,7 +1,6 @@
 'use client'
 
 export {default as theme, type ThemeColorPaths, type ThemeShadowPaths} from './theme'
-export {get as themeGet} from './constants'
 export {default as BaseStyles} from './BaseStyles'
 export type {BaseStylesProps} from './BaseStyles'
 export {default as ThemeProvider, useTheme, useColorSchemeVar} from './ThemeProvider'
diff --git a/packages/react/src/stories/ThemeProvider.stories.tsx b/packages/react/src/stories/ThemeProvider.stories.tsx
index 3ebe8ce3170..ddc912cf94f 100644
--- a/packages/react/src/stories/ThemeProvider.stories.tsx
+++ b/packages/react/src/stories/ThemeProvider.stories.tsx
@@ -1,7 +1,7 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 
-import {ThemeProvider, BaseStyles, useTheme} from '..'
-import type {ThemeProviderProps} from '../ThemeProvider'
+import {ThemeProvider, type ThemeProviderProps, useTheme} from '../ThemeProvider'
+import BaseStyles from '../BaseStyles'
 import classes from './ThemeProviderStories.module.css'
 
 export default {
diff --git a/packages/react/src/sx.ts b/packages/react/src/sx.ts
deleted file mode 100644
index ec5bc63738a..00000000000
--- a/packages/react/src/sx.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
-import css from '@styled-system/css'
-import type {ThemeColorPaths, ThemeShadowPaths} from './theme'
-import type {ColorProps, BorderColorProps, ShadowProps} from 'styled-system'
-
-export type BetterCssProperties = {
-  [K in keyof SystemCssProperties]: K extends keyof ColorProps
-    ? ThemeColorPaths | SystemCssProperties[K]
-    : K extends keyof BorderColorProps
-      ? ThemeColorPaths | SystemCssProperties[K]
-      : K extends keyof ShadowProps
-        ? ThemeShadowPaths | SystemCssProperties[K]
-        : SystemCssProperties[K]
-}
-
-// Support CSS custom properties in the `sx` prop
-export type CSSCustomProperties = {
-  [key: `--${string}`]: string | number
-}
-
-type CSSSelectorObject = {
-  [cssSelector: string]: SystemStyleObject | CSSCustomProperties
-}
-
-export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject
-
-export interface SxProp {
-  /**
-   * @deprecated The `sx` prop is deprecated. Replace with a `div` or
-   * appropriate HTML element instead, with a CSS class for styling.
-   * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
-   * */
-  sx?: BetterSystemStyleObject
-}
-
-const sx = (props: SxProp) => css(props.sx)
-
-export default sx
diff --git a/packages/react/src/utils/layout.ts b/packages/react/src/utils/layout.ts
deleted file mode 100644
index 368a9179e7e..00000000000
--- a/packages/react/src/utils/layout.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import theme from '../theme'
-
-// TODO: Update the hard-coded values when the primitives are ready
-export const PrimerBreakpoints = {
-  xsmall: {
-    width: '320px',
-  },
-  small: {
-    width: theme.breakpoints[0],
-  },
-  medium: {
-    width: theme.breakpoints[1],
-  },
-  large: {
-    width: theme.breakpoints[2],
-  },
-  xlarge: {
-    width: theme.breakpoints[3],
-  },
-  xxlarge: {
-    width: '1400px',
-  },
-}
diff --git a/packages/styled-react/package.json b/packages/styled-react/package.json
index b495a6643a4..3154d305cbc 100644
--- a/packages/styled-react/package.json
+++ b/packages/styled-react/package.json
@@ -27,6 +27,15 @@
     "lint:npm": "publint --types",
     "type-check": "tsc --noEmit"
   },
+  "dependencies": {
+    "@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",
+    "styled-system": "^5.1.5"
+  },
   "devDependencies": {
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
@@ -34,6 +43,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
+    "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.3.3",
     "babel-plugin-styled-components": "2.1.4",
     "publint": "^0.3.12",
diff --git a/packages/react/src/Box/Box.test.tsx b/packages/styled-react/src/__tests__/Box.browser.test.tsx
similarity index 97%
rename from packages/react/src/Box/Box.test.tsx
rename to packages/styled-react/src/__tests__/Box.browser.test.tsx
index bc7477787dd..86fc4e1d2f4 100644
--- a/packages/react/src/Box/Box.test.tsx
+++ b/packages/styled-react/src/__tests__/Box.browser.test.tsx
@@ -1,7 +1,8 @@
 import {render, screen} from '@testing-library/react'
 import {describe, expect, it} from 'vitest'
-import Box from '../Box'
-import theme from '../theme'
+import React from 'react'
+import Box from '../components/Box'
+import {theme} from '@primer/react'
 
 const breakpoints = [
   null,
diff --git a/packages/react/src/__tests__/themeGet.test.ts b/packages/styled-react/src/__tests__/ThemeGet.browser.test.ts
similarity index 90%
rename from packages/react/src/__tests__/themeGet.test.ts
rename to packages/styled-react/src/__tests__/ThemeGet.browser.test.ts
index 1801b92c74a..e7c8e9c66cc 100644
--- a/packages/react/src/__tests__/themeGet.test.ts
+++ b/packages/styled-react/src/__tests__/ThemeGet.browser.test.ts
@@ -1,5 +1,5 @@
 import {describe, expect, it} from 'vitest'
-import {get as themeGet} from '../constants'
+import {themeGet} from '..'
 
 describe('themeGet', () => {
   it('accepts theme prop', () => {
diff --git a/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx b/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx
new file mode 100644
index 00000000000..afb82cab2dd
--- /dev/null
+++ b/packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx
@@ -0,0 +1,707 @@
+import {render, screen, waitFor} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {describe, expect, it, vi} from 'vitest'
+import React from 'react'
+import {FeatureFlags} from '@primer/react/experimental'
+import {ThemeProvider, useColorSchemeVar, useTheme, Box} from '../'
+
+// window.matchMedia() is not implemented by JSDOM so we have to create a mock:
+// https://vijs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+const exampleTheme = {
+  colors: {
+    text: '#f00',
+  },
+  colorSchemes: {
+    light: {
+      colors: {
+        text: 'black',
+      },
+    },
+    dark: {
+      colors: {
+        text: 'white',
+      },
+    },
+    dark_dimmed: {
+      colors: {
+        text: 'gray',
+      },
+    },
+  },
+}
+
+it('respects theme prop', () => {
+  const theme = {
+    colors: {
+      text: '#f00',
+    },
+    space: ['0', '0.25rem'],
+  }
+
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={theme}>
+        <Box color="text" mb={1}>
+          Hello
+        </Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: #f00')
+  expect(screen.getByText('Hello')).toHaveStyle('margin-bottom: 4px')
+})
+
+it('has default theme', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider>
+        <Box color="fg.default" mb={1}>
+          Hello
+        </Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toMatchSnapshot()
+})
+
+it('inherits theme from parent', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme}>
+        <ThemeProvider>
+          <Box color="text">Hello</Box>
+        </ThemeProvider>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+})
+
+it('defaults to light color scheme', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme}>
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+})
+
+it('defaults to dark color scheme in night mode', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="night">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+})
+
+it('defaults to first color scheme when passed an invalid color scheme name', () => {
+  const spy = vi.spyOn(console, 'error').mockImplementationOnce(() => {})
+
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} dayScheme="foo">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(spy).toHaveBeenCalledWith('`foo` scheme not defined in `theme.colorSchemes`')
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  spy.mockRestore()
+})
+
+it('respects nightScheme prop', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
+})
+
+it('respects nightScheme prop with colorMode="dark"', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="dark" nightScheme="dark_dimmed">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
+})
+
+it('respects dayScheme prop', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+})
+
+it('respects dayScheme prop with colorMode="light"', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="light" dayScheme="dark" nightScheme="dark_dimmed">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+})
+
+it('works in auto mode', () => {
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="auto">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+})
+
+it('works in auto mode (dark)', () => {
+  const matchMediaSpy = vi.spyOn(window, 'matchMedia').mockImplementation(query => ({
+    matches: true, // enable dark mode
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }))
+
+  render(
+    <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+      <ThemeProvider theme={exampleTheme} colorMode="auto">
+        <Box color="text">Hello</Box>
+      </ThemeProvider>
+    </FeatureFlags>,
+  )
+
+  expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+
+  matchMediaSpy.mockRestore()
+})
+
+it('updates when colorMode prop changes', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+          <Box color="text">{colorMode}</Box>
+          <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+            Toggle
+          </button>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  // starts in day mode (light scheme)
+  expect(screen.getByText('day')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() =>
+    // clicking the toggle button enables night mode (dark scheme)
+    expect(screen.getByText('night')).toHaveStyle('color: rgb(255, 255, 255)'),
+  )
+})
+
+it('updates when dayScheme prop changes', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [dayScheme, setDayScheme] = React.useState('light')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
+          <Box color="text">{dayScheme}</Box>
+          <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+            Toggle
+          </button>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  // starts in day mode (light scheme)
+  expect(screen.getByText('light')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() =>
+    // clicking the toggle sets the day scheme to dark_dimmed
+    expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'),
+  )
+})
+
+it('updates when nightScheme prop changes', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [nightScheme, setNightScheme] = React.useState('dark')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
+          <Box color="text">{nightScheme}</Box>
+          <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
+            Toggle
+          </button>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  // starts in night mode (dark scheme)
+  expect(screen.getByText('dark')).toHaveStyle('color: rgb(255, 255, 255)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() =>
+    // clicking the toggle button sets the night scheme to dark_dimmed
+    expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'),
+  )
+})
+
+it('inherits colorMode from parent', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [colorMode, setcolorMode] = React.useState<'day' | 'night'>('day')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+          <button type="button" onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>
+            Toggle
+          </button>
+          <ThemeProvider>
+            <Box color="text">{colorMode}</Box>
+          </ThemeProvider>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  expect(screen.getByText('day')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() => expect(screen.getByText('night')).toHaveStyle('color: rgb(255, 255, 255)'))
+})
+
+it('inherits dayScheme from parent', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [dayScheme, setDayScheme] = React.useState('light')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
+          <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+            Toggle
+          </button>
+          <ThemeProvider colorMode="day">
+            <Box color="text">{dayScheme}</Box>
+          </ThemeProvider>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  expect(screen.getByText('light')).toHaveStyle('color: rgb(0, 0, 0)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'))
+})
+
+it('inherits nightScheme from parent', async () => {
+  const user = userEvent.setup()
+
+  function App() {
+    const [nightScheme, setNightScheme] = React.useState('dark')
+    return (
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
+          <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
+            Toggle
+          </button>
+          <ThemeProvider colorMode="night">
+            <Box color="text">{nightScheme}</Box>
+          </ThemeProvider>
+        </ThemeProvider>
+      </FeatureFlags>
+    )
+  }
+
+  render(<App />)
+
+  expect(screen.getByText('dark')).toHaveStyle('color: rgb(255, 255, 255)')
+
+  await user.click(screen.getByRole('button'))
+
+  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyle('color: rgb(128, 128, 128)'))
+})
+
+describe('setColorMode', () => {
+  it('changes the color mode', async () => {
+    const user = userEvent.setup()
+
+    function ToggleMode() {
+      const {colorMode, setColorMode} = useTheme()
+      return (
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
+      )
+    }
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day">
+          <Box color="text">Hello</Box>
+          <ToggleMode />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    // starts in day mode (light scheme)
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+
+    await user.click(screen.getByRole('button'))
+
+    // clicking the toggle button enables night mode (dark scheme)
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+  })
+})
+
+describe('setDayScheme', () => {
+  it('changes the day scheme', async () => {
+    const user = userEvent.setup()
+
+    function ToggleDayScheme() {
+      const {dayScheme, setDayScheme} = useTheme()
+      return (
+        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>
+          Toggle
+        </button>
+      )
+    }
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day">
+          <Box color="text">Hello</Box>
+          <ToggleDayScheme />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    // starts in day mode (light scheme)
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(0, 0, 0)')
+
+    await user.click(screen.getByRole('button'))
+
+    // clicking the toggle button sets day scheme to dark
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+  })
+})
+
+describe('setNightScheme', () => {
+  it('changes the night scheme', async () => {
+    const user = userEvent.setup()
+
+    function ToggleNightScheme() {
+      const {nightScheme, setNightScheme} = useTheme()
+      return (
+        <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
+          Toggle
+        </button>
+      )
+    }
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="night">
+          <Box color="text">Hello</Box>
+          <ToggleNightScheme />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    // starts in night mode (dark scheme)
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(255, 255, 255)')
+
+    await user.click(screen.getByRole('button'))
+
+    // clicking the toggle button sets night scheme to dark_dimmed
+    expect(screen.getByText('Hello')).toHaveStyle('color: rgb(128, 128, 128)')
+  })
+})
+
+describe('useColorSchemeVar', () => {
+  it('updates value when scheme changes', async () => {
+    const user = userEvent.setup()
+
+    function ToggleMode() {
+      const {colorMode, setColorMode} = useTheme()
+      return (
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
+      )
+    }
+
+    function CustomBg() {
+      const customBg = useColorSchemeVar(
+        {
+          light: 'red',
+          dark: 'blue',
+          dark_dimmed: 'green',
+        },
+        'inherit',
+      )
+
+      return <Box bg={customBg}>Hello</Box>
+    }
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} nightScheme="dark_dimmed">
+          <CustomBg />
+          <ToggleMode />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(255, 0, 0)')
+
+    await user.click(screen.getByRole('button'))
+
+    expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(0, 128, 0)')
+  })
+
+  it('supports fallback value', async () => {
+    const user = userEvent.setup()
+
+    function ToggleMode() {
+      const {colorMode, setColorMode} = useTheme()
+      return (
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
+      )
+    }
+
+    function CustomBg() {
+      const customBg = useColorSchemeVar({dark: 'blue'}, 'red')
+
+      return <Box bg={customBg}>Hello</Box>
+    }
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme}>
+          <CustomBg />
+          <ToggleMode />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(255, 0, 0)')
+
+    await user.click(screen.getByRole('button'))
+
+    expect(screen.getByText('Hello')).toHaveStyle('background-color: rgb(0, 0, 255)')
+  })
+})
+
+describe('useTheme().resolvedColorScheme', () => {
+  it('is undefined when not in a theme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
+    }
+
+    render(<Component />)
+
+    expect(screen.getByTestId('text').textContent).toEqual('')
+  })
+
+  it('is undefined when the theme has no colorScheme object', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
+    }
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={{color: 'red'}}>
+          <Component />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    expect(screen.getByTestId('text').textContent).toEqual('')
+  })
+
+  it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
+    }
+
+    const schemeToApply = 'dark'
+
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <Component />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
+    expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
+  })
+
+  it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementationOnce(() => {})
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Box data-testid="text">{resolvedColorScheme}</Box>
+    }
+
+    const schemeToApply = 'totally-invalid-colorscheme'
+    render(
+      <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <Component />
+        </ThemeProvider>
+      </FeatureFlags>,
+    )
+
+    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+
+    expect(spy).toHaveBeenCalledWith('`totally-invalid-colorscheme` scheme not defined in `theme.colorSchemes`')
+    expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
+    expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
+    expect(screen.getByTestId('text').textContent).toEqual('light')
+
+    spy.mockRestore()
+  })
+
+  describe('nested theme', () => {
+    it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+      const Component = () => {
+        const {resolvedColorScheme} = useTheme()
+
+        return <Box data-testid="text">{resolvedColorScheme}</Box>
+      }
+
+      const schemeToApply = 'dark'
+
+      render(
+        <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+          <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+            <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+              <ThemeProvider>
+                <Component />
+              </ThemeProvider>
+            </FeatureFlags>
+          </ThemeProvider>
+        </FeatureFlags>,
+      )
+
+      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
+      expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
+    })
+
+    it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+      const Component = () => {
+        const {resolvedColorScheme} = useTheme()
+
+        return <Box data-testid="text">{resolvedColorScheme}</Box>
+      }
+
+      const schemeToApply = 'totally-invalid-colorscheme'
+      render(
+        <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+          <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+            <FeatureFlags flags={{primer_react_use_styled_react_theming: true}}>
+              <ThemeProvider>
+                <Component />
+              </ThemeProvider>
+            </FeatureFlags>
+          </ThemeProvider>
+        </FeatureFlags>,
+      )
+
+      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+
+      expect(spy).toHaveBeenCalledWith('`totally-invalid-colorscheme` scheme not defined in `theme.colorSchemes`')
+      expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
+      expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
+      expect(screen.getByTestId('text').textContent).toEqual('light')
+
+      spy.mockRestore()
+    })
+  })
+})
diff --git a/packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/packages/styled-react/src/__tests__/__snapshots__/ThemeProvider.browser.test.tsx.snap
similarity index 100%
rename from packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
rename to packages/styled-react/src/__tests__/__snapshots__/ThemeProvider.browser.test.tsx.snap
diff --git a/packages/styled-react/src/components/FeatureFlaggedTheming.tsx b/packages/styled-react/src/components/FeatureFlaggedTheming.tsx
deleted file mode 100644
index 93a9896cf1e..00000000000
--- a/packages/styled-react/src/components/FeatureFlaggedTheming.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
-  ThemeProvider as PrimerReactThemeProvider,
-  BaseStyles as PrimerReactBaseStyles,
-  useTheme as primerReactUseTheme,
-  useColorSchemeVar as primerReactUseColorSchemeVar,
-} from '@primer/react'
-import {
-  ThemeProvider as StyledReactThemeProvider,
-  useTheme as styledReactUseTheme,
-  useColorSchemeVar as styledReactUseColorSchemeVar,
-  type ThemeProviderProps,
-} from './ThemeProvider'
-import {BaseStyles as StyledReactBaseStyles, type BaseStylesProps} from './BaseStyles'
-import {useFeatureFlag} from '@primer/react/experimental'
-
-export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({children, ...props}) => {
-  const enabled = useFeatureFlag('primer_react_use_styled_react_theming')
-  if (enabled) {
-    return <StyledReactThemeProvider {...props}>{children}</StyledReactThemeProvider>
-  } else {
-    return <PrimerReactThemeProvider {...props}>{children}</PrimerReactThemeProvider>
-  }
-}
-
-export const BaseStyles: React.FC<React.PropsWithChildren<BaseStylesProps>> = ({children, ...props}) => {
-  const enabled = useFeatureFlag('primer_react_use_styled_react_theming')
-  if (enabled) {
-    return <StyledReactBaseStyles {...props}>{children}</StyledReactBaseStyles>
-  } else {
-    return <PrimerReactBaseStyles {...props}>{children}</PrimerReactBaseStyles>
-  }
-}
-
-export const useTheme: typeof primerReactUseTheme = () => {
-  const enabled = useFeatureFlag('primer_react_use_styled_react_theming')
-  const styledReactResults = styledReactUseTheme()
-  const primerReactResults = primerReactUseTheme()
-
-  return enabled ? styledReactResults : primerReactResults
-}
-
-export const useColorSchemeVar: typeof primerReactUseColorSchemeVar = (values, fallback) => {
-  const enabled = useFeatureFlag('primer_react_use_styled_react_theming')
-  const styledReactResults = styledReactUseColorSchemeVar(values, fallback)
-  const primerReactResults = primerReactUseColorSchemeVar(values, fallback)
-
-  return enabled ? styledReactResults : primerReactResults
-}
-
-export type {ThemeProviderProps, BaseStylesProps}
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
index 3862cde433a..8ad05a739a0 100644
--- a/packages/styled-react/src/index.tsx
+++ b/packages/styled-react/src/index.tsx
@@ -5,16 +5,11 @@ export {Details} from '@primer/react'
 export {ProgressBar} from '@primer/react'
 
 // theming depends on styled-components
-export {
-  ThemeProvider,
-  useTheme,
-  useColorSchemeVar,
-  BaseStyles,
-  type ThemeProviderProps,
-  type BaseStylesProps,
-} from './components/FeatureFlaggedTheming'
+export {ThemeProvider, useTheme, useColorSchemeVar, type ThemeProviderProps} from './components/ThemeProvider'
+export {BaseStyles, type BaseStylesProps} from './components/BaseStyles'
 export {theme} from '@primer/react'
-export {themeGet} from '@primer/react'
+
+export {get as themeGet} from './theme-get'
 
 export {
   ActionList,
diff --git a/packages/styled-react/src/theme-get.ts b/packages/styled-react/src/theme-get.ts
new file mode 100644
index 00000000000..aa7b52ca185
--- /dev/null
+++ b/packages/styled-react/src/theme-get.ts
@@ -0,0 +1,8 @@
+import {themeGet} from '@styled-system/theme-get'
+// eslint-disable-next-line import/no-namespace
+import * as styledSystem from 'styled-system'
+import {theme} from '@primer/react'
+
+const {get: getKey} = styledSystem
+
+export const get = (key: string) => themeGet(key, getKey(theme, key))