Move ThemeProvider implementation to styled-react #6817

siddharthkp · 2025-09-09T20:07:39Z

Towards https://github.com/github/primer/issues/5427
We already exported ThemeProvider in Export theming utilities from styled-react #6703
This PR copies over the full implementation so that we can make changes to the ThemeProvider from @primer/react
integration-tests: skipped manually because I'm only adding a couple exports for hooks in primer/react, there are no modifications
includes changes from styled-react: Fix browser tests not running #6822

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 · 2025-09-09T20:07:42Z

⚠️ No Changeset found

Latest commit: fd422a6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

github-actions · 2025-09-09T20:08:15Z

👋 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 · 2025-09-09T20:11:56Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.47 KB (-0.17% 🔽)
packages/react/dist/browser.umd.js	89.57 KB (+0.01% 🔺)

siddharthkp · 2025-09-10T08:26:42Z

integration-tests: skipped manually because I'm only adding a couple exports for hooks in primer/react, there are no modifications

…theme-provider

Copilot

Pull Request Overview

This PR moves the ThemeProvider implementation from @primer/react to @primer/styled-react as part of a migration strategy. The main purpose is to create a standalone ThemeProvider implementation in the styled-react package that supports styled-components, while maintaining the API and functionality.

Key changes:

Added complete ThemeProvider implementation with theme utilities and color scheme support
Exported new hooks (useId, useSyncedState) from @primer/react to support the ThemeProvider
Updated test configuration to support both node and browser testing environments

Reviewed Changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`vitest.config.mts`	Updated test project paths to include both `.ts` and `.mts` browser config files
`packages/styled-react/vitest.config.ts`	Added test name configuration for node environment
`packages/styled-react/vitest.config.browser.ts`	Added test name configuration for browser environment
`packages/styled-react/tsconfig.json`	Added browser vitest config to TypeScript includes
`packages/styled-react/src/theming/utils/types/KeyPaths.ts`	Added utility type for generating dot-delimited key paths
`packages/styled-react/src/theming/utils/theme.ts`	Added theme utility functions for font stacks, color/shadow partitioning
`packages/styled-react/src/theming/themeGet.ts`	Added theme getter utility using styled-system
`packages/styled-react/src/theming/theme.ts`	Added complete theme configuration with color schemes and type definitions
`packages/styled-react/src/theming/ThemeProvider.tsx`	Added full ThemeProvider implementation with color mode switching
`packages/styled-react/src/theming/README.md`	Added documentation explaining the theming folder purpose
`packages/styled-react/src/index.tsx`	Updated exports to include theming utilities from local implementation
`packages/styled-react/src/__tests__/ThemeProvider.browser.test.tsx`	Added comprehensive test suite for ThemeProvider functionality
`packages/react/src/index.ts`	Exported `useId` and `useSyncedState` hooks for ThemeProvider usage
`.prettierignore`	Added styled-react color schemes file to prettier ignore list

Copilot · 2025-09-10T11:13:23Z

packages/styled-react/src/theming/utils/theme.ts

+// Temporarily disabling since this is originally a JavaScript that needed to be
+// migrated to TypeScript for exports to work as correctly in Vite.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck


The @ts-nocheck directive disables all TypeScript checking for this file, which defeats the purpose of migrating to TypeScript. Consider removing this directive and properly typing the functions instead of bypassing type safety entirely.

Copilot · 2025-09-10T11:13:23Z

packages/styled-react/src/theming/ThemeProvider.tsx

+const defaultNightScheme = 'dark'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Theme = {[key: string]: any}


Using any type defeats TypeScript's type safety. Consider defining a more specific interface for the Theme type or using unknown if the structure is truly dynamic.

Suggested change

export type Theme = {[key: string]: any}

export type Theme = {[key: string]: unknown}

siddharthkp · 2025-09-17T12:22:38Z

Realising this is maybe not the right step to start with 🤔 Going to go on a different path in another PR: #6867

