Skip to content

Commit 86b1048

Browse files
lukekarryslukekarrys
committed
Refactor theme providers to a single file
1 parent c29c99e commit 86b1048

File tree

8 files changed

+70
-64
lines changed

8 files changed

+70
-64
lines changed

‎src/components/header.js‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,25 @@
11
import React from 'react'
2-
import {Box, ThemeProvider} from '@primer/react'
2+
import {Box} from '@primer/react'
33
import styled from 'styled-components'
44
import MobileSearch from './mobile-search'
55
import NavDrawer from './nav-drawer'
66
import Search from './search'
77
import Link from './link'
88
import useSearch from '../hooks/use-search'
9-
import {HEADER_HEIGHT, HEADER_BAR, NPM_RED} from '../constants'
9+
import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
1010
import useSiteMetadata from '../hooks/use-site-metadata'
1111
import headerNavItems from '../../content/header-nav.yml'
12+
import {DarkTheme} from '../theme'
1213

1314
const NpmHeaderBar = styled(Box)`
1415
height: ${HEADER_BAR}px;
1516
background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
1617
`
1718

18-
const NpmLogo = ({size, ...props}) => (
19-
<Box {...props} role="banner">
20-
<svg
21-
height={size}
22-
width={size}
23-
viewBox="0 0 700 700"
24-
fill="currentColor"
25-
style={{color: NPM_RED}}
26-
aria-hidden="true"
27-
>
28-
<polygon fill={NPM_RED} points="0,700 700,700 700,0 0,0" />
19+
const NpmLogo = ({size, sx}) => (
20+
<Box sx={{...sx, color: 'logoBg'}} role="banner">
21+
<svg height={size} width={size} viewBox="0 0 700 700" fill="currentColor" aria-hidden="true">
22+
<polygon fill="currentColor" points="0,700 700,700 700,0 0,0" />
2923
<polygon fill="#ffffff" points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 " />
3024
</svg>
3125
</Box>
@@ -36,7 +30,7 @@ function Header() {
3630
const search = useSearch()
3731

3832
return (
39-
<ThemeProvider colorMode="night" nightScheme="dark_dimmed">
33+
<DarkTheme>
4034
<Box sx={{top: 0, position: 'sticky', zIndex: 1}}>
4135
<NpmHeaderBar />
4236
<Box
@@ -87,7 +81,7 @@ function Header() {
8781
</Box>
8882
</Box>
8983
</Box>
90-
</ThemeProvider>
84+
</DarkTheme>
9185
)
9286
}
9387

‎src/components/mobile-search.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react'
2-
import {Button, Box, ThemeProvider} from '@primer/react'
2+
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'
66
import TextInput from './text-input'
77
import SearchResults from './search-results'
88
import useSiteMetadata from '../hooks/use-site-metadata'
99
import {HEADER_BAR, HEADER_HEIGHT} from '../constants'
10+
import {LightTheme} from '../theme'
1011

1112
function MobileSearch({onDismiss, ...props}) {
1213
const siteMetadata = useSiteMetadata()
@@ -81,7 +82,7 @@ function MobileSearch({onDismiss, ...props}) {
8182
<XIcon />
8283
</Button>
8384
</Box>
84-
<ThemeProvider colorMode="light">
85+
<LightTheme>
8586
<Box
8687
sx={{
8788
display: 'flex',
@@ -98,7 +99,7 @@ function MobileSearch({onDismiss, ...props}) {
9899
>
99100
{isOpen ? <SearchResults {...{results, getItemProps, highlightedIndex}} /> : null}
100101
</Box>
101-
</ThemeProvider>
102+
</LightTheme>
102103
</Box>
103104
</Box>
104105
</FocusOn>

‎src/components/nav-drawer.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react'
2-
import {Button, Box, ThemeProvider} from '@primer/react'
2+
import {Button, Box} from '@primer/react'
33
import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
44
import Link from './link'
55
import Drawer from './drawer'
66
import NavItems from './nav-items'
77
import useSiteMetadata from '../hooks/use-site-metadata'
88
import {useIsMobile} from '../hooks/use-breakpoint'
9+
import {DarkTheme, LightTheme} from '../theme'
910

1011
const useDrawerIsOpen = () => {
1112
const isMobile = useIsMobile()
@@ -31,7 +32,7 @@ function NavDrawer() {
3132
<Button aria-label="Menu" aria-expanded={isOpen} onClick={setOpen} sx={{ml: 3}}>
3233
<ThreeBarsIcon />
3334
</Button>
34-
<ThemeProvider colorMode="light">
35+
<LightTheme>
3536
<Drawer isOpen={isOpen} onDismiss={setClose}>
3637
<Box
3738
sx={{
@@ -52,7 +53,7 @@ function NavDrawer() {
5253
bg: 'canvas.default',
5354
}}
5455
>
55-
<ThemeProvider colorMode="night" nightScheme="dark_dimmed">
56+
<DarkTheme>
5657
<Box
5758
sx={{
5859
borderWidth: 0,
@@ -82,14 +83,14 @@ function NavDrawer() {
8283
</Button>
8384
</Box>
8485
</Box>
85-
</ThemeProvider>
86+
</DarkTheme>
8687
<Box sx={{display: 'flex', flexDirection: 'column'}}>
8788
<NavItems />
8889
</Box>
8990
</Box>
9091
</Box>
9192
</Drawer>
92-
</ThemeProvider>
93+
</LightTheme>
9394
</>
9495
)
9596
}

‎src/components/search.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react'
2-
import {Box, ThemeProvider} from '@primer/react'
2+
import {Box} from '@primer/react'
33
import TextInput from './text-input'
44
import SearchResults from './search-results'
55
import useSiteMetadata from '../hooks/use-site-metadata'
6+
import {LightTheme} from '../theme'
67

78
function Search(props) {
89
const siteMetadata = useSiteMetadata()
@@ -18,7 +19,7 @@ function Search(props) {
1819
/>
1920
<Box sx={{position: 'absolute', left: 0, right: 0, pt: 2}} {...getMenuProps()}>
2021
{isOpen ? (
21-
<ThemeProvider colorMode="light">
22+
<LightTheme>
2223
<Box
2324
sx={{
2425
overflow: 'auto',
@@ -35,7 +36,7 @@ function Search(props) {
3536
>
3637
<SearchResults {...{results, getItemProps, highlightedIndex}} />
3738
</Box>
38-
</ThemeProvider>
39+
</LightTheme>
3940
) : null}
4041
</Box>
4142
</Box>

‎src/constants.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,3 @@ export const HEADER_BAR = 10
55
export const FULL_HEADER_HEIGHT = HEADER_HEIGHT + HEADER_BAR
66

77
export const SKIP_NAV = {id: 'skip-nav', as: 'main'}
8-
9-
export const NPM_RED = '#cb0000'

‎src/layout.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import {Box, Heading, Text, ThemeProvider} from '@primer/react'
2+
import {Box, Heading, Text} from '@primer/react'
33
import {H1} from './mdx'
44
import PageFooter from './components/page-footer'
55
import * as TableOfContents from './components/table-of-contents'
@@ -9,13 +9,14 @@ import Container from './components/container'
99
import {SKIP_NAV} from './constants'
1010
import useSiteMetadata from './hooks/use-site-metadata'
1111
import usePage from './hooks/use-page'
12+
import {DarkTheme} from './theme'
1213

1314
const HeroLayout = ({children}) => {
1415
const {title, description} = useSiteMetadata()
1516

1617
return (
1718
<Box sx={{width: '100%'}} {...SKIP_NAV}>
18-
<ThemeProvider colorMode="night" nightScheme="dark_dimmed">
19+
<DarkTheme>
1920
<Box sx={{bg: 'canvas.inset', py: 6}}>
2021
<Container>
2122
<Heading as="h1" sx={{color: 'fg.default', fontSize: 7, m: 0}}>
@@ -26,7 +27,7 @@ const HeroLayout = ({children}) => {
2627
</Text>
2728
</Container>
2829
</Box>
29-
</ThemeProvider>
30+
</DarkTheme>
3031
<Container>{children}</Container>
3132
</Box>
3233
)

‎src/root.js‎

Lines changed: 2 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,7 @@
11
import React from 'react'
22
import {MDXProvider} from '@mdx-js/react'
3-
import {ThemeProvider, theme} from '@primer/react'
4-
import deepmerge from 'deepmerge'
3+
import {ThemeProvider} from './theme'
54
import * as Components from './mdx'
6-
import {NPM_RED} from './constants'
7-
8-
const npmTheme = deepmerge(theme, {
9-
colorSchemes: {
10-
light: {
11-
colors: {
12-
accent: {
13-
fg: NPM_RED,
14-
},
15-
},
16-
},
17-
dark_dimmed: {
18-
colors: {
19-
canvas: {
20-
default: '#333333',
21-
},
22-
fg: {
23-
default: '#E1E4E8',
24-
},
25-
btn: {
26-
text: '#E1E4E8',
27-
bg: 'transparent',
28-
border: '#444D56',
29-
hoverBorder: '#444D56',
30-
hoverBg: NPM_RED,
31-
},
32-
},
33-
},
34-
},
35-
})
365

376
const components = {
387
a: Components.Link,
@@ -62,7 +31,7 @@ const components = {
6231

6332
const RootElement = ({element}) => (
6433
<MDXProvider components={components}>
65-
<ThemeProvider theme={npmTheme}>{element}</ThemeProvider>
34+
<ThemeProvider>{element}</ThemeProvider>
6635
</MDXProvider>
6736
)
6837

‎src/theme.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react'
2+
import {ThemeProvider as PrimerThemeProvider, theme as primerTheme} from '@primer/react'
3+
import deepmerge from 'deepmerge'
4+
5+
export const NPM_RED = '#cb0000'
6+
7+
export const theme = deepmerge(primerTheme, {
8+
colors: {
9+
logoBg: NPM_RED,
10+
},
11+
colorSchemes: {
12+
light: {
13+
colors: {
14+
accent: {
15+
fg: NPM_RED,
16+
},
17+
},
18+
},
19+
dark_dimmed: {
20+
colors: {
21+
canvas: {
22+
default: '#333333',
23+
},
24+
fg: {
25+
default: '#E1E4E8',
26+
},
27+
btn: {
28+
text: '#E1E4E8',
29+
bg: 'transparent',
30+
border: '#444D56',
31+
hoverBorder: '#444D56',
32+
hoverBg: NPM_RED,
33+
},
34+
},
35+
},
36+
},
37+
})
38+
39+
export const ThemeProvider = props => <PrimerThemeProvider theme={theme} {...props} />
40+
export const LightTheme = props => <ThemeProvider colorMode="light" {...props} />
41+
export const DarkTheme = props => <ThemeProvider colorMode="dark" nightScheme="dark_dimmed" {...props} />

0 commit comments

Comments
 (0)