Merge branch 'develop' into lachlanjc-tw3

system-ui · Jan 24, 2022 · 3ded464 · 3ded464
2 parents 22e96cc + 9a8a503
commit 3ded464
Show file tree

Hide file tree

Showing 16 changed files with 151 additions and 214 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -0,0 +1,6 @@
+{
+  "buildCommand": "build",
+  "packages": ["packages/theme-ui", "packages/core"],
+  "sandboxes": ["/examples/next", "/examples/gatsby-plugin"],
+  "node": "16"
+}
diff --git a/examples/codesandbox-starter/.babelrc b/examples/codesandbox-starter/.babelrc
diff --git a/examples/codesandbox-starter/.prettierrc b/examples/codesandbox-starter/.prettierrc
diff --git a/examples/codesandbox-starter/index.html b/examples/codesandbox-starter/index.html
diff --git a/examples/codesandbox-starter/package.json b/examples/codesandbox-starter/package.json
diff --git a/examples/codesandbox-starter/src/index.js b/examples/codesandbox-starter/src/index.js
diff --git a/examples/codesandbox-starter/src/theme.js b/examples/codesandbox-starter/src/theme.js
diff --git a/examples/next/pages/_app.tsx b/examples/next/pages/_app.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource theme-ui */
 import { ThemeProvider } from 'theme-ui'
 
-import Header from '../components/header'
+import Header from '../components/Header'
 import { theme } from '../lib/theme'
 import type { AppProps } from 'next/app'
 

diff --git a/examples/next/yarn.lock b/examples/next/yarn.lock
@@ -2063,9 +2063,9 @@ [email protected]:
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
 nanoid@^3.1.23:
-  version "3.1.30"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
-  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
+  integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
 next@^12.0.7:
   version "12.0.7"

