Skip to content

Commit a355a6a

Browse files
lukekarryslukekarrys
committed
Make theme wrapper components use as property for less nesting
1 parent e1007d1 commit a355a6a

File tree

5 files changed

+135
-140
lines changed

5 files changed

+135
-140
lines changed

‎src/components/header.js‎

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -29,54 +29,52 @@ function Header() {
2929
const search = useSearch()
3030

3131
return (
32-
<DarkTheme>
33-
<Box sx={{top: 0, position: 'sticky', zIndex: 1}}>
34-
<NpmHeaderBar />
35-
<Box
36-
as="header"
37-
sx={{
38-
display: 'flex',
39-
height: HEADER_HEIGHT,
40-
px: [3, null, null, 4],
41-
alignItems: 'center',
42-
justifyContent: 'space-between',
43-
bg: 'canvas.default',
44-
border: '1px solid',
45-
borderLeftWidth: 0,
46-
borderRightWidth: 0,
47-
borderColor: 'border.muted',
48-
}}
49-
>
50-
<Box sx={{display: 'flex', alignItems: 'center'}}>
51-
<Link
52-
to="/"
53-
sx={{
54-
mr: 4,
55-
fontWeight: 'bold',
56-
color: 'fg.default',
57-
display: 'flex',
58-
alignItems: 'center',
59-
}}
60-
>
61-
<NpmLogo size="32" sx={{display: 'flex', mr: 3}} />
62-
{siteMetadata.title}
63-
</Link>
64-
<Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
65-
<Search.Desktop {...search} />
66-
</Box>
32+
<DarkTheme sx={{top: 0, position: 'sticky', zIndex: 1}}>
33+
<NpmHeaderBar />
34+
<Box
35+
as="header"
36+
sx={{
37+
display: 'flex',
38+
height: HEADER_HEIGHT,
39+
px: [3, null, null, 4],
40+
alignItems: 'center',
41+
justifyContent: 'space-between',
42+
bg: 'canvas.default',
43+
border: '1px solid',
44+
borderLeftWidth: 0,
45+
borderRightWidth: 0,
46+
borderColor: 'border.muted',
47+
}}
48+
>
49+
<Box sx={{display: 'flex', alignItems: 'center'}}>
50+
<Link
51+
to="/"
52+
sx={{
53+
mr: 4,
54+
fontWeight: 'bold',
55+
color: 'fg.default',
56+
display: 'flex',
57+
alignItems: 'center',
58+
}}
59+
>
60+
<NpmLogo size="32" sx={{display: 'flex', mr: 3}} />
61+
{siteMetadata.title}
62+
</Link>
63+
<Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
64+
<Search.Desktop {...search} />
6765
</Box>
68-
<Box sx={{display: 'flex'}}>
69-
<Box sx={{display: ['none', null, null, 'flex'], alignItems: 'center'}}>
70-
{headerNavItems.map((item, index) => (
71-
<Link key={index} href={item.url} sx={{display: 'block', ml: 4, color: 'fg.default'}}>
72-
{item.title}
73-
</Link>
74-
))}
75-
</Box>
76-
<Box sx={{display: ['flex', null, null, 'none']}}>
77-
<Search.Mobile {...search} />
78-
<NavDrawer />
79-
</Box>
66+
</Box>
67+
<Box sx={{display: 'flex'}}>
68+
<Box sx={{display: ['none', null, null, 'flex'], alignItems: 'center'}}>
69+
{headerNavItems.map((item, index) => (
70+
<Link key={index} href={item.url} sx={{display: 'block', ml: 4, color: 'fg.default'}}>
71+
{item.title}
72+
</Link>
73+
))}
74+
</Box>
75+
<Box sx={{display: ['flex', null, null, 'none']}}>
76+
<Search.Mobile {...search} />
77+
<NavDrawer />
8078
</Box>
8179
</Box>
8280
</Box>

‎src/components/nav-drawer.js‎

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -32,64 +32,60 @@ function NavDrawer() {
3232
<Button aria-label="Menu" aria-expanded={isOpen} onClick={setOpen} sx={{ml: 3}}>
3333
<ThreeBarsIcon />
3434
</Button>
35-
<LightTheme>
36-
<Drawer isOpen={isOpen} onDismiss={setClose}>
35+
<LightTheme as={Drawer} isOpen={isOpen} onDismiss={setClose}>
36+
<Box
37+
sx={{
38+
display: 'flex',
39+
flexDirection: 'column',
40+
height: '100%',
41+
bg: 'canvas.backdrop',
42+
overflow: 'auto',
43+
}}
44+
style={{WebkitOverflowScrolling: 'touch'}}
45+
>
3746
<Box
3847
sx={{
3948
display: 'flex',
4049
flexDirection: 'column',
41-
height: '100%',
42-
bg: 'canvas.backdrop',
43-
overflow: 'auto',
50+
flex: '1 0 auto',
51+
color: 'fg.default',
52+
bg: 'canvas.default',
4453
}}
45-
style={{WebkitOverflowScrolling: 'touch'}}
4654
>
47-
<Box
55+
<DarkTheme
4856
sx={{
49-
display: 'flex',
50-
flexDirection: 'column',
51-
flex: '1 0 auto',
57+
borderWidth: 0,
58+
borderRadius: 0,
59+
borderBottomWidth: 1,
60+
borderColor: 'border.muted',
61+
borderStyle: 'solid',
5262
color: 'fg.default',
5363
bg: 'canvas.default',
5464
}}
5565
>
56-
<DarkTheme>
57-
<Box
58-
sx={{
59-
borderWidth: 0,
60-
borderRadius: 0,
61-
borderBottomWidth: 1,
62-
borderColor: 'border.muted',
63-
borderStyle: 'solid',
64-
color: 'fg.default',
65-
bg: 'canvas.default',
66-
}}
67-
>
68-
<Box
69-
sx={{
70-
py: 3,
71-
pl: 4,
72-
pr: 3,
73-
alignItems: 'center',
74-
justifyContent: 'space-between',
75-
display: 'flex',
76-
}}
77-
>
78-
<Link to="/" sx={{fontSize: 2, color: 'fg.default'}}>
79-
{siteMetadata.title}
80-
</Link>
81-
<Button aria-label="Close" onClick={setClose}>
82-
<XIcon />
83-
</Button>
84-
</Box>
85-
</Box>
86-
</DarkTheme>
87-
<Box sx={{display: 'flex', flexDirection: 'column'}}>
88-
<NavItems />
66+
<Box
67+
sx={{
68+
py: 3,
69+
pl: 4,
70+
pr: 3,
71+
alignItems: 'center',
72+
justifyContent: 'space-between',
73+
display: 'flex',
74+
}}
75+
>
76+
<Link to="/" sx={{fontSize: 2, color: 'fg.default'}}>
77+
{siteMetadata.title}
78+
</Link>
79+
<Button aria-label="Close" onClick={setClose}>
80+
<XIcon />
81+
</Button>
8982
</Box>
83+
</DarkTheme>
84+
<Box sx={{display: 'flex', flexDirection: 'column'}}>
85+
<NavItems />
9086
</Box>
9187
</Box>
92-
</Drawer>
88+
</Box>
9389
</LightTheme>
9490
</>
9591
)

‎src/components/search.js‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,20 @@ export const Desktop = props => {
2323
/>
2424
<Box sx={{position: 'absolute', left: 0, right: 0, pt: 1}} {...getMenuProps()}>
2525
{isOpen ? (
26-
<LightTheme>
27-
<Box
28-
sx={{
29-
overflow: 'auto',
30-
minWidth: 300,
31-
maxHeight: '70vh',
32-
boxShadow: 'shadow.large',
33-
borderColor: 'border.muted',
34-
bg: 'canvas.overlay',
35-
borderRadius: 2,
36-
borderWidth: 1,
37-
borderStyle: 'solid',
38-
}}
39-
>
40-
<SearchResults {...{results, getItemProps, highlightedIndex}} />
41-
</Box>
26+
<LightTheme
27+
sx={{
28+
overflow: 'auto',
29+
minWidth: 300,
30+
maxHeight: '70vh',
31+
boxShadow: 'shadow.large',
32+
borderColor: 'border.muted',
33+
bg: 'canvas.overlay',
34+
borderRadius: 2,
35+
borderWidth: 1,
36+
borderStyle: 'solid',
37+
}}
38+
>
39+
<SearchResults {...{results, getItemProps, highlightedIndex}} />
4240
</LightTheme>
4341
) : null}
4442
</Box>
@@ -175,23 +173,21 @@ export const Mobile = props => {
175173
</Button>
176174
</Box>
177175
</Box>
178-
<LightTheme>
179-
<Box
180-
sx={{
181-
display: 'flex',
182-
bg: 'canvas.default',
183-
py: resultsOpen ? 1 : 0,
184-
flexDirection: 'column',
185-
flex: '1 1 auto',
186-
overflow: 'auto',
187-
}}
188-
style={{
189-
WebkitOverflowScrolling: 'touch',
190-
}}
191-
{...getMenuProps()}
192-
>
193-
{resultsOpen ? <SearchResults {...{results, getItemProps, highlightedIndex}} /> : null}
194-
</Box>
176+
<LightTheme
177+
sx={{
178+
display: 'flex',
179+
bg: 'canvas.default',
180+
py: resultsOpen ? 1 : 0,
181+
flexDirection: 'column',
182+
flex: '1 1 auto',
183+
overflow: 'auto',
184+
}}
185+
style={{
186+
WebkitOverflowScrolling: 'touch',
187+
}}
188+
{...getMenuProps()}
189+
>
190+
{resultsOpen ? <SearchResults {...{results, getItemProps, highlightedIndex}} /> : null}
195191
</LightTheme>
196192
</Box>
197193
</Box>

‎src/layout.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,15 @@ const HeroLayout = ({children}) => {
1616

1717
return (
1818
<Box as="main" sx={{width: '100%'}}>
19-
<DarkTheme>
20-
<Box sx={{bg: 'canvas.inset', py: 6}}>
21-
<Container>
22-
<Heading as="h1" sx={{color: 'fg.default', fontSize: 7, m: 0}}>
23-
{title}
24-
</Heading>
25-
<Text as="p" sx={{m: 0, color: 'fg.onEmphasis', fontSize: 4}}>
26-
{description}
27-
</Text>
28-
</Container>
29-
</Box>
19+
<DarkTheme sx={{bg: 'canvas.inset', py: 6}}>
20+
<Container>
21+
<Heading as="h1" sx={{color: 'fg.default', fontSize: 7, m: 0}}>
22+
{title}
23+
</Heading>
24+
<Text as="p" sx={{m: 0, color: 'fg.onEmphasis', fontSize: 4}}>
25+
{description}
26+
</Text>
27+
</Container>
3028
</DarkTheme>
3129
<SkipNav />
3230
<Container>{children}</Container>

‎src/theme.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react'
2-
import {ThemeProvider as PrimerThemeProvider, theme as primerTheme} from '@primer/react'
2+
import {ThemeProvider as Provider, theme, Box} from '@primer/react'
33
import deepmerge from 'deepmerge'
44

55
export const NPM_RED = '#cb0000'
66

7-
export const theme = deepmerge(primerTheme, {
7+
export const npmTheme = deepmerge(theme, {
88
colors: {
99
logoBg: NPM_RED,
1010
},
@@ -37,6 +37,13 @@ export const theme = deepmerge(primerTheme, {
3737
},
3838
})
3939

40-
export const ThemeProvider = props => <PrimerThemeProvider theme={theme} {...props} />
41-
export const LightTheme = props => <ThemeProvider colorMode="light" {...props} />
42-
export const DarkTheme = props => <ThemeProvider colorMode="dark" nightScheme="dark_dimmed" {...props} />
40+
export const ThemeProvider = props => <Provider theme={npmTheme} {...props} />
41+
42+
export const Theme = ({theme: colorMode, as = Box, ...props}) => (
43+
<Provider colorMode={colorMode} nightScheme="dark_dimmed">
44+
{React.createElement(as, props)}
45+
</Provider>
46+
)
47+
48+
export const LightTheme = props => <Theme theme="light" {...props} />
49+
export const DarkTheme = props => <Theme theme="dark" {...props} />

0 commit comments

Comments
 (0)