feat(www): Spring cleaning episode 2 (#12464)

Picking up where #12264 left off:

- `presets.scale` _almost_ everywhere
- less `boxShadow: none` and `:hover { background: "none" }` overrides for links — we don’t need to overwrite this style anymore
- add `presets.letterSpacings` and use them
- add `colors.white` and use it
- import `radii` directly instead of doing `presets.radii[x]`
- rename `presets.animation` to `presets.transition`
- import `transition` directly instead of doing `presets.transition[x]`
- add `presets.shadows.cardActive`
- more `presets.space` refactoring
- remove Futura PT `specimen_files`, demo HTML, and „How to use web fonts“
- first improvements to the „Starters“ search input styles
- simplify things here and there 😉

Author: fk

www/src/components/banner.js

@@ -35,13 +35,13 @@ const Content = styled(`div`)`
   white-space: nowrap;
 
   a {
-    color: #fff;
-    border-bottom: 1px solid #fff;
+    color: ${colors.white};
+    border-bottom: 1px solid ${colors.white};
   }
 
   a:hover {
-    color: #fff;
-    border-bottom-color: #ffffffa0;
+    color: ${colors.white};
+    border-bottom-color: ${colors.white}a0;
   }
 `
 

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

@@ -3,13 +3,13 @@ import { Link, graphql } from "gatsby"
 import Img from "gatsby-image"
 
 import { rhythm, options } from "../utils/typography"
-import presets, { colors, space } from "../utils/presets"
+import { colors, space, radii } from "../utils/presets"
 
 const BlogPostPreviewItem = ({ post, className }) => (
   <article className={className} css={{ position: `relative` }}>
     <Link to={post.fields.slug} css={{ "&&": { color: colors.gray.copy } }}>
       <h2 css={{ marginTop: 0 }}>{post.frontmatter.title}</h2>
-      <p css={{ fontWeight: `normal` }}>
+      <p>
         {post.frontmatter.excerpt ? post.frontmatter.excerpt : post.excerpt}
       </p>
     </Link>
@@ -24,21 +24,14 @@ const BlogPostPreviewItem = ({ post, className }) => (
         css={{
           position: `relative`,
           zIndex: 1,
-          "&&": {
-            boxShadow: `none`,
-            borderBottom: `0`,
-            fontWeight: `normal`,
-            ":hover": {
-              background: `transparent`,
-            },
-          },
+          "&&": { borderBottom: `0` },
         }}
       >
         <Img
           alt=""
           fixed={post.frontmatter.author.avatar.childImageSharp.fixed}
           css={{
-            borderRadius: presets.radii[6],
+            borderRadius: radii[6],
             display: `inline-block`,
             marginRight: rhythm(space[3]),
             marginBottom: 0,
@@ -61,13 +54,7 @@ const BlogPostPreviewItem = ({ post, className }) => (
             css={{
               position: `relative`,
               zIndex: 1,
-              "&&": {
-                color: colors.gatsby,
-                fontWeight: `normal`,
-                ":hover": {
-                  background: colors.ui.bright,
-                },
-              },
+              "&&": { color: colors.gatsby },
             }}
           >
             {post.frontmatter.author.id}
@@ -91,13 +78,7 @@ const BlogPostPreviewItem = ({ post, className }) => (
         textIndent: `-100%`,
         whiteSpace: `nowrap`,
         zIndex: 0,
-        "&&": {
-          border: 0,
-          boxShadow: `none`,
-          "&:hover": {
-            background: `none`,
-          },
-        },
+        "&&": { border: 0 },
       }}
     >
       Read more

www/src/components/card.js

@@ -12,23 +12,15 @@ const Card = ({ children }) => (
         flex: `0 0 auto`,
         maxWidth: `50%`,
         boxShadow: `0 1px 0 0 ${colors.ui.light}`,
-        "&:nth-of-type(5),&:nth-of-type(6)": {
-          boxShadow: `none`,
-        },
-        "&:nth-of-type(2n)": {
-          borderLeft: `1px solid ${colors.ui.light}`,
-        },
+        "&:nth-of-type(5), &:nth-of-type(6)": { boxShadow: `none` },
+        "&:nth-of-type(2n)": { borderLeft: `1px solid ${colors.ui.light}` },
       },
       [presets.Xl]: {
         flex: `0 0 auto`,
         maxWidth: `33.33333333%`,
         borderLeft: `1px solid ${colors.ui.light}`,
-        "&:nth-of-type(4)": {
-          boxShadow: `none`,
-        },
-        "&:nth-of-type(3n+1)": {
-          borderLeft: 0,
-        },
+        "&:nth-of-type(4)": { boxShadow: `none` },
+        "&:nth-of-type(3n+1)": { borderLeft: 0 },
       },
     }}
   >
@@ -37,9 +29,7 @@ const Card = ({ children }) => (
         padding: rhythm(space[6]),
         paddingBottom: 0,
         transform: `translateZ(0)`,
-        [presets.Sm]: {
-          padding: rhythm(space[8]),
-        },
+        [presets.Sm]: { padding: rhythm(space[8]) },
       }}
     >
       {children}

www/src/components/chart.js

@@ -1,6 +1,6 @@
 import React from "react"
 import ReactHighcharts from "react-highcharts"
-import presets from "../utils/presets"
+import { radii } from "../utils/presets"
 
 const dateToUTC = date => {
   const d = String(date)
@@ -30,7 +30,7 @@ const highchartsOptions = {
   },
   tooltip: {
     backgroundColor: `#FFFFFF`,
-    borderRadius: presets.radii[1],
+    borderRadius: radii[1],
   },
   credits: {
     enabled: false,

www/src/components/container.js

@@ -1,20 +1,18 @@
 import React from "react"
 
-import presets from "../utils/presets"
-import { rhythm, options } from "../utils/typography"
+import presets, { space } from "../utils/presets"
+import { rhythm } from "../utils/typography"
 
 const Container = ({ children, hasSideBar = true, overrideCSS }) => (
   <div
     css={{
       maxWidth: hasSideBar ? rhythm(28) : rhythm(36),
       margin: `0 auto`,
-      padding: `${rhythm(options.blockMarginBottom)} ${rhythm(
-        options.blockMarginBottom
-      )}`,
+      padding: rhythm(space[6]),
       position: `relative`,
       [presets.Lg]: {
-        paddingTop: rhythm(options.blockMarginBottom * 2),
-        paddingBottom: rhythm(options.blockMarginBottom * 2),
+        paddingTop: rhythm(space[9]),
+        paddingBottom: rhythm(space[9]),
       },
       ...overrideCSS,
     }}

www/src/components/diagram.js

@@ -3,7 +3,7 @@ import { keyframes } from "@emotion/core"
 import { Link, StaticQuery, graphql } from "gatsby"
 
 import { rhythm, options } from "../utils/typography"
-import presets, { colors, space } from "../utils/presets"
+import presets, { colors, space, radii } from "../utils/presets"
 import logo from "../monogram.svg"
 import { GraphQLIcon, ReactJSIcon } from "../assets/logos"
 import FuturaParagraph from "../components/futura-paragraph"
@@ -24,9 +24,7 @@ const stripeBg = {
   animation: `${stripeAnimation} 14s linear infinite`,
 }
 const lineAnimation = keyframes({
-  to: {
-    strokeDashoffset: 10,
-  },
+  to: { strokeDashoffset: 10 },
 })
 
 const Segment = ({ className, children }) => (
@@ -49,13 +47,13 @@ const SegmentTitle = ({ children }) => (
       display: `inline`,
       background: colors.accent,
       color: colors.gray.copy,
-      borderRadius: presets.radii[1],
+      borderRadius: radii[1],
       margin: `0 auto`,
       position: `relative`,
-      bottom: `-.5rem`,
-      padding: `.35rem .6rem`,
+      bottom: `-${rhythm(space[2])}`,
+      padding: `${rhythm(space[2])} ${rhythm(space[3])}`,
       fontWeight: `normal`,
-      letterSpacing: `.5px`,
+      letterSpacing: presets.letterSpacings.tracked,
       fontSize: presets.scale[1],
       lineHeight: presets.lineHeights.solid,
       textTransform: `uppercase`,
@@ -87,16 +85,16 @@ const VerticalLine = () => (
 )
 
 const box = {
-  background: `#fff`,
+  background: colors.white,
   border: `1px solid ${colors.ui.light}`,
-  borderRadius: presets.radii[2],
+  borderRadius: radii[2],
   padding: `${rhythm(space[5])} ${rhythm(space[7])} 0`,
 }
 
 const borderAndBoxShadow = {
-  background: `#fff`,
+  background: colors.white,
   border: `1px solid ${colors.ui.light}`,
-  borderRadius: presets.radii[1],
+  borderRadius: radii[1],
   boxShadow: presets.shadows.card,
   transform: `translateZ(0)`,
   width: `100%`,
@@ -173,9 +171,7 @@ const ItemDescription = ({ children }) => (
 )
 
 const ItemDescriptionLink = ({ to, children }) => (
-  <Link css={{ "&&": { fontWeight: `normal` } }} to={to}>
-    {children}
-  </Link>
+  <Link to={to}>{children}</Link>
 )
 
 const Gatsby = () => (
@@ -196,31 +192,26 @@ const Gatsby = () => (
       src={logo}
       css={{
         display: `inline-block`,
-        height: rhythm(1.75),
-        width: rhythm(1.75),
-        [presets.Lg]: {
-          width: rhythm(2.25),
-          height: rhythm(2.25),
-        },
+        height: rhythm(space[8]),
         margin: 0,
         verticalAlign: `middle`,
+        width: `auto`,
+        [presets.Lg]: {
+          height: rhythm(space[9]),
+        },
       }}
       alt="Gatsby"
     />
     <ItemDescription>
       <small
         css={{
-          marginTop: `.25rem`,
+          marginTop: rhythm(space[1]),
           display: `block`,
         }}
       >
         powered by
       </small>
-      <span
-        css={{
-          color: colors.gatsby,
-        }}
-      >
+      <span css={{ color: colors.gatsby }}>
         <TechWithIcon icon={GraphQLIcon}>GraphQL</TechWithIcon>
       </span>
     </ItemDescription>
@@ -262,7 +253,9 @@ const Diagram = () => (
         >
           How Gatsby works
         </h1>
-        <div css={{ maxWidth: rhythm(20), margin: `0 auto ${rhythm(2)}` }}>
+        <div
+          css={{ maxWidth: rhythm(20), margin: `0 auto ${rhythm(space[9])}` }}
+        >
           <FuturaParagraph>
             Pull data from <em>anywhere</em>
           </FuturaParagraph>

www/src/components/ecosystem/ecosystem-board.js

@@ -4,7 +4,8 @@ import styled from "@emotion/styled"
 
 import EcosystemSection from "./ecosystem-section"
 
-import presets from "../../utils/presets"
+import presets, { space } from "../../utils/presets"
+import { rhythm } from "../../utils/typography"
 import {
   setupScrollersObserver,
   unobserveScrollers,
@@ -20,7 +21,7 @@ const EcosystemBoardRoot = styled(`div`)`
     height: calc(
       100vh - (${presets.bannerHeight} + ${presets.headerHeight} + 1px)
     );
-    padding: 2rem 1rem 1rem;
+    padding: ${rhythm(space[7])} ${rhythm(space[4])} ${rhythm(space[4])};
   }
 `
 

www/src/components/ecosystem/ecosystem-featured-item.js

@@ -10,12 +10,12 @@ import StarIcon from "react-icons/lib/md/star"
 import ArrowDownwardIcon from "react-icons/lib/md/arrow-downward"
 
 import { rhythm, options } from "../../utils/typography"
-import presets, { colors, space } from "../../utils/presets"
+import presets, { colors, space, transition, radii } from "../../utils/presets"
 
 const MAX_DESCRIPTION_LENGTH = 100
 
 const EcosystemFeaturedItemRoot = styled(HorizontalScrollerItem)`
-  margin-right: ${rhythm(options.blockMarginBottom)};
+  margin-right: ${rhythm(space[6])};
 
   ${presets.Md} {
     border-bottom: 1px solid ${colors.gray.superLight};
@@ -27,8 +27,8 @@ const EcosystemFeaturedItemRoot = styled(HorizontalScrollerItem)`
 `
 
 export const BlockLink = styled(Link)`
-  background: #fff;
-  border-radius: ${presets.radii[2]}px;
+  background: ${colors.white};
+  border-radius: ${radii[2]}px;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
@@ -38,8 +38,7 @@ export const BlockLink = styled(Link)`
   ${presets.Md} {
     border-radius: 0;
     box-shadow: none;
-    transition: all ${presets.animation.speedDefault}
-      ${presets.animation.curveDefault};
+    transition: all ${transition.speed.default} ${transition.curve.default};
   }
 
   ${presets.Lg} {
@@ -81,13 +80,13 @@ const Digest = styled(`div`)`
   flex-grow: 1;
   font-family: ${options.systemFontFamily.join(`,`)};
   justify-content: space-between;
-  padding: ${rhythm(0.5)} 0 0;
+  padding: ${rhythm(space[3])} 0 0;
 `
 
 const Thumbnail = styled(`div`)`
   height: 64px;
   padding-right: ${rhythm(space[4])};
-  margin-top: ${rhythm(1 / 12)};
+  margin-top: ${rhythm(space[1])};
 
   img {
     border: 1px solid ${colors.gray.superLight};

www/src/components/ecosystem/ecosystem-featured-items.js

@@ -7,17 +7,17 @@ import {
   HorizontalScrollerContent,
 } from "../shared/horizontal-scroller"
 
-import presets, { colors } from "../../utils/presets"
-import { rhythm, options } from "../../utils/typography"
+import presets, { colors, space } from "../../utils/presets"
+import { rhythm } from "../../utils/typography"
 import { scrollbarStyles } from "../../utils/styles"
 import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer"
 
 const EcosystemFeaturedItemsRoot = styled(HorizontalScroller)`
-  margin: ${rhythm(0.1)} -${rhythm(options.blockMarginBottom)};
+  margin: 0 -${rhythm(space[6])};
 
   ${presets.Md} {
     border-top: 1px solid ${colors.gray.superLight};
-    margin-top: ${rhythm(0.4)};
+    margin-top: ${rhythm(space[3])};
     margin-bottom: 0;
     overflow-y: scroll;
     overflow-x: hidden;
@@ -29,12 +29,12 @@ export const ListBase = styled(`ul`)`
   display: inline-flex;
   list-style: none;
   margin: 0;
-  padding: 0 calc(${rhythm(options.blockMarginBottom)} - 5px) 4px;
+  padding: 0 calc(${rhythm(space[6])} - 5px) 4px;
 `
 
 const List = styled(HorizontalScrollerContent)`
-  padding-left: ${rhythm(options.blockMarginBottom)};
-  padding-right: ${rhythm(options.blockMarginBottom)};
+  padding-left: ${rhythm(space[6])};
+  padding-right: ${rhythm(space[6])};
 
   ${presets.Md} {
     flex-direction: column;