feat(color-modes): Warn when theme color keys have leading/trailing whitespace

packages/color-modes/src/index.tsx

@@ -164,6 +164,24 @@ const TopLevelColorModeProvider = ({
           ' and cannot reference a key in `theme.colors.modes`.'
       )
     }
+    const allColorKeys: Array<string> = []
+    const flattenKeys = (obj: Record<string, any>) => {
+      Object.keys(obj).forEach((key) => {
+        allColorKeys.push(key)
+        if (typeof obj[key] === 'object') {
+          flattenKeys(obj[key])
+        }
+      })
+      return allColorKeys
+    }
+    flattenKeys(outerTheme.colors ?? {}).forEach((color) => {
+      if (color !== color.trim()) {
+        console.warn(
+          `[theme-ui] Key \`${color}\` in theme.colors contains leading/trailing ` +
+            'whitespace, which can cause bugs in your project.'
+        )
+      }
+    })
   }
 
   const newTheme = useThemeWithAppliedColorMode({ colorMode, outerTheme })

packages/color-modes/test/index.tsx

@@ -541,6 +541,30 @@ test('warns when initialColorModeName matches a key in theme.colors.modes', () =
   restore()
 })
 
+test('warns when a key in theme.colors.modes has leading/trailing whitespace', () => {
+  const restore = mockConsole()
+  render(
+    <ThemeProvider
+      theme={{
+        colors: {
+          text: '#000',
+          background: '#fff',
+          modes: {
+            dark: {
+              ' text ': '#fff',
+              background: '#000',
+            },
+          },
+        },
+      }}
+    >
+      <ColorModeProvider />
+    </ThemeProvider>
+  )
+  expect(console.warn).toBeCalled()
+  restore()
+})
+
 test('does not warn in production', () => {
   const restore = mockConsole()
   const init = process.env.NODE_ENV
@@ -557,7 +581,7 @@ test('does not warn in production', () => {
           modes: {
             dark: {
               text: '#fff',
-              background: '#000',
+              ' background': '#000',
             },
           },
         },