Use theme-ui/css in core

Author: jxnblk

packages/css/src/index.js

@@ -8,7 +8,7 @@ export const get = (obj, key, def, p, undef) => {
 
 const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
 
-export const defaultTheme = {
+const defaultTheme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
 }
@@ -147,7 +147,7 @@ const transforms = [
   {}
 )
 
-export const responsive = styles => theme => {
+const responsive = styles => theme => {
   const next = {}
   const breakpoints = get(theme, 'breakpoints', defaultBreakpoints)
   const mediaQueries = [
@@ -219,5 +219,3 @@ export const css = args => (props = {}) => {
 
   return result
 }
-
-export default css

packages/css/test/index.js

@@ -1,4 +1,4 @@
-import css from '../src'
+import { css } from '../src'
 
 const theme = {
   colors: {

packages/theme-ui/README.md

@@ -53,7 +53,6 @@ help you build UI rooted in constraint-based design principles.
 [mdx]: https://mdxjs.com
 [styled system]: https://styled-system.com
 [gatsby]: https://gatsbyjs.org
-[@styled-system/css]: https://styled-system.com/css
 [theme specification]: https://system-ui.com/theme
 [typography.js]: https://github.com/KyleAMathews/typography.js
 
@@ -123,7 +122,6 @@ export default props => (
 )
 ```
 
-Under the hood, this uses the [`@styled-system/css`](https://styled-system.com/css) utility and Emotion's custom JSX pragma implementation.
 Read more about [how the custom pragma works](https://theme-ui.com/how-it-works/#jsx-pragma).
 
 ## Responsive styles

packages/theme-ui/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^0.8.1",
-    "@styled-system/css": "^5.0.16",
+    "@theme-ui/css": "^0.2.48",
     "deepmerge": "^4.0.0"
   },
   "devDependencies": {

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { css } from '@styled-system/css'
+import { css } from '@theme-ui/css'
 import { Global } from '@emotion/core'
 import { useThemeUI } from './context'
 import { createColorStyles } from './custom-properties'

packages/theme-ui/src/custom-properties.js

@@ -1,5 +1,5 @@
 // convert theme and style objects to CSS custom properties
-import { css } from '@styled-system/css'
+import { css } from '@theme-ui/css'
 
 const toVarName = key => `--theme-ui-${key}`
 const toVarValue = (key, value) => `var(${toVarName(key)}, ${value})`

packages/theme-ui/src/index.js

@@ -5,4 +5,4 @@ export { ColorMode, useColorMode, InitializeColorMode } from './color-modes'
 export { Styled, components } from './components'
 export { Box, Flex, Layout, Header, Main, Container, Footer } from './layout'
 export { BaseStyles } from './base-styles'
-export { css, get } from '@styled-system/css'
+export { css, get } from '@theme-ui/css'

packages/theme-ui/src/jsx.js

@@ -1,5 +1,5 @@
 import { jsx as emotion } from '@emotion/core'
-import css from '@styled-system/css'
+import { css } from '@theme-ui/css'
 
 const getCSS = props => {
   if (!props.sx && !props.css) return undefined

packages/theme-ui/src/provider.js

@@ -2,7 +2,7 @@ import { useEffect, useReducer } from 'react'
 import { ThemeContext as EmotionContext } from '@emotion/core'
 import { version as emotionVersion } from '@emotion/core/package.json'
 import { MDXProvider } from '@mdx-js/react'
-import { get } from '@styled-system/css'
+import { get } from '@theme-ui/css'
 import merge from './merge'
 import jsx from './jsx'
 import { Context, useThemeUI } from './context'

packages/theme-ui/src/themed.js

@@ -1,4 +1,4 @@
-import { css, get } from '@styled-system/css'
+import { css, get } from '@theme-ui/css'
 
 export const themed = key => props =>
   css(get(props.theme, `styles.${key}`))(props.theme)