Merge branch 'develop' into default-color-scheme-true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

CHANGELOG.md

@@ -3,6 +3,11 @@
 ## v0.6.0 UNRELEASED
 
 - **BREAKING**: Default `useColorModeMediaQuery` to `true`. Issue #624, PR #1373
+- Extract objects with nested variant props. Issue #1357
+- Add ability for MDX styling, and fix mdx table align styles. Issue #654
+- Remove recursive default values from CSS custom properties. PR #1327
+- Support a `"default"` key for object in scales. PR #951
+- Render extra Embed props onto `iframe` tag instead of wrapping `div`. Issue #966, PR #1122
 
 ## v0.6.0-alpha.1
 

deprecated/chrome/README.md

@@ -10,7 +10,7 @@ See [Blocks UI](https://github.com/blocks/blocks) for a theme editor and JSX pag
 
 ## Installation
 
-1. [Download extension](https://github.com/system-ui/theme-ui/tree/master/packages/chrome/public)
+1. [Download extension](https://github.com/system-ui/theme-ui/tree/stable/packages/chrome/public)
 1. Navigate to chrome://extensions/
 1. Enable "Developer mode"
 1. Click "LOAD UNPACKED"

deprecated/gatsby-theme-ui-blog/README.md

@@ -1,4 +1,3 @@
-
 # gatsby-theme-ui-blog
 
 Minimal Gatsby MDX blog theme built with Theme UI.
@@ -11,21 +10,19 @@ npm i gatsby-theme-ui-blog
 ```js
 // gatsby-config.js
 module.exports = {
-  plugins: [
-    'gatsby-theme-ui-blog',
-  ]
+  plugins: ['gatsby-theme-ui-blog'],
 }
 ```
 
 ## Shadowing
 
 Shadow the following components to customize styles and page layout:
 
-Component | Description | Props
----|---|---
-`src/gatsby-theme-ui-blog/posts.js` | Index page for all blog posts | `{ posts }`
-`src/gatsby-theme-ui-blog/post.js` | Full blog post article page | `{ title, date, children, keywords, tags }`
-`src/gatsby-theme-ui-blog/layout.js` | Wrapping layout component for the Post and Posts components || all page-level props
+| Component                            | Description                                                 | Props                                       |
+| ------------------------------------ | ----------------------------------------------------------- | ------------------------------------------- | -------------------- |
+| `src/gatsby-theme-ui-blog/posts.js`  | Index page for all blog posts                               | `{ posts }`                                 |
+| `src/gatsby-theme-ui-blog/post.js`   | Full blog post article page                                 | `{ title, date, children, keywords, tags }` |
+| `src/gatsby-theme-ui-blog/layout.js` | Wrapping layout component for the Post and Posts components |                                             | all page-level props |
 
 ## Theming
 
@@ -38,10 +35,7 @@ npm i gatsby-plugin-theme-ui
 ```js
 // gatsby-config.js
 module.exports = {
-  plugins: [
-    'gatsby-theme-ui-blog',
-    'gatsby-plugin-theme-ui',
-  ]
+  plugins: ['gatsby-theme-ui-blog', 'gatsby-plugin-theme-ui'],
 }
 ```
 
@@ -56,7 +50,7 @@ export default {
     background: 'black',
     primary: 'cyan',
     secondary: 'magenta',
-  }
+  },
 }
 ```
 

examples/custom-pragma/src/layout.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, Layout, Header, Main, Container } from 'theme-ui'
 
-export default props => (
+export default (props) => (
   <Layout>
     <Header>
       <h2>Theme UI Gatsby Example</h2>

examples/prism/src/layout.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, Layout, Header, Main, Container } from 'theme-ui'
 
-export default props => (
+export default (props) => (
   <Layout>
     <Header>
       <h2>Theme UI Gatsby Example</h2>

examples/typography/src/layout.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, Layout, Main, Container } from 'theme-ui'
 
-export default props => (
+export default (props) => (
   <Layout>
     <Main>
       <Container>{props.children}</Container>

lerna.json

@@ -1,8 +1,6 @@
 {
-  "version": "0.6.0-alpha.1",
+  "version": "0.6.0-alpha.3",
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "packages": [
-    "packages/*"
-  ]
+  "packages": ["packages/*"]
 }

package.json

@@ -34,7 +34,7 @@
     "@types/jest": "^26.0.10",
     "@types/react-test-renderer": "^16.9.2",
     "babel-jest": "^26.0.1",
-    "babel-preset-gatsby": "^0.6.0",
+    "babel-preset-gatsby": "^0.8.0",
     "husky": ">=4.0.7",
     "jest": "^26.0.1",
     "jest-canvas-mock": "^2.2.0",

packages/color-modes/README.md

@@ -1,11 +1,10 @@
-
 # @theme-ui/color-modes
 
 Adds support for user-controlled color modes
 
 https://theme-ui.com
 
-**Note:** *This package is included in the main `theme-ui` package, and generally should not be used on its own.*
+**Note:** _This package is included in the main `theme-ui` package, and generally should not be used on its own._
 
 ```sh
 npm i @theme-ui/color-modes
@@ -16,17 +15,15 @@ import { ThemeProvider } from '@theme-ui/core'
 import { ColorModeProvider } from '@theme-ui/color-modes'
 import theme from './theme'
 
-export default props =>
+export default (props) => (
   <ThemeProvider theme={theme}>
-    <ColorModeProvider>
-      {props.children}
-    </ColorModeProvider>
+    <ColorModeProvider>{props.children}</ColorModeProvider>
   </ThemeProvider>
+)
 ```
 
 ## API
 
 - `useColorMode`
 - `ColorModeProvider`
 - `InitializeColorMode`
-

packages/color-modes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/color-modes",
-  "version": "0.6.0-alpha.1",
+  "version": "0.6.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

packages/color-modes/src/custom-properties.ts

@@ -83,7 +83,7 @@ export const createColorStyles = (theme: Theme = {}) => {
   const modes = colors.modes || {}
   const styles = objectToVars('colors', colors)
 
-  Object.keys(modes).forEach(mode => {
+  Object.keys(modes).forEach((mode) => {
     const key = `&.theme-ui-${mode}`
     styles[key] = objectToVars('colors', modes[mode])
   })
@@ -95,7 +95,8 @@ export const createColorStyles = (theme: Theme = {}) => {
         : modes[printColorModeName]
     styles['@media (print)'] = objectToVars('colors', mode)
   }
-  const colorToVarValue = (color: string) => toVarValue(`colors-${color}`, get(theme, `colors.${color}`));
+  const colorToVarValue = (color: string) =>
+    toVarValue(`colors-${color}`, get(theme, `colors.${color}`))
 
   return css({
     body: {

packages/color/README.md

@@ -13,7 +13,7 @@ Import utilities from the `@theme-ui/color` package and use them with colors in
 import { jsx } from 'theme-ui'
 import { darken, lighten } from '@theme-ui/color'
 
-export default props => (
+export default (props) => (
   <div
     {...props}
     sx={{
@@ -186,7 +186,7 @@ We can take the result of any of the above helper functions (which return a func
 ```jsx
 <MyComponentWithBackground
   sx={{
-    backgroundImage: t => `
+    backgroundImage: (t) => `
       linear-gradient(
         to bottom,
         ${alpha('primary', 0.5)(t)},

packages/components/README.md

@@ -1,9 +1,8 @@
-
 # @theme-ui/components
 
 Primitive layout, typographic, and other components for use with Theme UI.
 
-**Note:** *This package is included in the main `theme-ui` package and a separate installation is not required.*
+**Note:** _This package is included in the main `theme-ui` package and a separate installation is not required._
 
 ```sh
 npm i @theme-ui/components

packages/components/index.d.ts

@@ -295,18 +295,9 @@ export type DividerProps = BoxProps
  */
 export const Divider: ForwardRef<HTMLDivElement, DividerProps>
 
-/**
- * EmbedProps are a bit tricky. It is a composite component that uses a <Box />
- * as the parent element which is what `props` are spread onto. The actual `ref`
- * however is a nested <Box as="iframe" /> element. To support these props we
- * need to use an intersection of the intrinsic attributes of HTMLDivElement,
- * with the ref attributes of HTMLIFrameElement.
- */
 export interface EmbedProps
-  extends Assign<
-    React.ComponentProps<'div'> & React.RefAttributes<HTMLIFrameElement>,
-    BoxOwnProps
-  > {
+  extends Assign<React.ComponentPropsWithRef<'iframe'>, BoxOwnProps> {
+  variant?: string
   ratio?: number
   src?: React.IframeHTMLAttributes<any>['src']
   frameBorder?: React.IframeHTMLAttributes<any>['frameBorder']

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theme-ui/components",
-  "version": "0.6.0-alpha.1",
+  "version": "0.6.0-alpha.3",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "index.d.ts",
@@ -17,7 +17,7 @@
     "@styled-system/should-forward-prop": "^5.1.2",
     "@styled-system/space": "^5.1.2",
     "@theme-ui/css": "0.6.0-alpha.1",
-    "@types/styled-system": "^4.2.2"
+    "@types/styled-system": "^5.1.10"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0"

packages/components/src/Alert.js

@@ -1,21 +1,23 @@
 import React from 'react'
 import Box from './Box'
 
-export const Alert = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    variant="primary"
-    {...props}
-    __themeKey="alerts"
-    __css={{
-      display: 'flex',
-      alignItems: 'center',
-      px: 3,
-      py: 2,
-      fontWeight: 'bold',
-      color: 'white',
-      bg: 'primary',
-      borderRadius: 4,
-    }}
-  />
-))
+export const Alert = React.forwardRef(function Alert(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      variant="primary"
+      {...props}
+      __themeKey="alerts"
+      __css={{
+        display: 'flex',
+        alignItems: 'center',
+        px: 3,
+        py: 2,
+        fontWeight: 'bold',
+        color: 'white',
+        bg: 'primary',
+        borderRadius: 4,
+      }}
+    />
+  )
+})

packages/components/src/AspectImage.js

@@ -2,14 +2,19 @@ import React from 'react'
 import { AspectRatio } from './AspectRatio'
 import { Image } from './Image'
 
-export const AspectImage = React.forwardRef(({ ratio, ...props }, ref) => (
-  <AspectRatio ratio={ratio}>
-    <Image
-      ref={ref}
-      {...props}
-      __css={{
-        objectFit: 'cover',
-      }}
-    />
-  </AspectRatio>
-))
+export const AspectImage = React.forwardRef(function AspectImage(
+  { ratio, ...props },
+  ref
+) {
+  return (
+    <AspectRatio ratio={ratio}>
+      <Image
+        ref={ref}
+        {...props}
+        __css={{
+          objectFit: 'cover',
+        }}
+      />
+    </AspectRatio>
+  )
+})

packages/components/src/AspectRatio.js

@@ -1,8 +1,11 @@
 import React from 'react'
 import Box from './Box'
 
-export const AspectRatio = React.forwardRef(
-  ({ ratio = 4 / 3, children, ...props }, ref) => (
+export const AspectRatio = React.forwardRef(function AspectRatio(
+  { ratio = 4 / 3, children, ...props },
+  ref
+) {
+  return (
     <Box
       ref={ref}
       sx={{
@@ -29,4 +32,4 @@ export const AspectRatio = React.forwardRef(
       </Box>
     </Box>
   )
-)
+})