From 4458fc7e4d264b72d73a3e9ded0c5d698d605d64 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 10 May 2020 18:29:20 +0200
Subject: [PATCH 01/12] Turn ColorMode into an interface and update comment

- Interfaces support declaration merging, and thus are superior in this
  case. An user can add his own color names. The index signature might
  be removed some day for "strict mode".

- The comment is outdated.

- Smaller types in tooltips lead to more readable type errors.
---
 packages/css/src/types.ts | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 9e0cf59d7..0e2f9c8b4 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -489,18 +489,10 @@ type ObjectOrArray<T> = T[] | { [K: string]: T | ObjectOrArray<T> }
 export type TLengthStyledSystem = string | 0 | number
 
 /**
- * To use Theme UI color modes, color scales should include at least a text
- * and background color. These values are used in the ColorMode component to
- * set body foreground and background colors. Color modes should be defined as
- * nested objects within a theme.colors.modes object. Each key in this object
- * should correspond to a color mode name, where the name can be anything, but
- * typically light and dark are used for applications with a dark mode. The
- * initialColorModeName key is required to enable color modes and will be used as
- * the name for the root color palette.
+ * Color modes can be used to create a user-configurable dark mode
+ * or any number of other color modes.
  */
-export type ColorMode = {
-  [k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>
-} & {
+export interface ColorMode {
   /**
    * Body background color
    */
@@ -531,6 +523,8 @@ export type ColorMode = {
    * A contrast color for emphasizing UI
    */
   accent?: CSS.ColorProperty
+
+  [k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>
 }
 
 export interface Theme {

From 0c4ad6714f0aacecf6be82540028581799a31659 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 10 May 2020 18:57:14 +0200
Subject: [PATCH 02/12] Move colors scale to separate interface

---
 packages/css/src/types.ts | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 0e2f9c8b4..f53b48a3b 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -527,6 +527,16 @@ export interface ColorMode {
   [k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>
 }
 
+interface ColorModesScale extends ColorMode {
+  /**
+   * Nested color modes can provide overrides when used in conjunction with
+   * `Theme.initialColorModeName and `useColorMode()`
+   */
+  modes?: {
+    [k: string]: ColorMode
+  }
+}
+
 export interface Theme {
   breakpoints?: Array<string>
   mediaQueries?: { [size: string]: string }
@@ -584,15 +594,7 @@ export interface Theme {
   /**
    * Define the colors that are available through this theme
    */
-  colors?: ColorMode & {
-    /**
-     * Nested color modes can provide overrides when used in conjunction with
-     * `Theme.initialColorModeName and `useColorMode()`
-     */
-    modes?: {
-      [k: string]: ColorMode
-    }
-  }
+  colors?: ColorModesScale
 
   /**
    * Styles for elements rendered in MDX can be added to the theme.styles

From e38b48bd2676900e0d6c60b86c16e949de2fda0e Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 24 May 2020 12:35:23 +0200
Subject: [PATCH 03/12] Fix ThemeProvider components prop type

---
 packages/theme-provider/src/index.ts   |  13 +-
 packages/theme-ui/test/color-modes.tsx | 502 +++++++++++++++++++++++++
 packages/theme-ui/test/index.tsx       | 209 ++++++++++
 3 files changed, 721 insertions(+), 3 deletions(-)
 create mode 100644 packages/theme-ui/test/color-modes.tsx
 create mode 100644 packages/theme-ui/test/index.tsx

diff --git a/packages/theme-provider/src/index.ts b/packages/theme-provider/src/index.ts
index 920d16093..2ed13f9ae 100644
--- a/packages/theme-provider/src/index.ts
+++ b/packages/theme-provider/src/index.ts
@@ -2,6 +2,7 @@ import {
   jsx,
   useThemeUI,
   ThemeProvider as CoreProvider,
+  ThemeProviderProps as CoreThemeProviderProps,
   IntrinsicSxElements,
 } from '@theme-ui/core'
 import { css, Theme } from '@theme-ui/css'
@@ -33,10 +34,16 @@ const BodyStyles = () =>
     },
   })
 
-interface ThemeProviderProps {
-  theme: Theme
+type ProvidedComponentsKnownKeys = {
+  [key in keyof IntrinsicSxElements]?: React.ComponentType<any> | string
+}
+export interface ProvidedComponents extends ProvidedComponentsKnownKeys {
+  [key: string]: React.ComponentType<any> | string | undefined
+}
+
+interface ThemeProviderProps extends Pick<CoreThemeProviderProps, 'theme'> {
   children?: React.ReactNode
-  components?: { [key in keyof IntrinsicSxElements]?: React.ReactNode }
+  components?: ProvidedComponents
 }
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({
diff --git a/packages/theme-ui/test/color-modes.tsx b/packages/theme-ui/test/color-modes.tsx
new file mode 100644
index 000000000..006235810
--- /dev/null
+++ b/packages/theme-ui/test/color-modes.tsx
@@ -0,0 +1,502 @@
+/** @jsx jsx */
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { render, fireEvent, cleanup, act } from '@testing-library/react'
+import { matchers } from 'jest-emotion'
+import mockConsole from 'jest-mock-console'
+import { version as emotionVersion } from '@emotion/core/package.json'
+import { jsx, ThemeProvider, useColorMode, useThemeUI } from '../src/index'
+
+const STORAGE_KEY = 'theme-ui-color-mode'
+
+afterEach(cleanup)
+beforeEach(() => {
+  localStorage.removeItem(STORAGE_KEY)
+})
+expect.extend(matchers)
+
+test('renders with color modes', () => {
+  let json
+  let mode
+  const Mode = (props) => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return <div>Mode</div>
+  }
+  renderer.act(() => {
+    renderer.create(
+      <ThemeProvider
+        theme={{
+          colors: {
+            text: 'black',
+            modes: {
+              dark: {
+                text: 'white',
+              },
+            },
+          },
+        }}>
+        <Mode />
+      </ThemeProvider>
+    )
+  })
+  expect(mode).toBe('default')
+})
+
+test('renders with initial color mode name', () => {
+  let json
+  let mode
+  const Mode = (props) => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return <div>Mode</div>
+  }
+  renderer.act(() => {
+    renderer.create(
+      <ThemeProvider
+        theme={{
+          initialColorModeName: 'light',
+          colors: {
+            modes: {
+              dark: {},
+            },
+          },
+        }}>
+        <Mode />
+      </ThemeProvider>
+    )
+  })
+  expect(mode).toBe('light')
+})
+
+test('useColorMode updates color mode state', () => {
+  let mode
+  const Button = (props) => {
+    const [colorMode, setMode] = useColorMode()
+    mode = colorMode
+    return (
+      <button
+        onClick={(e) => {
+          setMode('dark')
+        }}
+        children="test"
+      />
+    )
+  }
+  const tree = render(
+    <ThemeProvider theme={{}}>
+      <Button />
+    </ThemeProvider>
+  )
+  const button = tree.getByText('test')
+  fireEvent.click(button)
+  expect(mode).toBe('dark')
+})
+
+test('color mode is passed through theme context', () => {
+  let mode
+  const Button = (props) => {
+    const [colorMode, setMode] = useColorMode()
+    mode = colorMode
+    return (
+      <button
+        sx={{
+          color: 'text',
+        }}
+        onClick={(e) => {
+          setMode('dark')
+        }}
+        children="test"
+      />
+    )
+  }
+  const tree = render(
+    <ThemeProvider
+      theme={{
+        useCustomProperties: false,
+        colors: {
+          text: '#000',
+          modes: {
+            dark: {
+              text: 'cyan',
+            },
+          },
+        },
+      }}>
+      <Button />
+    </ThemeProvider>
+  )
+  const button = tree.getByText('test')
+  button.click()
+  expect(mode).toBe('dark')
+  expect(tree.getByText('test')).toHaveStyleRule('color', 'cyan')
+})
+
+test('converts color modes to css custom properties', () => {
+  const Box = (props) => (
+    <div
+      sx={{
+        color: 'text',
+      }}
+      children="test"
+    />
+  )
+  const tree = render(
+    <ThemeProvider
+      theme={{
+        colors: {
+          text: '#000',
+          modes: {
+            dark: {
+              text: '#fff',
+            },
+          },
+        },
+      }}>
+      <Box />
+    </ThemeProvider>
+  )
+  expect(tree.getByText('test')).toHaveStyleRule(
+    'color',
+    'var(--theme-ui-colors-text,#000)'
+  )
+})
+
+test('uses default mode', () => {
+  let mode
+  const Button = (props) => {
+    const [colorMode, setMode] = useColorMode()
+    mode = colorMode
+    return <button children="test" />
+  }
+  const tree = render(
+    <ThemeProvider theme={{}}>
+      <Button />
+    </ThemeProvider>
+  )
+  expect(mode).toBe('default')
+})
+
+test('initializes mode based on localStorage', () => {
+  window.localStorage.setItem(STORAGE_KEY, 'dark')
+  let mode
+  const Button = (props) => {
+    const [colorMode, setMode] = useColorMode()
+    mode = colorMode
+    return <button children="test" />
+  }
+  const tree = render(
+    <ThemeProvider theme={{}}>
+      <Button />
+    </ThemeProvider>
+  )
+  expect(mode).toBe('dark')
+})
+
+test('inherits color mode state from parent context', () => {
+  let mode
+  const Consumer = (props) => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return false
+  }
+  render(
+    <ThemeProvider
+      theme={{
+        initialColorModeName: 'outer',
+        colors: {
+          modes: {
+            dark: {},
+          },
+        },
+      }}>
+      <ThemeProvider
+        theme={{
+          initialColorModeName: 'inner',
+        }}>
+        <Consumer />
+      </ThemeProvider>
+    </ThemeProvider>
+  )
+  expect(mode).toBe('outer')
+})
+
+test('retains initial context', () => {
+  let context
+  const Consumer = (props) => {
+    context = useThemeUI()
+    return false
+  }
+  render(
+    <ThemeProvider theme={{}}>
+      <Consumer />
+    </ThemeProvider>
+  )
+  expect(typeof context).toBe('object')
+  expect(context.__EMOTION_VERSION__).toBe(emotionVersion)
+})
+
+test('initializes mode from prefers-color-scheme media query', () => {
+  window.matchMedia = jest.fn().mockImplementation((query) => {
+    return {
+      matches: true,
+      media: query,
+    }
+  })
+  let mode
+  const Consumer = (props) => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return false
+  }
+  render(
+    <ThemeProvider
+      theme={{
+        useColorSchemeMediaQuery: true,
+      }}>
+      <Consumer />
+    </ThemeProvider>
+  )
+  expect(mode).toBe('dark')
+})
+
+test('does not initialize mode from prefers-color-scheme media query', () => {
+  window.matchMedia = jest.fn().mockImplementation((query) => {
+    return {
+      matches: false,
+      media: query,
+    }
+  })
+  let mode
+  const Consumer = (props) => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return false
+  }
+  render(
+    <ThemeProvider
+      theme={{
+        useColorSchemeMediaQuery: true,
+      }}>
+      <Consumer />
+    </ThemeProvider>
+  )
+  expect(mode).toBe('default')
+})
+
+test('does not initialize mode from prefers-color-scheme media query when useColorSchemeMediaQuery is not set', () => {
+  window.matchMedia = jest.fn().mockImplementation((query) => {
+    return {
+      matches: true,
+      media: query,
+    }
+  })
+  let mode
+  const Consumer = (props) => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return false
+  }
+  render(
+    <ThemeProvider theme={{}}>
+      <Consumer />
+    </ThemeProvider>
+  )
+  expect(mode).toBe('default')
+})
+
+test('useColorMode throws when there is no theme context', () => {
+  const restore = mockConsole()
+  expect(() => {
+    const Consumer = (props) => {
+      const [colorMode] = useColorMode('beep')
+      mode = colorMode
+      return false
+    }
+    render(<Consumer />)
+  }).toThrow()
+  expect(console.error).toHaveBeenCalled()
+  restore()
+})
+
+test('useThemeUI returns current color mode colors', () => {
+  window.localStorage.setItem(STORAGE_KEY, 'tomato')
+  let colors
+  const GetColors = () => {
+    const { theme } = useThemeUI()
+    colors = theme.colors
+    return false
+  }
+  const root = render(
+    <ThemeProvider
+      theme={{
+        useCustomProperties: false,
+        colors: {
+          text: 'tomato',
+          background: 'black',
+          modes: {
+            tomato: {
+              text: 'black',
+              background: 'tomato',
+            },
+          },
+        },
+      }}>
+      <GetColors />
+    </ThemeProvider>
+  )
+  expect(colors.text).toBe('black')
+  expect(colors.background).toBe('tomato')
+})
+
+test('warns when initialColorModeName matches a key in theme.colors.modes', () => {
+  const restore = mockConsole()
+  const root = render(
+    <ThemeProvider
+      theme={{
+        initialColorModeName: 'dark',
+        colors: {
+          text: '#000',
+          background: '#fff',
+          modes: {
+            dark: {
+              text: '#fff',
+              background: '#000',
+            },
+          },
+        },
+      }}
+    />
+  )
+  expect(console.warn).toBeCalled()
+  restore()
+})
+
+test('dot notation works with color modes', () => {
+  const Button = (props) => {
+    const [colorMode, setMode] = useColorMode()
+    return (
+      <button
+        sx={{
+          color: 'header.title',
+        }}
+        onClick={(e) => {
+          setMode('dark')
+        }}
+        children="test"
+      />
+    )
+  }
+  const root = render(
+    <ThemeProvider
+      theme={{
+        useCustomProperties: false,
+        colors: {
+          header: {
+            title: 'blue',
+          },
+          modes: {
+            dark: {
+              header: {
+                title: 'tomato',
+              },
+            },
+          },
+        },
+      }}>
+      <Button />
+    </ThemeProvider>
+  )
+  const button = root.getByText('test')
+  button.click()
+  expect(button).toHaveStyleRule('color', 'tomato')
+})
+
+test('dot notation works with color modes and custom properties', () => {
+  const Button = (props) => {
+    const [colorMode, setMode] = useColorMode()
+    return (
+      <button
+        sx={{
+          color: 'header.title',
+        }}
+        onClick={(e) => {
+          setMode('dark')
+        }}
+        children="test"
+      />
+    )
+  }
+  const root = render(
+    <ThemeProvider
+      theme={{
+        colors: {
+          header: {
+            title: 'blue',
+          },
+          modes: {
+            dark: {
+              header: {
+                title: 'tomato',
+              },
+            },
+          },
+        },
+      }}>
+      <Button />
+    </ThemeProvider>
+  )
+  const button = root.getByText('test')
+  button.click()
+  expect(button).toHaveStyleRule(
+    'color',
+    'var(--theme-ui-colors-header-title,tomato)'
+  )
+})
+
+test('raw color values are passed to theme-ui context when custom properties are enabled', () => {
+  let color
+  const Grabber = (props) => {
+    const context = useThemeUI()
+    color = context.theme.colors.primary
+    return false
+  }
+  const root = render(
+    <ThemeProvider
+      theme={{
+        colors: {
+          primary: 'tomato',
+          modes: {
+            dark: {
+              primary: 'black',
+            },
+          },
+        },
+      }}>
+      <Grabber />
+    </ThemeProvider>
+  )
+  expect(color).toBe('tomato')
+})
+
+test('warns when localStorage is disabled', () => {
+  Object.defineProperty(window, 'localStorage', {
+    get: jest.fn(() => {
+      throw 'SecurityError: The operation is insecure.'
+    }),
+  })
+
+  let mode
+  const Consumer = (props) => {
+    const [colorMode] = useColorMode()
+    mode = colorMode
+    return false
+  }
+
+  render(
+    <ThemeProvider theme={{}}>
+      <Consumer />
+    </ThemeProvider>
+  )
+  expect(mode).toBe('default')
+})
diff --git a/packages/theme-ui/test/index.tsx b/packages/theme-ui/test/index.tsx
new file mode 100644
index 000000000..f076eca48
--- /dev/null
+++ b/packages/theme-ui/test/index.tsx
@@ -0,0 +1,209 @@
+/** @jsx mdx */
+import { mdx } from '@mdx-js/react'
+import React, { useContext } from 'react'
+import renderer from 'react-test-renderer'
+import { matchers } from 'jest-emotion'
+import mockConsole from 'jest-mock-console'
+import {
+  ThemeProvider,
+  Context,
+  Styled,
+  jsx,
+  useColorMode,
+  BaseStyles,
+  Container,
+  Box,
+} from '../src/index'
+
+expect.extend(matchers)
+
+const renderJSON = (el) => renderer.create(el).toJSON()
+
+test('renders', () => {
+  const json = renderJSON(
+    <ThemeProvider theme={{}}>
+      <h1>Hello</h1>
+    </ThemeProvider>
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('renders with styles', () => {
+  const json = renderJSON(
+    <ThemeProvider
+      theme={{
+        styles: {
+          h1: {
+            color: 'tomato',
+          },
+        },
+      }}>
+      <h1>Hello</h1>
+    </ThemeProvider>
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('creates non-standard components', () => {
+  const json = renderJSON(
+    <ThemeProvider
+      components={{
+        sup: 'sup',
+      }}
+      theme={{
+        styles: {
+          sup: {
+            color: 'tomato',
+          },
+        },
+      }}>
+      <sup>hey</sup>
+    </ThemeProvider>
+  )
+  expect(json).toMatchSnapshot()
+  expect(json).toHaveStyleRule('color', 'tomato')
+})
+
+test('styles React components', () => {
+  const Beep = (props) => <h2 {...props} />
+  const Inner = (props) => mdx('Beep', props)
+
+  const json = renderJSON(
+    <ThemeProvider
+      components={{
+        Beep,
+      }}
+      theme={{
+        styles: {
+          Beep: {
+            color: 'tomato',
+          },
+        },
+      }}>
+      <Inner />
+    </ThemeProvider>
+  )
+  expect(json.type).toBe('h2')
+  expect(json).toHaveStyleRule('color', 'tomato')
+})
+
+test('custom pragma adds styles', () => {
+  const json = renderJSON(
+    jsx('div', {
+      sx: {
+        mx: 'auto',
+        p: 2,
+        bg: 'tomato',
+      },
+    })
+  )
+  expect(json).toHaveStyleRule('margin-left', 'auto')
+  expect(json).toHaveStyleRule('margin-right', 'auto')
+  expect(json).toHaveStyleRule('padding', '8px')
+  expect(json).toHaveStyleRule('background-color', 'tomato')
+})
+
+test('warns when multiple versions of emotion are installed', () => {
+  const restore = mockConsole()
+  const json = renderJSON(
+    <Context.Provider
+      value={{
+        emotionVersion: '9.0.0',
+      }}>
+      <ThemeProvider theme={{}}>Conflicting versions</ThemeProvider>
+    </Context.Provider>
+  )
+  expect(console.warn).toBeCalled()
+  restore()
+})
+
+test('functional themes receive outer theme', () => {
+  const outer = {
+    useCustomProperties: false,
+    colors: {
+      text: 'tomato',
+    },
+  }
+  const theme = jest.fn()
+  const json = renderJSON(
+    jsx(
+      ThemeProvider,
+      { theme: outer },
+      jsx(
+        ThemeProvider,
+        { theme },
+        jsx('div', {
+          sx: {
+            color: 'text',
+          },
+        })
+      )
+    )
+  )
+  expect(theme).toHaveBeenCalledWith(outer)
+  expect(json).toHaveStyleRule('color', 'text')
+})
+
+test('functional themes can be used at the top level', () => {
+  const theme = jest.fn(() => ({
+    useCustomProperties: false,
+    colors: {
+      primary: 'tomato',
+    },
+  }))
+  let json
+  expect(() => {
+    json = renderJSON(
+      jsx(
+        ThemeProvider,
+        { theme },
+        jsx(
+          'div',
+          {
+            sx: {
+              color: 'primary',
+            },
+          },
+          'hi'
+        )
+      )
+    )
+  }).not.toThrow()
+  expect(json).toHaveStyleRule('color', 'tomato')
+})
+
+test('BaseStyles renders', () => {
+  const json = renderJSON(
+    <ThemeProvider
+      theme={{
+        fonts: {
+          body: 'system-ui, sans-serif',
+        },
+        lineHeights: {
+          body: 1.5,
+        },
+        fontWeights: {
+          body: 400,
+        },
+      }}>
+      <BaseStyles />
+    </ThemeProvider>
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('custom pragma adds styles', () => {
+  const json = renderJSON(
+    jsx('div', {
+      sx: {
+        mx: 'auto',
+        p: 2,
+        bg: 'tomato',
+      },
+    })
+  )
+  expect(json).toHaveStyleRule('margin-left', 'auto')
+  expect(json).toHaveStyleRule('margin-right', 'auto')
+  expect(json).toHaveStyleRule('padding', '8px')
+  expect(json).toHaveStyleRule('background-color', 'tomato')
+})

From c43df5c365300ec53e0a8dc63f6f0b881f10f439 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 24 May 2020 13:02:55 +0200
Subject: [PATCH 04/12] Make all ColorMode keys optional and allow unknown keys
 in ThemeStyles

---
 packages/css/src/types.ts | 72 +++++++++++++++++++--------------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index f53b48a3b..e3765176b 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -496,12 +496,12 @@ export interface ColorMode {
   /**
    * Body background color
    */
-  background: CSS.ColorProperty
+  background?: CSS.ColorProperty
 
   /**
    * Body foreground color
    */
-  text: CSS.ColorProperty
+  text?: CSS.ColorProperty
 
   /**
    * Primary brand color for links, buttons, etc.
@@ -537,6 +537,39 @@ interface ColorModesScale extends ColorMode {
   }
 }
 
+interface ThemeStyles {
+  tr?: SystemStyleObject
+  th?: SystemStyleObject
+  td?: SystemStyleObject
+  em?: SystemStyleObject
+  strong?: SystemStyleObject
+  div?: SystemStyleObject
+  p?: SystemStyleObject
+  b?: SystemStyleObject
+  i?: SystemStyleObject
+  a?: SystemStyleObject
+  h1?: SystemStyleObject
+  h2?: SystemStyleObject
+  h3?: SystemStyleObject
+  h4?: SystemStyleObject
+  h5?: SystemStyleObject
+  h6?: SystemStyleObject
+  img?: SystemStyleObject
+  pre?: SystemStyleObject
+  code?: SystemStyleObject
+  ol?: SystemStyleObject
+  ul?: SystemStyleObject
+  li?: SystemStyleObject
+  blockquote?: SystemStyleObject
+  hr?: SystemStyleObject
+  table?: SystemStyleObject
+  delete?: SystemStyleObject
+  inlineCode?: SystemStyleObject
+  thematicBreak?: SystemStyleObject
+  root?: SystemStyleObject
+  [key: string]: SystemStyleObject
+}
+
 export interface Theme {
   breakpoints?: Array<string>
   mediaQueries?: { [size: string]: string }
@@ -603,38 +636,5 @@ export interface Theme {
    * with @styled-system/css and have access to base theme values like colors,
    * fonts, etc.
    */
-  styles?: {
-    [P in StyledTags]?: SystemStyleObject
-  }
+  styles?: ThemeStyles
 }
-
-type StyledTags =
-  | 'tr'
-  | 'th'
-  | 'td'
-  | 'em'
-  | 'strong'
-  | 'div'
-  | 'p'
-  | 'b'
-  | 'i'
-  | 'a'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'img'
-  | 'pre'
-  | 'code'
-  | 'ol'
-  | 'ul'
-  | 'li'
-  | 'blockquote'
-  | 'hr'
-  | 'table'
-  | 'delete'
-  | 'inlineCode'
-  | 'thematicBreak'
-  | 'root'

From 5220be3ec7e6650fa51e9137ec714b12b65d6703 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 24 May 2020 13:04:19 +0200
Subject: [PATCH 05/12] Remove redundant Partial

---
 packages/core/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index fcbd2e4da..627b8a96f 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -89,7 +89,7 @@ const BaseProvider: React.FC<BaseProviderProps> = ({ context, children }) =>
   )
 
 export interface ThemeProviderProps {
-  theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
+  theme: Theme | ((outerTheme: Theme) => Theme)
   children?: React.ReactNode
 }
 

From 9dce7baf193d9bd83baeccc5a2fd7d360807d108 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 24 May 2020 13:05:21 +0200
Subject: [PATCH 06/12] Add jsx: react to root tsconfig for convenience

---
 tsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index 37b7a82c7..497e502bd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,7 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "moduleResolution": "node",
-    "strict": true
+    "strict": true,
+    "jsx": "react"
   }
 }

From 517fc3554da546ed3706319c8505f2b1817be59e Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 24 May 2020 13:51:57 +0200
Subject: [PATCH 07/12] Fix packages/editor types and use CSS.Properties
 instead of Fallback

---
 packages/css/src/types.ts                   |  2 +-
 packages/editor/src/Styles.tsx              |  7 +++--
 packages/editor/src/Sx/Space.tsx            | 32 ++++++++++++++++++--
 packages/editor/src/Sx/ThemeColorPicker.tsx |  5 ++--
 packages/editor/src/Sx/Typography.tsx       | 33 +++++++++++----------
 packages/editor/src/types.ts                |  2 +-
 packages/theme-ui/src/index.ts              |  3 +-
 7 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index e3765176b..c5a565fea 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -5,7 +5,7 @@
 
 import * as CSS from 'csstype'
 
-type StandardCSSProperties = CSS.PropertiesFallback<number | string>
+type StandardCSSProperties = CSS.Properties<number | string>
 
 /**
  * The `css` function accepts arrays as values for mobile-first responsive styles.
diff --git a/packages/editor/src/Styles.tsx b/packages/editor/src/Styles.tsx
index 0dfdb0d11..132287ec4 100644
--- a/packages/editor/src/Styles.tsx
+++ b/packages/editor/src/Styles.tsx
@@ -1,14 +1,15 @@
 /** @jsx jsx */
-import { jsx, useThemeUI } from 'theme-ui'
+import { jsx, useThemeUI, AllThemeUICSSProperties } from 'theme-ui'
 import { Fragment } from 'react'
 import Sx from './Sx'
 import { EditorContextValue } from './types'
 
-export default ({ tag = 'root' }) => {
+export default function Styles({ tag = 'root' }) {
   const context = useThemeUI() as EditorContextValue
   const { styles = {} } = context.theme || {}
 
-  const style = styles[tag] || {}
+  // unsafe
+  const style = (styles[tag] || {}) as AllThemeUICSSProperties
 
   const setStyle = next => {
     context.setTheme({
diff --git a/packages/editor/src/Sx/Space.tsx b/packages/editor/src/Sx/Space.tsx
index bc6d63593..35785c78a 100644
--- a/packages/editor/src/Sx/Space.tsx
+++ b/packages/editor/src/Sx/Space.tsx
@@ -1,12 +1,40 @@
 /** @jsx jsx */
-import { jsx, Theme, SxStyleProp } from 'theme-ui'
+import { jsx, SxStyleProp, AllThemeUICSSProperties } from 'theme-ui'
 import { useState, useEffect } from 'react'
 import { Field, Label, Checkbox } from '@theme-ui/components'
 
 export interface SpaceProps {
   tag?: string
   property?: 'margin' | 'padding'
-  value?: Theme['space']
+  value?: Partial<
+    Pick<
+      AllThemeUICSSProperties,
+      | 'paddingTop'
+      | 'marginTop'
+      | 'paddingBottom'
+      | 'marginBottom'
+      | 'paddingLeft'
+      | 'marginLeft'
+      | 'paddingRight'
+      | 'marginRight'
+      | 'paddingX'
+      | 'paddingY'
+      | 'marginX'
+      | 'marginY'
+      | 'mt'
+      | 'pt'
+      | 'mb'
+      | 'pb'
+      | 'ml'
+      | 'pl'
+      | 'mr'
+      | 'pr'
+      | 'px'
+      | 'py'
+      | 'mx'
+      | 'my'
+    >
+  >
   onChange: (sx: SxStyleProp) => void
 }
 
diff --git a/packages/editor/src/Sx/ThemeColorPicker.tsx b/packages/editor/src/Sx/ThemeColorPicker.tsx
index e517c5161..e901eadfa 100644
--- a/packages/editor/src/Sx/ThemeColorPicker.tsx
+++ b/packages/editor/src/Sx/ThemeColorPicker.tsx
@@ -23,12 +23,13 @@ export const ThemeColorPicker = ({
   // const { colors } = theme || context.theme || {}
   const _theme = theme || context.theme || {}
   const colors = _theme.colors || {}
-  const value = props.value && (colors[props.value] || props.value)
+  // bug: only supports flat color scales
+  const value = String(props.value && (colors[props.value] || props.value))
   const options = [
     'transparent',
     ...Object.keys(colors)
       .map((key) => colors[key])
-      .filter((color) => typeof color === 'string')
+      .filter((color): color is string => typeof color === 'string')
       .filter((color) => /^#/.test(color)),
   ]
   const onChange = (color: ColorState) => {
diff --git a/packages/editor/src/Sx/Typography.tsx b/packages/editor/src/Sx/Typography.tsx
index 0db3c804e..1704225cc 100644
--- a/packages/editor/src/Sx/Typography.tsx
+++ b/packages/editor/src/Sx/Typography.tsx
@@ -4,19 +4,22 @@ import { Fragment } from 'react'
 import { Field } from '@theme-ui/components'
 import Combobox from '../Combobox'
 
-type OnChangeArg =
-  | { fontFamily: string }
-  | { fontSize: number }
-  | { fontWeight: string }
-  | { lineHeight: string }
+type TypographyPropsValue = {
+  fontFamily?: string
+  fontSize?: string | number
+  fontWeight?: string | number
+  lineHeight?: string | number
+}
+
+type OnChangeArg = {
+  [P in keyof TypographyPropsValue]: {
+    [K in P]: Exclude<TypographyPropsValue[P], undefined>
+  }
+}[keyof TypographyPropsValue]
+
 export interface TypographyProps {
   tag?: string
-  value?: {
-    fontFamily?: string
-    fontSize?: string | number
-    fontWeight?: string
-    lineHeight?: string
-  }
+  value?: TypographyPropsValue
   theme?: Theme
   onChange: (arg: OnChangeArg) => void
 }
@@ -40,7 +43,7 @@ export const SxTypography = ({
         name={prefixName('fontFamily')}
         label="Font Family"
         value={fontFamily || ''}
-        onChange={(fontFamily) => {
+        onChange={fontFamily => {
           onChange({ fontFamily })
         }}
         options={['inherit', ...Object.keys(fonts)]}
@@ -56,7 +59,7 @@ export const SxTypography = ({
           label="Font Size"
           value={fontSize || ''}
           type="number"
-          onChange={(e) => {
+          onChange={e => {
             const fontSize = Number(e.target.value)
             onChange({ fontSize })
           }}
@@ -65,7 +68,7 @@ export const SxTypography = ({
           name={prefixName('fontWeight')}
           label="Font Weight"
           value={fontWeight || ''}
-          onChange={(fontWeight) => {
+          onChange={fontWeight => {
             onChange({ fontWeight })
           }}
           options={['inherit', ...Object.keys(fontWeights)]}
@@ -74,7 +77,7 @@ export const SxTypography = ({
           name={prefixName('lineHeight')}
           label="Line Height"
           value={lineHeight || ''}
-          onChange={(lineHeight) => {
+          onChange={lineHeight => {
             onChange({ lineHeight })
           }}
           options={['inherit', ...Object.keys(lineHeights)]}
diff --git a/packages/editor/src/types.ts b/packages/editor/src/types.ts
index 0734b06c7..a64800067 100644
--- a/packages/editor/src/types.ts
+++ b/packages/editor/src/types.ts
@@ -1,5 +1,5 @@
 import { Theme, ContextValue } from 'theme-ui'
 
-export type EditorContextValue = ContextValue & {
+export interface EditorContextValue extends ContextValue {
   setTheme: React.Dispatch<Theme>
 }
diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts
index 75195ac8a..a2c9b8d55 100644
--- a/packages/theme-ui/src/index.ts
+++ b/packages/theme-ui/src/index.ts
@@ -22,7 +22,8 @@ export {
   CSSProperties,
   CSSPseudoSelectorProps,
   ResponsiveStyleValue,
-  SystemCssProperties,
+  AllThemeUICSSProperties,
+  ThemeUIRecursiveCSSProperties,
   SystemStyleObject,
   Theme,
   TLengthStyledSystem,

From 607547ebbee89f54b1a0833881d00480f02c5024 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 24 May 2020 13:52:12 +0200
Subject: [PATCH 08/12] Turn theme-ui tests to TypeScript

---
 packages/theme-ui/test/color-modes.js  | 502 -------------------------
 packages/theme-ui/test/color-modes.tsx |  71 ++--
 packages/theme-ui/test/index.js        | 209 ----------
 packages/theme-ui/test/index.tsx       |  38 +-
 4 files changed, 56 insertions(+), 764 deletions(-)
 delete mode 100644 packages/theme-ui/test/color-modes.js
 delete mode 100644 packages/theme-ui/test/index.js

diff --git a/packages/theme-ui/test/color-modes.js b/packages/theme-ui/test/color-modes.js
deleted file mode 100644
index 006235810..000000000
--- a/packages/theme-ui/test/color-modes.js
+++ /dev/null
@@ -1,502 +0,0 @@
-/** @jsx jsx */
-import React from 'react'
-import renderer from 'react-test-renderer'
-import { render, fireEvent, cleanup, act } from '@testing-library/react'
-import { matchers } from 'jest-emotion'
-import mockConsole from 'jest-mock-console'
-import { version as emotionVersion } from '@emotion/core/package.json'
-import { jsx, ThemeProvider, useColorMode, useThemeUI } from '../src/index'
-
-const STORAGE_KEY = 'theme-ui-color-mode'
-
-afterEach(cleanup)
-beforeEach(() => {
-  localStorage.removeItem(STORAGE_KEY)
-})
-expect.extend(matchers)
-
-test('renders with color modes', () => {
-  let json
-  let mode
-  const Mode = (props) => {
-    const [colorMode] = useColorMode()
-    mode = colorMode
-    return <div>Mode</div>
-  }
-  renderer.act(() => {
-    renderer.create(
-      <ThemeProvider
-        theme={{
-          colors: {
-            text: 'black',
-            modes: {
-              dark: {
-                text: 'white',
-              },
-            },
-          },
-        }}>
-        <Mode />
-      </ThemeProvider>
-    )
-  })
-  expect(mode).toBe('default')
-})
-
-test('renders with initial color mode name', () => {
-  let json
-  let mode
-  const Mode = (props) => {
-    const [colorMode] = useColorMode()
-    mode = colorMode
-    return <div>Mode</div>
-  }
-  renderer.act(() => {
-    renderer.create(
-      <ThemeProvider
-        theme={{
-          initialColorModeName: 'light',
-          colors: {
-            modes: {
-              dark: {},
-            },
-          },
-        }}>
-        <Mode />
-      </ThemeProvider>
-    )
-  })
-  expect(mode).toBe('light')
-})
-
-test('useColorMode updates color mode state', () => {
-  let mode
-  const Button = (props) => {
-    const [colorMode, setMode] = useColorMode()
-    mode = colorMode
-    return (
-      <button
-        onClick={(e) => {
-          setMode('dark')
-        }}
-        children="test"
-      />
-    )
-  }
-  const tree = render(
-    <ThemeProvider theme={{}}>
-      <Button />
-    </ThemeProvider>
-  )
-  const button = tree.getByText('test')
-  fireEvent.click(button)
-  expect(mode).toBe('dark')
-})
-
-test('color mode is passed through theme context', () => {
-  let mode
-  const Button = (props) => {
-    const [colorMode, setMode] = useColorMode()
-    mode = colorMode
-    return (
-      <button
-        sx={{
-          color: 'text',
-        }}
-        onClick={(e) => {
-          setMode('dark')
-        }}
-        children="test"
-      />
-    )
-  }
-  const tree = render(
-    <ThemeProvider
-      theme={{
-        useCustomProperties: false,
-        colors: {
-          text: '#000',
-          modes: {
-            dark: {
-              text: 'cyan',
-            },
-          },
-        },
-      }}>
-      <Button />
-    </ThemeProvider>
-  )
-  const button = tree.getByText('test')
-  button.click()
-  expect(mode).toBe('dark')
-  expect(tree.getByText('test')).toHaveStyleRule('color', 'cyan')
-})
-
-test('converts color modes to css custom properties', () => {
-  const Box = (props) => (
-    <div
-      sx={{
-        color: 'text',
-      }}
-      children="test"
-    />
-  )
-  const tree = render(
-    <ThemeProvider
-      theme={{
-        colors: {
-          text: '#000',
-          modes: {
-            dark: {
-              text: '#fff',
-            },
-          },
-        },
-      }}>
-      <Box />
-    </ThemeProvider>
-  )
-  expect(tree.getByText('test')).toHaveStyleRule(
-    'color',
-    'var(--theme-ui-colors-text,#000)'
-  )
-})
-
-test('uses default mode', () => {
-  let mode
-  const Button = (props) => {
-    const [colorMode, setMode] = useColorMode()
-    mode = colorMode
-    return <button children="test" />
-  }
-  const tree = render(
-    <ThemeProvider theme={{}}>
-      <Button />
-    </ThemeProvider>
-  )
-  expect(mode).toBe('default')
-})
-
-test('initializes mode based on localStorage', () => {
-  window.localStorage.setItem(STORAGE_KEY, 'dark')
-  let mode
-  const Button = (props) => {
-    const [colorMode, setMode] = useColorMode()
-    mode = colorMode
-    return <button children="test" />
-  }
-  const tree = render(
-    <ThemeProvider theme={{}}>
-      <Button />
-    </ThemeProvider>
-  )
-  expect(mode).toBe('dark')
-})
-
-test('inherits color mode state from parent context', () => {
-  let mode
-  const Consumer = (props) => {
-    const [colorMode] = useColorMode()
-    mode = colorMode
-    return false
-  }
-  render(
-    <ThemeProvider
-      theme={{
-        initialColorModeName: 'outer',
-        colors: {
-          modes: {
-            dark: {},
-          },
-        },
-      }}>
-      <ThemeProvider
-        theme={{
-          initialColorModeName: 'inner',
-        }}>
-        <Consumer />
-      </ThemeProvider>
-    </ThemeProvider>
-  )
-  expect(mode).toBe('outer')
-})
-
-test('retains initial context', () => {
-  let context
-  const Consumer = (props) => {
-    context = useThemeUI()
-    return false
-  }
-  render(
-    <ThemeProvider theme={{}}>
-      <Consumer />
-    </ThemeProvider>
-  )
-  expect(typeof context).toBe('object')
-  expect(context.__EMOTION_VERSION__).toBe(emotionVersion)
-})
-
-test('initializes mode from prefers-color-scheme media query', () => {
-  window.matchMedia = jest.fn().mockImplementation((query) => {
-    return {
-      matches: true,
-      media: query,
-    }
-  })
-  let mode
-  const Consumer = (props) => {
-    const [colorMode] = useColorMode()
-    mode = colorMode
-    return false
-  }
-  render(
-    <ThemeProvider
-      theme={{
-        useColorSchemeMediaQuery: true,
-      }}>
-      <Consumer />
-    </ThemeProvider>
-  )
-  expect(mode).toBe('dark')
-})
-
-test('does not initialize mode from prefers-color-scheme media query', () => {
-  window.matchMedia = jest.fn().mockImplementation((query) => {
-    return {
-      matches: false,
-      media: query,
-    }
-  })
-  let mode
-  const Consumer = (props) => {
-    const [colorMode] = useColorMode()
-    mode = colorMode
-    return false
-  }
-  render(
-    <ThemeProvider
-      theme={{
-        useColorSchemeMediaQuery: true,
-      }}>
-      <Consumer />
-    </ThemeProvider>
-  )
-  expect(mode).toBe('default')
-})
-
-test('does not initialize mode from prefers-color-scheme media query when useColorSchemeMediaQuery is not set', () => {
-  window.matchMedia = jest.fn().mockImplementation((query) => {
-    return {
-      matches: true,
-      media: query,
-    }
-  })
-  let mode
-  const Consumer = (props) => {
-    const [colorMode] = useColorMode()
-    mode = colorMode
-    return false
-  }
-  render(
-    <ThemeProvider theme={{}}>
-      <Consumer />
-    </ThemeProvider>
-  )
-  expect(mode).toBe('default')
-})
-
-test('useColorMode throws when there is no theme context', () => {
-  const restore = mockConsole()
-  expect(() => {
-    const Consumer = (props) => {
-      const [colorMode] = useColorMode('beep')
-      mode = colorMode
-      return false
-    }
-    render(<Consumer />)
-  }).toThrow()
-  expect(console.error).toHaveBeenCalled()
-  restore()
-})
-
-test('useThemeUI returns current color mode colors', () => {
-  window.localStorage.setItem(STORAGE_KEY, 'tomato')
-  let colors
-  const GetColors = () => {
-    const { theme } = useThemeUI()
-    colors = theme.colors
-    return false
-  }
-  const root = render(
-    <ThemeProvider
-      theme={{
-        useCustomProperties: false,
-        colors: {
-          text: 'tomato',
-          background: 'black',
-          modes: {
-            tomato: {
-              text: 'black',
-              background: 'tomato',
-            },
-          },
-        },
-      }}>
-      <GetColors />
-    </ThemeProvider>
-  )
-  expect(colors.text).toBe('black')
-  expect(colors.background).toBe('tomato')
-})
-
-test('warns when initialColorModeName matches a key in theme.colors.modes', () => {
-  const restore = mockConsole()
-  const root = render(
-    <ThemeProvider
-      theme={{
-        initialColorModeName: 'dark',
-        colors: {
-          text: '#000',
-          background: '#fff',
-          modes: {
-            dark: {
-              text: '#fff',
-              background: '#000',
-            },
-          },
-        },
-      }}
-    />
-  )
-  expect(console.warn).toBeCalled()
-  restore()
-})
-
-test('dot notation works with color modes', () => {
-  const Button = (props) => {
-    const [colorMode, setMode] = useColorMode()
-    return (
-      <button
-        sx={{
-          color: 'header.title',
-        }}
-        onClick={(e) => {
-          setMode('dark')
-        }}
-        children="test"
-      />
-    )
-  }
-  const root = render(
-    <ThemeProvider
-      theme={{
-        useCustomProperties: false,
-        colors: {
-          header: {
-            title: 'blue',
-          },
-          modes: {
-            dark: {
-              header: {
-                title: 'tomato',
-              },
-            },
-          },
-        },
-      }}>
-      <Button />
-    </ThemeProvider>
-  )
-  const button = root.getByText('test')
-  button.click()
-  expect(button).toHaveStyleRule('color', 'tomato')
-})
-
-test('dot notation works with color modes and custom properties', () => {
-  const Button = (props) => {
-    const [colorMode, setMode] = useColorMode()
-    return (
-      <button
-        sx={{
-          color: 'header.title',
-        }}
-        onClick={(e) => {
-          setMode('dark')
-        }}
-        children="test"
-      />
-    )
-  }
-  const root = render(
-    <ThemeProvider
-      theme={{
-        colors: {
-          header: {
-            title: 'blue',
-          },
-          modes: {
-            dark: {
-              header: {
-                title: 'tomato',
-              },
-            },
-          },
-        },
-      }}>
-      <Button />
-    </ThemeProvider>
-  )
-  const button = root.getByText('test')
-  button.click()
-  expect(button).toHaveStyleRule(
-    'color',
-    'var(--theme-ui-colors-header-title,tomato)'
-  )
-})
-
-test('raw color values are passed to theme-ui context when custom properties are enabled', () => {
-  let color
-  const Grabber = (props) => {
-    const context = useThemeUI()
-    color = context.theme.colors.primary
-    return false
-  }
-  const root = render(
-    <ThemeProvider
-      theme={{
-        colors: {
-          primary: 'tomato',
-          modes: {
-            dark: {
-              primary: 'black',
-            },
-          },
-        },
-      }}>
-      <Grabber />
-    </ThemeProvider>
-  )
-  expect(color).toBe('tomato')
-})
-
-test('warns when localStorage is disabled', () => {
-  Object.defineProperty(window, 'localStorage', {
-    get: jest.fn(() => {
-      throw 'SecurityError: The operation is insecure.'
-    }),
-  })
-
-  let mode
-  const Consumer = (props) => {
-    const [colorMode] = useColorMode()
-    mode = colorMode
-    return false
-  }
-
-  render(
-    <ThemeProvider theme={{}}>
-      <Consumer />
-    </ThemeProvider>
-  )
-  expect(mode).toBe('default')
-})
diff --git a/packages/theme-ui/test/color-modes.tsx b/packages/theme-ui/test/color-modes.tsx
index 006235810..975bc262b 100644
--- a/packages/theme-ui/test/color-modes.tsx
+++ b/packages/theme-ui/test/color-modes.tsx
@@ -18,7 +18,7 @@ expect.extend(matchers)
 test('renders with color modes', () => {
   let json
   let mode
-  const Mode = (props) => {
+  const Mode = props => {
     const [colorMode] = useColorMode()
     mode = colorMode
     return <div>Mode</div>
@@ -46,7 +46,7 @@ test('renders with color modes', () => {
 test('renders with initial color mode name', () => {
   let json
   let mode
-  const Mode = (props) => {
+  const Mode = props => {
     const [colorMode] = useColorMode()
     mode = colorMode
     return <div>Mode</div>
@@ -71,12 +71,12 @@ test('renders with initial color mode name', () => {
 
 test('useColorMode updates color mode state', () => {
   let mode
-  const Button = (props) => {
+  const Button = props => {
     const [colorMode, setMode] = useColorMode()
     mode = colorMode
     return (
       <button
-        onClick={(e) => {
+        onClick={e => {
           setMode('dark')
         }}
         children="test"
@@ -95,7 +95,7 @@ test('useColorMode updates color mode state', () => {
 
 test('color mode is passed through theme context', () => {
   let mode
-  const Button = (props) => {
+  const Button = props => {
     const [colorMode, setMode] = useColorMode()
     mode = colorMode
     return (
@@ -103,7 +103,7 @@ test('color mode is passed through theme context', () => {
         sx={{
           color: 'text',
         }}
-        onClick={(e) => {
+        onClick={e => {
           setMode('dark')
         }}
         children="test"
@@ -133,7 +133,7 @@ test('color mode is passed through theme context', () => {
 })
 
 test('converts color modes to css custom properties', () => {
-  const Box = (props) => (
+  const Box = props => (
     <div
       sx={{
         color: 'text',
@@ -164,7 +164,7 @@ test('converts color modes to css custom properties', () => {
 
 test('uses default mode', () => {
   let mode
-  const Button = (props) => {
+  const Button = props => {
     const [colorMode, setMode] = useColorMode()
     mode = colorMode
     return <button children="test" />
@@ -180,7 +180,7 @@ test('uses default mode', () => {
 test('initializes mode based on localStorage', () => {
   window.localStorage.setItem(STORAGE_KEY, 'dark')
   let mode
-  const Button = (props) => {
+  const Button = props => {
     const [colorMode, setMode] = useColorMode()
     mode = colorMode
     return <button children="test" />
@@ -195,10 +195,10 @@ test('initializes mode based on localStorage', () => {
 
 test('inherits color mode state from parent context', () => {
   let mode
-  const Consumer = (props) => {
+  const Consumer = props => {
     const [colorMode] = useColorMode()
     mode = colorMode
-    return false
+    return null
   }
   render(
     <ThemeProvider
@@ -223,9 +223,9 @@ test('inherits color mode state from parent context', () => {
 
 test('retains initial context', () => {
   let context
-  const Consumer = (props) => {
+  const Consumer = props => {
     context = useThemeUI()
-    return false
+    return null
   }
   render(
     <ThemeProvider theme={{}}>
@@ -237,17 +237,17 @@ test('retains initial context', () => {
 })
 
 test('initializes mode from prefers-color-scheme media query', () => {
-  window.matchMedia = jest.fn().mockImplementation((query) => {
+  window.matchMedia = jest.fn().mockImplementation(query => {
     return {
       matches: true,
       media: query,
     }
   })
   let mode
-  const Consumer = (props) => {
+  const Consumer = props => {
     const [colorMode] = useColorMode()
     mode = colorMode
-    return false
+    return null
   }
   render(
     <ThemeProvider
@@ -261,17 +261,17 @@ test('initializes mode from prefers-color-scheme media query', () => {
 })
 
 test('does not initialize mode from prefers-color-scheme media query', () => {
-  window.matchMedia = jest.fn().mockImplementation((query) => {
+  window.matchMedia = jest.fn().mockImplementation(query => {
     return {
       matches: false,
       media: query,
     }
   })
   let mode
-  const Consumer = (props) => {
+  const Consumer = props => {
     const [colorMode] = useColorMode()
     mode = colorMode
-    return false
+    return null
   }
   render(
     <ThemeProvider
@@ -285,17 +285,17 @@ test('does not initialize mode from prefers-color-scheme media query', () => {
 })
 
 test('does not initialize mode from prefers-color-scheme media query when useColorSchemeMediaQuery is not set', () => {
-  window.matchMedia = jest.fn().mockImplementation((query) => {
+  window.matchMedia = jest.fn().mockImplementation(query => {
     return {
       matches: true,
       media: query,
     }
   })
   let mode
-  const Consumer = (props) => {
+  const Consumer = props => {
     const [colorMode] = useColorMode()
     mode = colorMode
-    return false
+    return null
   }
   render(
     <ThemeProvider theme={{}}>
@@ -308,10 +308,9 @@ test('does not initialize mode from prefers-color-scheme media query when useCol
 test('useColorMode throws when there is no theme context', () => {
   const restore = mockConsole()
   expect(() => {
-    const Consumer = (props) => {
-      const [colorMode] = useColorMode('beep')
-      mode = colorMode
-      return false
+    const Consumer = props => {
+      const _ = useColorMode('beep')
+      return null
     }
     render(<Consumer />)
   }).toThrow()
@@ -325,7 +324,7 @@ test('useThemeUI returns current color mode colors', () => {
   const GetColors = () => {
     const { theme } = useThemeUI()
     colors = theme.colors
-    return false
+    return null
   }
   const root = render(
     <ThemeProvider
@@ -373,14 +372,14 @@ test('warns when initialColorModeName matches a key in theme.colors.modes', () =
 })
 
 test('dot notation works with color modes', () => {
-  const Button = (props) => {
+  const Button = props => {
     const [colorMode, setMode] = useColorMode()
     return (
       <button
         sx={{
           color: 'header.title',
         }}
-        onClick={(e) => {
+        onClick={e => {
           setMode('dark')
         }}
         children="test"
@@ -413,14 +412,14 @@ test('dot notation works with color modes', () => {
 })
 
 test('dot notation works with color modes and custom properties', () => {
-  const Button = (props) => {
+  const Button = props => {
     const [colorMode, setMode] = useColorMode()
     return (
       <button
         sx={{
           color: 'header.title',
         }}
-        onClick={(e) => {
+        onClick={e => {
           setMode('dark')
         }}
         children="test"
@@ -456,10 +455,10 @@ test('dot notation works with color modes and custom properties', () => {
 
 test('raw color values are passed to theme-ui context when custom properties are enabled', () => {
   let color
-  const Grabber = (props) => {
+  const Grabber = props => {
     const context = useThemeUI()
-    color = context.theme.colors.primary
-    return false
+    color = context.theme.colors!.primary
+    return null
   }
   const root = render(
     <ThemeProvider
@@ -487,10 +486,10 @@ test('warns when localStorage is disabled', () => {
   })
 
   let mode
-  const Consumer = (props) => {
+  const Consumer = props => {
     const [colorMode] = useColorMode()
     mode = colorMode
-    return false
+    return null
   }
 
   render(
diff --git a/packages/theme-ui/test/index.js b/packages/theme-ui/test/index.js
deleted file mode 100644
index f076eca48..000000000
--- a/packages/theme-ui/test/index.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/** @jsx mdx */
-import { mdx } from '@mdx-js/react'
-import React, { useContext } from 'react'
-import renderer from 'react-test-renderer'
-import { matchers } from 'jest-emotion'
-import mockConsole from 'jest-mock-console'
-import {
-  ThemeProvider,
-  Context,
-  Styled,
-  jsx,
-  useColorMode,
-  BaseStyles,
-  Container,
-  Box,
-} from '../src/index'
-
-expect.extend(matchers)
-
-const renderJSON = (el) => renderer.create(el).toJSON()
-
-test('renders', () => {
-  const json = renderJSON(
-    <ThemeProvider theme={{}}>
-      <h1>Hello</h1>
-    </ThemeProvider>
-  )
-  expect(json).toMatchSnapshot()
-})
-
-test('renders with styles', () => {
-  const json = renderJSON(
-    <ThemeProvider
-      theme={{
-        styles: {
-          h1: {
-            color: 'tomato',
-          },
-        },
-      }}>
-      <h1>Hello</h1>
-    </ThemeProvider>
-  )
-  expect(json).toMatchSnapshot()
-})
-
-test('creates non-standard components', () => {
-  const json = renderJSON(
-    <ThemeProvider
-      components={{
-        sup: 'sup',
-      }}
-      theme={{
-        styles: {
-          sup: {
-            color: 'tomato',
-          },
-        },
-      }}>
-      <sup>hey</sup>
-    </ThemeProvider>
-  )
-  expect(json).toMatchSnapshot()
-  expect(json).toHaveStyleRule('color', 'tomato')
-})
-
-test('styles React components', () => {
-  const Beep = (props) => <h2 {...props} />
-  const Inner = (props) => mdx('Beep', props)
-
-  const json = renderJSON(
-    <ThemeProvider
-      components={{
-        Beep,
-      }}
-      theme={{
-        styles: {
-          Beep: {
-            color: 'tomato',
-          },
-        },
-      }}>
-      <Inner />
-    </ThemeProvider>
-  )
-  expect(json.type).toBe('h2')
-  expect(json).toHaveStyleRule('color', 'tomato')
-})
-
-test('custom pragma adds styles', () => {
-  const json = renderJSON(
-    jsx('div', {
-      sx: {
-        mx: 'auto',
-        p: 2,
-        bg: 'tomato',
-      },
-    })
-  )
-  expect(json).toHaveStyleRule('margin-left', 'auto')
-  expect(json).toHaveStyleRule('margin-right', 'auto')
-  expect(json).toHaveStyleRule('padding', '8px')
-  expect(json).toHaveStyleRule('background-color', 'tomato')
-})
-
-test('warns when multiple versions of emotion are installed', () => {
-  const restore = mockConsole()
-  const json = renderJSON(
-    <Context.Provider
-      value={{
-        emotionVersion: '9.0.0',
-      }}>
-      <ThemeProvider theme={{}}>Conflicting versions</ThemeProvider>
-    </Context.Provider>
-  )
-  expect(console.warn).toBeCalled()
-  restore()
-})
-
-test('functional themes receive outer theme', () => {
-  const outer = {
-    useCustomProperties: false,
-    colors: {
-      text: 'tomato',
-    },
-  }
-  const theme = jest.fn()
-  const json = renderJSON(
-    jsx(
-      ThemeProvider,
-      { theme: outer },
-      jsx(
-        ThemeProvider,
-        { theme },
-        jsx('div', {
-          sx: {
-            color: 'text',
-          },
-        })
-      )
-    )
-  )
-  expect(theme).toHaveBeenCalledWith(outer)
-  expect(json).toHaveStyleRule('color', 'text')
-})
-
-test('functional themes can be used at the top level', () => {
-  const theme = jest.fn(() => ({
-    useCustomProperties: false,
-    colors: {
-      primary: 'tomato',
-    },
-  }))
-  let json
-  expect(() => {
-    json = renderJSON(
-      jsx(
-        ThemeProvider,
-        { theme },
-        jsx(
-          'div',
-          {
-            sx: {
-              color: 'primary',
-            },
-          },
-          'hi'
-        )
-      )
-    )
-  }).not.toThrow()
-  expect(json).toHaveStyleRule('color', 'tomato')
-})
-
-test('BaseStyles renders', () => {
-  const json = renderJSON(
-    <ThemeProvider
-      theme={{
-        fonts: {
-          body: 'system-ui, sans-serif',
-        },
-        lineHeights: {
-          body: 1.5,
-        },
-        fontWeights: {
-          body: 400,
-        },
-      }}>
-      <BaseStyles />
-    </ThemeProvider>
-  )
-  expect(json).toMatchSnapshot()
-})
-
-test('custom pragma adds styles', () => {
-  const json = renderJSON(
-    jsx('div', {
-      sx: {
-        mx: 'auto',
-        p: 2,
-        bg: 'tomato',
-      },
-    })
-  )
-  expect(json).toHaveStyleRule('margin-left', 'auto')
-  expect(json).toHaveStyleRule('margin-right', 'auto')
-  expect(json).toHaveStyleRule('padding', '8px')
-  expect(json).toHaveStyleRule('background-color', 'tomato')
-})
diff --git a/packages/theme-ui/test/index.tsx b/packages/theme-ui/test/index.tsx
index f076eca48..ab584b9ff 100644
--- a/packages/theme-ui/test/index.tsx
+++ b/packages/theme-ui/test/index.tsx
@@ -1,23 +1,21 @@
 /** @jsx mdx */
 import { mdx } from '@mdx-js/react'
-import React, { useContext } from 'react'
 import renderer from 'react-test-renderer'
 import { matchers } from 'jest-emotion'
 import mockConsole from 'jest-mock-console'
 import {
   ThemeProvider,
   Context,
-  Styled,
   jsx,
   useColorMode,
   BaseStyles,
-  Container,
-  Box,
+  Theme,
 } from '../src/index'
 
 expect.extend(matchers)
 
-const renderJSON = (el) => renderer.create(el).toJSON()
+const renderJSON = (el: Parameters<typeof renderer.create>[0]) =>
+  renderer.create(el).toJSON()
 
 test('renders', () => {
   const json = renderJSON(
@@ -65,8 +63,8 @@ test('creates non-standard components', () => {
 })
 
 test('styles React components', () => {
-  const Beep = (props) => <h2 {...props} />
-  const Inner = (props) => mdx('Beep', props)
+  const Beep = props => <h2 {...props} />
+  const Inner = props => mdx('Beep', props)
 
   const json = renderJSON(
     <ThemeProvider
@@ -83,7 +81,7 @@ test('styles React components', () => {
       <Inner />
     </ThemeProvider>
   )
-  expect(json.type).toBe('h2')
+  expect(json!.type).toBe('h2')
   expect(json).toHaveStyleRule('color', 'tomato')
 })
 
@@ -108,7 +106,8 @@ test('warns when multiple versions of emotion are installed', () => {
   const json = renderJSON(
     <Context.Provider
       value={{
-        emotionVersion: '9.0.0',
+        __EMOTION_VERSION__: '9.0.0',
+        theme: {},
       }}>
       <ThemeProvider theme={{}}>Conflicting versions</ThemeProvider>
     </Context.Provider>
@@ -122,9 +121,11 @@ test('functional themes receive outer theme', () => {
     useCustomProperties: false,
     colors: {
       text: 'tomato',
+      background: 'white',
+      primary: 'black',
     },
   }
-  const theme = jest.fn()
+  const theme = jest.fn<Theme, [Theme]>()
   const json = renderJSON(
     jsx(
       ThemeProvider,
@@ -145,18 +146,21 @@ test('functional themes receive outer theme', () => {
 })
 
 test('functional themes can be used at the top level', () => {
-  const theme = jest.fn(() => ({
-    useCustomProperties: false,
-    colors: {
-      primary: 'tomato',
-    },
-  }))
   let json
   expect(() => {
     json = renderJSON(
       jsx(
         ThemeProvider,
-        { theme },
+        {
+          theme: (_): Theme => ({
+            useCustomProperties: false,
+            colors: {
+              primary: 'tomato',
+              background: 'white',
+              text: 'black',
+            },
+          }),
+        },
         jsx(
           'div',
           {

From 77d5216389610a8b934666552134a568f642f322 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 24 May 2020 15:48:12 +0200
Subject: [PATCH 09/12] Rename SystemStyleObject to ThemeUIStyleObject

---
 examples/codesandbox-starter/package.json     |  2 +-
 packages/chrome/package.json                  |  2 +-
 packages/color-modes/package.json             |  2 +-
 packages/color/package.json                   |  4 +-
 packages/components/package.json              |  2 +-
 packages/core/package.json                    |  2 +-
 packages/core/src/types.ts                    |  4 +-
 packages/css/package.json                     |  2 +-
 packages/css/src/index.ts                     |  8 +-
 packages/css/src/types.ts                     | 97 +++++++++----------
 packages/custom-properties/package.json       |  4 +-
 packages/docs/package.json                    |  6 +-
 packages/editor/package.json                  |  1 +
 packages/editor/src/Styles.tsx                |  7 +-
 packages/editor/src/Sx/Space.tsx              |  5 +-
 packages/editor/test/Sx.tsx                   |  4 +-
 packages/match-media/package.json             |  2 +-
 packages/mdx/package.json                     |  2 +-
 packages/preset-dark/package.json             |  2 +-
 packages/preset-deep/package.json             |  2 +-
 packages/preset-sketchy/package.json          |  4 +-
 packages/preset-sketchy/src/index.ts          | 18 ++--
 packages/preset-swiss/package.json            |  2 +-
 packages/preset-system/package.json           |  2 +-
 packages/preset-tailwind/package.json         |  2 +-
 packages/preset-tosh/package.json             |  2 +-
 packages/presets/package.json                 | 16 +--
 packages/prism/package.json                   |  2 +-
 packages/style-guide/package.json             |  4 +-
 packages/tachyons/package.json                |  4 +-
 packages/tailwind/package.json                |  4 +-
 packages/theme-provider/package.json          |  2 +-
 packages/theme-ui/package.json                |  4 +-
 packages/theme-ui/src/index.ts                |  5 +-
 .../{index.js.snap => index.tsx.snap}         |  0
 35 files changed, 117 insertions(+), 114 deletions(-)
 rename packages/theme-ui/test/__snapshots__/{index.js.snap => index.tsx.snap} (100%)

diff --git a/examples/codesandbox-starter/package.json b/examples/codesandbox-starter/package.json
index 57371229c..572f7608e 100644
--- a/examples/codesandbox-starter/package.json
+++ b/examples/codesandbox-starter/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.17",
     "@mdx-js/react": "^1.4.5",
-    "@theme-ui/presets": "^0.4.0-alpha.2",
+    "@theme-ui/presets": "^0.4.0-alpha.3",
     "react": "^16.12.0",
     "react-dom": "^16.9.0",
     "theme-ui": "^0.4.0-alpha.3"
diff --git a/packages/chrome/package.json b/packages/chrome/package.json
index 1efa95a71..d722f34e4 100644
--- a/packages/chrome/package.json
+++ b/packages/chrome/package.json
@@ -32,7 +32,7 @@
     "webpack-cli": "^3.3.4"
   },
   "devDependencies": {
-    "@theme-ui/css": "^0.4.0-alpha.2"
+    "@theme-ui/css": "^0.4.0-alpha.3"
   },
   "gitHead": "bfd026cae085f377ca537de897dc43233d50f5d5"
 }
diff --git a/packages/color-modes/package.json b/packages/color-modes/package.json
index 77192978e..f28fae299 100644
--- a/packages/color-modes/package.json
+++ b/packages/color-modes/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.0",
     "@theme-ui/core": "^0.4.0-alpha.3",
-    "@theme-ui/css": "^0.4.0-alpha.2",
+    "@theme-ui/css": "^0.4.0-alpha.3",
     "deepmerge": "^4.2.2"
   },
   "peerDependencies": {
diff --git a/packages/color/package.json b/packages/color/package.json
index 4a88579e9..7918314ed 100644
--- a/packages/color/package.json
+++ b/packages/color/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/color",
-  "version": "0.4.0-alpha.2",
+  "version": "0.4.0-alpha.3",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -10,7 +10,7 @@
     "watch": "microbundle watch --no-compress"
   },
   "dependencies": {
-    "@theme-ui/css": "^0.4.0-alpha.2",
+    "@theme-ui/css": "^0.4.0-alpha.3",
     "polished": "^3.4.1"
   },
   "publishConfig": {
diff --git a/packages/components/package.json b/packages/components/package.json
index 67e4f0b3b..f0f33ed9c 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -16,7 +16,7 @@
     "@styled-system/color": "^5.1.2",
     "@styled-system/should-forward-prop": "^5.1.2",
     "@styled-system/space": "^5.1.2",
-    "@theme-ui/css": "^0.4.0-alpha.2"
+    "@theme-ui/css": "^0.4.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^16.8.0"
diff --git a/packages/core/package.json b/packages/core/package.json
index 3272547a7..443265d2c 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@emotion/core": "^10.0.0",
-    "@theme-ui/css": "^0.4.0-alpha.2",
+    "@theme-ui/css": "^0.4.0-alpha.3",
     "deepmerge": "^4.2.2"
   },
   "peerDependencies": {
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index c881cede0..2e73e3b42 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,11 +1,11 @@
-import { SystemStyleObject } from '@theme-ui/css'
+import { ThemeUIStyleObject } from '@theme-ui/css'
 
 /**
  * The `sx` prop accepts a `SxStyleProp` object and properties that are part of
  * the `Theme` will be transformed to their corresponding values. Other valid
  * CSS properties are also allowed.
  */
-export type SxStyleProp = SystemStyleObject
+export type SxStyleProp = ThemeUIStyleObject
 
 export interface SxProps {
   /**
diff --git a/packages/css/package.json b/packages/css/package.json
index 65e8f72dd..6d7a2b0b7 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/css",
-  "version": "0.4.0-alpha.2",
+  "version": "0.4.0-alpha.3",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index 543b76b97..9b6c72529 100644
--- a/packages/css/src/index.ts
+++ b/packages/css/src/index.ts
@@ -1,4 +1,4 @@
-import { CSSObject, SystemStyleObject, UseThemeFunction, Theme } from './types'
+import { CSSObject, ThemeUIStyleObject, UseThemeFunction, Theme } from './types'
 
 export * from './types'
 
@@ -215,10 +215,10 @@ const transforms = [
   {}
 )
 
-const responsive = (styles: Exclude<SystemStyleObject, UseThemeFunction>) => (
+const responsive = (styles: Exclude<ThemeUIStyleObject, UseThemeFunction>) => (
   theme?: Theme
 ) => {
-  const next: Exclude<SystemStyleObject, UseThemeFunction> = {}
+  const next: Exclude<ThemeUIStyleObject, UseThemeFunction> = {}
   const breakpoints =
     (theme && (theme.breakpoints as string[])) || defaultBreakpoints
   const mediaQueries = [
@@ -252,7 +252,7 @@ const responsive = (styles: Exclude<SystemStyleObject, UseThemeFunction>) => (
 
 type CssPropsArgument = { theme: Theme } | Theme
 
-export const css = (args: SystemStyleObject = {}) => (
+export const css = (args: ThemeUIStyleObject = {}) => (
   props: CssPropsArgument = {}
 ): CSSObject => {
   const theme: Theme = {
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index c5a565fea..2d6296cb1 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -27,7 +27,7 @@ export interface CSSProperties
 /**
  * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...)
  */
-export type CSSPseudoSelectorProps = { [K in CSS.Pseudos]?: SystemStyleObject }
+export type CSSPseudoSelectorProps = { [K in CSS.Pseudos]?: ThemeUIStyleObject }
 
 /**
  * CSS as POJO that is compatible with CSS-in-JS libaries.
@@ -51,7 +51,7 @@ interface CSSOthersObjectForCSSObject {
  * Map all nested selectors
  */
 export interface CSSSelectorObject {
-  [cssSelector: string]: SystemStyleObject
+  [cssSelector: string]: ThemeUIStyleObject
 }
 
 interface AliasesCSSProperties {
@@ -427,20 +427,19 @@ interface OverwriteCSSProperties {
 }
 
 /**
- * Map of all available CSS properties (including aliases) and their raw value.
- * Only used internally to map CCS properties to input types (responsive value,
- * theme function or nested) in `SystemCssProperties`.
+ * Map of all available CSS properties (including aliases and overwrites)
+ * and their raw value.
  */
-interface AllSystemCSSProperties
+export interface ThemeUIExtendedCSSProperties
   extends Omit<CSSProperties, keyof OverwriteCSSProperties>,
     AliasesCSSProperties,
     OverwriteCSSProperties {}
 
-export type SystemCssProperties = {
-  [K in keyof AllSystemCSSProperties]:
-    | ResponsiveStyleValue<AllSystemCSSProperties[K]>
-    | ((theme: any) => ResponsiveStyleValue<AllSystemCSSProperties[K]>)
-    | SystemStyleObject
+export type ThemeUICSSProperties = {
+  [K in keyof ThemeUIExtendedCSSProperties]:
+    | ResponsiveStyleValue<ThemeUIExtendedCSSProperties[K]>
+    | ((theme: Theme) => ResponsiveStyleValue<ThemeUIExtendedCSSProperties[K]>)
+    | ThemeUIStyleObject
 }
 
 export interface VariantProperty {
@@ -469,16 +468,16 @@ export interface VariantProperty {
 }
 
 export interface UseThemeFunction {
-  (theme: any): Exclude<SystemStyleObject, UseThemeFunction>
+  (theme: any): Exclude<ThemeUIStyleObject, UseThemeFunction>
 }
 
 /**
- * The `SystemStyleObject` extends [style props](https://emotion.sh/docs/object-styles)
+ * The `ThemeUIStyleObject` extends [style props](https://emotion.sh/docs/object-styles)
  * such that properties that are part of the `Theme` will be transformed to
  * their corresponding values. Other valid CSS properties are also allowed.
  */
-export type SystemStyleObject =
-  | SystemCssProperties
+export type ThemeUIStyleObject =
+  | ThemeUICSSProperties
   | CSSPseudoSelectorProps
   | CSSSelectorObject
   | VariantProperty
@@ -538,36 +537,36 @@ interface ColorModesScale extends ColorMode {
 }
 
 interface ThemeStyles {
-  tr?: SystemStyleObject
-  th?: SystemStyleObject
-  td?: SystemStyleObject
-  em?: SystemStyleObject
-  strong?: SystemStyleObject
-  div?: SystemStyleObject
-  p?: SystemStyleObject
-  b?: SystemStyleObject
-  i?: SystemStyleObject
-  a?: SystemStyleObject
-  h1?: SystemStyleObject
-  h2?: SystemStyleObject
-  h3?: SystemStyleObject
-  h4?: SystemStyleObject
-  h5?: SystemStyleObject
-  h6?: SystemStyleObject
-  img?: SystemStyleObject
-  pre?: SystemStyleObject
-  code?: SystemStyleObject
-  ol?: SystemStyleObject
-  ul?: SystemStyleObject
-  li?: SystemStyleObject
-  blockquote?: SystemStyleObject
-  hr?: SystemStyleObject
-  table?: SystemStyleObject
-  delete?: SystemStyleObject
-  inlineCode?: SystemStyleObject
-  thematicBreak?: SystemStyleObject
-  root?: SystemStyleObject
-  [key: string]: SystemStyleObject
+  tr?: ThemeUIStyleObject
+  th?: ThemeUIStyleObject
+  td?: ThemeUIStyleObject
+  em?: ThemeUIStyleObject
+  strong?: ThemeUIStyleObject
+  div?: ThemeUIStyleObject
+  p?: ThemeUIStyleObject
+  b?: ThemeUIStyleObject
+  i?: ThemeUIStyleObject
+  a?: ThemeUIStyleObject
+  h1?: ThemeUIStyleObject
+  h2?: ThemeUIStyleObject
+  h3?: ThemeUIStyleObject
+  h4?: ThemeUIStyleObject
+  h5?: ThemeUIStyleObject
+  h6?: ThemeUIStyleObject
+  img?: ThemeUIStyleObject
+  pre?: ThemeUIStyleObject
+  code?: ThemeUIStyleObject
+  ol?: ThemeUIStyleObject
+  ul?: ThemeUIStyleObject
+  li?: ThemeUIStyleObject
+  blockquote?: ThemeUIStyleObject
+  hr?: ThemeUIStyleObject
+  table?: ThemeUIStyleObject
+  delete?: ThemeUIStyleObject
+  inlineCode?: ThemeUIStyleObject
+  thematicBreak?: ThemeUIStyleObject
+  root?: ThemeUIStyleObject
+  [key: string]: ThemeUIStyleObject
 }
 
 export interface Theme {
@@ -586,10 +585,10 @@ export interface Theme {
   radii?: ObjectOrArray<CSS.BorderRadiusProperty<TLengthStyledSystem>>
   shadows?: ObjectOrArray<CSS.BoxShadowProperty>
   zIndices?: ObjectOrArray<CSS.ZIndexProperty>
-  buttons?: ObjectOrArray<SystemCssProperties>
-  colorStyles?: ObjectOrArray<SystemCssProperties>
-  textStyles?: ObjectOrArray<SystemCssProperties>
-  text?: ObjectOrArray<SystemCssProperties>
+  buttons?: ObjectOrArray<ThemeUICSSProperties>
+  colorStyles?: ObjectOrArray<ThemeUICSSProperties>
+  textStyles?: ObjectOrArray<ThemeUICSSProperties>
+  text?: ObjectOrArray<ThemeUICSSProperties>
   opacities?: ObjectOrArray<CSS.OpacityProperty>
   /**
    * Enable/disable custom CSS properties/variables if lower browser
diff --git a/packages/custom-properties/package.json b/packages/custom-properties/package.json
index d161ab21f..3ba856372 100644
--- a/packages/custom-properties/package.json
+++ b/packages/custom-properties/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@theme-ui/custom-properties",
   "description": "Generate CSS custom properties for use with Theme UI",
-  "version": "0.4.0-alpha.2",
+  "version": "0.4.0-alpha.3",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -19,7 +19,7 @@
     "pluralize": "^8.0.0"
   },
   "devDependencies": {
-    "@theme-ui/css": "^0.4.0-alpha.2",
+    "@theme-ui/css": "^0.4.0-alpha.3",
     "@types/pluralize": "^0.0.29"
   }
 }
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 2398f23b2..c27a1a192 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -21,12 +21,12 @@
     "@mdx-js/mdx": "^1.0.0-rc.0",
     "@mdx-js/react": "^1.0.0-rc.0",
     "@styled-system/edit": "^5.0.15",
-    "@theme-ui/color": "^0.4.0-alpha.2",
+    "@theme-ui/color": "^0.4.0-alpha.3",
     "@theme-ui/components": "^0.4.0-alpha.3",
-    "@theme-ui/css": "^0.4.0-alpha.2",
+    "@theme-ui/css": "^0.4.0-alpha.3",
     "@theme-ui/editor": "^0.4.0-alpha.3",
     "@theme-ui/match-media": "^0.4.0-alpha.3",
-    "@theme-ui/presets": "^0.4.0-alpha.2",
+    "@theme-ui/presets": "^0.4.0-alpha.3",
     "@theme-ui/prism": "^0.4.0-alpha.3",
     "@theme-ui/sidenav": "^0.4.0-alpha.3",
     "@theme-ui/style-guide": "^0.4.0-alpha.3",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 1244e0f11..431026446 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@theme-ui/components": "^0.4.0-alpha.3",
+    "@theme-ui/css": "^0.4.0-alpha.3",
     "@theme-ui/style-guide": "^0.4.0-alpha.3",
     "@types/react-color": "^2.17.3",
     "color": "^3.1.2",
diff --git a/packages/editor/src/Styles.tsx b/packages/editor/src/Styles.tsx
index 132287ec4..be7ad3124 100644
--- a/packages/editor/src/Styles.tsx
+++ b/packages/editor/src/Styles.tsx
@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx, useThemeUI, AllThemeUICSSProperties } from 'theme-ui'
+import { jsx, useThemeUI } from 'theme-ui'
+import { ThemeUIExtendedCSSProperties } from '@theme-ui/css'
 import { Fragment } from 'react'
 import Sx from './Sx'
 import { EditorContextValue } from './types'
@@ -8,8 +9,8 @@ export default function Styles({ tag = 'root' }) {
   const context = useThemeUI() as EditorContextValue
   const { styles = {} } = context.theme || {}
 
-  // unsafe
-  const style = (styles[tag] || {}) as AllThemeUICSSProperties
+  // todo: this is unsafe, and most probably a bug
+  const style = (styles[tag] || {}) as ThemeUIExtendedCSSProperties
 
   const setStyle = next => {
     context.setTheme({
diff --git a/packages/editor/src/Sx/Space.tsx b/packages/editor/src/Sx/Space.tsx
index 35785c78a..bd9da5560 100644
--- a/packages/editor/src/Sx/Space.tsx
+++ b/packages/editor/src/Sx/Space.tsx
@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx, SxStyleProp, AllThemeUICSSProperties } from 'theme-ui'
+import { jsx, SxStyleProp } from 'theme-ui'
+import { ThemeUIExtendedCSSProperties } from '@theme-ui/css'
 import { useState, useEffect } from 'react'
 import { Field, Label, Checkbox } from '@theme-ui/components'
 
@@ -8,7 +9,7 @@ export interface SpaceProps {
   property?: 'margin' | 'padding'
   value?: Partial<
     Pick<
-      AllThemeUICSSProperties,
+      ThemeUIExtendedCSSProperties,
       | 'paddingTop'
       | 'marginTop'
       | 'paddingBottom'
diff --git a/packages/editor/test/Sx.tsx b/packages/editor/test/Sx.tsx
index 56bc3ab42..c956f57f6 100644
--- a/packages/editor/test/Sx.tsx
+++ b/packages/editor/test/Sx.tsx
@@ -7,6 +7,8 @@ import {
   act,
 } from '@testing-library/react'
 import { ThemeProvider } from 'theme-ui'
+import { ThemeUIExtendedCSSProperties } from '@theme-ui/css'
+
 import { Sx } from '../src'
 
 const noop = () => {}
@@ -38,7 +40,7 @@ const theme = {
   },
 }
 
-const style = {
+const style: ThemeUIExtendedCSSProperties = {
   fontFamily: 'body',
   fontSize: 4,
   fontWeight: 'bold',
diff --git a/packages/match-media/package.json b/packages/match-media/package.json
index 4287275eb..e33a74ce5 100644
--- a/packages/match-media/package.json
+++ b/packages/match-media/package.json
@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@theme-ui/core": "^0.4.0-alpha.3",
-    "@theme-ui/css": "^0.4.0-alpha.2",
+    "@theme-ui/css": "^0.4.0-alpha.3",
     "react": "^16.9.0"
   },
   "peerDependencies": {
diff --git a/packages/mdx/package.json b/packages/mdx/package.json
index e54a02f17..59701eb7d 100644
--- a/packages/mdx/package.json
+++ b/packages/mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/mdx",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "sideEffects": false,
diff --git a/packages/preset-dark/package.json b/packages/preset-dark/package.json
index aa6fbf239..57ca5fb29 100644
--- a/packages/preset-dark/package.json
+++ b/packages/preset-dark/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/preset-dark",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
diff --git a/packages/preset-deep/package.json b/packages/preset-deep/package.json
index ba64b5956..35ad7a2c4 100644
--- a/packages/preset-deep/package.json
+++ b/packages/preset-deep/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/preset-deep",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
diff --git a/packages/preset-sketchy/package.json b/packages/preset-sketchy/package.json
index c15dfa7cf..77d7c62c1 100644
--- a/packages/preset-sketchy/package.json
+++ b/packages/preset-sketchy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/preset-sketchy",
-  "version": "0.4.0-alpha.2",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -15,6 +15,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@theme-ui/css": "^0.4.0-alpha.2"
+    "@theme-ui/css": "^0.4.0-alpha.3"
   }
 }
diff --git a/packages/preset-sketchy/src/index.ts b/packages/preset-sketchy/src/index.ts
index 8663dc88c..44f7f812f 100644
--- a/packages/preset-sketchy/src/index.ts
+++ b/packages/preset-sketchy/src/index.ts
@@ -1,15 +1,15 @@
-import { Theme, SystemStyleObject } from '@theme-ui/css'
+import { Theme, ThemeUIStyleObject } from '@theme-ui/css'
 
 export interface ThemeSketchy extends Theme {
-  cards: SystemStyleObject
-  links: SystemStyleObject
-  forms: Record<string, SystemStyleObject>
-  badges: SystemStyleObject
-  alerts: SystemStyleObject
-  messages: SystemStyleObject
+  cards: ThemeUIStyleObject
+  links: ThemeUIStyleObject
+  forms: Record<string, ThemeUIStyleObject>
+  badges: ThemeUIStyleObject
+  alerts: ThemeUIStyleObject
+  messages: ThemeUIStyleObject
 }
 
-const defaultBorderStyles: SystemStyleObject = {
+const defaultBorderStyles: ThemeUIStyleObject = {
   border: 'thick',
   color: 'text',
   borderRadius: 'sketchy0',
@@ -26,7 +26,7 @@ const buttonStyles = {
   },
 }
 
-const formStyles: SystemStyleObject = {
+const formStyles: ThemeUIStyleObject = {
   borderRadius: 'sketchy3',
   borderColor: 'text',
   fontFamily: 'inherit',
diff --git a/packages/preset-swiss/package.json b/packages/preset-swiss/package.json
index f8eebc561..a24baf0b6 100644
--- a/packages/preset-swiss/package.json
+++ b/packages/preset-swiss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/preset-swiss",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
diff --git a/packages/preset-system/package.json b/packages/preset-system/package.json
index 33a1b042e..b4ab45a54 100644
--- a/packages/preset-system/package.json
+++ b/packages/preset-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/preset-system",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
diff --git a/packages/preset-tailwind/package.json b/packages/preset-tailwind/package.json
index d23762072..4cdcc9539 100644
--- a/packages/preset-tailwind/package.json
+++ b/packages/preset-tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/preset-tailwind",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
diff --git a/packages/preset-tosh/package.json b/packages/preset-tosh/package.json
index 9b8bf3a34..d8338b8f5 100644
--- a/packages/preset-tosh/package.json
+++ b/packages/preset-tosh/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/preset-tosh",
-  "version": "0.4.0-alpha.1",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
diff --git a/packages/presets/package.json b/packages/presets/package.json
index c925aef99..cd64f4d9a 100644
--- a/packages/presets/package.json
+++ b/packages/presets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/presets",
-  "version": "0.4.0-alpha.2",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -15,17 +15,17 @@
     "@theme-ui/preset-base": "^0.4.0-alpha.0",
     "@theme-ui/preset-bootstrap": "^0.4.0-alpha.0",
     "@theme-ui/preset-bulma": "^0.4.0-alpha.0",
-    "@theme-ui/preset-dark": "^0.4.0-alpha.1",
-    "@theme-ui/preset-deep": "^0.4.0-alpha.1",
+    "@theme-ui/preset-dark": "^0.4.0-alpha.3",
+    "@theme-ui/preset-deep": "^0.4.0-alpha.3",
     "@theme-ui/preset-funk": "^0.4.0-alpha.0",
     "@theme-ui/preset-future": "^0.4.0-alpha.0",
     "@theme-ui/preset-polaris": "^0.4.0-alpha.0",
     "@theme-ui/preset-roboto": "^0.4.0-alpha.0",
-    "@theme-ui/preset-sketchy": "^0.4.0-alpha.2",
-    "@theme-ui/preset-swiss": "^0.4.0-alpha.1",
-    "@theme-ui/preset-system": "^0.4.0-alpha.1",
-    "@theme-ui/preset-tailwind": "^0.4.0-alpha.1",
-    "@theme-ui/preset-tosh": "^0.4.0-alpha.1"
+    "@theme-ui/preset-sketchy": "^0.4.0-alpha.3",
+    "@theme-ui/preset-swiss": "^0.4.0-alpha.3",
+    "@theme-ui/preset-system": "^0.4.0-alpha.3",
+    "@theme-ui/preset-tailwind": "^0.4.0-alpha.3",
+    "@theme-ui/preset-tosh": "^0.4.0-alpha.3"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/prism/package.json b/packages/prism/package.json
index 7e776e54a..53d9cf767 100644
--- a/packages/prism/package.json
+++ b/packages/prism/package.json
@@ -16,7 +16,7 @@
     "prism-react-renderer": "^1.0.2"
   },
   "peerDependencies": {
-    "theme-ui": "^0.4.0-alpha.1"
+    "theme-ui": "^0.4.0-alpha.3"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/style-guide/package.json b/packages/style-guide/package.json
index ed82ce4f3..86d685fc1 100644
--- a/packages/style-guide/package.json
+++ b/packages/style-guide/package.json
@@ -12,7 +12,7 @@
     "watch": "microbundle watch --no-compress"
   },
   "dependencies": {
-    "@theme-ui/presets": "^0.4.0-alpha.2",
+    "@theme-ui/presets": "^0.4.0-alpha.3",
     "@types/color": "^3.0.1",
     "color": "^3.1.2",
     "lodash.get": "^4.4.2"
@@ -20,7 +20,7 @@
   "peerDependencies": {
     "@emotion/core": "^10.0.10",
     "react": "^16.8.6",
-    "theme-ui": "^0.4.0-alpha.1"
+    "theme-ui": "^0.4.0-alpha.3"
   },
   "devDependencies": {
     "@emotion/core": "^10.0.10",
diff --git a/packages/tachyons/package.json b/packages/tachyons/package.json
index 28f2a51ea..49901718a 100644
--- a/packages/tachyons/package.json
+++ b/packages/tachyons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@theme-ui/tachyons",
   "description": "Generate static CSS for use outside of React with Theme UI and Tachyons",
-  "version": "0.4.0-alpha.2",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "source": "src/index.ts",
@@ -13,7 +13,7 @@
     "watch": "microbundle watch --no-compress --tsconfig tsconfig.json"
   },
   "devDependencies": {
-    "@theme-ui/css": "^0.4.0-alpha.2",
+    "@theme-ui/css": "^0.4.0-alpha.3",
     "babel-polyfill": "^6.26.0",
     "execa": "^4.0.0"
   },
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
index 4741122c5..3ba71c49e 100644
--- a/packages/tailwind/package.json
+++ b/packages/tailwind/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@theme-ui/tailwind",
   "description": "Generate static CSS for use outside of React with Theme UI and Tailwind.css",
-  "version": "0.4.0-alpha.2",
+  "version": "0.4.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "source": "src/index.ts",
@@ -13,7 +13,7 @@
     "watch": "microbundle watch --no-compress --tsconfig tsconfig.json"
   },
   "devDependencies": {
-    "@theme-ui/css": "^0.4.0-alpha.2",
+    "@theme-ui/css": "^0.4.0-alpha.3",
     "babel-polyfill": "^6.26.0",
     "execa": "^4.0.0",
     "tailwindcss": "^1.0.4"
diff --git a/packages/theme-provider/package.json b/packages/theme-provider/package.json
index f75d816c9..067808ab1 100644
--- a/packages/theme-provider/package.json
+++ b/packages/theme-provider/package.json
@@ -14,7 +14,7 @@
     "@emotion/core": "^10.0.0",
     "@theme-ui/color-modes": "^0.4.0-alpha.3",
     "@theme-ui/core": "^0.4.0-alpha.3",
-    "@theme-ui/mdx": "^0.4.0-alpha.1"
+    "@theme-ui/mdx": "^0.4.0-alpha.3"
   },
   "repository": "system-ui/theme-ui",
   "author": "Brent Jackson",
diff --git a/packages/theme-ui/package.json b/packages/theme-ui/package.json
index 5e8a8bff3..d329b3277 100644
--- a/packages/theme-ui/package.json
+++ b/packages/theme-ui/package.json
@@ -17,8 +17,8 @@
     "@theme-ui/color-modes": "^0.4.0-alpha.3",
     "@theme-ui/components": "^0.4.0-alpha.3",
     "@theme-ui/core": "^0.4.0-alpha.3",
-    "@theme-ui/css": "^0.4.0-alpha.2",
-    "@theme-ui/mdx": "^0.4.0-alpha.1",
+    "@theme-ui/css": "^0.4.0-alpha.3",
+    "@theme-ui/mdx": "^0.4.0-alpha.3",
     "@theme-ui/theme-provider": "^0.4.0-alpha.3"
   },
   "keywords": [
diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts
index a2c9b8d55..e72a83559 100644
--- a/packages/theme-ui/src/index.ts
+++ b/packages/theme-ui/src/index.ts
@@ -22,9 +22,8 @@ export {
   CSSProperties,
   CSSPseudoSelectorProps,
   ResponsiveStyleValue,
-  AllThemeUICSSProperties,
-  ThemeUIRecursiveCSSProperties,
-  SystemStyleObject,
+  ThemeUICSSProperties,
+  ThemeUIStyleObject,
   Theme,
   TLengthStyledSystem,
   UseThemeFunction,
diff --git a/packages/theme-ui/test/__snapshots__/index.js.snap b/packages/theme-ui/test/__snapshots__/index.tsx.snap
similarity index 100%
rename from packages/theme-ui/test/__snapshots__/index.js.snap
rename to packages/theme-ui/test/__snapshots__/index.tsx.snap

From db8e187bf99aa62a4ef797729e97f464f5ba9c73 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 24 May 2020 15:55:55 +0200
Subject: [PATCH 10/12] Support VendorProperties in types

---
 packages/css/src/types.ts      |  4 +++-
 packages/css/test/index.ts     | 14 ++++++++++----
 packages/sidenav/src/index.tsx |  4 ++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 2d6296cb1..891f007de 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -22,7 +22,9 @@ export type ResponsiveStyleValue<T> = T | Array<T | null>
  */
 export interface CSSProperties
   extends CSS.StandardProperties<number | string>,
-    CSS.SvgProperties<number | string> {}
+    CSS.SvgProperties<number | string>,
+    CSS.VendorProperties<number | string> 
+    {}
 
 /**
  * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...)
diff --git a/packages/css/test/index.ts b/packages/css/test/index.ts
index 395264282..d4a5ebc2c 100644
--- a/packages/css/test/index.ts
+++ b/packages/css/test/index.ts
@@ -196,7 +196,7 @@ test('works with the css prop', () => {
 })
 
 test('works with functional arguments', () => {
-  const result = css(t => ({
+  const result = css((t) => ({
     color: t.colors.primary,
   }))(theme)
   expect(result).toEqual({
@@ -206,7 +206,7 @@ test('works with functional arguments', () => {
 
 test('supports functional values', () => {
   const result = css({
-    color: t => t.colors.primary,
+    color: (t) => t.colors.primary,
   })(theme)
   expect(result).toEqual({
     color: 'tomato',
@@ -285,7 +285,7 @@ test('handles negative margins from scale that is an object', () => {
   const result = css({
     mt: '-s',
     mx: '-m',
-  })({...theme, space: { s: '16px', m: '32px' }})
+  })({ ...theme, space: { s: '16px', m: '32px' } })
   expect(result).toEqual({
     marginTop: '-16px',
     marginLeft: '-32px',
@@ -344,7 +344,7 @@ test('ignores array values longer than breakpoints', () => {
 
 test('functional values can return responsive arrays', () => {
   const result = css({
-    color: t => [t.colors.primary, t.colors.secondary],
+    color: (t) => [t.colors.primary, t.colors.secondary],
   })(theme)
   expect(result).toEqual({
     '@media screen and (min-width: 40em)': {
@@ -494,3 +494,9 @@ test('returns correct media query order 2', () => {
     'paddingBottom',
   ])
 })
+
+test('supports vendor properties', () => {
+  expect(css({ WebkitOverflowScrolling: 'touch' })(theme)).toStrictEqual({
+    WebkitOverflowScrolling: 'touch',
+  })
+})
diff --git a/packages/sidenav/src/index.tsx b/packages/sidenav/src/index.tsx
index 5e281c3f8..22d486e3e 100644
--- a/packages/sidenav/src/index.tsx
+++ b/packages/sidenav/src/index.tsx
@@ -130,7 +130,7 @@ export const Sidenav = forwardRef<
             transition: 'transform .2s ease-out',
             transform: [open ? 'translateX(0)' : 'translate(-100%)', 'none'],
             bg: ['background', 'transparent'],
-            ...{ WebkitOverflowScrolling: 'touch' },
+            WebkitOverflowScrolling: 'touch',
           }}
         />
       </MDXProvider>
@@ -267,7 +267,7 @@ export const AccordionNav = forwardRef<
             transition: 'transform .2s ease-out',
             transform: [open ? 'translateX(0)' : 'translate(-100%)', 'none'],
             bg: ['background', 'transparent'],
-            ...{ WebkitOverflowScrolling: 'touch' },
+            WebkitOverflowScrolling: 'touch',
           }}>
           <ul
             sx={{

From 9c996f103fca2a35958f0a09558055b03086f0ed Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Sun, 24 May 2020 16:09:46 +0200
Subject: [PATCH 11/12] Export ThemeStyles

---
 packages/css/src/types.ts      | 5 ++---
 packages/sidenav/src/index.tsx | 4 ++--
 packages/theme-ui/src/index.ts | 1 +
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 891f007de..79d6f0b4f 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -23,8 +23,7 @@ export type ResponsiveStyleValue<T> = T | Array<T | null>
 export interface CSSProperties
   extends CSS.StandardProperties<number | string>,
     CSS.SvgProperties<number | string>,
-    CSS.VendorProperties<number | string> 
-    {}
+    CSS.VendorProperties<number | string> {}
 
 /**
  * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...)
@@ -538,7 +537,7 @@ interface ColorModesScale extends ColorMode {
   }
 }
 
-interface ThemeStyles {
+export interface ThemeStyles {
   tr?: ThemeUIStyleObject
   th?: ThemeUIStyleObject
   td?: ThemeUIStyleObject
diff --git a/packages/sidenav/src/index.tsx b/packages/sidenav/src/index.tsx
index 22d486e3e..911f26bc2 100644
--- a/packages/sidenav/src/index.tsx
+++ b/packages/sidenav/src/index.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, ThemeProvider, SxStyleProp, Theme } from 'theme-ui'
+import { jsx, ThemeProvider, Theme, ThemeStyles } from 'theme-ui'
 import { MDXProvider, MDXProviderComponents } from '@mdx-js/react'
 import React, {
   useState,
@@ -79,7 +79,7 @@ export const Sidenav = forwardRef<
   {
     open?: boolean
     components?: MDXProviderComponents
-    styles?: Theme['styles']
+    styles?: ThemeStyles
     children: ReactNode
   }
 >(({ open, styles = {}, components = {}, ...props }, ref) => {
diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts
index e72a83559..d51cd5104 100644
--- a/packages/theme-ui/src/index.ts
+++ b/packages/theme-ui/src/index.ts
@@ -25,6 +25,7 @@ export {
   ThemeUICSSProperties,
   ThemeUIStyleObject,
   Theme,
+  ThemeStyles,
   TLengthStyledSystem,
   UseThemeFunction,
 } from '@theme-ui/css'

From 5b7f14cfce642fe745cdff973f5fd24c2ec4bea5 Mon Sep 17 00:00:00 2001
From: hasparus <hasparus@gmail.com>
Date: Thu, 28 May 2020 15:14:37 +0200
Subject: [PATCH 12/12] Prettier format test/color-modes.tsx

---
 packages/theme-ui/test/color-modes.tsx | 48 +++++++++++++-------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/theme-ui/test/color-modes.tsx b/packages/theme-ui/test/color-modes.tsx
index 975bc262b..936bdd7fd 100644
--- a/packages/theme-ui/test/color-modes.tsx
+++ b/packages/theme-ui/test/color-modes.tsx
@@ -18,7 +18,7 @@ expect.extend(matchers)
 test('renders with color modes', () => {
   let json
   let mode
-  const Mode = props => {
+  const Mode = (props) => {
     const [colorMode] = useColorMode()
     mode = colorMode
     return <div>Mode</div>
@@ -46,7 +46,7 @@ test('renders with color modes', () => {
 test('renders with initial color mode name', () => {
   let json
   let mode
-  const Mode = props => {
+  const Mode = (props) => {
     const [colorMode] = useColorMode()
     mode = colorMode
     return <div>Mode</div>
@@ -71,12 +71,12 @@ test('renders with initial color mode name', () => {
 
 test('useColorMode updates color mode state', () => {
   let mode
-  const Button = props => {
+  const Button = (props) => {
     const [colorMode, setMode] = useColorMode()
     mode = colorMode
     return (
       <button
-        onClick={e => {
+        onClick={(e) => {
           setMode('dark')
         }}
         children="test"
@@ -95,7 +95,7 @@ test('useColorMode updates color mode state', () => {
 
 test('color mode is passed through theme context', () => {
   let mode
-  const Button = props => {
+  const Button = (props) => {
     const [colorMode, setMode] = useColorMode()
     mode = colorMode
     return (
@@ -103,7 +103,7 @@ test('color mode is passed through theme context', () => {
         sx={{
           color: 'text',
         }}
-        onClick={e => {
+        onClick={(e) => {
           setMode('dark')
         }}
         children="test"
@@ -133,7 +133,7 @@ test('color mode is passed through theme context', () => {
 })
 
 test('converts color modes to css custom properties', () => {
-  const Box = props => (
+  const Box = (props) => (
     <div
       sx={{
         color: 'text',
@@ -164,7 +164,7 @@ test('converts color modes to css custom properties', () => {
 
 test('uses default mode', () => {
   let mode
-  const Button = props => {
+  const Button = (props) => {
     const [colorMode, setMode] = useColorMode()
     mode = colorMode
     return <button children="test" />
@@ -180,7 +180,7 @@ test('uses default mode', () => {
 test('initializes mode based on localStorage', () => {
   window.localStorage.setItem(STORAGE_KEY, 'dark')
   let mode
-  const Button = props => {
+  const Button = (props) => {
     const [colorMode, setMode] = useColorMode()
     mode = colorMode
     return <button children="test" />
@@ -195,7 +195,7 @@ test('initializes mode based on localStorage', () => {
 
 test('inherits color mode state from parent context', () => {
   let mode
-  const Consumer = props => {
+  const Consumer = (props) => {
     const [colorMode] = useColorMode()
     mode = colorMode
     return null
@@ -223,7 +223,7 @@ test('inherits color mode state from parent context', () => {
 
 test('retains initial context', () => {
   let context
-  const Consumer = props => {
+  const Consumer = (props) => {
     context = useThemeUI()
     return null
   }
@@ -237,14 +237,14 @@ test('retains initial context', () => {
 })
 
 test('initializes mode from prefers-color-scheme media query', () => {
-  window.matchMedia = jest.fn().mockImplementation(query => {
+  window.matchMedia = jest.fn().mockImplementation((query) => {
     return {
       matches: true,
       media: query,
     }
   })
   let mode
-  const Consumer = props => {
+  const Consumer = (props) => {
     const [colorMode] = useColorMode()
     mode = colorMode
     return null
@@ -261,14 +261,14 @@ test('initializes mode from prefers-color-scheme media query', () => {
 })
 
 test('does not initialize mode from prefers-color-scheme media query', () => {
-  window.matchMedia = jest.fn().mockImplementation(query => {
+  window.matchMedia = jest.fn().mockImplementation((query) => {
     return {
       matches: false,
       media: query,
     }
   })
   let mode
-  const Consumer = props => {
+  const Consumer = (props) => {
     const [colorMode] = useColorMode()
     mode = colorMode
     return null
@@ -285,14 +285,14 @@ test('does not initialize mode from prefers-color-scheme media query', () => {
 })
 
 test('does not initialize mode from prefers-color-scheme media query when useColorSchemeMediaQuery is not set', () => {
-  window.matchMedia = jest.fn().mockImplementation(query => {
+  window.matchMedia = jest.fn().mockImplementation((query) => {
     return {
       matches: true,
       media: query,
     }
   })
   let mode
-  const Consumer = props => {
+  const Consumer = (props) => {
     const [colorMode] = useColorMode()
     mode = colorMode
     return null
@@ -308,7 +308,7 @@ test('does not initialize mode from prefers-color-scheme media query when useCol
 test('useColorMode throws when there is no theme context', () => {
   const restore = mockConsole()
   expect(() => {
-    const Consumer = props => {
+    const Consumer = (props) => {
       const _ = useColorMode('beep')
       return null
     }
@@ -372,14 +372,14 @@ test('warns when initialColorModeName matches a key in theme.colors.modes', () =
 })
 
 test('dot notation works with color modes', () => {
-  const Button = props => {
+  const Button = (props) => {
     const [colorMode, setMode] = useColorMode()
     return (
       <button
         sx={{
           color: 'header.title',
         }}
-        onClick={e => {
+        onClick={(e) => {
           setMode('dark')
         }}
         children="test"
@@ -412,14 +412,14 @@ test('dot notation works with color modes', () => {
 })
 
 test('dot notation works with color modes and custom properties', () => {
-  const Button = props => {
+  const Button = (props) => {
     const [colorMode, setMode] = useColorMode()
     return (
       <button
         sx={{
           color: 'header.title',
         }}
-        onClick={e => {
+        onClick={(e) => {
           setMode('dark')
         }}
         children="test"
@@ -455,7 +455,7 @@ test('dot notation works with color modes and custom properties', () => {
 
 test('raw color values are passed to theme-ui context when custom properties are enabled', () => {
   let color
-  const Grabber = props => {
+  const Grabber = (props) => {
     const context = useThemeUI()
     color = context.theme.colors!.primary
     return null
@@ -486,7 +486,7 @@ test('warns when localStorage is disabled', () => {
   })
 
   let mode
-  const Consumer = props => {
+  const Consumer = (props) => {
     const [colorMode] = useColorMode()
     mode = colorMode
     return null