chore(www): Import from gatsby-plugin-theme-ui… (#19134)

instead of `gatsby-design-tokens`; we're noew only importing from `gatsby-design-tokens` once, in `src/gatsby-plugin-theme-ui`. Refactor a couple (related) things along the way.

Ref. #19115

www/src/assets/icons/layer-icon.js

@@ -1,7 +1,7 @@
 import React from "react"
-import { colors } from "gatsby-design-tokens"
+import { colors } from "../../gatsby-plugin-theme-ui"
 
-const LayerIcon = ({ name, fillColor = colors.grey[`50`] }) => {
+const LayerIcon = ({ name, fillColor = colors.grey[50] }) => {
   const icons = {
     Content: (
       <svg

www/src/components/features/compare-button.js

@@ -1,7 +1,5 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import hex2rgba from "hex2rgba"
-import { colors } from "gatsby-design-tokens"
 
 import logoDictionary from "./logo-dictionary"
 
@@ -21,7 +19,8 @@ const compareButtonStyles = {
   },
   ":focus": {
     outline: 0,
-    boxShadow: t => `0 0 0 ${t.space[1]} ${hex2rgba(colors.grey[20], 0.25)}`,
+    boxShadow: t =>
+      `0 0 0 ${t.space[1]} ${t.colors.themedInput.focusBoxShadow}`,
   },
 }
 

www/src/components/features/evaluation-cell.js

@@ -1,11 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import { colors } from "gatsby-design-tokens"
 import MdInfoOutline from "react-icons/lib/md/info-outline"
 
-const bgDefault = colors.orange[20]
-const bgFeatureAvailability = colors.orange[50]
-
 const renderText = txt => {
   const words = txt.split(` `)
   return [
@@ -62,10 +58,16 @@ const renderCell = (text, column) => {
 const getBackground = num => {
   switch (num) {
     case `2`: {
-      return `linear-gradient(90deg, transparent 50%, ${bgDefault} 50%)`
+      return t =>
+        `linear-gradient(90deg, transparent 50%, ${t.colors.orange[20]} 50%)`
     }
     case `1`: {
-      return `linear-gradient(180deg, transparent 50%, ${bgDefault} 50%), linear-gradient(90deg, transparent 50%, ${bgDefault} 50%)`
+      return t =>
+        `linear-gradient(180deg, transparent 50%, ${
+          t.colors.orange[20]
+        } 50%), linear-gradient(90deg, transparent 50%, ${
+          t.colors.orange[20]
+        } 50%)`
     }
     case `3`:
     case `0`:
@@ -89,9 +91,7 @@ const EvaluationCell = ({ num, style }) => (
     sx={{
       ...basicStyling,
       backgroundColor:
-        [`N/A`, `0`, ``].indexOf(num) !== -1
-          ? bgDefault
-          : bgFeatureAvailability,
+        [`N/A`, `0`, ``].indexOf(num) !== -1 ? `orange.20` : `orange.50`,
       backgroundImage: getBackground(num),
       ...(style || {}),
     }}

www/src/components/features/evaluation-table-section-header-bottom.js

@@ -1,31 +1,27 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 import styled from "@emotion/styled"
+
 import logo from "../../assets/monogram.svg"
 import logoDictionary from "./logo-dictionary"
-import { space, mediaQueries } from "gatsby-design-tokens"
-import { rhythm } from "../../utils/typography"
 
 const Td = styled.td`
-  display: table-cell;
   background: ${t => t.theme.colors.background};
+  border-color: ${t => t.theme.colors.ui.light};
+  display: table-cell;
+  font-family: ${t => t.theme.fonts.heading};
   font-weight: 600;
   line-height: ${t => t.theme.lineHeights.dense};
+  padding: ${t => t.theme.space[3]};
   text-align: left;
   vertical-align: middle;
-  font-family: ${t => t.theme.fonts.heading};
-  border-color: ${t => t.theme.colors.ui.light};
-  padding: ${t => t.theme.space[3]};
 `
 
 const subHeaderTitleStyles = {
-  height: space[6],
-  marginBottom: 0,
   display: `block`,
+  height: t => [t.space[6], t.space[7]],
   margin: `auto`,
-  [mediaQueries.xs]: {
-    height: rhythm(5 / 4),
-  },
+  marginBottom: 0,
 }
 
 const renderSubHeader = props => (
@@ -37,13 +33,13 @@ const renderSubHeader = props => (
   >
     <Td>{props.category}</Td>
     <Td>
-      <img src={logo} css={subHeaderTitleStyles} alt="Gatsby logo" />
+      <img src={logo} sx={subHeaderTitleStyles} alt="Gatsby logo" />
     </Td>
     {props.options.map((option, i) => (
       <Td key={i}>
         <img
           src={logoDictionary[option.key]}
-          css={subHeaderTitleStyles}
+          sx={subHeaderTitleStyles}
           alt={`${option.display} Logo`}
         />
       </Td>

www/src/components/features/legend-table.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import { mediaQueries } from "gatsby-design-tokens"
 
 import EvaluationCell from "./evaluation-cell"
 
@@ -30,10 +29,7 @@ const LegendTable = () => {
       textAlign: `center`,
       padding: 3,
       borderLeft: `1px solid ${t.colors.ui.border}`,
-      borderBottom: `1px solid ${t.colors.ui.border}`,
-      [mediaQueries.sm]: {
-        borderBottom: 0,
-      },
+      borderBottom: [`1px solid ${t.colors.ui.border}`, null, 0],
     }
   }
 
@@ -80,24 +76,18 @@ const LegendTable = () => {
           border: t => `1px solid ${t.colors.ui.border}`,
           borderLeft: 0,
           fontFamily: `heading`,
-          display: `none`,
-          [mediaQueries.sm]: {
-            display: `table`,
-          },
+          display: [`none`, null, `table`],
         }}
       >
         <div css={{ display: `table-row` }}>{balls}</div>
         <div css={{ display: `table-row` }}>{legendText}</div>
       </div>
       <div
         sx={{
-          display: `table`,
+          display: [`table`, null, `none`],
           border: t => `1px solid ${t.colors.ui.border}`,
           borderLeft: 0,
           fontFamily: `heading`,
-          [mediaQueries.sm]: {
-            display: `none`,
-          },
         }}
       >
         {[0, 1, 2, 3, 4].map(i => (

www/src/components/homepage/homepage-blog-posts.js

@@ -10,8 +10,7 @@ import {
   HorizontalScrollerContent,
   HorizontalScrollerItem,
 } from "../shared/horizontal-scroller"
-import { mediaQueries } from "../../gatsby-plugin-theme-ui"
-import { breakpoints } from "gatsby-design-tokens"
+import { breakpoints, mediaQueries } from "../../gatsby-plugin-theme-ui"
 import { SCROLLER_CLASSNAME } from "../../utils/scrollers-observer"
 
 const HomepageBlogPostsRootMobile = styled(HorizontalScroller)`
@@ -121,7 +120,7 @@ class HomepageBlogPosts extends Component {
   }
 
   componentDidMount = () => {
-    this.desktopMediaQuery = window.matchMedia(`(min-width: ${breakpoints.lg}`)
+    this.desktopMediaQuery = window.matchMedia(`(min-width: ${breakpoints[3]}`)
     this.desktopMediaQuery.addListener(this.updateViewPortState)
     this.setState({ desktopViewport: this.desktopMediaQuery.matches })
   }

www/src/components/homepage/homepage-logo-banner.js

@@ -3,7 +3,7 @@ import { jsx } from "theme-ui"
 import { useStaticQuery, graphql } from "gatsby"
 import Img from "gatsby-image"
 import styled from "@emotion/styled"
-import { mediaQueries } from "gatsby-design-tokens"
+import { mediaQueries } from "../../gatsby-plugin-theme-ui"
 
 import { Name } from "./homepage-section"
 

www/src/components/layer-model/layer-content-sections.js

@@ -4,12 +4,7 @@ import React from "react"
 import { Link } from "gatsby"
 import MdLoop from "react-icons/lib/md/loop"
 
-import {
-  fontSizes,
-  radii,
-  transition,
-  mediaQueries,
-} from "gatsby-design-tokens"
+import { mediaQueries } from "../../gatsby-plugin-theme-ui"
 
 // Components for building sections used in the model
 const LayerContentWrapper = ({ index, children }) => (
@@ -39,17 +34,14 @@ const LayerContentWrapper = ({ index, children }) => (
 const ExampleWrapper = ({ children }) => (
   <div
     sx={{
-      borderRadius: 3,
+      borderRadius: 2,
       overflow: `auto`,
     }}
   >
     {children}
   </div>
 )
 
-// prettier-ignore
-const transitionProperty = `${transition.speed.default} ${transition.curve.default}`
-
 const CodeWrapper = ({
   title,
   language,
@@ -66,12 +58,12 @@ const CodeWrapper = ({
           display: `flex`,
           alignItems: `center`,
           justifyContent: `space-between`,
-          borderTopRightRadius: radii[3],
-          borderTopLeftRadius: radii[3],
+          borderTopRightRadius: 2,
+          borderTopLeftRadius: 2,
         }}
         className="gatsby-code-title"
       >
-        <div css={{ fontSize: fontSizes[0] }}>{title}</div>
+        <div sx={{ fontSize: 0 }}>{title}</div>
         {rotateButton && (
           <button
             sx={{
@@ -82,7 +74,8 @@ const CodeWrapper = ({
               color: `grey.60`,
               cursor: `pointer`,
               p: 2,
-              transition: transitionProperty,
+              transition: t =>
+                `${t.transition.speed.default} ${t.transition.curve.default}`,
               borderRadius: 2,
               whiteSpace: `nowrap`,
               ":focus, :hover, :active": {

www/src/components/layer-model/layer-model.js

@@ -3,7 +3,7 @@ import { jsx } from "theme-ui"
 import React, { useState, useEffect, useRef } from "react"
 import hex2rgba from "hex2rgba"
 
-import { colors } from "gatsby-design-tokens"
+import { colors } from "../../gatsby-plugin-theme-ui"
 import LayerIcon from "../../assets/icons/layer-icon"
 import {
   ContentLayerContent,
@@ -27,21 +27,21 @@ const Layer = ({ buttonRef, layer, onClick, selected, index }) => {
       aria-selected={selected}
       onClick={onClick}
       sx={{
-        cursor: `pointer`,
+        bg: `ui.background`,
+        border: selected
+          ? t => `2px ${t.colors[baseColor][60]} solid`
+          : `2px transparent solid`,
         borderRadius: 3,
-        p: 2,
         color: `textMuted`,
+        cursor: `pointer`,
         fontWeight: selected ? `bold` : `body`,
-        backgroundColor: `ui.background`,
-        border: selected
-          ? `2px ${colors[baseColor][60]} solid`
-          : `2px transparent solid`,
+        p: 2,
         ":focus": {
+          boxShadow: t => `0 0 0 3px ${hex2rgba(colors[baseColor][30], 0.5)}`,
           outline: 0,
-          boxShadow: `0 0 0 3px ${hex2rgba(colors[baseColor][30], 0.5)}`,
         },
         ":hover": {
-          backgroundColor: colors[baseColor][5],
+          borderColor: t => t.colors[baseColor][60],
         },
       }}
     >

www/src/utils/sidebar/indention.js

@@ -1,8 +1,10 @@
-import { space } from "gatsby-design-tokens"
+import { space } from "../../gatsby-plugin-theme-ui"
 
+// :)
+const remToPx = rem => parseFloat(rem) * 16
 const pxToRem = pixels => `${pixels / 16}rem`
 
 const indention = level =>
-  level === 0 || level === 1 ? pxToRem(space[6]) : pxToRem(level * space[6])
+  level === 0 || level === 1 ? space[6] : pxToRem(level * remToPx(space[6]))
 
 export default indention

www/src/utils/typography.js

@@ -1,13 +1,11 @@
 import Typography from "typography"
 import CodePlugin from "typography-plugin-code"
-import { colors, lineHeights } from "../gatsby-plugin-theme-ui"
-// typography.js expects an array,
-// so grab font stacks directly from tokens
-import { fonts } from "gatsby-design-tokens"
+import { colors, lineHeights, fonts } from "../gatsby-plugin-theme-ui"
 
 const _options = {
-  bodyFontFamily: fonts.system,
-  headerFontFamily: fonts.header,
+  // typography.js expects an array, theme-ui a CSS prop value
+  bodyFontFamily: fonts.system.split(`, `),
+  headerFontFamily: fonts.header.split(`, `),
   baseLineHeight: lineHeights.body,
   headerLineHeight: lineHeights.heading,
   headerColor: colors.heading,

www/src/views/starter/installation.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 import Copy from "../../components/copy"
-import { mediaQueries } from "gatsby-design-tokens"
+import { mediaQueries } from "../../gatsby-plugin-theme-ui"
 
 const StarterInstallation = ({ repoName, repoUrl }) => {
   const content = `gatsby new ${repoName || `my-gatsby-project`} ${repoUrl}`