Convert primer colors to use new color names

gatsby-browser.js

@@ -1,2 +1,2 @@
-export {default as wrapPageElement} from './src/page-element'
-export {default as wrapRootElement} from './src/root-element'
+export {default as wrapPageElement} from './src/page'
+export {default as wrapRootElement} from './src/root'

gatsby-config.js

@@ -1,7 +1,7 @@
 const path = require('path')
 const fs = require('fs')
 
-const {NODE_ENV, GATSBY_PARTIAL_CONTENT, GATSBY_CONTENT_DIR = 'content'} = process.env
+const {NODE_ENV, GATSBY_PARTIAL_CONTENT, GATSBY_CONTENT_IGNORE, GATSBY_CONTENT_DIR = 'content'} = process.env
 const DEV = NODE_ENV === 'development'
 const CONTENT_DIR = path.resolve(GATSBY_CONTENT_DIR)
 
@@ -15,7 +15,7 @@ const walkDirs = dir => {
 }
 
 const getContentOptions = () => {
-  if (!DEV || !GATSBY_PARTIAL_CONTENT) {
+  if (!DEV || (!GATSBY_PARTIAL_CONTENT && !GATSBY_CONTENT_IGNORE)) {
     return
   }
 
@@ -47,7 +47,6 @@ module.exports = {
     shortName: 'npm',
     description: 'Documentation for the npm registry, website, and command-line interface',
     lang: 'en',
-    // eslint-disable-next-line max-len
     imageUrl: 'https://user-images.githubusercontent.com/29712634/81721690-e2fb5d80-9445-11ea-8602-4b2294c964f3.png',
   },
   plugins: [

gatsby-ssr.js

@@ -1,2 +1,2 @@
-export {default as wrapPageElement} from './src/page-element'
-export {default as wrapRootElement} from './src/root-element'
+export {default as wrapPageElement} from './src/page'
+export {default as wrapRootElement} from './src/root'

src/components/clipboard-copy.js

@@ -1,16 +1,9 @@
 import React from 'react'
-import {Button, Octicon, themeGet} from '@primer/react'
+import {Button, Octicon} from '@primer/react'
 import {CheckIcon, CopyIcon} from '@primer/octicons-react'
-import styled from 'styled-components'
 import copy from 'copy-to-clipboard'
 import {announce} from '../util/aria-live'
 
-const CopyToClipboard = styled(Button)`
-  &:focus {
-    box-shadow: 0 0 0 3px ${themeGet('colors.blue.5')};
-  }
-`
-
 function ClipboardCopy({value}) {
   const [copied, setCopied] = React.useState(false)
 
@@ -25,16 +18,17 @@ function ClipboardCopy({value}) {
   }, [copied])
 
   return (
-    <CopyToClipboard
+    <Button
       aria-label="Copy to clipboard"
       onClick={() => {
         copy(value)
         setCopied(true)
         announce(`Copied to clipboard`)
       }}
+      sx={{px: 2}}
     >
-      <Octicon icon={copied ? CheckIcon : CopyIcon} sx={{color: copied ? 'green.5' : 'gray.7'}} />
-    </CopyToClipboard>
+      <Octicon icon={copied ? CheckIcon : CopyIcon} sx={{color: copied ? 'success.fg' : 'fg.muted'}} />
+    </Button>
   )
 }
 

src/components/contributors.js

@@ -37,7 +37,7 @@ function Contributors({logins, latestCommit}) {
         ))}
       </Box>
       {latestCommit ? (
-        <Text sx={{fontSize: 1, color: 'gray.7', mt: 1}}>
+        <Text sx={{fontSize: 1, color: 'fg.muted', mt: 1}}>
           Last edited by <Link href={`https://github.com/${latestCommit.login}`}>{latestCommit.login}</Link> on{' '}
           <Link href={latestCommit.url}>{format(new Date(latestCommit.date))}</Link>
         </Text>

src/components/drawer.js

@@ -43,8 +43,8 @@ const Drawer = ({isOpen, onDismiss, children}) => (
               bottom: 0,
               bg: 'gray.0',
               width: 300,
-              zIndex: 1,
             }}
+            style={{zIndex: 1}}
             key="drawer"
             as={motion.div}
             initial={{x: '100%'}}

src/components/header.js

@@ -37,13 +37,16 @@ function Header() {
     <Box sx={{top: 0, position: 'sticky', zIndex: 1}} role="banner">
       <NpmHeaderBar />
       <Box
+        as="header"
         sx={{
           display: 'flex',
           height: HEADER_HEIGHT,
           px: [3, null, null, 4],
           alignItems: 'center',
           justifyContent: 'space-between',
-          bg: '#333333',
+          bg: 'canvas.default',
+          border: '1px solid',
+          borderColor: 'border.muted',
         }}
       >
         <Box sx={{display: 'flex', alignItems: 'center'}}>
@@ -52,8 +55,8 @@ function Header() {
             to="/"
             sx={{
               mr: 4,
-              color: '#dddddd',
-              fontWeight: '600',
+              fontWeight: 'bold',
+              color: 'fg.default',
               display: 'flex',
               alignItems: 'center',
             }}
@@ -69,7 +72,7 @@ function Header() {
           <Box sx={{display: ['none', null, null, 'block']}}>
             <Box sx={{display: 'flex', alignItems: 'center', color: 'gray.2'}}>
               {headerNavItems.map((item, index) => (
-                <Link key={index} href={item.url} sx={{display: 'block', color: 'inherit', ml: 4}}>
+                <Link key={index} href={item.url} sx={{display: 'block', ml: 4}}>
                   {item.title}
                 </Link>
               ))}

src/components/hero.js

@@ -10,10 +10,10 @@ function Hero() {
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Box sx={{bg: 'canvas.default', py: 6}}>
         <Container>
-          <Heading as="h1" sx={{color: 'fg.onEmphasis', fontSize: 7, m: 0}}>
+          <Heading as="h1" sx={{color: 'accent.fg', fontSize: 7, m: 0}}>
             {title}
           </Heading>
-          <Text as="p" sx={{m: 0, color: 'fg.onEmphasis', fontSize: 4}}>
+          <Text as="p" sx={{m: 0, color: 'fg.default', fontSize: 4}}>
             {description}
           </Text>
         </Container>

src/components/mobile-search.js

@@ -3,7 +3,7 @@ import {Button, Box} from '@primer/react'
 import {XIcon, SearchIcon} from '@primer/octicons-react'
 import {AnimatePresence, motion} from 'framer-motion'
 import {FocusOn} from 'react-focus-on'
-import DarkTextInput from './dark-text-input'
+import TextInput from './text-input'
 import SearchResults from './search-results'
 import useSiteMetadata from '../hooks/use-site-metadata'
 
@@ -21,7 +21,7 @@ function MobileSearch({onDismiss, ...props}) {
       <Box
         sx={{
           position: 'fixed',
-          top: '10px',
+          top: '10px', // TODO: use constant
           left: 0,
           right: 0,
           bottom: 0,
@@ -35,7 +35,7 @@ function MobileSearch({onDismiss, ...props}) {
             left: 0,
             right: 0,
             bottom: 0,
-            bg: 'rgba(0,0,0,0.5)',
+            bg: 'primer.canvas.backdrop',
             zIndex: -1,
           }}
           as={motion.div}
@@ -45,19 +45,20 @@ function MobileSearch({onDismiss, ...props}) {
           onClick={handleDismiss}
         />
         <Box sx={{display: 'flex', flexDirection: 'column', height: isOpen ? '100%' : 'auto'}}>
-          <Box sx={{display: 'flex', bg: 'gray.9', color: 'white', p: 3, flex: '0 0 auto'}}>
+          <Box sx={{display: 'flex', bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto'}}>
             <motion.div
               initial={{scaleX: 0.1}}
               animate={{scaleX: 1}}
               exit={{scaleX: 0.1, transition: {duration: 0.1}}}
               transition={{type: 'tween', duration: 0.2}}
               style={{width: '100%', originX: '100%'}}
             >
-              <DarkTextInput
+              <TextInput
+                leadingVisual={SearchIcon}
                 {...getInputProps({
                   placeholder: `Search ${siteMetadata.title}`,
                   'aria-label': `Search ${siteMetadata.title}`,
-                  width: '100%',
+                  sx: {width: '100%'},
                 })}
               />
             </motion.div>
@@ -66,16 +67,19 @@ function MobileSearch({onDismiss, ...props}) {
             </Button>
           </Box>
           <Box
-            {...getMenuProps()}
-            sx={{
-              display: 'flex',
-              bg: 'white',
-              py: isOpen ? 1 : 0,
-              flexDirection: 'column',
-              flex: '1 1 auto',
-              overflow: 'auto',
-              WebkitOverflowScrolling: 'touch',
-            }}
+            {...getMenuProps({
+              sx: {
+                display: 'flex',
+                bg: 'canvas.default',
+                py: isOpen ? 1 : 0,
+                flexDirection: 'column',
+                flex: '1 1 auto',
+              },
+              style: {
+                overflow: 'auto',
+                WebkitOverflowScrolling: 'touch',
+              },
+            })}
           >
             {isOpen ? <SearchResults {...{results, getItemProps, highlightedIndex}} /> : null}
           </Box>

src/components/nav-drawer.js

@@ -38,25 +38,31 @@ function NavDrawer() {
             display: 'flex',
             flexDirection: 'column',
             height: '100%',
-            bg: 'gray.0',
+            bg: 'canvas.default',
             overflow: 'auto',
             WebkitOverflowScrolling: 'touch',
           }}
         >
-          <Box sx={{display: 'flex', flexDirection: 'column', flex: '1 0 auto', color: 'gray.7', bg: 'gray.0'}}>
+          <Box
+            sx={{display: 'flex', flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default'}}
+          >
             <Box
-              sx={{borderStyle: 'solid', borderWidth: 0, borderRadius: 0, borderBottomWidth: 1, borderColor: 'gray.7'}}
+              sx={{
+                borderWidth: 0,
+                borderRadius: 0,
+                borderBottomWidth: 1,
+                borderColor: 'border.muted',
+                borderStyle: 'solid',
+              }}
             >
               <Box
                 sx={{
-                  display: 'flex',
                   py: 3,
                   pl: 4,
                   pr: 3,
                   alignItems: 'center',
                   justifyContent: 'space-between',
-                  color: 'gray.1',
-                  bg: 'gray.9',
+                  display: 'flex',
                 }}
               >
                 <Link as={GatsbyLink} to="/" sx={{display: 'inline-block', color: 'inherit'}}>
@@ -71,17 +77,20 @@ function NavDrawer() {
               <NavItems />
             </Box>
           </Box>
-          <Box sx={{display: 'flex', flexDirection: 'column', flex: '1 0 auto', color: 'gray.1', bg: 'gray.9'}}>
+          <Box
+            sx={{flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default', display: 'flex'}}
+          >
             {headerNavItems.map((item, index) => (
               <Box
                 key={item.title}
                 sx={{
-                  borderStyle: 'solid',
                   borderWidth: 0,
                   borderRadius: 0,
                   borderTopWidth: index !== 0 ? 1 : 0,
-                  borderColor: 'gray.7',
-                  p: 4,
+                  borderColor: 'border.muted',
+                  px: 4,
+                  py: 3,
+                  borderStyle: 'solid',
                 }}
               >
                 <Link key={index} href={item.url} sx={{color: 'inherit', display: 'block'}}>

src/components/page-footer.js

@@ -8,13 +8,13 @@ function PageFooter({editUrl, contributors = {}}) {
   return editUrl || logins.length ? (
     <Box
       sx={{
-        borderStyle: 'solid',
-        borderColor: 'border.default',
-        borderRadius: 2,
         borderWidth: 0,
         borderTopWidth: 1,
+        borderRadius: 0,
         mt: 8,
         py: 5,
+        borderStyle: 'solid',
+        borderColor: 'border.default',
       }}
     >
       <Box sx={{display: 'grid', gap: 4}}>

src/components/search-results.js

@@ -29,17 +29,21 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
   return results.map((item, index) => (
     <Box
       key={item.path}
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        flex: '0 0 auto',
-        px: 3,
-        py: 2,
-        color: highlightedIndex === index ? 'white' : 'gray.8',
-        bg: highlightedIndex === index ? 'blue.5' : 'transparent',
-        cursor: 'pointer',
-      }}
-      {...getItemProps({item})}
+      {...getItemProps({
+        item,
+        style: {cursor: 'pointer'},
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          flex: '0 0 auto',
+          px: 3,
+          py: 2,
+          color: 'fg.default',
+          fontSize: 1,
+          bg: highlightedIndex === index ? 'neutral.muted' : 'transparent',
+          cursor: 'pointer',
+        },
+      })}
     >
       <Breadcrumbs item={item} highlighted={highlightedIndex === index} />
       {item.title}