Decouple @primer/react ThemeProvider from legacy color-scheme merging while preserving @primer/styled-react

.changeset/remove-react-theme-color-schemes.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+ThemeProvider: Remove resolved color-scheme theme merging from `@primer/react` and stop exposing `theme.colorSchemes` on the default exported theme. Legacy color-scheme resolution remains in `@primer/styled-react`.

packages/react/package.json

@@ -26,6 +26,10 @@
       "types": "./dist/test-helpers.d.ts",
       "default": "./dist/test-helpers.js"
     },
+    "./legacy-theme/ts/color-schemes": {
+      "types": "./dist/legacy-theme/ts/color-schemes.d.ts",
+      "default": "./dist/legacy-theme/ts/color-schemes.js"
+    },
     "./generated/components.json": "./generated/components.json",
     "./generated/hooks.json": "./generated/hooks.json"
   },

packages/react/rolldown.config.ts

@@ -29,6 +29,9 @@ const entrypoints = new Set([
 
   // "./next"
   'src/next/index.ts',
+
+  // "./legacy-theme/ts/color-schemes"
+  'src/legacy-theme/ts/color-schemes.ts',
 ])
 
 function getEntrypointsFromInput(input: ReadonlySet<string>) {

packages/react/src/ThemeContext.ts

@@ -6,7 +6,6 @@ export const ThemeContext = React.createContext<{
   colorScheme?: string
   colorMode?: ColorModeWithAuto
   resolvedColorMode?: ColorMode
-  resolvedColorScheme?: string
   dayScheme?: string
   nightScheme?: string
   setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>

packages/react/src/ThemeProvider.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import defaultTheme from './theme'
-import deepmerge from 'deepmerge'
 import {useSyncedState} from './hooks/useSyncedState'
 import {ThemeContext} from './ThemeContext'
 import {useTheme} from './useTheme'
@@ -48,30 +47,24 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
   const systemColorMode = useSystemColorMode()
   const resolvedColorMode = resolveColorMode(colorMode, systemColorMode)
   const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme)
-  const {resolvedTheme, resolvedColorScheme} = React.useMemo(
-    () => applyColorScheme(theme, colorScheme),
-    [theme, colorScheme],
-  )
 
   const contextValue = React.useMemo(
     () => ({
-      theme: resolvedTheme,
+      theme,
       colorScheme,
       colorMode,
       resolvedColorMode,
-      resolvedColorScheme,
       dayScheme,
       nightScheme,
       setColorMode,
       setDayScheme,
       setNightScheme,
     }),
     [
-      resolvedTheme,
+      theme,
       colorScheme,
       colorMode,
       resolvedColorMode,
-      resolvedColorScheme,
       dayScheme,
       nightScheme,
       setColorMode,
@@ -136,33 +129,4 @@ function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme:
   }
 }
 
-function applyColorScheme(
-  theme: Theme,
-  colorScheme: string,
-): {resolvedTheme: Theme; resolvedColorScheme: string | undefined} {
-  if (!theme.colorSchemes) {
-    return {
-      resolvedTheme: theme,
-      resolvedColorScheme: undefined,
-    }
-  }
-
-  if (!theme.colorSchemes[colorScheme]) {
-    // eslint-disable-next-line no-console
-    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``)
-
-    // Apply the first defined color scheme
-    const defaultColorScheme = Object.keys(theme.colorSchemes)[0]
-    return {
-      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
-      resolvedColorScheme: defaultColorScheme,
-    }
-  }
-
-  return {
-    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
-    resolvedColorScheme: colorScheme,
-  }
-}
-
 export default ThemeProvider

packages/react/src/__tests__/ThemeProvider.test.tsx

@@ -421,111 +421,6 @@ describe('useColorSchemeVar', () => {
   })
 })
 