diff --git a/packages/docs/src/pages/guides/keyframes.mdx b/packages/docs/src/pages/guides/keyframes.mdx
@@ -16,9 +16,8 @@ library itself. Instead, use [the `keyframes` helper from Emotion](https://emoti
 
 <Note>
 
-Because `@emotion/react` is a dependency of Theme UI, it’s available in your
-project without manual installation. Installing it separately can cause configuration issues due to
-multiple copies with conflicting versions.
+`@emotion/react` is a peer dependency of Theme UI, so while required alongside Theme UI packages,
+it needs manual installation in your project.
 
 </Note>
 
@@ -35,15 +34,18 @@ const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 export default (props) => (
   <Box
     {...props}
-    sx={{
-      animationName: fadeIn,
-      animationDuration: '1s',
-      animationFillMode: 'backwards',
-    }}
+    sx={{ animation: `${fadeIn} 1s backwards` }}
   />
 )
 ```
 
+<Note>
+
+To directly set `animationName` using object syntax, append `.toString()` to the animation variable.
+This workaround is not needed when using the variable inside a template string, such as above.
+
+</Note>
+
 Using template literal syntax:
 
 ```js

diff --git a/packages/docs/src/pages/theming.mdx b/packages/docs/src/pages/theming.mdx
@@ -20,7 +20,7 @@ In order to ensure color palettes are as interoperable as possible, the followin
 
 Beyond these base colors, any additional values can be added to a theme to augment the base color palette.
 
-### Color Modes
+### Color modes
 
 Multiple color modes, i.e. _dark mode_, can be handled with a nested `modes` object that matches the shape of the default colors.
 
@@ -90,7 +90,7 @@ For other units, use string values, e.g. `'1em'`.
 ## Styles
 
 Styles for elements rendered in MDX can be added to the `theme.styles` object.
-This is the primary API for applying typographic styles in markdown content.
+This is the primary API for applying typographic styles in Markdown content.
 Styles within this object have access to other values in the theme object, such as colors, fonts, and space.
 
 ```js
@@ -122,7 +122,13 @@ Styles within this object have access to other values in the theme object, such
 }
 ```
 
-## Root Styles
+<Note>
+
+To use these styles arbitrarily, such as for markup from a CMS, see the [BaseStyles component](/api#basestyles).
+
+</Note>
+
+## Root styles
 
 To add base, top-level styles to the `<html>` element, use `theme.styles.root`.
 
@@ -147,7 +153,11 @@ To add base, top-level styles to the `<html>` element, use `theme.styles.root`.
 }
 ```
 
-- To disable applying styles to the `<html>` element, add the `config: { useRootStyles: false }` flag to your theme.
+<Note>
+
+To disable applying styles to the `<html>` element, add the `config: { useRootStyles: false }` flag to your theme.
+
+</Note>
 
 ## Breakpoints
 
@@ -165,7 +175,7 @@ The breakpoints can then be used to apply [responsive styles](/sx-prop/#responsi
 }
 ```
 
-## Configuration Flags
+## Configuration flags
 
 The theme object can also include configuration options for Theme UI, which are nested in the `config` object.
 The following keys can be used to enable and disable certain features.
@@ -179,7 +189,19 @@ The following keys can be used to enable and disable certain features.
 | `useBorderBox`             | `true`              | Adds a global `box-sizing: border-box` style                                                                                                |
 | `useLocalStorage`          | `true`              | Persists the color mode in `localStorage`                                                                                                   |
 
-## Example Theme
+## Default theme
+
+If your custom theme doesn’t override these properties, Theme UI will use these default values.
+
+```js
+{
+  breakpoints: [40, 52, 64].map((n) => n + 'em'),
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
+}
+```
+
+## Example theme
 
 The following example is from the [Base Preset][example].
 
@@ -276,6 +298,8 @@ export const theme = {
 }
 ```
 
+For alternative pre-made themes, check out the [presets package](/packages/presets),
+and to see open source custom themes, check out [this collection](/resources#custom-themes).
 For more information on the Theme UI `theme` object, see the [Theme Specification docs](/theme-spec).
 
 [example]: https://github.com/system-ui/theme-ui/tree/develop/packages/preset-base/src/index.ts

diff --git a/packages/sidenav/package.json b/packages/sidenav/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "deepmerge": "^4.0.0",
-    "theme-ui": "0.10.0"
+    "theme-ui": "latest"
   },
   "peerDependencies": {
     "@emotion/react": "^11",

diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts
@@ -1,4 +1,8 @@
-import { jsx as coreJsx, ThemeUIJSX } from '@theme-ui/core'
+import {
+  jsx as coreJsx,
+  ThemeUIJSX,
+  type ThemeUIStyleObject,
+} from '@theme-ui/core'
 export {
   __ThemeUIContext,
   merge,
@@ -29,14 +33,17 @@ export { ThemeProvider } from '@theme-ui/theme-provider'
 export * from '@theme-ui/components'
 export { css, get } from '@theme-ui/css'
 
-export const BaseStyles = (props: Record<string, unknown>) =>
+export const BaseStyles = (
+  props: Record<string, unknown> & { sx?: ThemeUIStyleObject }
+) =>
   jsx('div', {
     ...props,
     sx: {
       fontFamily: 'body',
       lineHeight: 'body',
       fontWeight: 'body',
       variant: 'styles',
+      ...props.sx,
     },
   })
 
@@ -50,10 +57,8 @@ export declare namespace jsx {
       extends ThemeUIJSX.ElementAttributesProperty {}
     export interface ElementChildrenAttribute
       extends ThemeUIJSX.ElementChildrenAttribute {}
-    export type LibraryManagedAttributes<
-      C,
-      P
-    > = ThemeUIJSX.LibraryManagedAttributes<C, P>
+    export type LibraryManagedAttributes<C, P> =
+      ThemeUIJSX.LibraryManagedAttributes<C, P>
     export interface IntrinsicAttributes
       extends ThemeUIJSX.IntrinsicAttributes {}
     export interface IntrinsicClassAttributes<T>

diff --git a/packages/theme-ui/test/__snapshots__/index.tsx.snap b/packages/theme-ui/test/__snapshots__/index.tsx.snap
@@ -12,6 +12,19 @@ exports[`BaseStyles renders 1`] = `
 />
 `;
 
+exports[`BaseStyles renders sx prop styles 1`] = `
+.emotion-0 {
+  font-family: body;
+  line-height: body;
+  font-weight: body;
+  color: var(--theme-ui-colors-custom);
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
 exports[`creates non-standard components 1`] = `
 .emotion-0 {
   color: tomato;

diff --git a/packages/theme-ui/test/index.tsx b/packages/theme-ui/test/index.tsx
@@ -217,6 +217,21 @@ test('BaseStyles renders', () => {
   expect(json).toMatchSnapshot()
 })
 
+test('BaseStyles renders sx prop styles', () => {
+  const json = renderJSON(
+    <ThemeProvider
+      theme={{
+        colors: {
+          custom: 'tomato',
+        },
+      }}
+    >
+      <BaseStyles sx={{ color: 'custom' }} />
+    </ThemeProvider>
+  )
+  expect(json).toMatchSnapshot()
+})
+
 test('custom pragma adds styles', () => {
   const json = renderJSON(
     jsx('div', {