Skip to content

Commit a9c2e44

Browse files
lukekarryslukekarrys
committed
Convert primer colors to use new color names
1 parent 2ed7593 commit a9c2e44

21 files changed

+279
-192
lines changed

‎gatsby-browser.js

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

‎gatsby-config.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const path = require('path')
22
const fs = require('fs')
33

4-
const {NODE_ENV, GATSBY_PARTIAL_CONTENT, GATSBY_CONTENT_DIR = 'content'} = process.env
4+
const {NODE_ENV, GATSBY_PARTIAL_CONTENT, GATSBY_CONTENT_IGNORE, GATSBY_CONTENT_DIR = 'content'} = process.env
55
const DEV = NODE_ENV === 'development'
66
const CONTENT_DIR = path.resolve(GATSBY_CONTENT_DIR)
77

@@ -15,7 +15,7 @@ const walkDirs = dir => {
1515
}
1616

1717
const getContentOptions = () => {
18-
if (!DEV || !GATSBY_PARTIAL_CONTENT) {
18+
if (!DEV || (!GATSBY_PARTIAL_CONTENT && !GATSBY_CONTENT_IGNORE)) {
1919
return
2020
}
2121

@@ -47,7 +47,6 @@ module.exports = {
4747
shortName: 'npm',
4848
description: 'Documentation for the npm registry, website, and command-line interface',
4949
lang: 'en',
50-
// eslint-disable-next-line max-len
5150
imageUrl: 'https://user-images.githubusercontent.com/29712634/81721690-e2fb5d80-9445-11ea-8602-4b2294c964f3.png',
5251
},
5352
plugins: [

‎gatsby-ssr.js

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

‎src/components/clipboard-copy.js

+5-11
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
import React from 'react'
2-
import {Button, Octicon, themeGet} from '@primer/react'
2+
import {Button, Octicon} from '@primer/react'
33
import {CheckIcon, CopyIcon} from '@primer/octicons-react'
4-
import styled from 'styled-components'
54
import copy from 'copy-to-clipboard'
65
import {announce} from '../util/aria-live'
76

8-
const CopyToClipboard = styled(Button)`
9-
&:focus {
10-
box-shadow: 0 0 0 3px ${themeGet('colors.blue.5')};
11-
}
12-
`
13-
147
function ClipboardCopy({value}) {
158
const [copied, setCopied] = React.useState(false)
169

@@ -25,16 +18,17 @@ function ClipboardCopy({value}) {
2518
}, [copied])
2619

2720
return (
28-
<CopyToClipboard
21+
<Button
2922
aria-label="Copy to clipboard"
3023
onClick={() => {
3124
copy(value)
3225
setCopied(true)
3326
announce(`Copied to clipboard`)
3427
}}
28+
sx={{px: 2}}
3529
>
36-
<Octicon icon={copied ? CheckIcon : CopyIcon} sx={{color: copied ? 'green.5' : 'gray.7'}} />
37-
</CopyToClipboard>
30+
<Octicon icon={copied ? CheckIcon : CopyIcon} sx={{color: copied ? 'success.fg' : 'fg.muted'}} />
31+
</Button>
3832
)
3933
}
4034

‎src/components/contributors.js

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

‎src/components/dark-text-input.js

-21
This file was deleted.

‎src/components/drawer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ const Drawer = ({isOpen, onDismiss, children}) => (
4343
bottom: 0,
4444
bg: 'gray.0',
4545
width: 300,
46-
zIndex: 1,
4746
}}
47+
style={{zIndex: 1}}
4848
key="drawer"
4949
as={motion.div}
5050
initial={{x: '100%'}}

‎src/components/header.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,16 @@ function Header() {
3737
<Box sx={{top: 0, position: 'sticky', zIndex: 1}} role="banner">
3838
<NpmHeaderBar />
3939
<Box
40+
as="header"
4041
sx={{
4142
display: 'flex',
4243
height: HEADER_HEIGHT,
4344
px: [3, null, null, 4],
4445
alignItems: 'center',
4546
justifyContent: 'space-between',
46-
bg: '#333333',
47+
bg: 'canvas.default',
48+
border: '1px solid',
49+
borderColor: 'border.muted',
4750
}}
4851
>
4952
<Box sx={{display: 'flex', alignItems: 'center'}}>
@@ -52,8 +55,8 @@ function Header() {
5255
to="/"
5356
sx={{
5457
mr: 4,
55-
color: '#dddddd',
56-
fontWeight: '600',
58+
fontWeight: 'bold',
59+
color: 'fg.default',
5760
display: 'flex',
5861
alignItems: 'center',
5962
}}
@@ -69,7 +72,7 @@ function Header() {
6972
<Box sx={{display: ['none', null, null, 'block']}}>
7073
<Box sx={{display: 'flex', alignItems: 'center', color: 'gray.2'}}>
7174
{headerNavItems.map((item, index) => (
72-
<Link key={index} href={item.url} sx={{display: 'block', color: 'inherit', ml: 4}}>
75+
<Link key={index} href={item.url} sx={{display: 'block', ml: 4}}>
7376
{item.title}
7477
</Link>
7578
))}

‎src/components/hero.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ function Hero() {
1010
<ThemeProvider colorMode="night" nightScheme="dark_dimmed">
1111
<Box sx={{bg: 'canvas.default', py: 6}}>
1212
<Container>
13-
<Heading as="h1" sx={{color: 'fg.onEmphasis', fontSize: 7, m: 0}}>
13+
<Heading as="h1" sx={{color: 'accent.fg', fontSize: 7, m: 0}}>
1414
{title}
1515
</Heading>
16-
<Text as="p" sx={{m: 0, color: 'fg.onEmphasis', fontSize: 4}}>
16+
<Text as="p" sx={{m: 0, color: 'fg.default', fontSize: 4}}>
1717
{description}
1818
</Text>
1919
</Container>

‎src/components/mobile-search.js

+20-16
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {Button, Box} from '@primer/react'
33
import {XIcon, SearchIcon} from '@primer/octicons-react'
44
import {AnimatePresence, motion} from 'framer-motion'
55
import {FocusOn} from 'react-focus-on'
6-
import DarkTextInput from './dark-text-input'
6+
import TextInput from './text-input'
77
import SearchResults from './search-results'
88
import useSiteMetadata from '../hooks/use-site-metadata'
99

@@ -21,7 +21,7 @@ function MobileSearch({onDismiss, ...props}) {
2121
<Box
2222
sx={{
2323
position: 'fixed',
24-
top: '10px',
24+
top: '10px', // TODO: use constant
2525
left: 0,
2626
right: 0,
2727
bottom: 0,
@@ -35,7 +35,7 @@ function MobileSearch({onDismiss, ...props}) {
3535
left: 0,
3636
right: 0,
3737
bottom: 0,
38-
bg: 'rgba(0,0,0,0.5)',
38+
bg: 'primer.canvas.backdrop',
3939
zIndex: -1,
4040
}}
4141
as={motion.div}
@@ -45,19 +45,20 @@ function MobileSearch({onDismiss, ...props}) {
4545
onClick={handleDismiss}
4646
/>
4747
<Box sx={{display: 'flex', flexDirection: 'column', height: isOpen ? '100%' : 'auto'}}>
48-
<Box sx={{display: 'flex', bg: 'gray.9', color: 'white', p: 3, flex: '0 0 auto'}}>
48+
<Box sx={{display: 'flex', bg: 'canvas.default', color: 'fg.default', p: 3, flex: '0 0 auto'}}>
4949
<motion.div
5050
initial={{scaleX: 0.1}}
5151
animate={{scaleX: 1}}
5252
exit={{scaleX: 0.1, transition: {duration: 0.1}}}
5353
transition={{type: 'tween', duration: 0.2}}
5454
style={{width: '100%', originX: '100%'}}
5555
>
56-
<DarkTextInput
56+
<TextInput
57+
leadingVisual={SearchIcon}
5758
{...getInputProps({
5859
placeholder: `Search ${siteMetadata.title}`,
5960
'aria-label': `Search ${siteMetadata.title}`,
60-
width: '100%',
61+
sx: {width: '100%'},
6162
})}
6263
/>
6364
</motion.div>
@@ -66,16 +67,19 @@ function MobileSearch({onDismiss, ...props}) {
6667
</Button>
6768
</Box>
6869
<Box
69-
{...getMenuProps()}
70-
sx={{
71-
display: 'flex',
72-
bg: 'white',
73-
py: isOpen ? 1 : 0,
74-
flexDirection: 'column',
75-
flex: '1 1 auto',
76-
overflow: 'auto',
77-
WebkitOverflowScrolling: 'touch',
78-
}}
70+
{...getMenuProps({
71+
sx: {
72+
display: 'flex',
73+
bg: 'canvas.default',
74+
py: isOpen ? 1 : 0,
75+
flexDirection: 'column',
76+
flex: '1 1 auto',
77+
},
78+
style: {
79+
overflow: 'auto',
80+
WebkitOverflowScrolling: 'touch',
81+
},
82+
})}
7983
>
8084
{isOpen ? <SearchResults {...{results, getItemProps, highlightedIndex}} /> : null}
8185
</Box>

‎src/components/nav-drawer.js

+19-10
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,31 @@ function NavDrawer() {
3838
display: 'flex',
3939
flexDirection: 'column',
4040
height: '100%',
41-
bg: 'gray.0',
41+
bg: 'canvas.default',
4242
overflow: 'auto',
4343
WebkitOverflowScrolling: 'touch',
4444
}}
4545
>
46-
<Box sx={{display: 'flex', flexDirection: 'column', flex: '1 0 auto', color: 'gray.7', bg: 'gray.0'}}>
46+
<Box
47+
sx={{display: 'flex', flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default'}}
48+
>
4749
<Box
48-
sx={{borderStyle: 'solid', borderWidth: 0, borderRadius: 0, borderBottomWidth: 1, borderColor: 'gray.7'}}
50+
sx={{
51+
borderWidth: 0,
52+
borderRadius: 0,
53+
borderBottomWidth: 1,
54+
borderColor: 'border.muted',
55+
borderStyle: 'solid',
56+
}}
4957
>
5058
<Box
5159
sx={{
52-
display: 'flex',
5360
py: 3,
5461
pl: 4,
5562
pr: 3,
5663
alignItems: 'center',
5764
justifyContent: 'space-between',
58-
color: 'gray.1',
59-
bg: 'gray.9',
65+
display: 'flex',
6066
}}
6167
>
6268
<Link as={GatsbyLink} to="/" sx={{display: 'inline-block', color: 'inherit'}}>
@@ -71,17 +77,20 @@ function NavDrawer() {
7177
<NavItems />
7278
</Box>
7379
</Box>
74-
<Box sx={{display: 'flex', flexDirection: 'column', flex: '1 0 auto', color: 'gray.1', bg: 'gray.9'}}>
80+
<Box
81+
sx={{flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default', display: 'flex'}}
82+
>
7583
{headerNavItems.map((item, index) => (
7684
<Box
7785
key={item.title}
7886
sx={{
79-
borderStyle: 'solid',
8087
borderWidth: 0,
8188
borderRadius: 0,
8289
borderTopWidth: index !== 0 ? 1 : 0,
83-
borderColor: 'gray.7',
84-
p: 4,
90+
borderColor: 'border.muted',
91+
px: 4,
92+
py: 3,
93+
borderStyle: 'solid',
8594
}}
8695
>
8796
<Link key={index} href={item.url} sx={{color: 'inherit', display: 'block'}}>

‎src/components/page-footer.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ function PageFooter({editUrl, contributors = {}}) {
88
return editUrl || logins.length ? (
99
<Box
1010
sx={{
11-
borderStyle: 'solid',
12-
borderColor: 'border.default',
13-
borderRadius: 2,
1411
borderWidth: 0,
1512
borderTopWidth: 1,
13+
borderRadius: 0,
1614
mt: 8,
1715
py: 5,
16+
borderStyle: 'solid',
17+
borderColor: 'border.default',
1818
}}
1919
>
2020
<Box sx={{display: 'grid', gap: 4}}>

‎src/components/search-results.js

+15-11
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,21 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
2929
return results.map((item, index) => (
3030
<Box
3131
key={item.path}
32-
sx={{
33-
display: 'flex',
34-
flexDirection: 'column',
35-
flex: '0 0 auto',
36-
px: 3,
37-
py: 2,
38-
color: highlightedIndex === index ? 'white' : 'gray.8',
39-
bg: highlightedIndex === index ? 'blue.5' : 'transparent',
40-
cursor: 'pointer',
41-
}}
42-
{...getItemProps({item})}
32+
{...getItemProps({
33+
item,
34+
style: {cursor: 'pointer'},
35+
sx: {
36+
display: 'flex',
37+
flexDirection: 'column',
38+
flex: '0 0 auto',
39+
px: 3,
40+
py: 2,
41+
color: 'fg.default',
42+
fontSize: 1,
43+
bg: highlightedIndex === index ? 'neutral.muted' : 'transparent',
44+
cursor: 'pointer',
45+
},
46+
})}
4347
>
4448
<Breadcrumbs item={item} highlighted={highlightedIndex === index} />
4549
{item.title}

0 commit comments

Comments
 (0)