Merge branch 'master' into add-support-for-automatic-jsx-runtime

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## v0.5.0 UNRELEASED
 
+- Fix sx prop variant responsive. Issue: #1030
 ## v0.5.0-alpha.0 2020-11-20
 
 - BREAKING: Upgrade to Emotion 11, and `csstype` 3. PR #1261

packages/color/test/index.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@theme-ui/css'
+import { css, Theme, ThemeUICSSObject } from '@theme-ui/css'
 
 import {
   darken,
@@ -236,3 +236,29 @@ test('alphaRgbaCustomProps', () => {
   const n = alpha('primary', 0.25)(themeRgba)
   expect(n).toBe('rgba(255,0,0,0.25)')
 })
+
+test('typechecks', () => {
+  const _a: ThemeUICSSObject = {
+    color: darken('primary', 0.1),
+  }
+
+  //#region past bugs
+  const _b: ThemeUICSSObject = {
+    'h1, h2, h3, h4, h5, h6': {
+      '.remark-autolink-headers__anchor': {
+        opacity: 0,
+        borderRadius: '50%',
+        transition: 'all 150ms linear',
+        ':focus, :hover': {
+          backgroundColor: alpha('primary', 0.07),
+        },
+      },
+      ':focus, :hover': {
+        '.remark-autolink-headers__anchor': {
+          opacity: 1,
+        },
+      },
+    },
+  }
+  //#endregion
+})

packages/css/src/index.ts

@@ -262,11 +262,10 @@ const responsive = (
         continue
       }
       next[media] = next[media] || {}
-      if (value[i] == null) continue
-      ;(next[media] as Record<string, any>)[key] = value[i]
+      if (value[i] == null) continue;
+      (next[media] as Record<string, any>)[key] = value[i]
     }
   }
-
   return next
 }
 
@@ -280,19 +279,18 @@ export const css = (args: ThemeUIStyleObject = {}) => (
     ...('theme' in props ? props.theme : props),
   }
   let result: CSSObject = {}
-  const obj = typeof args === 'function' ? args(theme) : args
+  let obj = typeof args === 'function' ? args(theme) : args
+  // insert variant props before responsive styles, so they can be merged
+  if (obj['variant']) {
+    obj = { ...get(theme, obj['variant']), ...obj }
+    delete obj['variant'];
+  }
   const styles = responsive(obj)(theme)
 
   for (const key in styles) {
     const x = styles[key as keyof typeof styles]
     const val = typeof x === 'function' ? x(theme) : x
 
-    if (key === 'variant') {
-      const variant = css(get(theme, val as string))(theme)
-      result = { ...result, ...variant }
-      continue
-    }
-
     if (val && typeof val === 'object') {
       // TODO: val can also be an array here. Is this a bug? Can it be reproduced?
       result[key] = css(val as ThemeUICSSObject)(theme)

packages/docs/package.json

@@ -89,7 +89,6 @@
     "typography-theme-zacklive": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/register": "^7.8.6",
-    "repng": "^3.2.0"
+    "@babel/register": "^7.8.6"
   }
-}
+}

packages/docs/src/components/code.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, Styled } from 'theme-ui'
+import { jsx, Styled, Text } from 'theme-ui'
 import Prism from '@theme-ui/prism'
 import { LiveProvider, LiveEditor, LivePreview, LiveError } from 'react-live'
 import * as themeUI from 'theme-ui'
