Refactor color objects and expose default colors as a mode

packages/color-modes/src/index.tsx

@@ -1,11 +1,22 @@
-import React, { Dispatch, useEffect, useState, SetStateAction } from 'react'
+import React, {
+  Dispatch,
+  useEffect,
+  useState,
+  useMemo,
+  SetStateAction,
+} from 'react'
 import {
   jsx,
   useThemeUI,
   merge,
   __ThemeUIInternalBaseThemeProvider,
 } from '@theme-ui/core'
-import { get, Theme, __internalGetUseRootStyles } from '@theme-ui/css'
+import {
+  get,
+  Theme,
+  ColorModesScale,
+  __internalGetUseRootStyles,
+} from '@theme-ui/css'
 import { Global } from '@emotion/react'
 
 import { toCustomProperties, createColorStyles } from './custom-properties'
@@ -146,17 +157,48 @@ const applyColorMode = (theme: Theme, mode: string | undefined): Theme => {
   })
 }
 
+const omitModes = (colors: ColorModesScale) => {
+  const res = { ...colors }
+  delete res.modes
+  return res
+}
+
+const assembleColorModes = (theme: Theme, outer: Theme) => {
+  const { colors = {}, initialColorModeName } = outer
+
+  const mutatedColors = get(theme, 'colors', {})
+  const modes = get(outer, 'colors.modes', {})
+
+  if (!('modes' in colors)) return mutatedColors
+
+  return {
+    ...mutatedColors,
+    modes: {
+      [initialColorModeName || '__default']: omitModes(colors),
+      ...modes,
+    },
+  }
+}
+
 export const ColorModeProvider: React.FC = ({ children }) => {
   const outer = useThemeUI()
   const [colorMode, setColorMode] = useColorModeState(outer.theme)
 
-  const theme = applyColorMode(outer.theme || {}, colorMode)
+  const initialTheme = outer.theme || {}
+  const theme = applyColorMode(initialTheme, colorMode)
+
   if (theme.useCustomProperties !== false) {
     // TODO: This mutation is less than ideal
     // We could save custom properties to `theme.colorVars`,
     // But it's infeasible to do this because of how the packages are split.
-    theme.rawColors = theme.colors
-    theme.colors = toCustomProperties(theme.colors, 'colors')
+
+    useMemo(() => {
+      theme.rawColors = assembleColorModes(theme, initialTheme)
+      theme.colors = toCustomProperties(
+        omitModes(initialTheme.colors || {}),
+        'colors'
+      )
+    }, [colorMode])
   }
 
   const context = {

packages/color-modes/test/index.tsx

@@ -241,7 +241,7 @@ test('does not initialize mode based on localStorage if useLocalStorage is set t
 })
 
 test('retains initial context', () => {
-  let context: ThemeUIContextValue | undefined = undefined;
+  let context: ThemeUIContextValue | undefined = undefined
   const Consumer = () => {
     context = useThemeUI()
     return null
@@ -472,7 +472,12 @@ test('emotion useTheme with custom css vars', () => {
   expect(cssVarsColors?.text).toBe('var(--theme-ui-colors-text)')
   expect(cssVarsColors?.background).toBe('var(--theme-ui-colors-background)')
 
-  expect(orignalColors?.text).toBe('limegreen') 
+  expect(cssVarsColors).toStrictEqual({
+    text: 'var(--theme-ui-colors-text)',
+    background: 'var(--theme-ui-colors-background)',
+  })
+
+  expect(orignalColors?.text).toBe('limegreen')
   expect(orignalColors?.background).toBe('#111')
 })
 
@@ -638,6 +643,101 @@ test('raw color values are passed to theme-ui context when custom properties are
   expect(color).toBe('tomato')
 })
 
+test('raw color modes are passed to theme-ui context and include the default colors', () => {
+  let colors
+  const Grabber = () => {
+    const context = useThemeUI()
+    colors = context.theme?.rawColors
+    return null
+  }
+  const root = render(
+    <ThemeProvider
+      theme={{
+        useColorSchemeMediaQuery: false,
+        colors: {
+          primary: 'tomato',
+          modes: {
+            dark: {
+              primary: 'black',
+            },
+          },
+        },
+      }}>
+      <ColorModeProvider>
+        <Grabber />
+      </ColorModeProvider>
+    </ThemeProvider>
+  )
+  expect(colors).toStrictEqual({
+    primary: 'tomato',
+    modes: {
+      __default: { primary: 'tomato' },
+      dark: { primary: 'black' },
+    },
+  })
+})
+
+test('raw color modes are passed to theme-ui context and include the default colors under the initialColorModeName', () => {
+  let colors
+  const Grabber = () => {
+    const context = useThemeUI()
+    colors = context.theme?.rawColors
+    return null
+  }
+  const root = render(
+    <ThemeProvider
+      theme={{
+        useColorSchemeMediaQuery: false,
+        initialColorModeName: 'light',
+        colors: {
+          primary: 'tomato',
+          modes: {
+            dark: {
+              primary: 'black',
+            },
+          },
+        },
+      }}>
+      <ColorModeProvider>
+        <Grabber />
+      </ColorModeProvider>
+    </ThemeProvider>
+  )
+  expect(colors).toStrictEqual({
+    primary: 'tomato',
+    modes: {
+      light: { primary: 'tomato' },
+      dark: { primary: 'black' },
+    },
+  })
+})
+
+test('raw color modes are are not passed to theme-ui context if modes are not defined', () => {
+  let colors
+  const Grabber = () => {
+    const context = useThemeUI()
+    colors = context.theme?.rawColors
+    return null
+  }
+  const root = render(
+    <ThemeProvider
+      theme={{
+        useColorSchemeMediaQuery: false,
+        initialColorModeName: 'light',
+        colors: {
+          primary: 'tomato',
+        },
+      }}>
+      <ColorModeProvider>
+        <Grabber />
+      </ColorModeProvider>
+    </ThemeProvider>
+  )
+  expect(colors).toStrictEqual({
+    primary: 'tomato',
+  })
+})
+
 test('InitializeColorMode renders', () => {
   const json = renderJSON(<InitializeColorMode />)
   expect(json).toMatchSnapshot()

packages/css/src/types.ts

@@ -717,6 +717,8 @@ export interface Theme {
    *
    * If you need to read their raw values to pass them somewhere where CSS
    * custom properties are not supported, use `rawColors`.
+   *
+   * Additionally, you can access all the color modes in this objects.
    */
   rawColors?: ColorModesScale