siddharthkp · 2025-10-07T14:04:01Z

Replaced by styled-react: Add ThemeProvider and BaseStyles #6958

copy over ThemeProvider to styled-react

fa45b4d

siddharthkp self-assigned this Sep 9, 2025

github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 9, 2025

lint for the sake of it

9614c41

github-actions bot requested a deployment to storybook-preview-6817 September 9, 2025 20:14 Abandoned

export theming utils

6134e17

github-actions bot requested a deployment to storybook-preview-6817 September 9, 2025 20:21 Abandoned

ignore prettier for copied color-schemes

214b2f6

siddharthkp added the skip changeset This change does not need a changelog label Sep 9, 2025

github-actions bot requested a deployment to storybook-preview-6817 September 9, 2025 20:30 Abandoned

export snapshots

071dc84

github-actions bot temporarily deployed to storybook-preview-6817 September 9, 2025 20:43 Inactive

siddharthkp deployed to github-pages September 9, 2025 20:52 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6817 September 9, 2025 20:52 Inactive

add themeprovider.test

51026ed

siddharthkp deployed to github-pages September 9, 2025 21:17 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6817 September 9, 2025 21:17 Inactive

siddharthkp added integration-tests: skipped manually Changes in this PR do not require an integration test and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 10, 2025

siddharthkp added 5 commits September 10, 2025 10:59

actually run browser tests

b095800

skip failing test

02c5763

rename mts to ts?

68a168d

surprise newline?

2a6b17f

Merge branch 'styled-react/fix-browser-tests' into styled-react-copy-…

18b1951

…theme-provider

siddharthkp marked this pull request as ready for review September 10, 2025 11:11

Copilot AI review requested due to automatic review settings September 10, 2025 11:11

siddharthkp requested a review from a team as a code owner September 10, 2025 11:11

siddharthkp requested a review from TylerJDev September 10, 2025 11:11

Copilot AI reviewed Sep 10, 2025

View reviewed changes

siddharthkp deployed to github-pages September 10, 2025 11:20 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6817 September 10, 2025 11:20 Inactive

TylerJDev approved these changes Sep 10, 2025

View reviewed changes

Merge branch 'main' into styled-react-copy-theme-provider

8d3c44f

siddharthkp deployed to github-pages September 15, 2025 06:47 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6817 September 15, 2025 06:47 Inactive

Merge branch 'main' into styled-react-copy-theme-provider

fd422a6

siddharthkp deployed to github-pages September 15, 2025 13:25 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6817 September 15, 2025 13:25 View deployment

siddharthkp marked this pull request as draft September 18, 2025 10:15

siddharthkp closed this Oct 7, 2025

siddharthkp deleted the styled-react-copy-theme-provider branch October 30, 2025 17:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Move ThemeProvider implementation to styled-react #6817

Move ThemeProvider implementation to styled-react #6817

Uh oh!

siddharthkp commented Sep 9, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Sep 9, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 9, 2025

Uh oh!

github-actions bot commented Sep 9, 2025 •

edited

Loading

Uh oh!

siddharthkp commented Sep 10, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 10, 2025

Uh oh!

Copilot AI Sep 10, 2025

Uh oh!

siddharthkp commented Sep 17, 2025 •

edited

Loading

Uh oh!

siddharthkp commented Oct 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	export type Theme = {[key: string]: any}
	export type Theme = {[key: string]: unknown}

Move ThemeProvider implementation to styled-react #6817

Move ThemeProvider implementation to styled-react #6817

Uh oh!

Conversation

siddharthkp commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Sep 9, 2025

Uh oh!

github-actions bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

siddharthkp commented Sep 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

siddharthkp commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

siddharthkp commented Oct 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

siddharthkp commented Sep 9, 2025 •

edited

Loading

changeset-bot bot commented Sep 9, 2025 •

edited

Loading

github-actions bot commented Sep 9, 2025 •

edited

Loading

siddharthkp commented Sep 17, 2025 •

edited

Loading