Merge pull request #568 from lachlanjc/patch-3

jxnblk · web-flow · commit 378c6f8112c9 · 2020-01-15T16:34:57.000-05:00
Use backwards-compatible font stack for base theme
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
@@ -47,7 +47,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',
   },
@@ -226,15 +227,15 @@ export default {
     },
     secondary: {
       color: 'background',
-      bg: 'secondary'
+      bg: 'secondary',
     },
     accent: {
       color: 'background',
-      bg: 'accent'
+      bg: 'accent',
     },
     highlight: {
       color: 'text',
-      bg: 'highlight'
+      bg: 'highlight',
     },
   },
   styles: {
diff --git a/packages/docs/src/pages/theming.mdx b/packages/docs/src/pages/theming.mdx
@@ -62,7 +62,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',
   },
@@ -100,7 +100,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: {
@@ -151,7 +151,7 @@ export const base = {
   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
@@ -18,7 +18,7 @@ import {
   Space,
 } from '@theme-ui/editor'
 
-export default props =>
+export default props => (
   <Editor>
     <Fonts />
     <Row>
@@ -36,6 +36,7 @@ export default props =>
       <Space />
     </Row>
   </Editor>
+)
 ```
 
 ## Manually passing context
@@ -44,16 +45,14 @@ Pass a Theme UI context manually to the `Editor` component when you don't want t
 
 ```jsx
 import React from 'react'
-import {
-  Editor,
-  Fonts,
-} from '@theme-ui/editor'
+import { Editor, Fonts } from '@theme-ui/editor'
 import merge from 'lodash.merge'
 
 const reducer = (state, next) => merge({}, state, next)
 const defaultTheme = {
   fonts: {
-    body: 'system-ui, sans-serif',
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'Georgia, serif',
   },
 }
@@ -79,18 +78,16 @@ Use these components to edit an element in `theme.styles`
 
 ```jsx
 import React from 'react'
-import {
-  Editor,
-  StylesForm,
-} from '@theme-ui/editor'
+import { Editor, StylesForm } from '@theme-ui/editor'
 
-export default props =>
+export default props => (
   <Editor>
     <code>theme.styles.h1</code>
-    <StylesForm tag='h1' />
+    <StylesForm tag="h1" />
     <code>theme.styles.h2</code>
-    <StylesForm tag='h2' />
+    <StylesForm tag="h2" />
   </Editor>
+)
 ```
 
 ## `sx` editor
@@ -99,11 +96,7 @@ To edit arbitrary `sx` style objects, use the following forms:
 
 ```jsx
 import React from 'react'
-import {
-  SxTypography,
-  SxMargin,
-  SxColors,
-} from '@theme-ui/editor'
+import { SxTypography, SxMargin, SxColors } from '@theme-ui/editor'
 import { useReducer } from 'react'
 import merge from 'lodash.merge'
 import theme from './theme'
@@ -112,30 +105,17 @@ 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',
   })
 
   return (
     <div>
-      <SxTypography
-        value={style}
-        onChange={setStyle}
-        theme={theme}
-      />
-      <SxMargin
-        value={style}
-        onChange={setStyle}
-        theme={theme}
-      />
-      <SxColors
-        value={style}
-        onChange={setStyle}
-        theme={theme}
-      />
+      <SxTypography value={style} onChange={setStyle} theme={theme} />
+      <SxMargin value={style} onChange={setStyle} theme={theme} />
+      <SxColors value={style} onChange={setStyle} theme={theme} />
     </div>
   )
 }
 ```
-
-
diff --git a/packages/editor/src/Editor.js b/packages/editor/src/Editor.js
@@ -10,13 +10,7 @@ const theme = {
   },
 }
 
-export default ({
-  context,
-  fontSize = 16,
-  color,
-  bg,
-  ...props
-}) => {
+export default ({ context, fontSize = 16, color, bg, ...props }) => {
   const outer = useThemeUI()
   context = context || outer
 
@@ -26,7 +20,8 @@ export default ({
         <div
           {...props}
           sx={{
-            fontFamily: 'system-ui, sans-serif',
+            fontFamily:
+              'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
             fontSize,
             lineHeight: 1.5,
             fontWeight: 400,
diff --git a/packages/editor/src/Fonts.js b/packages/editor/src/Fonts.js
@@ -4,7 +4,7 @@ import { useEditor } from './context'
 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,7 @@ 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-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/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
