Merge branch 'master' into next-core-mdx

Author: jxnblk

CHANGELOG.md

@@ -18,6 +18,7 @@
 - The `@theme-ui/editor` API has changed significantly. See the README.md for more information.
 
 - `@theme-ui/components`: on Grid component, allow custom `columns` definitions via strings #541
+- `@theme-ui/gatsby-theme-style-guide`: add docs on shadowing #558
 - Adds `@theme-ui/preset-polaris` #567
 - Adjusts default font stack in presets #568
 

examples/gatsby-plugin/package.json

@@ -24,7 +24,7 @@
     "@testing-library/react": "^9.1.3",
     "husky": ">=4.0.7",
     "jest": "^24.8.0",
-    "lint-staged": "9",
+    "lint-staged": "10",
     "react-test-renderer": "^16.8.6"
   }
 }

lint-staged.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  '*.{js,json}': ['prettier --write', 'git add'],
+  '*.{js,json}': ['prettier --write'],
 }

package.json

@@ -31,7 +31,7 @@
     "jest-emotion": "^10.0.11",
     "jest-mock-console": "^1.0.0",
     "lerna": "^3.14.1",
-    "lint-staged": "9",
+    "lint-staged": "10",
     "microbundle": "^0.11.0",
     "prettier": "^1.18.2",
     "react-test-renderer": "^16.8.6"

packages/color/package.json

@@ -8,7 +8,7 @@
     "watch": "microbundle watch --no-compress"
   },
   "dependencies": {
-    "@styled-system/css": "^5.0.23",
+    "@theme-ui/css": "^0.3.0-alpha.6",
     "polished": "^3.4.1"
   },
   "publishConfig": {

packages/color/src/index.js

@@ -1,7 +1,10 @@
 import * as P from 'polished'
-import { get } from '@styled-system/css'
+import { get } from '@theme-ui/css'
 
-const g = (t, c) => get(t, `colors.${c}`, c).replace(/^var\(--(\w+)(.*?), /,'').replace(/\)/,'')
+const g = (t, c) =>
+  get(t, `colors.${c}`, c)
+    .replace(/^var\(--(\w+)(.*?), /, '')
+    .replace(/\)/, '')
 
 export const darken = (c, n) => t => P.darken(n, g(t, c))
 export const lighten = (c, n) => t => P.lighten(n, g(t, c))

packages/components/package.json

@@ -12,7 +12,7 @@
     "@emotion/core": "^10.0.0",
     "@emotion/styled": "^10.0.0",
     "@styled-system/color": "^5.1.2",
-    "@styled-system/css": "^5.0.23",
+    "@theme-ui/css": "^0.3.0-alpha.6",
     "@styled-system/should-forward-prop": "^5.1.2",
     "@styled-system/space": "^5.1.2"
   },

packages/components/src/AspectImage.js

@@ -2,12 +2,8 @@ import React from 'react'
 import { AspectRatio } from './AspectRatio'
 import { Image } from './Image'
 
-export const AspectImage = React.forwardRef(({
-  ratio,
-  ...props
-}, ref) => (
-  <AspectRatio
-    ratio={ratio}>
+export const AspectImage = React.forwardRef(({ ratio, ...props }, ref) => (
+  <AspectRatio ratio={ratio}>
     <Image
       ref={ref}
       {...props}

packages/components/src/AspectRatio.js

@@ -1,34 +1,32 @@
 import React from 'react'
 import Box from './Box'
 
-export const AspectRatio = React.forwardRef(({
-  ratio = 4/3,
-  children,
-  ...props
-}, ref) => (
-  <Box
-    ref={ref}
-    sx={{
-      position: 'relative',
-      overflow: 'hidden',
-    }}>
+export const AspectRatio = React.forwardRef(
+  ({ ratio = 4 / 3, children, ...props }, ref) => (
     <Box
+      ref={ref}
       sx={{
-        width: '100%',
-        height: 0,
-        paddingBottom: (100 / ratio) + '%',
-      }}
-    />
-    <Box
-      {...props}
-      __css={{
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
+        position: 'relative',
+        overflow: 'hidden',
       }}>
-      {children}
+      <Box
+        sx={{
+          width: '100%',
+          height: 0,
+          paddingBottom: 100 / ratio + '%',
+        }}
+      />
+      <Box
+        {...props}
+        __css={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+        }}>
+        {children}
+      </Box>
     </Box>
-  </Box>
-))
+  )
+)

packages/components/src/Avatar.js

@@ -1,15 +1,12 @@
 import React from 'react'
 import { Image } from './Image'
 
-export const Avatar = React.forwardRef(({
-  size = 48,
-  ...props
-}, ref) => (
+export const Avatar = React.forwardRef(({ size = 48, ...props }, ref) => (
   <Image
     ref={ref}
     width={size}
     height={size}
-    variant='avatar'
+    variant="avatar"
     {...props}
     __css={{
       borderRadius: 9999,