Add next ThemeProvider without legacy JS theming - #8212
Merged
Conversation
Relocate colorSchemes and legacy-theme into @primer/styled-react, thin down ThemeProvider, and drop vestigial theme/resolvedColorScheme from useTheme().
🦋 Changeset detectedLatest commit: 6d1ee52 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
Contributor
|
github-actions
Bot
added
the
integration-tests: recommended
Contributor
|
🤖 Lint and formatting issues have been automatically fixed and committed to this PR. |
Contributor
|
🤖 Lint issues have been automatically fixed and committed to this PR. |
…urn type - Add script/**/*.ts to styled-react tsconfig so the moved precompile script resolves in the TS project (fixes eslint parse error).\n- Point .prettierignore at the relocated color-schemes.ts (prevents prettier from unquoting keys, which tripped camelcase).\n- Type the feature-flagged useTheme() with styled-react's own richer context so resolvedColorScheme/theme remain on styled-react's public API.
The generated file is now in .prettierignore; keep its quoted keys so the camelcase rule stays satisfied.
mattcosta7
added
the
Canary Release
Contributor
There was a problem hiding this comment.
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 mergingcolorSchemesinto ThemeProvider context; removetheme/resolvedColorSchemefromuseTheme()and drop related exported path types.@primer/styled-react: introduce a new defaultthemethat re-attaches legacycolorSchemes, updatethemeGet/sxtyping imports, and vendor legacy theme data.- Add a precompile step in
@primer/styled-reactto generatelegacy-theme/ts/color-schemes.tsduring 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
Contributor
Author
|
vrt seems unrelated to schemes - maybe a flake or font loading? |
jonrohan
approved these changes
Jul 22, 2026
Contributor
|
🤖 Lint issues have been automatically fixed and committed to this PR. |
mattcosta7
changed the title
Contributor
Author
|
VRT seems related to expected changes from - #8271 |
jonrohan
approved these changes
Aug 6, 2026
|
mattcosta7
enabled auto-merge
August 10, 2026 17:08
mattcosta7
added
integration-tests: skipped manually
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #
This PR adds a CSS-variable-based
ThemeProviderat@primer/react/nextso consumers can opt out of the large legacy JavaScriptcolorSchemespayload before the next major release. The rootThemeProviderkeeps 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 keepingdeepmerge, the default JavaScript theme, and legacy color-scheme data out of the/nextruntime graph.@primer/styled-reactnow owns active generation of the legacycolorSchemesdata it still requires.@primer/reactretains 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, anddata-dark-themeattributes.Changelog
New
ThemeProviderfrom@primer/react/next.useThemeanduseColorSchemeVarhooks from@primer/react/next.Changed
ThemeProviderin favor of@primer/react/nextwhile preserving its legacy JavaScript theme behavior.themeandresolvedColorSchemeproperties returned byuseTheme./nextproviders interoperable through a shared context and hook.@primer/styled-react.Removed
Rollout strategy
Consumers can migrate incrementally:
Existing
useThemeimports remain compatible because both providers share the same context. Consumers of the legacythemeandresolvedColorSchemevalues should migrate away from those properties before switching providers.A future major release can promote the
/nextprovider to the root entrypoint and remove the deprecated JavaScript theme payload.Testing & Reviewing
@primer/reactpackage build andpublint/nextruntime modules do not importdeepmerge,theme,colorSchemes, or legacy theme data