Merge branch 'master' into prism-options

Author: LB

jest-preprocess.js

@@ -0,0 +1,3 @@
+module.exports = require('babel-jest').createTransformer({
+  presets: ['babel-preset-gatsby'],
+})

package.json

@@ -27,7 +27,7 @@
     "@babel/runtime": "^7.7.7",
     "@testing-library/react": "^9.1.3",
     "@types/jest": "^25.1.2",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^25.3.0",
     "husky": ">=4.0.7",
     "jest": "^24.8.0",
     "jest-canvas-mock": "^2.2.0",
@@ -96,7 +96,10 @@
     ],
     "setupFiles": [
       "jest-canvas-mock"
-    ]
+    ],
+    "transform": {
+      "^.+\\.jsx?$": "<rootDir>/jest-preprocess.js"
+    }
   },
   "husky": {
     "hooks": {

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

@@ -13,6 +13,7 @@ const reservedKeys = {
   useCustomProperties: true,
   initialColorModeName: true,
   initialColorMode: true,
+  useLocalStorage: true,
 }
 
 const toPixel = (key, value) => {
@@ -86,6 +87,6 @@ export const createColorStyles = (theme = {}) => {
       ...styles,
       color: 'text',
       bg: 'background',
-    }
+    },
   })(theme)
 }

packages/color-modes/src/index.js

