Remove legacy JS theming (colorSchemes) from @primer/react#8212
Remove legacy JS theming (colorSchemes) from @primer/react#8212mattcosta7 wants to merge 7 commits into
Conversation
Relocate colorSchemes and legacy-theme into @primer/styled-react, thin down ThemeProvider, and drop vestigial theme/resolvedColorScheme from useTheme().
🦋 Changeset detectedLatest commit: f3ed4f0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 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 |
|
github-actions
Bot
added
the
integration-tests: recommended
|
🤖 Lint and formatting issues have been automatically fixed and committed to this PR. |
|
🤖 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
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
|
vrt seems unrelated to schemes - maybe a flake or font loading? |
|
|
Just a heads up, this was slated as a part of v39 since it's a major change and we tend to group them together to land them at once. Just curious, are we importing this still in github-ui now that @primer/styled-react is no longer used there? If we are, do we happen to know why? I would assume this would be tree-shaken if it's not being used |
The colorscheme object is merged into the theme, and merged in the regular Any app that uses a ThemeProvider from the main primer/react bundle incurs the cost of the entire legacy theme object - which can't be treeshaken, since it is used Getting start still says to wrap with a ThemeProvider: https://primer.style/product/getting-started/react/ which imports the heavy legacy-theme and forces it into the bundle. I marked it as a v39, so it can sit open for a while, but it's a very hefty bundle improvement. I had done this iniitally as a spike in github-ui to see the cost, and just extracted that upstream since the work was already there |
The base ThemeProvider imports defaultTheme which imports colorSchemes from legacy themes So any app that use |
|
Hi! I'd like someone (or me) to verify that this is a safe change by testing it on local or preview before we merge. I have a feeling this isn't the kind of change that CI would catch We could also look into feature flagging this change if the above exercise ^ does not give enough confidence |
Closes #
theme.colorSchemesis enormous (~20KB gzip of the bundle) and was only truly needed by the legacystyled-reacttheming path. This PR removes the legacy JS theming from@primer/reactand vendors what remains into@primer/styled-react. Colors are already applied via CSS variables (data-color-mode/data-light-theme/data-dark-theme), so there is no visual change.Changelog
Changed
@primer/react's defaultthemeno longer containscolorSchemes;ThemeProviderno longer merges color-scheme values into the theme context.colorSchemesand thelegacy-themedata now live in@primer/styled-react, which keeps its existing styled theming behavior.Removed
theme.colorSchemesfrom@primer/react.useTheme()no longer returnsthemeorresolvedColorScheme(it still returnscolorScheme,colorMode,resolvedColorMode,dayScheme,nightScheme, and the setters).ThemeColorPathsandThemeShadowPathstypes are no longer exported from@primer/react(moved into@primer/styled-react).Rollout strategy
If approved, this would be merged when the next breaking is scheduled, and not before. github-ui should already be in a place to consume this, and the old behavior still exists via styled-react where it was necessary
Consumers should apply color schemes via CSS (the
data-*attributes rendered byThemeProvider) rather than reading colors offuseTheme().theme. Consumers who need the legacy JScolorSchemesobject should migrate to@primer/styled-react.Testing & Reviewing
@primer/react: type-check clean,ThemeProviderunit tests pass, exports snapshot updated.@primer/styled-react: type-check clean, browser suite passes; the vendoredcolorSchemesprecompile step reproduces identical output.No visual regressions are expected since color application is CSS-driven.