-describe('useTheme().resolvedColorScheme', () => {
-  it('is undefined when not in a theme', () => {
-    const Component = () => {
-      const {resolvedColorScheme} = useTheme()
-
-      return <span data-testid="text">{resolvedColorScheme}</span>
-    }
-
-    render(<Component />)
-
-    expect(screen.getByTestId('text').textContent).toEqual('')
-  })
-
-  it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
-    const Component = () => {
-      const {resolvedColorScheme} = useTheme()
-
-      return <span data-testid="text">{resolvedColorScheme}</span>
-    }
-
-    const schemeToApply = 'dark'
-
-    render(
-      <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
-        <Component />
-      </ThemeProvider>,
-    )
-
-    expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
-  })
-
-  it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
-    const spy = vi.spyOn(console, 'error').mockImplementationOnce(() => {})
-    const Component = () => {
-      const {resolvedColorScheme} = useTheme()
-
-      return <span data-testid="text">{resolvedColorScheme}</span>
-    }
-
-    const schemeToApply = 'totally-invalid-colorscheme'
-    render(
-      <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
-        <Component />
-      </ThemeProvider>,
-    )
-
-    const defaultThemeColorScheme = 'light'
-
-    expect(spy).toHaveBeenCalledWith('`totally-invalid-colorscheme` scheme not defined in `theme.colorSchemes`')
-    expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
-    expect(screen.getByTestId('text').textContent).toEqual(defaultThemeColorScheme)
-
-    spy.mockRestore()
-  })
-
-  describe('nested theme', () => {
-    it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
-      const Component = () => {
-        const {resolvedColorScheme} = useTheme()
-
-        return <span data-testid="text">{resolvedColorScheme}</span>
-      }
-
-      const schemeToApply = 'dark'
-
-      render(
-        <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
-          <ThemeProvider>
-            <Component />
-          </ThemeProvider>
-        </ThemeProvider>,
-      )
-
-      expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
-    })
-
-    it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
-      const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-      const Component = () => {
-        const {resolvedColorScheme} = useTheme()
-
-        return <span data-testid="text">{resolvedColorScheme}</span>
-      }
-
-      const schemeToApply = 'totally-invalid-colorscheme'
-      render(
-        <ThemeProvider colorMode="day" dayScheme={schemeToApply}>
-          <ThemeProvider>
-            <Component />
-          </ThemeProvider>
-        </ThemeProvider>,
-      )
-
-      const defaultThemeColorScheme = 'light'
-
-      expect(spy).toHaveBeenCalledWith('`totally-invalid-colorscheme` scheme not defined in `theme.colorSchemes`')
-      expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
-      expect(screen.getByTestId('text').textContent).toEqual(defaultThemeColorScheme)
-
-      spy.mockRestore()
-    })
-  })
-})
-
 describe('contextOnly', () => {
   it('renders a div with data-* attributes by default', () => {
     const {container} = render(

packages/react/src/theme.ts

@@ -1,6 +1,5 @@
 import type {KeyPaths} from './utils/types/KeyPaths'
 import {fontStack} from './utils/theme'
-import {colorSchemes} from './legacy-theme/ts/color-schemes'
 
 const animation = {
   easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)',
@@ -69,7 +68,6 @@ const theme = {
   radii,
   sizes,
   space,
-  colorSchemes,
 }
 
 export default theme

packages/react/src/utils/useTheme.hookDocs.json

@@ -55,11 +55,6 @@
           "type": "'auto' | 'day' | 'night' | 'light' | 'dark'",
           "description": "The color mode (for example: \"day\", \"night\") that is applied. If the color mode is \"auto\", the color mode is determined by the user's system preference."
         },
-        {
-          "name": "resolvedColorScheme",
-          "type": "string",
-          "description": "The name of the current color scheme."
-        },
         {
           "name": "resolvedColorMode",
           "type": "'day' | 'night' | 'light' | 'dark'",

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

@@ -1,13 +1,15 @@
 import React from 'react'
 import {ThemeProvider as SCThemeProvider} from 'styled-components'
 import {theme as defaultTheme, useId, useSyncedState} from '@primer/react'
+import {colorSchemes} from '@primer/react/legacy-theme/ts/color-schemes'
 import deepmerge from 'deepmerge'
 import {ThemeContext} from './ThemeContext'
 import {useTheme} from './useTheme'
 
 export const defaultColorMode = 'day'
 const defaultDayScheme = 'light'
 const defaultNightScheme = 'dark'
+const defaultThemeWithColorSchemes = {...defaultTheme, colorSchemes}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Theme = {[key: string]: any}
@@ -64,7 +66,7 @@ export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>
   } = useTheme()
 
   // Initialize state
-  const theme = props.theme ?? fallbackTheme ?? defaultTheme
+  const theme = props.theme ?? fallbackTheme ?? defaultThemeWithColorSchemes
 
   const uniqueDataId = useId()
 

packages/styled-react/src/components/useFeatureFlaggedTheme.ts

@@ -2,12 +2,14 @@ import {useColorSchemeVar as primerUseColorSchemeVar, useTheme as primerUseTheme
 import {useFeatureFlag} from '@primer/react/experimental'
 import {useColorSchemeVar as styledUseColorSchemeVar, useTheme as styledUseTheme} from './useTheme'
 
-export function useTheme(): ReturnType<typeof primerUseTheme> {
+type StyledThemeData = ReturnType<typeof styledUseTheme>
+
+export function useTheme(): StyledThemeData {
   const enabled = useFeatureFlag('primer_react_styled_react_use_primer_theme_providers')
   const styledTheme = styledUseTheme()
   const primerTheme = primerUseTheme()
   if (enabled) {
-    return primerTheme as ReturnType<typeof primerUseTheme>
+    return primerTheme as StyledThemeData
   }
   return styledTheme
 }

packages/styled-react/vitest.config.browser.ts

@@ -11,6 +11,10 @@ export default defineConfig({
   resolve: {
     dedupe: ['react', 'react-dom'],
     alias: [
+      {
+        find: '@primer/react/legacy-theme/ts/color-schemes',
+        replacement: path.resolve(import.meta.dirname, '..', 'react', 'src', 'legacy-theme', 'ts', 'color-schemes.ts'),
+      },
       {
         find: '@primer/react/experimental',
         replacement: path.resolve(import.meta.dirname, '..', 'react', 'src', 'experimental', 'index.ts'),