@@ -50,7 +50,7 @@ const useColorModeState = (theme = {}) => {
 
   // initialize state
   React.useEffect(() => {
-    const stored = storage.get()
+    const stored = theme.useLocalStorage !== false && storage.get()
     document.body.classList.remove('theme-ui-' + stored)
     if (!stored && theme.useColorSchemeMediaQuery) {
       const query = getMediaQuery()
@@ -62,7 +62,7 @@ const useColorModeState = (theme = {}) => {
   }, [])
 
   React.useEffect(() => {
-    if (!mode) return
+    if (!mode || theme.useLocalStorage === false) return
     storage.set(mode)
   }, [mode])
 

packages/color-modes/test/index.js

@@ -209,6 +209,27 @@ test('initializes mode based on localStorage', () => {
   expect(mode).toBe('dark')
 })
 
+test('does not initialize mode based on localStorage if useLocalStorage is set to false', () => {
+  window.localStorage.setItem(STORAGE_KEY, 'dark')
+  let mode
+  const Button = props => {
+    const [colorMode, setMode] = useColorMode()
+    mode = colorMode
+    return <button children="test" />
+  }
+  const tree = render(
+    <ThemeProvider
+      theme={{
+        useLocalStorage: false,
+      }}>
+      <ColorModeProvider>
+        <Button />
+      </ColorModeProvider>
+    </ThemeProvider>
+  )
+  expect(mode).toBe('default')
+})
+
 test('retains initial context', () => {
   let context
   const Consumer = props => {

packages/color/README.md

@@ -26,6 +26,13 @@ export default props => (
 
 ## API
 
+### `getColor`
+
+```js
+import { getColor } from '@theme-ui/color'
+// getColor(theme, 'primary')
+```
+
 ### `darken`
 
 Darken a color by an amount 0–1
@@ -185,7 +192,7 @@ We can take the result of any of the above helper functions (which return a func
         ${alpha('primary', 0.5)(t)}
         ${alpha('secondary', 0.5)(t)}
       )
-    `
+    `,
   }}
 />
 ```

packages/color/src/index.ts

@@ -1,83 +1,91 @@
 import * as P from 'polished'
 import { get, Theme } from '@theme-ui/css'
 
-const g = (t: Theme, c: string) =>
-  get(t, `colors.${c}`, c)
+/**
+ * Get color from theme.colors
+ */
+export const getColor = (theme: Theme, color: string) =>
+  get(theme, `colors.${color}`, color)
     .replace(/^var\(--(\w+)(.*?), /, '')
     .replace(/\)/, '')
 
 /**
  * Darken a color by an amount 0–1
  */
 export const darken = (c: string, n: number) => (t: Theme) =>
-  P.darken(n, g(t, c))
+  P.darken(n, getColor(t, c))
 /**
  * Lighten a color by an amount 0–1
  */
 export const lighten = (c: string, n: number) => (t: Theme) =>
-  P.lighten(n, g(t, c))
+  P.lighten(n, getColor(t, c))
 /**
  * Rotate the hue of a color by an amount 0–360
  */
 export const rotate = (c: string, d: number) => (t: Theme) =>
-  P.adjustHue(d, g(t, c))
+  P.adjustHue(d, getColor(t, c))
 
 /**
  * Set the hue of a color to a degree 0–360
  */
-export const hue = (c: string, h: number) => (t: Theme) => P.setHue(h, g(t, c))
+export const hue = (c: string, h: number) => (t: Theme) =>
+  P.setHue(h, getColor(t, c))
 /**
  * Set the saturation of a color to an amount 0–1
  */
 export const saturation = (c: string, s: number) => (t: Theme) =>
-  P.setSaturation(s, g(t, c))
+  P.setSaturation(s, getColor(t, c))
 /**
  * Set the lightness of a color to an amount 0–1
  */
 export const lightness = (c: string, l: number) => (t: Theme) =>
-  P.setLightness(l, g(t, c))
+  P.setLightness(l, getColor(t, c))
 /**
  * Desaturate a color by an amount 0–1
  */
 export const desaturate = (c: string, n: number) => (t: Theme) =>
-  P.desaturate(n, g(t, c))
+  P.desaturate(n, getColor(t, c))
 /**
  * Saturate a color by an amount 0–1
  */
 export const saturate = (c: string, n: number) => (t: Theme) =>
-  P.saturate(n, g(t, c))
+  P.saturate(n, getColor(t, c))
 
 /**
  * Shade a color by an amount 0–1
  */
-export const shade = (c: string, n: number) => (t: Theme) => P.shade(n, g(t, c))
+export const shade = (c: string, n: number) => (t: Theme) =>
+  P.shade(n, getColor(t, c))
 /**
  * Tint a color by an amount 0–1
  */
-export const tint = (c: string, n: number) => (t: Theme) => P.tint(n, g(t, c))
+export const tint = (c: string, n: number) => (t: Theme) =>
+  P.tint(n, getColor(t, c))
 
 export const transparentize = (c: string, n: number) => (t: Theme) =>
-  P.transparentize(n, g(t, c))
+  P.transparentize(n, getColor(t, c))
 /**
  * Set the transparency of a color to an amount 0-1
  */
-export const alpha = (c: string, n: number) => (t: Theme) => P.rgba(g(t, c), n)
+export const alpha = (c: string, n: number) => (t: Theme) =>
+  P.rgba(getColor(t, c), n)
 
 /**
  * Mix two colors by a specific ratio
  */
 export const mix = (a: string, b: string, n = 0.5) => (t: Theme) =>
-  P.mix(n, g(t, a), g(t, b))
+  P.mix(n, getColor(t, a), getColor(t, b))
 
 /**
  * Get the complement of a color
  */
-export const complement = (c: string) => (t: Theme) => P.complement(g(t, c))
+export const complement = (c: string) => (t: Theme) =>
+  P.complement(getColor(t, c))
 
 /**
  * Get the inverted color
  */
-export const invert = (c: string) => (t: Theme) => P.invert(g(t, c))
+export const invert = (c: string) => (t: Theme) => P.invert(getColor(t, c))
 
 /**
  * Desaturate the color to grayscale

packages/components/README.md

@@ -3,6 +3,8 @@
 
 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.*
+
 ```sh
 npm i @theme-ui/components
 ```

packages/components/src/Text.js

@@ -2,5 +2,5 @@ import React from 'react'
 import Box from './Box'
 
 export const Text = React.forwardRef((props, ref) => (
-  <Box ref={ref} {...props} __themeKey="text" />
+  <Box ref={ref} variant="default" {...props} __themeKey="text" />
 ))

packages/components/test/__snapshots__/index.js.snap

@@ -492,12 +492,6 @@ exports[`Embed renders 1`] = `
 `;
 
 exports[`Field renders 1`] = `
-.emotion-2 {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-}
-
 .emotion-0 {
   box-sizing: border-box;
   margin: 0;
@@ -527,6 +521,12 @@ exports[`Field renders 1`] = `
   background-color: transparent;
 }
 
+.emotion-2 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
 <div
   className="emotion-2"
 >
@@ -1313,6 +1313,7 @@ exports[`Text renders 1`] = `
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
+  font-size: 20px;
 }
 
 <div