Merge pull request #561 from system-ui/next-raw-colors

Keep raw color values in theme-ui context

Author: jxnblk

CHANGELOG.md

@@ -9,7 +9,6 @@
 - Adds separate `ColorModeProvider` component
 - Removes support for `theme.initialColorMode` - use `initialColorModeName` instead
 - Removes layout components (`Layout`, `Header`, `Main`, `Footer`) - use `Box` and `Flex` instead
-- Raw color values are now available as `theme.rawColors` in context when custom properties are enabled
 - Updates CSS custom properties implementation for color modes
 - When using `useColorSchemeMediaQuery` flag, it will initialize the mode to `light` when `@media (prefers-color-scheme: light)` is enabled
 - Global color mode styles are automatically added to the body without needing to render the `ColorMode` component

packages/color-modes/src/index.js

@@ -101,10 +101,10 @@ export const ColorModeProvider = ({
   const outer = useThemeUI()
   const [colorMode, setColorMode] = useColorModeState(outer.theme)
   const theme = applyColorMode(outer.theme || {}, colorMode)
+  const emotionTheme = {...theme}
 
   if (theme.useCustomProperties !== false) {
-    theme.rawColors = {...theme.colors}
-    theme.colors = toCustomProperties(theme.colors, 'colors')
+    emotionTheme.colors = toCustomProperties(emotionTheme.colors, 'colors')
   }
 
   const context = {
@@ -114,7 +114,7 @@ export const ColorModeProvider = ({
     setColorMode,
   }
 
-  return jsx(EmotionContext.Provider, { value: theme },
+  return jsx(EmotionContext.Provider, { value: emotionTheme },
     jsx(Context.Provider, { value: context },
       jsx(BodyStyles, { key: 'color-mode' }),
       children

packages/color-modes/test/index.js

@@ -332,17 +332,6 @@ test('does not initialize mode from prefers-color-scheme media query when useCol
   expect(mode).toBe('default')
 })
 
-test.skip('ColorMode component renders null', () => {
-  const json = renderer
-    .create(
-      <ThemeProvider>
-        <ColorMode />
-      </ThemeProvider>
-    )
-    .toJSON()
-  expect(json).toBe(null)
-})
-
 test('ColorModeProvider renders with global colors', () => {
   const root = render(
     <ThemeProvider
@@ -557,7 +546,7 @@ test('raw color values are passed to theme-ui context when custom properties are
   let color
   const Grabber = props => {
     const context = useThemeUI()
-    color = context.theme.rawColors.primary
+    color = context.theme.colors.primary
     return false
   }
   const root = render(

packages/docs/src/pages/migrating.mdx

@@ -11,7 +11,6 @@ title: Migrating
   - Default color mode name
   - Manually enable `useColorSchemeMediaQuery`
 - Removes layout components (`Layout`, `Header`, `Main`, `Footer`). Use the `Box` and `Flex` layout primitives instead.
-- When CSS custom properties are enabled, raw color values are available in the `theme.rawColors` object
 - Theme context is now stateless. If you've made use of `context.setTheme`, this no longer works. An alternative approach will be introduced later.
 - Global typographic styles
 

packages/gatsby-plugin-theme-ui/test/provider.js

@@ -23,7 +23,6 @@ test('renders with theme context', () => {
   const root = render(wrapRootElement({ element: <Consumer /> }, {}))
   expect(context.theme).toEqual({
     colors: {},
-    rawColors: {},
   })
 })
 

packages/theme-ui/test/color-modes.js

@@ -464,7 +464,7 @@ test('raw color values are passed to theme-ui context when custom properties are
   let color
   const Grabber = props => {
     const context = useThemeUI()
-    color = context.theme.rawColors.primary
+    color = context.theme.colors.primary
     return false
   }
   const root = render(