Support a "default" key for object in scales

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"

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/css/src/index.ts

@@ -8,6 +8,10 @@ import {
 
 export * from './types'
 
+const hasDefault = (x: unknown): x is { default: string | number } => {
+  return typeof x === 'object' && x !== null && 'default' in x
+}
+
 export function get(
   obj: object,
   key: string | number | undefined,
@@ -19,7 +23,9 @@ export function get(
   for (p = 0; p < path.length; p++) {
     obj = obj ? (obj as any)[path[p]!] : undef
   }
-  return obj === undef ? def : obj
+  if (obj === undef) return def
+
+  return hasDefault(obj) ? obj.default : obj
 }
 
 export const defaultBreakpoints = [40, 52, 64].map((n) => n + 'em')
@@ -262,8 +268,8 @@ 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
@@ -288,15 +294,15 @@ export const css = (args: ThemeUIStyleObject = {}) => (
     for (const key in obj) {
       const x = obj[key as keyof typeof styles]
       if (key === 'variant') {
-        const val = typeof x === 'function' ? x(theme) : x;
-        const variant = get(theme, val as string);
-        result = { ...result, ...variant };
+        const val = typeof x === 'function' ? x(theme) : x
+        const variant = get(theme, val as string)
+        result = { ...result, ...variant }
       } else {
-        result[key] = x as CSSObject;
-      }  
+        result[key] = x as CSSObject
+      }
     }
   } else {
-    result = obj as CSSObject ;
+    result = obj as CSSObject
   }
   const styles = responsive(result as ThemeUICSSObject)(theme)
   result = {}

packages/css/test/index.ts

@@ -6,6 +6,17 @@ const theme: Theme = {
     secondary: 'cyan',
     background: 'white',
     text: 'black',
+    purple: {
+      default: 'darkviolet',
+      100: 'rebeccapurple',
+      500: 'darkviolet',
+      900: 'violet',
+    },
+    pink: {
+      100: 'mediumvioletred',
+      500: 'hotpink',
+      900: 'pink',
+    },
   },
   fontSizes: [12, 14, 16, 24, 36],
   fonts: {
@@ -24,6 +35,13 @@ const theme: Theme = {
     sidebar: 320,
   },
   buttons: {
+    default: {
+      px: 4,
+      py: 2,
+      fontWeight: 'bold',
+      color: 'secondary',
+      bg: 'background',
+    },
     primary: {
       p: 3,
       fontWeight: 'bold',
@@ -229,6 +247,58 @@ test('supports functional values', () => {
   })
 })
 
+test('returns `default` key when accessing object value with default', () => {
+  const result = css({
+    color: 'purple',
+  })(theme)
+  expect(result).toEqual({
+    color: 'darkviolet',
+  })
+})
+
+test('returns nested key when accessing key from object value with default', () => {
+  const result = css({
+    color: 'purple.100',
+  })(theme)
+  expect(result).toEqual({
+    color: 'rebeccapurple',
+  })
+})
+
+test('variant prop returns `default` key when accessing variant object with default', () => {
+  const result = css({
+    variant: 'buttons',
+  })(theme)
+
+  expect(result).toEqual({
+    paddingLeft: 32,
+    paddingRight: 32,
+    paddingTop: 8,
+    paddingBottom: 8,
+    fontWeight: 600,
+    color: 'cyan',
+    backgroundColor: 'white',
+  })
+})
+
+test('returns object when accessing object value with no default key', () => {
+  const result = css({
+    color: 'pink',
+  })(theme)
+  // Note: Returning this object is the expected behavior; however, an object
+  // value like this isn't able to become valid CSS. Ensure the theme path
+  // points to a primitive value (such as 'pink.100') when intending to make
+  // CSS out of these values.
+  // Ref: https://github.com/system-ui/theme-ui/pull/951#discussion_r430697168
+  expect(result).toEqual({
+    color: {
+      100: 'mediumvioletred',
+      500: 'hotpink',
+      900: 'pink',
+    },
+  })
+})
+
 test('returns variants from theme', () => {
   const result = css({
     variant: 'buttons.primary',

packages/docs/src/components/code.js

@@ -42,7 +42,7 @@ const images = {
   flatiron:
     'https://images.unsplash.com/photo-1520222984843-df35ebc0f24d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9',
   logo:
-    'https://raw.githubusercontent.com/system-ui/theme-ui/master/packages/docs/static/logo.png',
+    'https://raw.githubusercontent.com/system-ui/theme-ui/stable/packages/docs/static/logo.png',
 }
 
 const scope = {

packages/docs/src/components/edit-link.js

@@ -42,7 +42,7 @@ export const EditLink = ({ base, children, ...props }) => (
 )
 
 EditLink.defaultProps = {
-  base: 'https://github.com/system-ui/theme-ui/edit/master/packages/docs/src',
+  base: 'https://github.com/system-ui/theme-ui/edit/develop/packages/docs/src',
   children: 'Edit the page on GitHub',
 }
 

packages/docs/src/pages/migrating.mdx

@@ -24,7 +24,7 @@ title: Migrating
 - The `ThemeProvider` now adds global typographic styles to the `<body>` element based on `theme.styles.root`. To disable this behavior set the `useBodyStyles: false` flag in your theme.
 - Theme context is now stateless. If you've made use of `context.setTheme`, this no longer works. An alternative approach is available with the `@theme-ui/editor` package.
 - The `ThemeStateProvider` component is no longer avialable, see `@theme-ui/editor` as an alternative.
-- The `@theme-ui/editor` package has a completely new API. Please refer to the package's [README.md](https://github.com/system-ui/theme-ui/blob/master/packages/editor/README.md) for more information.
+- The `@theme-ui/editor` package has a completely new API. Please refer to the package's [README.md](https://github.com/system-ui/theme-ui/blob/stable/packages/editor/README.md) for more information.
 
 ## v0.2
 

packages/docs/src/pages/recipes/demo.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, Themed } from 'theme-ui'
 
-const XRay = props => (
+const XRay = (props) => (
   <div
     {...props}
     sx={{
@@ -12,7 +12,7 @@ const XRay = props => (
   />
 )
 
-export default props => (
+export default (props) => (
   <XRay>
     <pre>Demo/debugging page</pre>
     <div

packages/docs/src/pages/theming.mdx

@@ -168,14 +168,14 @@ These values will be used to generate mobile-first (i.e. `min-width`) media quer
 
 The theme object can also include configuration options for Theme UI. The following keys can be used to enable and disable certain features.
 
-Flag | Default | Description
----|---|---
-`useCustomProperties` | `true` | Enables CSS custom properties to help mitigate a flash of unstyled content during rehydration
-`useBodyStyles` | `true` | Adds styles defined in `theme.styles.root` to the `<body>` element along with `color` and `background-color`
-`initialColorModeName` | `'default'` | The key used for the top-level color palette in `theme.colors`
-`useColorSchemeMediaQuery` | `false` | Initializes the color mode based on the `prefers-color-scheme` media query
-`useBorderBox` | `true` | Adds a global `box-sizing: border-box` style
-`useLocalStorage` | `true` | Persists the color mode in `localStorage`
+| Flag                       | Default     | Description                                                                                                  |
+| -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------ |
+| `useCustomProperties`      | `true`      | Enables CSS custom properties to help mitigate a flash of unstyled content during rehydration                |
+| `useBodyStyles`            | `true`      | Adds styles defined in `theme.styles.root` to the `<body>` element along with `color` and `background-color` |
+| `initialColorModeName`     | `'default'` | The key used for the top-level color palette in `theme.colors`                                               |
+| `useColorSchemeMediaQuery` | `false`     | Initializes the color mode based on the `prefers-color-scheme` media query                                   |
+| `useBorderBox`             | `true`      | Adds a global `box-sizing: border-box` style                                                                 |
+| `useLocalStorage`          | `true`      | Persists the color mode in `localStorage`                                                                    |
 
 ## Example Theme
 
@@ -187,7 +187,8 @@ export const theme = {
   breakpoints: ['40em', '52em', '64em'],
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
-    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
@@ -275,5 +276,5 @@ export const theme = {
 
 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/master/packages/preset-base/src/index.ts
+[example]: https://github.com/system-ui/theme-ui/tree/stable/packages/preset-base/src/index.ts
 [emotion]: https://emotion.sh

packages/prism/README.md

@@ -69,7 +69,7 @@ export default {
 }
 ```
 
-The following themes are available and can be found in the [`presets/`](https://github.com/system-ui/theme-ui/tree/master/packages/prism/presets) directory.
+The following themes are available and can be found in the [`presets/`](https://github.com/system-ui/theme-ui/tree/stable/packages/prism/presets) directory.
 
 - `dracula.json`
 - `duotone-dark.json`

packages/tachyons/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@theme-ui/css": "0.6.0-alpha.1",
     "babel-polyfill": "^6.26.0",
-    "execa": "^4.0.0"
+    "execa": "^5.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/tailwind/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "@theme-ui/css": "0.6.0-alpha.1",
     "babel-polyfill": "^6.26.0",
-    "execa": "^4.0.0",
+    "execa": "^5.0.0",
     "tailwindcss": "^1.0.4"
   },
   "publishConfig": {

packages/theme-ui/README.md

@@ -50,7 +50,7 @@
       alt="Tree Shaking"
     />
   </a>
-  <a href="https://github.com/system-ui/theme-ui/blob/master/LICENSE.md">
+  <a href="https://github.com/system-ui/theme-ui/blob/stable/LICENSE.md">
     <img
       src="https://badgen.net/badge/license/MIT/blue"
       alt="MIT license"
@@ -64,8 +64,11 @@
 \
 Theme UI is a library for creating themeable user interfaces based on constraint-based design principles. Build custom component libraries, design systems, web applications, Gatsby themes, and more with a flexible API for best-in-class developer ergonomics.
 
-**stable docs**: https://theme-ui.com \
-**next (v0.6.0-alpha) docs**: [https://development--dev-theme-ui.netlify.app/](https://development--dev-theme-ui.netlify.app/)
+**[stable] docs**: https://theme-ui.com \
+**[develop] (v0.6.0-alpha) docs**: [https://development--dev-theme-ui.netlify.app/](https://development--dev-theme-ui.netlify.app/)
+
+[stable]: https://github.com/system-ui/theme-ui/tree/stable
+[develop]: https://github.com/system-ui/theme-ui/tree/develop
 
 ---