Merge branch 'master' into next-core-mdx

jxnblk · jxnblk · commit e10e8823ffc0 · 2020-01-15T16:48:15.000-05:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,8 @@
 - The `@theme-ui/editor` API has changed significantly. See the README.md for more information.
 
 - `@theme-ui/components`: on Grid component, allow custom `columns` definitions via strings #541
+- Adds `@theme-ui/preset-polaris` #567
+- Adjusts default font stack in presets #568
 
 ## v0.2.53 2019-12-19
 
diff --git a/examples/create-react-app/src/theme.js b/examples/create-react-app/src/theme.js
@@ -6,7 +6,8 @@ export default {
     secondary: '#609',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
   },
   styles: {
diff --git a/examples/custom-pragma/src/theme.js b/examples/custom-pragma/src/theme.js
@@ -6,7 +6,8 @@ export default {
     secondary: '#609',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/examples/dark-mode/src/theme.js b/examples/dark-mode/src/theme.js
@@ -14,7 +14,8 @@ export default {
     },
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
   },
   lineHeights: {
diff --git a/examples/gatsby-plugin/src/gatsby-plugin-theme-ui/index.js b/examples/gatsby-plugin/src/gatsby-plugin-theme-ui/index.js
@@ -8,7 +8,8 @@ export default {
     secondary: '#609',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
   },
   lineHeights: {
diff --git a/examples/gatsby/src/theme.js b/examples/gatsby/src/theme.js
@@ -6,7 +6,8 @@ export default {
     secondary: '#609',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
   },
   styles: {
diff --git a/examples/next/src/theme.js b/examples/next/src/theme.js
@@ -15,7 +15,8 @@ export default {
     },
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
   },
   styles: {
diff --git a/examples/prism/src/theme.js b/examples/prism/src/theme.js
@@ -7,7 +7,8 @@ export default {
     lightgray: '#fafafa',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/packages/chrome/src/theme.js b/packages/chrome/src/theme.js
@@ -24,7 +24,8 @@ export default {
   },
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96, 128],
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/packages/custom-properties/test/__snapshots__/test.js.snap b/packages/custom-properties/test/__snapshots__/test.js.snap
@@ -10,8 +10,8 @@ Object {
   "--color-primary": "#07c",
   "--color-secondary": "#05a",
   "--color-text": "#000",
-  "--font-body": "system-ui, sans-serif",
-  "--font-heading": "system-ui, sans-serif",
+  "--font-body": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
+  "--font-heading": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
   "--font-monospace": "Menlo, monospace",
   "--fontWeight-body": 400,
   "--fontWeight-bold": 700,
@@ -41,8 +41,8 @@ Object {
   "--🍭-color-primary": "#07c",
   "--🍭-color-secondary": "#05a",
   "--🍭-color-text": "#000",
-  "--🍭-font-body": "system-ui, sans-serif",
-  "--🍭-font-heading": "system-ui, sans-serif",
+  "--🍭-font-body": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
+  "--🍭-font-heading": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
   "--🍭-font-monospace": "Menlo, monospace",
   "--🍭-fontWeight-body": 400,
   "--🍭-fontWeight-bold": 700,
diff --git a/packages/custom-properties/test/test.js b/packages/custom-properties/test/test.js
@@ -18,8 +18,10 @@ const theme = {
     },
   },
   fonts: {
-    body: 'system-ui, sans-serif',
-    heading: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    heading:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     monospace: 'Menlo, monospace',
   },
   fontWeights: {
diff --git a/packages/docs/src/components/select.js b/packages/docs/src/components/select.js
@@ -6,7 +6,8 @@ export default props => (
     id={props.name}
     {...props}
     sx={{
-      fontFamily: 'system-ui, sans-serif',
+      fontFamily:
+        'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
       fontSize: 16,
       p: 2,
     }}
diff --git a/packages/docs/src/gatsby-plugin-theme-ui/index.js b/packages/docs/src/gatsby-plugin-theme-ui/index.js
@@ -45,7 +45,8 @@ export default {
     },
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/packages/docs/src/pages/theming.mdx b/packages/docs/src/pages/theming.mdx
@@ -63,7 +63,7 @@ Core typographic values can be stored in the following theme keys:
 {
   colors,
   fonts: {
-    body: 'system-ui, sans-serif',
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'Georgia, serif',
     monospace: 'Menlo, monospace',
   },
@@ -101,7 +101,7 @@ Styles within this object have access to other values in the theme object, such
     primary: '#07c',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'Georgia, serif',
   },
   fontWeights: {
@@ -185,7 +185,7 @@ export const theme = {
   breakpoints: ['40em', '52em', '64em'],
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
-    body: 'system-ui, sans-serif',
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/packages/editor/README.md b/packages/editor/README.md
@@ -75,7 +75,8 @@ const reducer = (state, next) => merge({}, state, next)
 
 export default props => {
   const [style, setStyle] = useReducer(reducer, {
-    fontFamily: 'system-ui, sans-serif',
+    fontFamily:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     color: 'tomato',
   })
 
@@ -100,4 +101,3 @@ export default props => {
   )
 }
 ```
-
diff --git a/packages/editor/src/Theme/Fonts.js b/packages/editor/src/Theme/Fonts.js
@@ -3,7 +3,7 @@ import { jsx, useThemeUI } from 'theme-ui'
 import Combobox from '../Combobox'
 
 const defaultFonts = [
-  'system-ui, sans-serif',
+  'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
   '"Helvetica Neue", Helvetica, Arial, sans-serif',
   '"Avenir Next", Helvetica, Arial, sans-serif',
   'Verdana, sans-serif',
diff --git a/packages/preset-base/src/index.js b/packages/preset-base/src/index.js
@@ -8,7 +8,8 @@ const heading = {
 export const base = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/packages/preset-dark/src/index.js b/packages/preset-dark/src/index.js
@@ -16,7 +16,8 @@ export default {
     purple: '#c0f',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/packages/preset-deep/src/index.js b/packages/preset-deep/src/index.js
@@ -16,7 +16,8 @@ export default {
     gray: 'hsl(210, 50%, 60%)',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/packages/preset-polaris/README.md b/packages/preset-polaris/README.md
@@ -0,0 +1,32 @@
+# [@theme-ui/preset-polaris](https://theme-ui.com/presets/polaris)
+
+Theme UI includes `@theme-ui/preset-polaris` which can be used as an example or
+starting point for extending your own themes.  `@theme-ui/preset-polaris` is based on the Shopify design system, [Polaris](https://polaris.shopify.com/design/colors).
+
+```sh
+npm i @theme-ui/preset-polaris
+```
+
+```jsx
+// example theme
+import theme from '@theme-ui/preset-polaris'
+
+export default {
+  ...theme,
+  styles: {
+    ...theme,
+  },
+}
+```
+
+[See all built-in presets][demo]
+
+## Contributing
+
+We'd love to have more presets added to the Theme UI project.
+If you'd like to add a new preset or improve upon the existing ones, please open an [issue][] or [pull request][].
+
+[issue]: https://github.com/system-ui/theme-ui/issues
+[pull request]: https://github.com/system-ui/theme-ui/pulls
+
+[demo]: https://theme-ui.com/demo
diff --git a/packages/preset-polaris/babel.config.js b/packages/preset-polaris/babel.config.js
@@ -0,0 +1 @@
+module.exports = require('../../babel.config')
diff --git a/packages/preset-polaris/package.json b/packages/preset-polaris/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@theme-ui/preset-polaris",
+  "version": "0.3.0-alpha.4",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "author": "Yuraima Estevez",
+  "license": "MIT",
+  "scripts": {
+    "prepare": "microbundle --no-compress",
+    "watch": "microbundle watch --no-compress"
+  },
+  "dependencies": {
+    "@theme-ui/preset-base": "^0.2.44"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/preset-polaris/src/index.js b/packages/preset-polaris/src/index.js
@@ -0,0 +1,45 @@
+import base from '@theme-ui/preset-base'
+
+const text =
+  'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif'
+
+export const polaris = {
+  ...base,
+  colors: {
+    text: '#454f5b',
+    background: '#fff',
+    primary: '#5c6ac4',
+    secondary: '#006fbb',
+    highlight: '#47c1bf',
+    muted: '#e6e6e6',
+    gray: '#dfe3e8',
+    accent: '#f49342',
+    darken: '#00044c',
+    modes: {
+      dark: {
+        text: '#3e4155',
+        background: '#000639',
+        primary: '#9c6ade',
+        secondary: '#b4e1fa',
+        highlight: '#b7ecec',
+        muted: '#e6e6e6',
+      },
+    },
+  },
+  fonts: {
+    body: text,
+    heading: text,
+    moonospace: 'Menlo, monospace',
+  },
+  fontWeights: {
+    body: 400,
+    heading: 600,
+    bold: 700,
+  },
+  lineHeights: {
+    body: 1.75,
+    heading: 1.25,
+  },
+}
+
+export default polaris
diff --git a/packages/preset-swiss/src/index.js b/packages/preset-swiss/src/index.js
@@ -16,7 +16,8 @@ export default {
     gray: 'hsl(10, 20%, 50%)',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/packages/preset-system/src/index.js b/packages/preset-system/src/index.js
@@ -50,7 +50,8 @@ export default {
     },
   },
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
diff --git a/packages/presets/package.json b/packages/presets/package.json
@@ -17,6 +17,7 @@
     "@theme-ui/preset-deep": "^0.3.0-alpha.4",
     "@theme-ui/preset-funk": "^0.3.0-alpha.4",
     "@theme-ui/preset-future": "^0.3.0-alpha.4",
+    "@theme-ui/preset-polaris": "^0.3.0-alpha.4",
     "@theme-ui/preset-roboto": "^0.3.0-alpha.4",
     "@theme-ui/preset-swiss": "^0.3.0-alpha.4",
     "@theme-ui/preset-system": "^0.3.0-alpha.4",
diff --git a/packages/presets/src/index.js b/packages/presets/src/index.js
@@ -10,4 +10,5 @@ export { default as tosh } from '@theme-ui/preset-tosh'
 
 export { default as bootstrap } from '@theme-ui/preset-bootstrap'
 export { default as bulma } from '@theme-ui/preset-bulma'
+export { default as polaris } from '@theme-ui/preset-polaris'
 export { default as tailwind } from '@theme-ui/preset-tailwind'
diff --git a/packages/tachyons/test/__snapshots__/test.js.snap b/packages/tachyons/test/__snapshots__/test.js.snap
@@ -1742,8 +1742,8 @@ Object {
     "text": "#000",
   },
   "fontFamily": Object {
-    "body": "system-ui, sans-serif",
-    "heading": "system-ui, sans-serif",
+    "body": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
+    "heading": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif",
     "monospace": "Menlo, monospace",
   },
   "fontWeight": Object {
diff --git a/packages/tachyons/test/test.js b/packages/tachyons/test/test.js
@@ -14,8 +14,10 @@ const theme = {
     muted: '#f6f6f6',
   },
   fonts: {
-    body: 'system-ui, sans-serif',
-    heading: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    heading:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     monospace: 'Menlo, monospace',
   },
   fontWeights: {
diff --git a/packages/tailwind/test/__snapshots__/test.js.snap b/packages/tailwind/test/__snapshots__/test.js.snap
diff --git a/packages/tailwind/test/test.js b/packages/tailwind/test/test.js
diff --git a/packages/theme-ui/README.md b/packages/theme-ui/README.md
diff --git a/yarn.lock b/yarn.lock
