chore: remove styled components (bye-bye-styled-components)

[francinelucca]

• Closes https://github.com/github/primer/issues/5429, https://github.com/github/primer/issues/5426, https://github.com/github/primer/issues/5425, https://github.com/github/primer/issues/5422

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

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: fb90a6e

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	Major
@primer/styled-react	Major

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]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[siddharthkp]

reset UnderLineNav snapshots

my bad shouldn't have completely reset them. added update snapshots label

[Copilot]

Pull Request Overview

This PR removes styled-components and styled-system dependencies from @primer/react, completing a major migration away from CSS-in-JS. The feature flag primer_react_use_styled_react_theming has reached 100% rollout, allowing safe removal of the fallback theming implementation.

Key changes:

• Removed styled-components from @primer/react dependencies and migrated theming logic to use CSS variables
• Moved styled-components support to @primer/styled-react package for legacy consumers
• Eliminated Box component and sx prop that relied on styled-system

Reviewed Changes

Copilot reviewed 52 out of 66 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/src/ThemeProvider.tsx	Removed styled-components ThemeProvider wrapper, replaced with native div using data attributes for theming
packages/react/src/BaseStyles.tsx	Removed styled-system props and theme context dependency
packages/react/src/index.ts	Removed themeGet export
packages/react/package.json	Removed styled-components, styled-system, and related dependencies
packages/styled-react/src/index.tsx	Updated exports to provide theming components from styled-react package
packages/styled-react/src/components/FeatureFlaggedTheming.tsx	Deleted feature-flagged theming wrapper (no longer needed at 100%)
packages/styled-react/src/theme-get.ts	New file exporting themeGet for styled-react consumers
packages/react/src/Box/*	Removed deprecated Box component entirely
Example apps	Updated to import theming components from @primer/styled-react
Test files	Updated imports and replaced Box usage with native HTML elements

[Copilot]

The theme variable is now only used internally for color scheme resolution but is still included in the ThemeContext. Consider documenting that this theme object is now primarily for backward compatibility with hooks like useTheme() and is no longer passed to styled-components.

Suggested change

	// Initialize state
	// Initialize state
	/**
	* The `theme` object is now only used internally for color scheme resolution.
	* It is still included in ThemeContext primarily for backward compatibility with hooks like `useTheme()`.
	* The `theme` object is no longer passed to styled-components.
	* Consider this when updating or refactoring theme-related logic.
	*/

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/5642

[primer-integration]

🟢 ci completed with status success.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!