feat(www): Spring cleaning episode 5

www/src/components/api-reference/doc-block.js

@@ -12,7 +12,8 @@ import {
 } from "./signature"
 import ReturnBlock from "./returns"
 import { Header } from "./utils"
-import { options, scale } from "../../utils/typography"
+import { scale } from "../../utils/typography"
+import { fonts } from "../../utils/presets"
 
 const Optional = styled.span`
   :before {
@@ -30,7 +31,7 @@ const Deprecated = ({ definition }) => {
           p:before {
             color: #e8bd36;
             content: "(deprecated) ";
-            font-family: ${options.headerFontFamily.join(`,`)};
+            font-family: ${fonts.header};
           }
         `}
         dangerouslySetInnerHTML={{

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,10 +5,10 @@ import { css } from "@emotion/core"
 import { graphql } from "gatsby"
 
 import { SubHeader } from "./utils"
-import { options, rhythm } from "../../utils/typography"
+import { space, fonts } from "../../utils/presets"
 
 const Wrapper = styled(`span`)`
-  font-family: ${options.headerFontFamily.join(`,`)};
+  font-family: ${fonts.header};
   font-weight: 400;
 
   :before,
@@ -27,7 +27,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/components/avatar.js

@@ -1,7 +1,6 @@
 import React from "react"
 import Img from "gatsby-image"
 
-import { rhythm } from "../utils/typography"
 import { space, radii } from "../utils/presets"
 
 const Avatar = ({ image, alt }) => (
@@ -12,7 +11,7 @@ const Avatar = ({ image, alt }) => (
       borderRadius: radii[6],
       display: `inline-block`,
       // todo remove
-      marginRight: rhythm(space[3]),
+      marginRight: space[3],
       marginBottom: 0,
       verticalAlign: `top`,
       // prevents image twitch in Chrome when hovering the card

www/src/components/banner.js

@@ -2,10 +2,9 @@ import React from "react"
 import styled from "@emotion/styled"
 import { OutboundLink } from "gatsby-plugin-google-analytics"
 
-import { colors, space, dimensions } from "../utils/presets"
-import { rhythm, options } from "../utils/typography"
+import { colors, space, dimensions, fonts } from "../utils/presets"
 
-const horizontalPadding = rhythm(space[6])
+const horizontalPadding = space[6]
 const backgroundColor = colors.gatsby
 
 const BannerContainer = styled(`div`)`
@@ -28,7 +27,7 @@ const InnerContainer = styled(`div`)`
 
 const Content = styled(`div`)`
   color: ${colors.ui.bright};
-  font-family: ${options.headerFontFamily.join(`,`)};
+  font-family: ${fonts.header};
   padding-left: ${horizontalPadding};
   padding-right: ${horizontalPadding};
   -webkit-font-smoothing: antialiased;

www/src/components/blog-post-preview-item.js

@@ -2,8 +2,7 @@ import React from "react"
 import { Link, graphql } from "gatsby"
 
 import Avatar from "./avatar"
-import { options } from "../utils/typography"
-import { colors } from "../utils/presets"
+import { colors, fonts } from "../utils/presets"
 
 const formatDate = dateString =>
   new Date(dateString).toLocaleDateString(`en-EN`, {
@@ -42,7 +41,7 @@ const BlogPostPreviewItem = ({ post, className }) => (
       <div
         css={{
           display: `inline-block`,
-          fontFamily: options.headerFontFamily.join(`,`),
+          fontFamily: fonts.header,
           color: colors.gray.calm,
         }}
       >

www/src/components/card-headline.js

@@ -1,11 +1,11 @@
 import React from "react"
-import presets from "../utils/presets"
+import { lineHeights, scale } from "../utils/presets"
 
 const CardHeadline = ({ children }) => (
   <h2
     css={{
-      fontSize: presets.scale[4],
-      lineHeight: presets.lineHeights.dense,
+      fontSize: scale[4],
+      lineHeight: lineHeights.dense,
       marginTop: 0,
     }}
   >

www/src/components/card.js

@@ -1,6 +1,5 @@
 import React from "react"
 import { colors, space, breakpoints } from "../utils/presets"
-import { rhythm } from "../utils/typography"
 
 const Card = ({ children }) => (
   <div
@@ -26,10 +25,10 @@ const Card = ({ children }) => (
   >
     <div
       css={{
-        padding: rhythm(space[6]),
+        padding: space[6],
         paddingBottom: 0,
         transform: `translateZ(0)`,
-        [breakpoints.sm]: { padding: rhythm(space[8]) },
+        [breakpoints.sm]: { padding: space[8] },
       }}
     >
       {children}

www/src/components/container.js

@@ -8,11 +8,11 @@ const Container = ({ children, hasSideBar = true, overrideCSS }) => (
     css={{
       maxWidth: hasSideBar ? rhythm(28) : rhythm(36),
       margin: `0 auto`,
-      padding: rhythm(space[6]),
+      padding: space[6],
       position: `relative`,
       [breakpoints.lg]: {
-        paddingTop: rhythm(space[9]),
-        paddingBottom: rhythm(space[9]),
+        paddingTop: space[9],
+        paddingBottom: space[9],
       },
       ...overrideCSS,
     }}