Add next ThemeProvider without legacy JS theming

[mattcosta7]

Closes #

This PR adds a CSS-variable-based ThemeProvider at @primer/react/next so consumers can opt out of the large legacy JavaScript colorSchemes payload before the next major release. The root ThemeProvider keeps its existing behavior for compatibility and is deprecated in favor of the new entrypoint.

The two providers share one ThemeContext, useTheme, and internal state/rendering implementation. This supports incremental migration and mixed nesting while keeping deepmerge, the default JavaScript theme, and legacy color-scheme data out of the /next runtime graph.

@primer/styled-react now owns active generation of the legacy colorSchemes data it still requires. @primer/react retains a frozen compatibility snapshot for the deprecated root provider.

No visual change is expected. Both providers continue applying color schemes through the existing data-color-mode, data-light-theme, and data-dark-theme attributes.

Changelog

New

• Export a CSS-variable-based ThemeProvider from @primer/react/next.
• Export the shared useTheme and useColorSchemeVar hooks from @primer/react/next.

Changed

• Deprecate the root ThemeProvider in favor of @primer/react/next while preserving its legacy JavaScript theme behavior.
• Deprecate the theme and resolvedColorScheme properties returned by useTheme.
• Keep root and /next providers interoperable through a shared context and hook.
• Vendor active legacy theme generation into @primer/styled-react.

Removed

• No consumer-facing APIs are removed in this release.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Consumers can migrate incrementally:

-import {ThemeProvider} from '@primer/react'
+import {ThemeProvider} from '@primer/react/next'

Existing useTheme imports remain compatible because both providers share the same context. Consumers of the legacy theme and resolvedColorScheme values should migrate away from those properties before switching providers.

A future major release can promote the /next provider to the root entrypoint and remove the deprecated JavaScript theme payload.

Testing & Reviewing

• Full ESLint and CSS lint
• Prettier formatting check
• Classname coverage check
• Full TypeScript validation: 15/15 tasks
• Full unit suite: 2,596 tests passed
• Full repository build: 5/5 tasks
• @primer/react package build and publint
• Verified emitted /next runtime modules do not import deepmerge, theme, colorSchemes, or legacy theme data

[changeset-bot]

🦋 Changeset detected

Latest commit: 202dfdb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Minor
@primer/styled-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

[primer]

🤖 Lint and formatting issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[Copilot]

Pull request overview

This PR removes the legacy JS theme.colorSchemes payload from @primer/react and shifts the remaining legacy “JS theme” surface area into @primer/styled-react, while keeping color application CSS-driven via data-* attributes and CSS variables.

Changes:

• @primer/react: stop merging colorSchemes into ThemeProvider context; remove theme/resolvedColorScheme from useTheme() and drop related exported path types.
• @primer/styled-react: introduce a new default theme that re-attaches legacy colorSchemes, update themeGet/sx typing imports, and vendor legacy theme data.
• Add a precompile step in @primer/styled-react to generate legacy-theme/ts/color-schemes.ts during build, plus changesets and packaging updates.

Show a summary per file

