chore(www): Adjust for gatsby-design-tokens v2 (#21276)

* Update to `theme-ui`, `gatsby-plugin-theme-ui` v0.3 - bump `gatsby-plugin-emotion` - remove `@emotion/core`, `@mdx-js/react` (ref. https://github.com/system-ui/theme-ui/blob/master/CHANGELOG.md#v030-2019-01-22) - `gatsby-design-tokens` currently has the version number provided by `gatsby-dev`, see #21240 for context) * No need to suffix `px` for `radii` in template literals and outside of `sx` anymore * Import `theme-ui` theme from `gatsby-design-tokens` * `fonts.header` -> `fonts-heading * Import from `gatsby-design-tokens/dist/theme-gatsbyjs-org` * `fonts.system` -> `fonts.body` Not a required change because `fonts.system` is still available, but IMO it's good to follow the `theme-ui` convention. * Stray `radii` suffix missed in 86de7c0 * `fontWeights.headingPrimary` -> `fontWeights.extraBold` * `fontWeights.medium` -> `fontWeights.semiBold` * `${t.transition.speed.default} ${t.transition.curve.default}` -> `default We can omit the transition-property/keyword, defaults to `all`. * `code.background` -> `code.bg` * Adjust sidebar transition speed The next v of `gatsby-design-tokens` defines `speed.slow` as `500ms`, before it was `250`. Let's use the default of `250ms` instead. Snappier actually feels better. * Use `transition.default` shortcut * Bump `gatsby-design-tokens` * FWIW bump moar
gatsbyjs · Feb 11, 2020 · ab8db05 · ab8db05
1 parent 049606a
commit ab8db05
Show file tree

Hide file tree

Showing 90 changed files with 161 additions and 607 deletions.
diff --git a/www/package.json b/www/package.json
@@ -4,12 +4,10 @@
   "version": "2.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "@emotion/core": "^10.0.22",
     "@emotion/styled": "^10.0.23",
     "@jamo/graphql-request": "2.0.2",
     "@loadable/component": "^5.11.0",
     "@mdx-js/mdx": "^1.5.1",
-    "@mdx-js/react": "^1.5.1",
     "@reach/skip-nav": "^0.6.2",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/should-forward-prop": "^5.1.4",
@@ -23,11 +21,11 @@
     "fuse.js": "^3.4.6",
     "gatsby": "^2.18.8",
     "gatsby-core-utils": "^1.0.28",
-    "gatsby-design-tokens": "~1.0.10",
+    "gatsby-design-tokens": "^2.0.1",
     "gatsby-image": "^2.2.34",
     "gatsby-plugin-canonical-urls": "^2.1.16",
     "gatsby-plugin-catch-links": "^2.1.19",
-    "gatsby-plugin-emotion": "^4.1.16",
+    "gatsby-plugin-emotion": "^4.1.22",
     "gatsby-plugin-feed": "^2.3.23",
     "gatsby-plugin-google-analytics": "^2.1.29",
     "gatsby-plugin-google-tagmanager": "^2.1.18",
@@ -43,7 +41,7 @@
     "gatsby-plugin-react-helmet": "^3.1.16",
     "gatsby-plugin-sharp": "^2.3.5",
     "gatsby-plugin-sitemap": "^2.2.22",
-    "gatsby-plugin-theme-ui": "^0.2.43",
+    "gatsby-plugin-theme-ui": "^0.3.0",
     "gatsby-plugin-twitter": "^2.1.15",
     "gatsby-plugin-typography": "^2.3.18",
     "gatsby-remark-autolink-headers": "^2.1.19",
@@ -96,7 +94,7 @@
     "slash": "^3.0.0",
     "slugify": "^1.3.6",
     "styled-system": "^5.1.4",
-    "theme-ui": "^0.2.49",
+    "theme-ui": "^0.3.1",
     "typography": "^1.0.0-alpha.4",
     "typography-plugin-code": "^1.0.0-alpha.0",
     "wcag-contrast": "^2.1.1",

diff --git a/www/src/assets/icons/layer-icon.js b/www/src/assets/icons/layer-icon.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { colors } from "../../gatsby-plugin-theme-ui"
+import { colors } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const LayerIcon = ({ name, fillColor = colors.grey[50] }) => {
   const icons = {

diff --git a/www/src/components/api-reference/doc-block.js b/www/src/components/api-reference/doc-block.js
@@ -34,7 +34,7 @@ const Deprecated = ({ definition }) => {
           "p:before": {
             color: `#e8bd36`,
             content: `(deprecated) `,
-            fontFamily: `header`,
+            fontFamily: `heading`,
           },
         }}
       >

diff --git a/www/src/components/api-reference/utils.js b/www/src/components/api-reference/utils.js
@@ -4,7 +4,7 @@ import styled from "@emotion/styled"
 
 export const LinkBox = styled(`a`)`
   border-bottom: none !important;
-  border-radius: ${p => p.theme.radii[1]}px;
+  border-radius: ${p => p.theme.radii[1]};
   font-size: ${p => p.theme.fontSizes[0]} !important;
   color: ${p => p.theme.colors.text} !important;
   line-height: 22px;

diff --git a/www/src/components/blog-post-preview-item.js b/www/src/components/blog-post-preview-item.js
@@ -43,7 +43,7 @@ const BlogPostPreviewItem = ({ post, className }) => (
       <div
         sx={{
           display: `inline-block`,
-          fontFamily: `header`,
+          fontFamily: `heading`,
           color: `card.color`,
         }}
       >

diff --git a/www/src/components/card.js b/www/src/components/card.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 
-import { mediaQueries } from "../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const Card = ({ children }) => (
   <div

diff --git a/www/src/components/chart.js b/www/src/components/chart.js
@@ -1,6 +1,6 @@
 import React from "react"
 import loadable from "@loadable/component"
-import { radii } from "../gatsby-plugin-theme-ui"
+import { radii } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const dateToUTC = date => {
   const d = String(date)

diff --git a/www/src/components/container.js b/www/src/components/container.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 
-import { mediaQueries } from "../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const Container = ({ children, withSidebar = true, overrideCSS }) => (
   <div

diff --git a/www/src/components/copy.js b/www/src/components/copy.js
@@ -26,11 +26,10 @@ function Copy({ className, content, duration, fileName, trim = false }) {
         color: `code.copyButton`,
         cursor: `pointer`,
         fontSize: 2,
-        fontFamily: `header`,
+        fontFamily: `heading`,
         lineHeight: `solid`,
         p: 2,
-        transition: t =>
-          `${t.transition.speed.default} ${t.transition.curve.default}`,
+        transition: `default`,
         "&[disabled]": {
           cursor: `not-allowed`,
         },

diff --git a/www/src/components/dark-mode-toggle.js b/www/src/components/dark-mode-toggle.js
@@ -2,7 +2,7 @@ import React from "react"
 import styled from "@emotion/styled"
 import { useColorMode } from "theme-ui"
 
-import { mediaQueries } from "../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 // kudos to our friends at narative.co
 // https://github.com/narative/gatsby-theme-novela/blob/fb38329e17595df6e846be1d33517ff6125cde4e/src/components/Navigation/Navigation.Header.tsx

diff --git a/www/src/components/diagram.js b/www/src/components/diagram.js
@@ -144,7 +144,7 @@ const ItemDescription = ({ children, color }) => (
     sx={{
       color: color ? color : `textMuted`,
       display: `block`,
-      fontFamily: `system`,
+      fontFamily: `body`,
       fontSize: 1,
       lineHeight: `dense`,
     }}
@@ -218,7 +218,7 @@ const Diagram = () => (
         className="Diagram"
         sx={{
           flex: `1 1 100%`,
-          fontFamily: `header`,
+          fontFamily: `heading`,
           p: 6,
           textAlign: `center`,
         }}

diff --git a/www/src/components/docs-table-of-contents.js b/www/src/components/docs-table-of-contents.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 import { Link } from "gatsby"
-import { colors, mediaQueries } from "../gatsby-plugin-theme-ui"
+import { colors, mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 function isUnderDepthLimit(depth, maxDepth) {
   if (maxDepth === null) {

diff --git a/www/src/components/ecosystem/ecosystem-board.js b/www/src/components/ecosystem/ecosystem-board.js
@@ -4,7 +4,7 @@ import { Component } from "react"
 import PropTypes from "prop-types"
 
 import EcosystemSection from "./ecosystem-section"
-import { mediaQueries } from "../../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import {
   setupScrollersObserver,
   unobserveScrollers,

diff --git a/www/src/components/ecosystem/ecosystem-featured-item.js b/www/src/components/ecosystem/ecosystem-featured-item.js
@@ -7,7 +7,7 @@ import StarIcon from "react-icons/lib/md/star"
 import ArrowDownwardIcon from "react-icons/lib/md/arrow-downward"
 
 import { HorizontalScrollerItem } from "../shared/horizontal-scroller"
-import { mediaQueries } from "../../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const MAX_DESCRIPTION_LENGTH = 100
 
@@ -25,7 +25,7 @@ const EcosystemFeaturedItemRoot = styled(HorizontalScrollerItem)`
 
 export const BlockLink = styled(Link)`
   background: ${p => p.theme.colors.card.background};
-  border-radius: ${p => p.theme.radii[2]}px;
+  border-radius: ${p => p.theme.radii[2]};
   box-shadow: ${p => p.theme.shadows.raised};
   display: flex;
   flex-direction: column;

diff --git a/www/src/components/ecosystem/ecosystem-featured-items.js b/www/src/components/ecosystem/ecosystem-featured-items.js
@@ -6,7 +6,7 @@ import {
   HorizontalScroller,
   HorizontalScrollerContent,
 } from "../shared/horizontal-scroller"
-import { mediaQueries } from "../../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer"
 
 const EcosystemFeaturedItemsRoot = styled(HorizontalScroller)`

diff --git a/www/src/components/ecosystem/ecosystem-section.js b/www/src/components/ecosystem/ecosystem-section.js
@@ -5,7 +5,7 @@ import styled from "@emotion/styled"
 import Button from "../button"
 import EcosystemFeaturedItems from "./ecosystem-featured-items"
 import EcosystemFeaturedItem from "./ecosystem-featured-item"
-import { mediaQueries } from "../../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const EcosystemSectionRoot = styled(`section`)`
   background: ${p => p.theme.colors.card.background};
@@ -14,7 +14,7 @@ const EcosystemSectionRoot = styled(`section`)`
 
   ${mediaQueries.md} {
     box-shadow: ${p => p.theme.shadows.raised};
-    border-radius: ${p => p.theme.radii[2]}px;
+    border-radius: ${p => p.theme.radii[2]};
     display: flex;
     flex-basis: calc(50% - ${p => p.theme.space[5]});
     flex-direction: column;

diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js
@@ -5,15 +5,15 @@ import styled from "@emotion/styled"
 
 import SendIcon from "react-icons/lib/md/send"
 
-import { mediaQueries } from "../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import { themedInput, formInputFocus, buttonStyles } from "../utils/styles"
 import { rhythm } from "../utils/typography"
 
 const Container = styled(`div`)`
   background: ${p => p.theme.colors.newsletter.background};
   box-shadow: ${p => p.theme.shadows.floating},
     inset 0 0 0 1px ${p => p.theme.colors.newsletter.border};
-  border-radius: ${p => p.theme.radii[2]}px;
+  border-radius: ${p => p.theme.radii[2]};
   margin-top: ${p => p.theme.space[8]};
   padding: calc(${p => p.theme.space[6]} * 1.2);
   padding-bottom: calc(
@@ -22,7 +22,7 @@ const Container = styled(`div`)`
   position: relative;
 
   :after {
-    border-radius: 0 0 ${p => p.theme.radii[2]}px ${p => p.theme.radii[2]}px;
+    border-radius: 0 0 ${p => p.theme.radii[2]} ${p => p.theme.radii[2]};
     background: ${p => p.theme.colors.newsletter.background}
       repeating-linear-gradient(
         135deg,

diff --git a/www/src/components/features/compare-button.js b/www/src/components/features/compare-button.js
@@ -6,7 +6,7 @@ import logoDictionary from "./logo-dictionary"
 const compareButtonStyles = {
   display: `flex`,
   flexDirection: `column`,
-  fontFamily: `header`,
+  fontFamily: `heading`,
   alignItems: `center`,
   justifyContent: `center`,
   borderRadius: 1,

diff --git a/www/src/components/features/evaluation-table-section-header-top.js b/www/src/components/features/evaluation-table-section-header-top.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 
-import { mediaQueries } from "../../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const superHeader = ({ columnHeaders }) => (
   <tr>

diff --git a/www/src/components/features/evaluation-table.js b/www/src/components/features/evaluation-table.js
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 import { Component } from "react"
-import { mediaQueries } from "../../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import { renderCell } from "./evaluation-cell"
 import SectionTitle from "./evaluation-table-section-title"
 import SectionHeaderTop from "./evaluation-table-section-header-top"

diff --git a/www/src/components/feedback-widget/buttons.js b/www/src/components/feedback-widget/buttons.js
@@ -7,7 +7,7 @@ import {
   fontSizes,
   radii,
   space,
-} from "../../gatsby-plugin-theme-ui"
+} from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import { formInputFocus, focusStyle } from "../../utils/styles"
 
 const rotation = keyframes`
@@ -24,7 +24,7 @@ const buttonStyles = css`
   align-items: center;
   background: ${colors.gatsby};
   border: none;
-  border-radius: ${radii[2]}px;
+  border-radius: ${radii[2]};
   color: ${colors.white};
   cursor: pointer;
   display: flex;
@@ -80,7 +80,7 @@ export const CloseButton = styled(`button`)`
 
 export const ToggleButtonLabel = styled(`span`)`
   align-items: center;
-  border-radius: ${p => p.theme.radii[2]}px;
+  border-radius: ${p => p.theme.radii[2]};
   display: flex;
   height: 2.5rem;
   padding: 0 ${p => p.theme.space[9]} 0 ${p => p.theme.space[3]};
@@ -144,7 +144,7 @@ export const ToggleButton = styled(`button`)`
   align-items: center;
   background: none;
   border: none;
-  border-radius: ${p => p.theme.radii[2]}px;
+  border-radius: ${p => p.theme.radii[2]};
   cursor: pointer;
   display: flex;
   padding: 0;

diff --git a/www/src/components/feedback-widget/styled-elements.js b/www/src/components/feedback-widget/styled-elements.js
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled"
 
 import { visuallyHidden } from "../../utils/styles"
-import { mediaQueries } from "../../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 export const WidgetContainer = styled(`div`)`
   margin: ${p => p.theme.space[7]} auto;

diff --git a/www/src/components/feedback-widget/widget-wrapper.js b/www/src/components/feedback-widget/widget-wrapper.js
@@ -2,7 +2,7 @@
 import { jsx } from "@emotion/core"
 import styled from "@emotion/styled"
 import { keyframes } from "@emotion/core"
-import { mediaQueries } from "../../gatsby-plugin-theme-ui"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const boldEntry = keyframes`
   100% {
@@ -67,7 +67,7 @@ const WrapperDiv = styled(`div`)`
   ${mediaQueries.lg} {
     box-shadow: ${p => p.theme.shadows.overlay};
     border: 0;
-    border-radius: ${p => p.theme.radii[2]}px;
+    border-radius: ${p => p.theme.radii[2]};
     height: 100%;
     padding: ${p => p.theme.space[7]} ${p => p.theme.space[6]};
     transform: scale(0);

diff --git a/www/src/components/futura-paragraph.js b/www/src/components/futura-paragraph.js
@@ -4,7 +4,7 @@ import { jsx } from "theme-ui"
 const FuturaParagraph = ({ children }) => (
   <p
     sx={{
-      fontFamily: `header`,
+      fontFamily: `heading`,
       fontSize: 3,
       mb: 0,
     }}

diff --git a/www/src/components/guidelines/badge.js b/www/src/components/guidelines/badge.js
@@ -28,7 +28,7 @@ BadgeBase.defaultProps = {
   borderColor: `yellow.10`,
   borderRadius: 5,
   color: `yellow.90`,
-  fontFamily: `system`,
+  fontFamily: `body`,
   fontSize: 0,
   fontWeight: `body`,
   letterSpacing: `tracked`,

diff --git a/www/src/components/guidelines/box-with-border.js b/www/src/components/guidelines/box-with-border.js
@@ -8,7 +8,7 @@ const BoxWithBorder = styled(Box)(
     props.withBorder && {
       ":after": {
         border: `1px solid ${themeGet(`colors.blackFade.10`)(props)}`,
-        borderRadius: `${themeGet(`radii.1`)(props)}px`,
+        borderRadius: `${themeGet(`radii.1`)(props)}`,
         bottom: 0,
         content: `" "`,
         left: 0,

diff --git a/www/src/components/guidelines/color/modal.js b/www/src/components/guidelines/color/modal.js
@@ -9,7 +9,7 @@ import {
   a11y,
 } from "../../../utils/guidelines/color"
 import { focusStyle } from "../../../utils/styles"
-import { colors as themeColors } from "../../../gatsby-plugin-theme-ui"
+import { colors as themeColors } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const Column = styled(Flex)()
 

diff --git a/www/src/components/guidelines/logo/index.js b/www/src/components/guidelines/logo/index.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { colors } from "../../../gatsby-plugin-theme-ui"
+import { colors } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const GatsbyLogo = ({ inverted, invertedWordmark, color, monogramColor }) => {
   let monogram = monogramColor || colors.purple[`60`]

diff --git a/www/src/components/guidelines/logo/monogram.js b/www/src/components/guidelines/logo/monogram.js
@@ -1,5 +1,5 @@
 import React from "react"
-import { colors } from "../../../gatsby-plugin-theme-ui"
+import { colors } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
 const GatsbyMonogram = ({ fill }) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" focusable="false">

diff --git a/www/src/components/guidelines/nav-item.js b/www/src/components/guidelines/nav-item.js
@@ -23,7 +23,7 @@ const NavLink = styled(ActiveLink, { shouldForwardProp })(
 
 NavLink.defaultProps = {
   color: `navigation.linkDefault`,
-  fontFamily: `header`,
+  fontFamily: `heading`,
   fontSize: 3,
   fontWeight: `body`,
   mr: 4,

diff --git a/www/src/components/guidelines/system/button.js b/www/src/components/guidelines/system/button.js
@@ -56,7 +56,7 @@ Button.defaultProps = {
   border: 0,
   borderRadius: 2,
   color: `white`,
-  fontFamily: `header`,
+  fontFamily: `heading`,
   fontSize: { xxs: 4, md: 5 },
   fontWeight: `bold`,
   px: 4,