Tidy stuff from #12087

Author: fk

www/src/components/api-reference/examples.js

@@ -1,7 +1,7 @@
 import React from "react"
 import { graphql } from "gatsby"
 
-import { rhythm } from "../../utils/typography"
+import { space } from "../../utils/presets"
 
 const Example = ({ example }) => (
   <div className="gatsby-highlight">
@@ -20,7 +20,7 @@ const ExamplesBlock = ({ definition }) => {
   if (definition.examples && definition.examples.length > 0) {
     return (
       <div>
-        <h4 css={{ marginTop: rhythm(1) }}>Example</h4>
+        <h4 css={{ marginTop: space[6] }}>Example</h4>
         {` `}
         {definition.examples.map((example, i) => (
           <Example example={example} key={`example ${i}`} />

www/src/components/api-reference/index.js

@@ -3,7 +3,7 @@ import { graphql } from "gatsby"
 
 import DocBlock from "./doc-block"
 
-import { rhythm } from "../../utils/typography"
+import { space } from "../../utils/presets"
 
 export default ({
   docs,
@@ -15,7 +15,7 @@ export default ({
       <div
         id={definition.name}
         key={`reference list ${definition.name}`}
-        css={{ marginBottom: rhythm(1) }}
+        css={{ marginBottom: space[6] }}
       >
         {i !== 0 && <hr />}
         <DocBlock

www/src/components/api-reference/params.js

@@ -4,14 +4,14 @@ import { css } from "@emotion/core"
 
 import DocBlock from "./doc-block"
 import { SubHeader } from "./utils"
-import { rhythm } from "../../utils/typography"
+import { space } from "../../utils/presets"
 
 const List = ({ elements, level, ignoreParams }) => (
   <ul
     css={css`
       list-style-type: none;
-      margin-top: ${rhythm(0.5)};
-      margin-left: ${rhythm(0.75)};
+      margin-top: ${space[3]};
+      margin-left: ${space[4]};
       margin-bottom: 0;
     `}
   >

www/src/components/api-reference/returns.js

@@ -3,7 +3,6 @@ import { graphql } from "gatsby"
 
 import DocBlock from "./doc-block"
 import { SubHeader } from "./utils"
-// import { rhythm } from "../../utils/typography"
 
 const ReturnBlock = ({ definition, level }) => {
   if (definition.returns && definition.returns.length > 0) {

www/src/components/api-reference/signature.js

@@ -5,7 +5,8 @@ import { css } from "@emotion/core"
 import { graphql } from "gatsby"
 
 import { SubHeader } from "./utils"
-import { options, rhythm } from "../../utils/typography"
+import { options } from "../../utils/typography"
+import { space } from "../../utils/presets"
 
 const Wrapper = styled(`span`)`
   font-family: ${options.headerFontFamily.join(`,`)};
@@ -27,7 +28,7 @@ const Wrapper = styled(`span`)`
     props.block &&
     css`
       display: block;
-      margin-top: ${rhythm(0.35)};
+      margin-top: ${space[2]};
     `};
 `
 

www/src/components/api-reference/utils.js

@@ -1,7 +1,7 @@
 import React from "react"
 import { css } from "@emotion/core"
 
-import { rhythm } from "../../utils/typography"
+import { space } from "../../utils/presets"
 
 export const Header = ({ children, level }) => {
   const Tag = `h${Math.min(3 + level * 2, 6)}`
@@ -12,7 +12,7 @@ export const Header = ({ children, level }) => {
         margin: 0,
         ...(level > 0
           ? {
-              marginTop: rhythm(0.35),
+              marginTop: space[2],
             }
           : {}),
       }}
@@ -28,7 +28,7 @@ export const SubHeader = ({ children, level }) => {
     <Tag
       css={css`
         margin: 0;
-        margin-top: ${rhythm(0.35)};
+        margin-top: ${space[2]};
       `}
     >
       {children}

www/src/pages/docs/node-api-helpers.js

@@ -4,7 +4,7 @@ import Helmet from "react-helmet"
 import sortBy from "lodash/sortBy"
 
 import APIReference from "../../components/api-reference"
-import { rhythm } from "../../utils/typography"
+import { space } from "../../utils/presets"
 import Layout from "../../components/layout"
 import Container from "../../components/container"
 import { itemListDocs } from "../../utils/sidebar/item-list"
@@ -72,7 +72,7 @@ exports.createPages = ({ actions, reporter }) => {
             Check documentation of specific APIs in{` `}
             <Link to="/docs/node-apis/">Gatsby Node APIs</Link> for details.
           </p>
-          <h2 id="shared-helpers" css={{ marginBottom: rhythm(1 / 2) }}>
+          <h2 id="shared-helpers" css={{ marginBottom: space[3] }}>
             Shared helpers
           </h2>
           <ul>