More styles refactoring
Luke Karrys committed
Oct 16, 2023 at 20:14 UTC
c285618e7cc1692011e6b4466b9a7eef0af43d6f
16 files changed
+103
-88
package-lock.json
+1
@@ -17,6 +17,7 @@
17
"@primer/react": "^35.31.0",
18
"babel-plugin-styled-components": "^2.1.4",
19
"copy-to-clipboard": "^3.3.3",
20
+ "deepmerge": "^4.3.1",
21
"details-element-polyfill": "^2.4.0",
22
"downshift": "^8.2.2",
23
"framer-motion": "^3.10.6",
package.json
+1
@@ -32,6 +32,7 @@
32
"@primer/react": "^35.31.0",
33
"babel-plugin-styled-components": "^2.1.4",
34
"copy-to-clipboard": "^3.3.3",
35
+ "deepmerge": "^4.3.1",
36
"details-element-polyfill": "^2.4.0",
37
"downshift": "^8.2.2",
38
"framer-motion": "^3.10.6",
src/components/breadcrumbs.js
+1
-1
@@ -21,7 +21,7 @@ const Breadcrumbs = () => {
21
const path = getNav.getLocation(location.pathname)
22
const items = getNav.getItemBreadcrumbs(location.pathname)
23
24
- if (items.length <= 1) {
24
+ if (!items || items.length <= 1) {
25
return null
26
}
27
src/components/drawer.js
+2
-4
@@ -10,7 +10,6 @@ const Drawer = ({isOpen, onDismiss, children}) => (
10
// to be unclickable in macOS Safari.
11
// Reference: https://github.com/theKashey/react-focus-lock/issues/79
12
<div
13
- style={{textAlign: 'start', fontSize: '1rem', lineHeight: '1.5rem'}}
13
onMouseDown={event => event.preventDefault()}
14
onKeyDown={event => event.target.focus()}
15
onClick={event => event.target.focus()}
@@ -25,7 +24,7 @@ const Drawer = ({isOpen, onDismiss, children}) => (
24
right: 0,
25
bottom: 0,
26
left: 0,
28
- bg: 'rgba(0, 0, 0, 0.5)',
27
+ bg: 'overlay.backdrop',
28
}}
29
key="overlay"
30
as={motion.div}
@@ -41,10 +40,9 @@ const Drawer = ({isOpen, onDismiss, children}) => (
40
top: 0,
41
right: 0,
42
bottom: 0,
44
- bg: 'gray.0',
43
width: 300,
44
+ zIndex: 1,
45
}}
47
- style={{zIndex: 1}}
46
key="drawer"
47
as={motion.div}
48
initial={{x: '100%'}}
src/components/hero.js
+1
-1
@@ -10,7 +10,7 @@ function Hero() {
10
<ThemeProvider colorMode="night" nightScheme="dark_dimmed">
11
<Box sx={{bg: 'canvas.default', py: 6}}>
12
<Container>
13
- <Heading as="h1" sx={{color: 'accent.fg', fontSize: 7, m: 0}}>
13
+ <Heading as="h1" sx={{color: 'fg.default', fontSize: 7, m: 0}}>
14
{title}
15
</Heading>
16
<Text as="p" sx={{m: 0, color: 'fg.default', fontSize: 4}}>
src/components/mobile-search.js
+13
-12
@@ -1,5 +1,5 @@
1
import React from 'react'
2
-import {Button, Box} from '@primer/react'
2
+import {Button, Box, ThemeProvider} from '@primer/react'
3
import {XIcon, SearchIcon} from '@primer/octicons-react'
4
import {AnimatePresence, motion} from 'framer-motion'
5
import {FocusOn} from 'react-focus-on'
@@ -36,7 +36,7 @@ function MobileSearch({onDismiss, ...props}) {
36
left: 0,
37
right: 0,
38
bottom: 0,
39
- bg: 'primer.canvas.backdrop',
39
+ bg: 'canvas.backdrop',
40
zIndex: -1,
41
}}
42
as={motion.div}
@@ -77,23 +77,24 @@ function MobileSearch({onDismiss, ...props}) {
77
<XIcon />
78
</Button>
79
</Box>
80
- <Box
81
- {...getMenuProps({
82
- sx: {
80
+ <ThemeProvider colorMode="light">
81
+ <Box
82
+ sx={{
83
display: 'flex',
84
bg: 'canvas.default',
85
py: isOpen ? 1 : 0,
86
flexDirection: 'column',
87
flex: '1 1 auto',
88
- },
89
- style: {
88
overflow: 'auto',
89
+ }}
90
+ style={{
91
WebkitOverflowScrolling: 'touch',
92
- },
93
- })}
94
- >
95
- {isOpen ? <SearchResults {...{results, getItemProps, highlightedIndex}} /> : null}
96
- </Box>
92
+ }}
93
+ {...getMenuProps()}
94
+ >
95
+ {isOpen ? <SearchResults {...{results, getItemProps, highlightedIndex}} /> : null}
96
+ </Box>
97
+ </ThemeProvider>
98
</Box>
99
</Box>
100
</FocusOn>
src/components/nav-drawer.js
+43
-35
@@ -1,5 +1,5 @@
1
import React from 'react'
2
-import {Button, Box, Link} from '@primer/react'
2
+import {Button, Box, Link, ThemeProvider} from '@primer/react'
3
import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
4
import {Link as GatsbyLink} from 'gatsby'
5
import Drawer from './drawer'
@@ -31,53 +31,61 @@ function NavDrawer() {
31
<Button aria-label="Menu" aria-expanded={isOpen} onClick={setOpen} sx={{ml: 3}}>
32
<ThreeBarsIcon />
33
</Button>
34
- <Drawer isOpen={isOpen} onDismiss={setClose}>
35
- <Box
36
- sx={{
37
- display: 'flex',
38
- flexDirection: 'column',
39
- height: '100%',
40
- bg: 'canvas.default',
41
- overflow: 'auto',
42
- WebkitOverflowScrolling: 'touch',
43
- }}
44
- >
34
+ <ThemeProvider colorMode="light">
35
+ <Drawer isOpen={isOpen} onDismiss={setClose}>
36
<Box
46
- sx={{display: 'flex', flexDirection: 'column', flex: '1 0 auto', color: 'fg.default', bg: 'canvas.default'}}
37
+ sx={{
38
+ display: 'flex',
39
+ flexDirection: 'column',
40
+ height: '100%',
41
+ bg: 'canvas.backdrop',
42
+ overflow: 'auto',
43
+ }}
44
+ style={{WebkitOverflowScrolling: 'touch'}}
45
>
46
<Box
47
sx={{
50
- borderWidth: 0,
51
- borderRadius: 0,
52
- borderBottomWidth: 1,
53
- borderColor: 'border.muted',
54
- borderStyle: 'solid',
48
+ display: 'flex',
49
+ flexDirection: 'column',
50
+ flex: '1 0 auto',
51
+ color: 'fg.default',
52
+ bg: 'canvas.default',
53
}}
54
>
55
<Box
56
sx={{
59
- py: 3,
60
- pl: 4,
61
- pr: 3,
62
- alignItems: 'center',
63
- justifyContent: 'space-between',
64
- display: 'flex',
57
+ borderWidth: 0,
58
+ borderRadius: 0,
59
+ borderBottomWidth: 1,
60
+ borderColor: 'border.muted',
61
+ borderStyle: 'solid',
62
}}
63
>
67
- <Link as={GatsbyLink} to="/" sx={{display: 'inline-block', color: 'inherit'}}>
68
- {siteMetadata.title}
69
- </Link>
70
- <Button aria-label="Close" onClick={setClose}>
71
- <XIcon />
72
- </Button>
64
+ <Box
65
+ sx={{
66
+ py: 3,
67
+ pl: 4,
68
+ pr: 3,
69
+ alignItems: 'center',
70
+ justifyContent: 'space-between',
71
+ display: 'flex',
72
+ }}
73
+ >
74
+ <Link as={GatsbyLink} to="/" sx={{display: 'inline-block', color: 'inherit'}}>
75
+ {siteMetadata.title}
76
+ </Link>
77
+ <Button aria-label="Close" onClick={setClose}>
78
+ <XIcon />
79
+ </Button>
80
+ </Box>
81
+ </Box>
82
+ <Box sx={{display: 'flex', flexDirection: 'column'}}>
83
+ <NavItems />
84
</Box>
74
- </Box>
75
- <Box sx={{display: 'flex', flexDirection: 'column'}}>
76
- <NavItems />
85
</Box>
86
</Box>
79
- </Box>
80
- </Drawer>
87
+ </Drawer>
88
+ </ThemeProvider>
89
</>
90
)
91
}
src/components/search.js
+5
-13
@@ -12,23 +12,15 @@ function Search(props) {
12
<Box sx={{position: 'relative'}}>
13
<TextInput
14
sx={{width: '240px'}}
15
- {...getInputProps({
16
- placeholder: `Search ${siteMetadata.title}`,
17
- 'aria-label': `Search ${siteMetadata.title}`,
18
- })}
15
+ placeholder={`Search ${siteMetadata.title}`}
16
+ aria-label={`Search ${siteMetadata.title}`}
17
+ {...getInputProps()}
18
/>
20
- <Box
21
- {...getMenuProps({
22
- position: 'absolute',
23
- left: 0,
24
- right: 0,
25
- pt: 2,
26
- })}
27
- >
19
+ <Box sx={{position: 'absolute', left: 0, right: 0, pt: 2}} {...getMenuProps()}>
20
{isOpen ? (
21
<Box
30
- style={{overflow: 'auto'}}
22
sx={{
23
+ overflow: 'auto',
24
minWidth: 300,
25
maxHeight: '70vh',
26
p: 2,
src/components/sidebar.js
+1
-1
@@ -39,8 +39,8 @@ const Sidebar = () => (
39
>
40
<Box
41
{...usePersistentScroll('sidebar')}
42
- style={{overflow: 'auto'}}
42
sx={{
43
+ overflow: 'auto',
44
borderWidth: 0,
45
borderRightWidth: 1,
46
height: '100%',
src/components/variant-select.js
+1
-1
@@ -82,7 +82,7 @@ const VariantSelect = () => {
82
}
83
84
return (
85
- <Box css={{'margin-top': '25px'}}>
85
+ <Box sx={{mt: 2}}>
86
<VariantMenu variants={variants} path={path} />
87
</Box>
88
)
src/layout.js
+1
-1
@@ -43,7 +43,7 @@ const withLayout = Component => {
43
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
44
<Head />
45
<Header />
46
- <Box css={{zIndex: 0}} sx={{display: 'flex', flex: '1 1 auto', flexDirection: 'row'}} role="main">
46
+ <Box sx={{zIndex: 0, display: 'flex', flex: '1 1 auto', flexDirection: 'row'}} role="main">
47
<Box sx={{display: ['none', null, null, 'block']}}>
48
<Sidebar />
49
</Box>
src/mdx/code.js
+2
-1
@@ -22,8 +22,9 @@ function Code({className: language = '', children}) {
22
tabIndex={0}
23
as="pre"
24
className={className}
25
- style={{...style, overflow: 'auto'}}
25
+ style={style}
26
sx={{
27
+ overflow: 'auto',
28
borderRadius: 2,
29
mt: 0,
30
mb: 3,
src/mdx/index.js
+8
-10
@@ -330,17 +330,15 @@ export const Prompt = ({children}) => (
330
331
export const PromptReply = ({children}) => <strong>{children}</strong>
332
333
+const ScreenshotImage = styled.img`
334
+ margin-top: 15px;
335
+ max-width: min(100%, 525px);
336
+ max-height: 300px;
337
+ border: 1px solid ${themeGet('colors.border.default')};
338
+`
339
+
340
export const Screenshot = props => (
341
<div>
335
- <img
336
- src={withPrefix(required(props.src, 'src'))}
337
- alt={required(props.alt, 'alt')}
338
- style={{
339
- border: 'solid 1px #999999',
340
- marginTop: '15px',
341
- maxWidth: 'min(100%, 525px)',
342
- maxHeight: '300px',
343
- }}
344
- />
342
+ <ScreenshotImage src={withPrefix(required(props.src, 'src'))} alt={required(props.alt, 'alt')} />
343
</div>
344
)
src/mdx/nav-hierarchy.js
+1
-1
@@ -12,7 +12,7 @@ const HierarchyItem = ({item, depth, ...props}) => {
12
<Link as={GatsbyLink} key={item.title} to={item.url}>
13
{item.title}
14
</Link>
15
- {item.description ? <Box style={{fontSize: '0.85em', marginBottom: '0.5em'}}>{item.description}</Box> : null}
15
+ {item.description ? <Box sx={{fontSize: '0.85em', marginBottom: '0.5em'}}>{item.description}</Box> : null}
16
{hierarchy ? <Hierarchy items={hierarchy} depth={depth + 1} {...props} /> : null}
17
</Box>
18
)
src/page.js
+6
-5
@@ -1,17 +1,18 @@
1
import React from 'react'
2
-import {BaseStyles} from '@primer/react'
2
+import {BaseStyles, themeGet} from '@primer/react'
3
import {createGlobalStyle} from 'styled-components'
4
import {SkipLink} from './mdx'
5
6
-const GlobalStyle = createGlobalStyle`
7
- ::placeholder {
8
- color: #dddddd;
6
+const GlobalStyles = createGlobalStyle`
7
+ body {
8
+ color: ${themeGet('colors.fg.default')};
9
+ background-color: ${themeGet('colors.canvas.default')};
10
}
11
`
12
13
const PageElement = ({element}) => (
14
<BaseStyles>
14
- <GlobalStyle />
15
+ <GlobalStyles />
16
<SkipLink />
17
{element}
18
</BaseStyles>
src/root.js
+16
-2
@@ -1,7 +1,21 @@
1
import React from 'react'
2
import {MDXProvider} from '@mdx-js/react'
3
-import {SSRProvider, ThemeProvider} from '@primer/react'
3
+import {SSRProvider, ThemeProvider, theme} from '@primer/react'
4
+import deepmerge from 'deepmerge'
5
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
+ },
18
+})
19
20
const components = {
21
a: Components.Link,
@@ -33,7 +47,7 @@ const components = {
47
const RootElement = ({element}) => (
48
<SSRProvider>
49
<MDXProvider components={components}>
36
- <ThemeProvider>{element}</ThemeProvider>
50
+ <ThemeProvider theme={npmTheme}>{element}</ThemeProvider>
51
</MDXProvider>
52
</SSRProvider>
53
)