feat(www): Spring cleaning episode 5 (#12603)

* feat(www): Spring cleaning episode 5

Attention, noooooooooob Friday stuff … potential public humiliation stuff 😅🥳

Since we want to define `presets.space` in relation to Typography.js’ `rhythm`, but doing so directly in `presets`  would have introduced a circular dependency among `utils/presets` and `utils/typography` (from what _I_ think I understand 🤓), up to now we had to put values from `presets.space` through `rhythm` for each usage in components:

```
import { space } from "../../utils/presets"
import { rhythm } from "../../utils/typography"

padding: ${rhythm(space[7])} ${rhythm(space[4])} ${rhythm(space[4])};
```

This caused a lot of unnecessary noise, and was an ugly derivation from the norm for that one group of design tokens in `presets` … and of course smells a lot.

This PR cleans that up — as good as I can.

I would appreciate any input and I’m happy to adjust this, crossing fingers that this PR at least shows where I want things to go:

```
import { space } from "../../utils/presets"

padding: ${space[7]} ${space[4]} ${space[4]};
```

- minimize direct usage of Typography.js’ `scale` and `rhythm`
- maximize usage of `presets` tokens for consistency, and make that easy and as concise as possible

—

- split up design tokens in `utils/presets` and move them to `utils/tokens/*` — theme-style FTW?!
- move `utils/colors` to `utils/tokens/colors`
- refactor to remove circular dependency among `utils/typography` and `utils.presets` — this enables us to use Typography.js’ `rhythm` in `utils.presets` so we can avoid manual „composition“ of `scale` values in components
- move `paddingLeft` helper function used in `components/sidebar/accordion` and `components/sidebar/section-title` to `utils/sidebar/indention`

* Tidy stuff from #12087

* Tidy

* D’oh

* Use `presets.fonts` in components

… instead of `typography.options` and `join(`,`)
Move font stack definitions to tokens.

* Drop uppercase and tracking for main nav items

Lowercase is (subjectively) more legible and friendly, takes less space, matches the mobile navigation items, and magically resolves space issues on screens below „lg“

* Fix refactoring fails

* Drop WebKit scrollbars for starters, showcase

* Drop WebKit scrollbar styles for docs/tutorials, plugins sidebars

* Realign docs/tutorial, plugins sidebars

- move padding to anchor/title — allow
- calmer „Expand/Collapse All“ button
- increase sidebar „utility“ height (containing the „Expand/Collapse All“ button) height/whitespace
- move a couple sidebar variables to `utils/sidebars/presets`, enables configuration of a couple of things:
  - sidebar item hover background color
  - sidebar item borders — I decided to drop those for now, can be brought back via changing a color variable
  - minimum item height
  - active „section item“ background
  - sidebar background color for offscreen/small screens, and persistent/larger screens
- adjust `colors.ui`
  - drop `colors.ui.border`
  - freshen up `light`, `bright`, and `whisper`
- bump default sidebar width
- simplify „stepsUI“ (used for anchor links in „Tutorial“) — remove dashed lines
- reduce sidebar active item font weight — dial it back to 600, which should be supported by the majority of the system font stack
- improved distinction among top-level sections (via border-bottom and vertical whitespace)
- sidebar expand/collapse chevron button now covers 100% of the item's height

* Fix padding-right for subitems with caret

* Move `level` info to `item-list`, hide level 0 expanded accordion border bottom if there’s only one accordion

* Remove unused

* Fix apostrophes

Author: fk

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,
         }}
       >