Color swaps
Luke Karrys committed
Oct 16, 2023 at 22:37 UTC
419d38fb8b9f20cbfb667a3b1ce64212397a42be
8 files changed
+36
-35
src/components/breadcrumbs.js
+2
-2
@@ -10,7 +10,7 @@ const BreadcrumbItem = ({item, path}) => {
10
11
return (
12
<PrimerBreadcrumbs.Item as={GatsbyLink} to={href} {...(selected ? {selected} : {})}>
13
- {item.title}
13
+ {item.shortName || item.title}
14
</PrimerBreadcrumbs.Item>
15
)
16
}
@@ -20,7 +20,7 @@ const Breadcrumbs = () => {
20
const path = getNav.getLocation(location.pathname)
21
const items = getNav.getItemBreadcrumbs(location.pathname, {hideVariants: true})
22
23
- if (!items || items.length <= 1) {
23
+ if (items.length <= 1) {
24
return null
25
}
26
src/components/header.js
+1
-1
@@ -66,7 +66,7 @@ function Header() {
66
alignItems: 'center',
67
}}
68
>
69
- <NpmLogo size="32" sx={{mr: '16px'}} />
69
+ <NpmLogo size="32" sx={{display: 'flex', mr: '16px'}} />
70
{siteMetadata.title}
71
</Link>
72
<Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
src/components/hero.js
+2
-2
@@ -8,12 +8,12 @@ function Hero() {
8
9
return (
10
<ThemeProvider colorMode="night" nightScheme="dark_dimmed">
11
- <Box sx={{bg: 'canvas.default', py: 6}}>
11
+ <Box sx={{bg: 'canvas.inset', py: 6}}>
12
<Container>
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}}>
16
+ <Text as="p" sx={{m: 0, color: 'fg.onEmphasis', fontSize: 4}}>
17
{description}
18
</Text>
19
</Container>
src/components/search-results.js
+7
-11
@@ -3,23 +3,19 @@ import {Box, Text} from '@primer/react'
3
import useSiteMetadata from '../hooks/use-site-metadata'
4
import * as getNav from '../util/get-nav'
5
6
-const Breadcrumbs = ({item, highlighted}) => {
6
+const Breadcrumbs = ({item}) => {
7
const siteMetadata = useSiteMetadata()
8
- let hierarchy = getNav.getItemBreadcrumbs(item.path)
8
+ const hierarchy = getNav.getItemBreadcrumbs(item.path).slice(0, -1)
9
10
- if (hierarchy) {
11
- hierarchy = hierarchy.slice(0, -1)
12
- }
13
-
14
- const text = hierarchy && hierarchy.length ? hierarchy.map(s => s.title).join(' / ') : siteMetadata.shortName
10
+ const text = hierarchy.length ? hierarchy.map(s => s.shortName || s.title).join(' / ') : siteMetadata.shortName
11
16
- return <Text sx={{fontSize: 0, color: highlighted ? 'blue.2' : 'gray.7'}}>{text}</Text>
12
+ return <Text sx={{fontSize: 0}}>{text}</Text>
13
}
14
15
function SearchResults({results, getItemProps, highlightedIndex}) {
16
if (results.length === 0) {
17
return (
22
- <Text as="div" sx={{p: 3, fontSize: 1, color: 'gray.7', width: '100%'}}>
18
+ <Text as="div" sx={{px: 3, py: 2, color: 'fg.default', fontSize: 1}}>
19
No results
20
</Text>
21
)
@@ -40,9 +36,9 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
36
bg: highlightedIndex === index ? 'neutral.muted' : 'transparent',
37
cursor: 'pointer',
38
}}
43
- {...getItemProps({item})}
39
+ {...getItemProps({item, index})}
40
>
45
- <Breadcrumbs item={item} highlighted={highlightedIndex === index} />
41
+ <Breadcrumbs item={item} />
42
{item.title}
43
</Box>
44
))
src/components/text-input.js
+1
-1
@@ -11,7 +11,7 @@ const TextInput = styled(PrimerTextInput)`
11
}
12
13
input::placeholder {
14
- color: ${themeGet('colors.fg.muted')} !important;
14
+ color: ${themeGet('colors.fg.default')} !important;
15
}
16
`
17
export default TextInput
src/mdx/index.js
+11
-13
@@ -188,12 +188,6 @@ export const HorizontalRule = styled.hr`
188
border: 0;
189
`
190
191
-export const Image = styled.img`
192
- max-width: 100%;
193
- box-sizing: content-box;
194
- background-color: ${themeGet('colors.white')}; // TODO: this is wrong
195
-`
196
-
191
export const InlineCode = styled.code`
192
padding: 0.2em 0.4em;
193
font-family: ${themeGet('fonts.mono')};
@@ -330,15 +324,19 @@ export const Prompt = ({children}) => (
324
325
export const PromptReply = ({children}) => <strong>{children}</strong>
326
333
-const ScreenshotImage = styled.img`
327
+const RequiredImage = ({src, alt, ...props}) => <img src={required(src, 'src')} alt={required(alt, 'alt')} {...props} />
328
+
329
+export const Image = styled(RequiredImage)`
330
+ max-width: 100%;
331
+ box-sizing: content-box;
332
+`
333
+
334
+const ScreenshotImage = ({src, ...props}) => <RequiredImage src={withPrefix(src)} {...props} />
335
+
336
+export const Screenshot = styled(ScreenshotImage)`
337
margin-top: 15px;
338
max-width: min(100%, 525px);
339
max-height: 300px;
340
border: 1px solid ${themeGet('colors.border.default')};
341
+ display: block;
342
`
339
-
340
-export const Screenshot = props => (
341
- <div>
342
- <ScreenshotImage src={withPrefix(required(props.src, 'src'))} alt={required(props.alt, 'alt')} />
343
- </div>
344
-)
src/root.js
+10
@@ -14,6 +14,16 @@ const npmTheme = deepmerge(theme, {
14
},
15
},
16
},
17
+ dark_dimmed: {
18
+ colors: {
19
+ canvas: {
20
+ default: '#333333',
21
+ },
22
+ fg: {
23
+ default: '#E1E4E8',
24
+ },
25
+ },
26
+ },
27
},
28
})
29
src/util/get-nav.js
+2
-5
@@ -5,7 +5,7 @@ export const getItemBreadcrumbs = (path, props = {}) => {
5
let hierarchy = getItemHierarchy(path)
6
7
if (!hierarchy) {
8
- return null
8
+ return []
9
}
10
11
if (props.hideVariants) {
@@ -14,10 +14,7 @@ export const getItemBreadcrumbs = (path, props = {}) => {
14
hierarchy = hierarchy.filter(item => (vp ? item.shortName !== vp.variant : true))
15
}
16
17
- return hierarchy.map(item => ({
18
- ...item,
19
- title: item.shortName || item.title,
20
- }))
17
+ return hierarchy
18
}
19
20
export const getLocation = path => {