Typography options

packages/gatsby-plugin-theme-ui/README.md

@@ -16,6 +16,34 @@ module.exports = {
 In addition to providing context, this plugin will also
 prevent a flash of unstyled colors when using color modes.
 
+## Options
+
+| Key                      | Default value    | Description                                                                      |
+| ------------------------ | ---------------- | -------------------------------------------------------------------------------- |
+| `themeModule`               | `null`            | JSON theme object, use the `require` syntax to include it in options. Make sure the package you're requiring is installed in your dependencies.               |
+| `themeModulePath`            | `null`  | A string package name that the plugin will require for you. Make sure the package you're requiring is installed in your dependencies.                                                             |
+| `moduleExportName`              | `default` | The name of the export from the theme module, applies to `themeModule` or `themeModulePath` resolution depending which one you're using    |
+| `typographyTheme`              | `null` | The name of the typography theme you'd like to use. The available package names can be found in the [typography.js repo](https://github.com/KyleAMathews/typography.js/tree/master/packages). You'll need to install the package locally as well.     |
+
+> Note that if your theme is exported at the top level, the `moduleExportName` of `default` is bypassed. See [theme-ui/preset-deep](https://github.com/system-ui/theme-ui/blob/master/packages/preset-deep/src/index.ts).
+
+The theme module you include in options is considered your base theme. Any further customization and shadowing will be merged with it. 
+
+### Using options
+
+```js
+// gatsby-config.js
+module.exports = {
+  plugins: [
+    { resolve: 'gatsby-plugin-theme-ui',
+      options: {
+        themeModulePath: '@theme-ui/preset-funk'
+        // or themeModule: require('@theme-ui/preset-funk')
+      }
+    }],
+}
+```
+
 ## Customizing the theme
 
 To customize the theme used in your Gatsby site,

packages/gatsby-plugin-theme-ui/gatsby-node.js

@@ -0,0 +1,50 @@
+exports.onPreInit = (__, options) => {
+    let {themeModulePath, typographyTheme} = options
+    if(themeModulePath) {
+        options.themeModulePath = require(themeModulePath)
+    }
+    if(typographyTheme) {
+      options.typographyTheme = require(typographyTheme)
+    }
+}
+
+exports.createSchemaCustomization = ({ actions }) => {
+    const { createTypes } = actions
+
+    createTypes(`
+      type ThemeUiConfig implements Node {
+        themeModule: JSON,
+        themeModulePath: JSON,
+        moduleExportName: String,
+        typographyTheme: JSON,
+      }
+    `)
+  }
+
+  exports.sourceNodes = (
+    { actions, createContentDigest },
+    { moduleExportName = 'default', themeModule, themeModulePath, typographyTheme }
+  ) => {      
+    const { createNode } = actions
+
+    const themeUiConfig = {
+        themeModule,
+        themeModulePath,
+        moduleExportName,
+        typographyTheme
+    }
+
+    createNode({
+      ...themeUiConfig,
+      id: `gatsby-plugin-theme-ui-config`,
+      parent: null,
+      children: [],
+      internal: {
+        type: `ThemeUiConfig`,
+        contentDigest: createContentDigest(themeUiConfig),
+        content: JSON.stringify(themeUiConfig),
+        description: `Options for gatsby-plugin-theme-ui`,
+      },
+    })
+  } 
+

packages/gatsby-plugin-theme-ui/package.json

@@ -6,7 +6,8 @@
   "license": "MIT",
   "peerDependencies": {
     "gatsby": "^2.13.1",
-    "theme-ui": "^0.3.0"
+    "theme-ui": "^0.3.0",
+    "@theme-ui/typography": "^0.2.46"
   },
   "keywords": [
     "gatsby",

packages/gatsby-plugin-theme-ui/src/hooks/configOptions.js

@@ -0,0 +1,18 @@
+import { useStaticQuery, graphql } from "gatsby"
+
+const useThemeUiConfig = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      themeUiConfig(id: { eq: "gatsby-plugin-theme-ui-config" }) {
+        themeModule
+        themeModulePath
+        moduleExportName
+        typographyTheme
+      }
+    }
+  `)
+
+  return data.themeUiConfig
+}
+
+export default useThemeUiConfig

packages/gatsby-plugin-theme-ui/src/provider.js

@@ -2,14 +2,50 @@
 import {
   jsx,
   ThemeProvider,
+  merge
 } from 'theme-ui'
+import { toTheme } from '@theme-ui/typography'
 import theme from './index'
 import components from './components'
+import useThemeUiConfig from './hooks/configOptions'
 
-export const wrapRootElement = ({ element }) =>
-  jsx(ThemeProvider, {
-      theme,
-      components,
-    },
-    element,
+
+const Root = ({children}) => {
+  const themeUiConfig = useThemeUiConfig()
+  const {themeModule, themeModulePath, moduleExportName} = themeUiConfig
+
+  let themeWrapper
+  if (themeModule) {
+    themeWrapper = themeModule
+  }
+
+  if (themeModulePath) {
+    themeWrapper = themeModulePath
+  }
+
+  if(themeWrapper && (moduleExportName in themeWrapper)) {
+    themeWrapper = themeWrapper[moduleExportName]
+  }
+
+  let typography = {}
+  if (typographyTheme) {
+    typography = toTheme(typographyTheme.default)
+  }
+
+  themeWrapper = merge(themeWrapper, {
+    ...typography,
+    ...theme
+  })
+  return (
+    <ThemeProvider theme={themeWrapper} components={components}>
+    {children}
+    </ThemeProvider>
+  )
+}
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <Root>{element}</Root>
   )
+}
+