File	Description
packages/styled-react/tsconfig.json	Include build-time scripts in TS project.
packages/styled-react/src/theme.ts	New styled-react default theme extending @primer/react base theme with colorSchemes.
packages/styled-react/src/theme-types.ts	New local ThemeColorPaths/ThemeShadowPaths types for styled-react.
packages/styled-react/src/theme-get.ts	Point themeGet at styled-react’s theme (with legacy colorSchemes).
packages/styled-react/src/sx.ts	Import Theme*Paths types from styled-react instead of @primer/react.
packages/styled-react/src/legacy-theme/ts/index.ts	New legacy-theme entry export(s).
packages/styled-react/src/legacy-theme/ts/color-schemes.ts	Generated vendored colorSchemes output for styled-react.
packages/styled-react/src/legacy-theme/ts/colors/index.ts	New scheme map aggregating per-scheme variables.
packages/styled-react/src/legacy-theme/ts/colors/light.ts	Vendored light scheme variables.
packages/styled-react/src/legacy-theme/ts/colors/light_high_contrast.ts	Vendored light high-contrast scheme variables.
packages/styled-react/src/legacy-theme/ts/colors/light_colorblind.ts	Vendored light colorblind scheme variables.
packages/styled-react/src/legacy-theme/ts/colors/light_tritanopia.ts	Vendored light tritanopia scheme variables.
packages/styled-react/src/legacy-theme/ts/colors/dark.ts	Vendored dark scheme variables.
packages/styled-react/src/legacy-theme/ts/colors/dark_dimmed.ts	Vendored dark dimmed scheme variables.
packages/styled-react/src/legacy-theme/ts/colors/dark_high_contrast.ts	Vendored dark high-contrast scheme variables.
packages/styled-react/src/legacy-theme/ts/colors/dark_colorblind.ts	Vendored dark colorblind scheme variables.
packages/styled-react/src/legacy-theme/ts/colors/dark_tritanopia.ts	Vendored dark tritanopia scheme variables.
packages/styled-react/src/legacy-theme/README.md	Documents the vendored legacy theme intent/source.
packages/styled-react/src/index.tsx	Re-export theme from styled-react (instead of @primer/react).
packages/styled-react/src/components/useFeatureFlaggedTheme.ts	Align feature-flagged useTheme typing with styled-react path.
packages/styled-react/src/components/ThemeProvider.tsx	Use styled-react theme as default (restoring colorSchemes behavior).
packages/styled-react/script/precompile-color-schemes.ts	New generator script for colorSchemes in styled-react.
packages/styled-react/script/build	Run precompile step before bundling.
packages/styled-react/package.json	Add precompile script + tsx devDep; adjust published files excludes.
packages/react/src/utils/useTheme.hookDocs.json	Remove theme and resolvedColorScheme from generated hook docs.
packages/react/src/ThemeProvider.tsx	Remove JS scheme merging; keep CSS data-*-driven theming only.
packages/react/src/ThemeContext.ts	Remove theme and resolvedColorScheme from context typing.
packages/react/src/theme.ts	Remove colorSchemes field and Theme*Paths exports from default theme module.
packages/react/src/index.ts	Stop exporting ThemeColorPaths/ThemeShadowPaths from @primer/react.
packages/react/src/tests/ThemeProvider.test.tsx	Remove tests for resolvedColorScheme behavior.
packages/react/src/tests/snapshots/exports.test.ts.snap	Update export snapshot to reflect removed types.
packages/react/script/precompile-color-schemes.ts	Remove generator script from @primer/react.
packages/react/script/build	Stop running colorSchemes precompile as part of react build.
packages/react/package.json	Remove deepmerge + precompile script + legacy-theme packaging exclude.
package-lock.json	Move tsx dependency usage to styled-react; remove unused react-node_modules entries.
.prettierignore	Ignore generated styled-react color-schemes.ts instead of react’s.
.changeset/styled-react-vendor-color-schemes.md	Styled-react patch changeset for vendored legacy colorSchemes.
.changeset/remove-theme-color-schemes.md	React major changeset for removing legacy JS theming surfaces.

Review details

• Files reviewed: 24/38 changed files
• Comments generated: 0
• Review effort level: Low

[mattcosta7]

vrt seems unrelated to schemes - maybe a flake or font loading?

[siddharthkp]

Approving because you seem confident

[mattcosta7]

Approving because you seem confident

I'm not sure when the next major release is planned (or if this is a good time to push for it - so happy to keep this parked until then too - no rush to land it)

[siddharthkp]

I'm not sure when the next major release is planned

We're hoping to cut one after the API consistency project https://github.com/github/primer/issues/6761, so in a couple months probably

[mattcosta7]

I'm not sure when the next major release is planned

We're hoping to cut one after the API consistency project github/primer#6761, so in a couple months probably

@siddharthkp - would we be able to ship this with some additional guardrails?

we could keep the old ThemeProvider as is, and then ship a 'new' version that has the slimmer codepaths? That would also allow us to start marking 'deprecated' now and make the future migration a bit smoother?

I pushed that, which also makes a no-op for updates, and we can slow opt-in

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer-integration]

Integration test results from github/github-ui PR:

  CI Passed
  VRT Running
  Projects Waiting