Move styled-react hooks out of component modules#7943
Conversation
|
github-actions
Bot
added
staff
|
joshblack
added
skip changeset
There was a problem hiding this comment.
Pull request overview
This PR refactors @primer/styled-react theming by moving the styled-react theme context and hooks (useTheme, useColorSchemeVar) out of component implementation modules into dedicated hook/context modules, while keeping the deprecated public exports available from the package entrypoint.
Changes:
- Introduces new modules:
ThemeContext.ts,useTheme.ts, anduseFeatureFlaggedTheme.tsto centralize theme context + hook logic. - Updates
ThemeProvider,BaseStyles, and the package entrypoint to import/export hooks from the new modules instead of defining them inline. - Removes hook/context declarations from component implementation files that previously owned them.
Show a summary per file
| File | Description |
|---|---|
| packages/styled-react/src/index.tsx | Rewires deprecated public exports to source hooks from the new hook module while keeping existing entrypoint surface. |
| packages/styled-react/src/components/useTheme.ts | Adds the styled-react useTheme and useColorSchemeVar implementations backed by the new ThemeContext. |
| packages/styled-react/src/components/useFeatureFlaggedTheme.ts | Adds feature-flag-aware hook exports that switch between @primer/react and styled-react theme contexts. |
| packages/styled-react/src/components/ThemeProvider.tsx | Moves inline ThemeContext + hook declarations out to new modules; updates imports accordingly. |
| packages/styled-react/src/components/ThemeContext.ts | Adds a dedicated ThemeContext module shared by ThemeProvider and hooks. |
| packages/styled-react/src/components/FeatureFlaggedTheming.tsx | Removes hook exports from this module now that hooks live in useFeatureFlaggedTheme.ts. |
Copilot's findings
- Files reviewed: 7/7 changed files
- Comments generated: 3
| export function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string) { | ||
| const enabled = useFeatureFlag('primer_react_styled_react_use_primer_theme_providers') | ||
| const styledValue = styledUseColorSchemeVar(values, fallback) | ||
| const primerValue = primerUseColorSchemeVar(values, fallback) | ||
| return enabled ? primerValue : styledValue |
| export function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string) { | ||
| const enabled = useFeatureFlag('primer_react_styled_react_use_primer_theme_providers') | ||
| const styledValue = styledUseColorSchemeVar(values, fallback) | ||
| const primerValue = primerUseColorSchemeVar(values, fallback) | ||
| return enabled ? primerValue : styledValue | ||
| } |
| export { | ||
| /** | ||
| * @deprecated Theming in JavaScript is no longer supported. Prefer using | ||
| * `@primer/primitives` and CSS Modules instead. | ||
| */ | ||
| useColorSchemeVar, | ||
| useTheme, | ||
|
|
||
| /** | ||
| * @deprecated Theming in JavaScript is no longer supported. Prefer using | ||
| * `@primer/primitives` and CSS Modules instead. | ||
| */ | ||
| type ThemeProviderProps, | ||
| } from './components/FeatureFlaggedTheming' | ||
| useColorSchemeVar, | ||
| } from './components/useFeatureFlaggedTheme' |
Closes #
No linked issue.
Splits styled-react theme hooks and context out of component modules while preserving deprecated public exports from the package entrypoint.
Changelog
New
ThemeContext.ts,useTheme.ts, anduseFeatureFlaggedTheme.tsmodules.Changed
Removed
Rollout strategy
Testing & Reviewing
Review that styled-react still exports
useThemeanduseColorSchemeVarfrom its package entrypoint.Merge checklist