@primer/components 33.0.0-rc.265a717f → 33.0.0-rc.42d465c3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "33.0.0-rc.265a717f",
+  "version": "33.0.0-rc.42d465c3",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -100,7 +100,7 @@
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-preval": "5.0.0",
-    "babel-plugin-styled-components": "1.12.0",
+    "babel-plugin-styled-components": "2.0.2",
     "babel-plugin-transform-replace-expressions": "0.2.0",
     "babel-polyfill": "6.26.0",
     "chroma-js": "2.1.2",

package/src/ThemeProvider.tsx

@@ -24,6 +24,7 @@ const ThemeContext = React.createContext<{
   colorScheme?: string
   colorMode?: ColorModeWithAuto
   resolvedColorMode?: ColorMode
+  resolvedColorScheme?: string
   dayScheme?: string
   nightScheme?: string
   setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>
@@ -52,7 +53,10 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
   const systemColorMode = useSystemColorMode()
   const resolvedColorMode = resolveColorMode(colorMode, systemColorMode)
   const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme)
-  const resolvedTheme = React.useMemo(() => applyColorScheme(theme, colorScheme), [theme, colorScheme])
+  const {resolvedTheme, resolvedColorScheme} = React.useMemo(
+    () => applyColorScheme(theme, colorScheme),
+    [theme, colorScheme]
+  )
 
   // Update state if props change
   React.useEffect(() => {
@@ -74,6 +78,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
         colorScheme,
         colorMode,
         resolvedColorMode,
+        resolvedColorScheme,
         dayScheme,
         nightScheme,
         setColorMode,
@@ -156,9 +161,15 @@ function chooseColorScheme(colorMode: ColorMode, dayScheme: string, nightScheme:
   }
 }
 
-function applyColorScheme(theme: Theme, colorScheme: string) {
+function applyColorScheme(
+  theme: Theme,
+  colorScheme: string
+): {resolvedTheme: Theme; resolvedColorScheme: string | undefined} {
   if (!theme.colorSchemes) {
-    return theme
+    return {
+      resolvedTheme: theme,
+      resolvedColorScheme: undefined
+    }
   }
 
   if (!theme.colorSchemes[colorScheme]) {
@@ -167,10 +178,16 @@ function applyColorScheme(theme: Theme, colorScheme: string) {
 
     // Apply the first defined color scheme
     const defaultColorScheme = Object.keys(theme.colorSchemes)[0]
-    return deepmerge(theme, theme.colorSchemes[defaultColorScheme])
+    return {
+      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
+      resolvedColorScheme: defaultColorScheme
+    }
   }
 
-  return deepmerge(theme, theme.colorSchemes[colorScheme])
+  return {
+    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
+    resolvedColorScheme: colorScheme
+  }
 }
 
 export default ThemeProvider

package/src/__tests__/ThemeProvider.test.tsx

@@ -439,3 +439,119 @@ describe('useColorSchemeVar', () => {
     expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue')
   })
 })
+
+describe('useTheme().resolvedColorScheme', () => {
+  it('is undefined when not in a theme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    render(<Component />)
+
+    expect(screen.getByTestId('text').textContent).toEqual('')
+  })
+
+  it('is undefined when the theme has no colorScheme object', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    render(
+      <ThemeProvider theme={{color: 'red'}}>
+        <Component />
+      </ThemeProvider>
+    )
+
+    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 <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    const schemeToApply = 'dark'
+
+    render(
+      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <Component />
+      </ThemeProvider>
+    )
+
+    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
+    expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
+  })
+
+  it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+    const Component = () => {
+      const {resolvedColorScheme} = useTheme()
+
+      return <Text data-testid="text">{resolvedColorScheme}</Text>
+    }
+
+    const schemeToApply = 'totally-invalid-colorscheme'
+    render(
+      <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+        <Component />
+      </ThemeProvider>
+    )
+
+    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+
+    expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
+    expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
+    expect(screen.getByTestId('text').textContent).toEqual('light')
+  })
+
+  describe('nested theme', () => {
+    it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+      const Component = () => {
+        const {resolvedColorScheme} = useTheme()
+
+        return <Text data-testid="text">{resolvedColorScheme}</Text>
+      }
+
+      const schemeToApply = 'dark'
+
+      render(
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <ThemeProvider>
+            <Component />
+          </ThemeProvider>
+        </ThemeProvider>
+      )
+
+      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply)
+      expect(screen.getByTestId('text').textContent).toEqual(schemeToApply)
+    })
+
+    it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+      const Component = () => {
+        const {resolvedColorScheme} = useTheme()
+
+        return <Text data-testid="text">{resolvedColorScheme}</Text>
+      }
+
+      const schemeToApply = 'totally-invalid-colorscheme'
+      render(
+        <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme={schemeToApply}>
+          <ThemeProvider>
+            <Component />
+          </ThemeProvider>
+        </ThemeProvider>
+      )
+
+      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0]
+
+      expect(defaultThemeColorScheme).not.toEqual(schemeToApply)
+      expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply)
+      expect(screen.getByTestId('text').textContent).toEqual('light')
+    })
+  })
+})