@@ -47,7 +47,7 @@ const images = {
 
 const scope = {
   ...themeUI,
-  Link: (props) => {
+  Link: props => {
     if (props.activeClassName)
       return <span className={props.activeClassName} {...props} />
     return <span {...props} sx={{ cursor: 'pointer' }} />
@@ -56,7 +56,7 @@ const scope = {
   images,
 }
 
-const transformCode = (src) => `/** @jsx jsx */\n<>${src}</>`
+const transformCode = src => `/** @jsx jsx */\n<>${src}</>`
 
 const liveTheme = { styles: [] }
 
@@ -83,7 +83,7 @@ export const LiveCode = ({ children, preview, xray }) => {
         sx={{
           p: 3,
           variant: xray ? 'styles.xray' : null,
-          border: (t) => `1px solid ${t.colors.muted}`,
+          border: t => `1px solid ${t.colors.muted}`,
         }}>
         <LivePreview />
         <LiveError
@@ -108,9 +108,30 @@ export const LiveCode = ({ children, preview, xray }) => {
   )
 }
 
-export default (props) => {
+const Code = props => {
   if (props.live) {
     return <LiveCode {...props} />
   }
-  return <Prism {...props} />
+  if (props.filename) {
+    return (
+      <section>
+        <Text
+          as="span"
+          sx={{
+            display: 'block',
+            bg: 'gray',
+            color: 'background',
+            px: 3,
+            py: 2,
+            fontWeight: 'bold',
+          }}>
+          {props.filename}
+        </Text>
+        <Prism {...props} sx={{ mt: 0 }} />
+      </section>
+    )
+  }
+  return <div {...props} />
 }
+
+export default Code

packages/docs/src/components/layout.js

@@ -100,9 +100,11 @@ export default (props) => {
         <Box
           sx={{
             flex: '1 1 auto',
+            alignItems: 'flex-start',
             display: ['block', 'flex'],
+            height: '100%'
           }}>
-          <div
+          <Sidebar
             ref={nav}
             role="navigation"
             onFocus={(e) => {
@@ -116,22 +118,22 @@ export default (props) => {
             }}
             onKeyPress={(e) => {
               setMenuOpen(false)
-            }}>
-            <Sidebar
-              open={menuOpen}
-              components={sidebar}
-              pathname={props.location.pathname}
-              sx={{
-                display: [null, fullwidth ? 'none' : 'block'],
-                width: 256,
-                flex: 'none',
-                px: 3,
-                pt: 3,
-                pb: 4,
-                mt: [64, 0],
-              }}
-            />
-          </div>
+            }}
+            open={menuOpen}
+            components={sidebar}
+            pathname={props.location.pathname}
+            sx={{
+              display: [null, fullwidth ? 'none' : 'block'],
+              width: 256,
+              flex: 'none',
+              maxHeight: ['100%', 'calc(100vh - 64px)'],
+              overflowY: 'auto',
+              px: 3,
+              pt: 3,
+              pb: 4,
+              mt: [64, 0],
+            }}
+          />
           <main
             id="content"
             sx={{

packages/docs/src/pages/components/forms.mdx

@@ -53,7 +53,7 @@ import {
   <Textarea
     name='comment'
     id='comment'
-    rows='6'
+    rows={6}
     mb={3}
   />
   <Flex mb={3}>

packages/docs/src/pages/components/index.mdx

@@ -7,6 +7,8 @@ import { Note } from '../..'
 # Components
 
 A number of built-in UI components are available for layouts, grids, buttons, form elements, and more.
+Components can be used as an alternative to the [JSX pragma](/jsx-pragma) for using Theme UI features,
+or in parallel to provide specific UI components.
 
 ```jsx live=true
 <Box
@@ -95,6 +97,15 @@ The `sx` prop on Theme UI components can be used *without* the `jsx` pragma comm
 
 </Note>
 
+<Note>
+
+If you’re using TypeScript, Theme UI merges prop types with the props of components passed
+in the `as` prop on [`Field`](/components/field).
+However, it’s tricky to get the `as` element props working on [`Box`](/components/box), especially with `svg`.
+You can work around this by using the [custom JSX pragma](/jsx-pragma), which can be transpiled by TypeScript.
+
+</Note>
+
 [variant]: /guides/variants
 
 ### Style Props
@@ -104,8 +115,7 @@ These props work the same as properties within the `sx` prop, but allow for a mo
 
 <Note>
 
-If you've used [Styled System][] or [Rebass][] before,
-these props work the same way.
+If you’ve used [Styled System][] or [Rebass][] before, these props work the same way.
 
 </Note>
 
@@ -120,13 +130,13 @@ Name | Description
 `marginLeft`, `ml`    | Margin Left
 `marginX`, `mx`       | Margin Left & Right
 `marginY`, `my`       | Margin Top & Bottom
-`padding`, `p`         | Padding
-`paddingTop`, `pt`     | Padding Top
-`paddingRight`, `pr`   | Padding Right
-`paddingBottom`, `pb`  | Padding Bottom
-`paddingLeft`, `pl`    | Padding Left
-`paddingX`, `px`       | Padding Left & Right
-`paddingY`, `py`       | Padding Top & Bottom
+`padding`, `p`        | Padding
+`paddingTop`, `pt`    | Padding Top
+`paddingRight`, `pr`  | Padding Right
+`paddingBottom`, `pb` | Padding Bottom
+`paddingLeft`, `pl`   | Padding Left
+`paddingX`, `px`      | Padding Left & Right
+`paddingY`, `py`      | Padding Top & Bottom
 
 [styled system]: https://styled-system.com
 [rebass]: https://rebassjs.org

packages/docs/src/pages/guides/mdx-layout-components.mdx

@@ -13,7 +13,7 @@ which is written in MDX.
 
 As an example, create a new component with the `ThemeProvider` and a wrapping `<div>`.
 
-```jsx
+```jsx filename=Layout.js
 /** @jsxImportSource theme-ui */
 import { ThemeProvider } from 'theme-ui'
 
@@ -26,7 +26,7 @@ export default (props) => (
 
 To add styles to this component, add a `theme` prop to the `ThemeProvider` and an `sx` prop to the `div`.
 
-```jsx
+```jsx filename=Layout.js
 /** @jsxImportSource theme-ui */
 import { ThemeProvider } from 'theme-ui'
 

packages/docs/src/pages/guides/merging-themes.mdx

@@ -13,7 +13,6 @@ This guide shows a few common ways to merge themes together.
 To use a preset as the basis for a custom theme, it's recommended that you use a deep merge utility.
 The `theme-ui` package exports a preconfigured version of the `deepmerge` package that can be used for this.
 
-
 ```js
 // example theme based on preset-future
 import future from '@theme-ui/preset-future'
@@ -59,4 +58,27 @@ export default {
 }
 ```
 
+## Merging theme values from multiple files
+
+For the core scales (`colors`, `fontSizes`, `space`, etc), it’s typically simpler to understand a theme when values are defined in one file.
+However, especially for projects with many [styles](/styling-mdx) or [variants](/guides/variants), you may want to split values that end up
+as part of one object across multiple files. You can use the same kind of imports combined with the `merge` utility for this.
 
+```js
+// example theme/index.js
+import { merge } from 'theme-ui'
+import colors from './colors'
+import fonts from './fonts'
+import textStyles from './styles/text'
+import tableStyles from './styles/tables'
+import { buttons, forms, links } from './variants'
+
+export default {
+  colors,
+  fonts,
+  styles: merge(textStyles, tableStyles),
+  buttons,
+  forms,
+  links
+}
+```