fix: run system props codemod

Author: lukekarrys

theme/src/components/contributors.js

@@ -28,15 +28,14 @@ function Contributors({logins, latestCommit}) {
           {logins.length} {pluralize('contributor', logins.length)}
         </Text>
         {logins.map(login => (
-          <Link key={login} href={`https://github.com/${login}`} lineHeight="condensedUltra" mr={2}>
+          <Link key={login} href={`https://github.com/${login}`} sx={{lineHeight: 'condensedUltra', mr: 2}}>
             {/* eslint-disable-next-line primer-react/a11y-tooltip-interactive-trigger */}
             <Tooltip key={login} aria-label={login}>
               <Avatar src={`https://github.com/${login}.png?size=40`} alt={login} />
             </Tooltip>
           </Link>
         ))}
       </Flex>
-
       {latestCommit ? (
         <Text fontSize={1} color="gray.7" mt={1}>
           Last edited by <Link href={`https://github.com/${latestCommit.login}`}>{latestCommit.login}</Link> on{' '}

theme/src/components/header.js

@@ -23,7 +23,12 @@ function Header({location, repositoryUrl}) {
   const search = useSearch()
 
   const logoStyle = {color: '#cb0000', marginRight: '16px'}
-  const titleStyle = {color: '#dddddd', fontWeight: '600', display: 'flex', alignItems: 'center'}
+  const titleStyle = {
+    color: '#dddddd',
+    fontWeight: '600',
+    display: 'flex',
+    alignItems: 'center',
+  }
 
   return (
     <Box position="sticky" role="banner">
@@ -36,7 +41,7 @@ function Header({location, repositoryUrl}) {
         bg="#333333"
       >
         <Flex alignItems="center">
-          <Link as={GatsbyLink} to="/" style={titleStyle} mr={4}>
+          <Link as={GatsbyLink} to="/" style={titleStyle} sx={{mr: 4}}>
             <NpmLogo size="32" style={logoStyle} />
             {siteMetadata.title}
           </Link>
@@ -62,7 +67,7 @@ function HeaderNavItems({items}) {
   return (
     <Flex alignItems="center" color="gray.2">
       {items.map((item, index) => (
-        <Link key={index} href={item.url} display="block" color="inherit" ml={4}>
+        <Link key={index} href={item.url} sx={{display: 'block', color: 'inherit', ml: 4}}>
           {item.title}
         </Link>
       ))}

theme/src/components/nav-drawer.js

@@ -46,7 +46,7 @@ function NavDrawer({location, repositoryUrl}) {
           <Flex flexDirection="column" flex="1 0 auto" color="gray.7" bg="gray.0">
             <BorderBox borderWidth={0} borderRadius={0} borderBottomWidth={1} borderColor="gray.7">
               <Flex py={3} pl={4} pr={3} alignItems="center" justifyContent="space-between" color="gray.1" bg="gray.9">
-                <Link as={GatsbyLink} to="/" display="inline-block" color="inherit">
+                <Link as={GatsbyLink} to="/" sx={{display: 'inline-block', color: 'inherit'}}>
                   {siteMetadata.title}
                 </Link>
                 <DarkButton aria-label="Close" onClick={setClose}>
@@ -81,7 +81,7 @@ function HeaderNavItems({items}) {
       borderColor="gray.7"
       p={4}
     >
-      <Link key={index} href={item.url} color="inherit" display="block">
+      <Link key={index} href={item.url} sx={{color: 'inherit', display: 'block'}}>
         {item.title}
       </Link>
     </BorderBox>

theme/src/components/nav-items.js

@@ -158,7 +158,7 @@ function NavItems({location, repositoryUrl}) {
     <>
       {topLevelItems(items, path)}
       <BorderBox borderWidth={0} borderTopWidth={1} borderRadius={0} py={5} px={4}>
-        <Link href={repositoryUrl} color="inherit">
+        <Link href={repositoryUrl} sx={{color: 'inherit'}}>
           <Flex justifyContent="space-between" alignItems="center" color="gray.5">
             GitHub
             <StyledOcticon icon={LinkExternalIcon} color="gray.5" />

theme/src/components/table-of-contents.js

@@ -14,7 +14,7 @@ function TableOfContents({items, depth = 0, labelId}) {
     >
       {items.map(item => (
         <Box as="li" role="listitem" key={item.url} pl={depth > 0 ? 3 : 0}>
-          <Link key={item.title} display="inline-block" py={1} href={item.url} color="gray.6">
+          <Link key={item.title} href={item.url} sx={{display: 'inline-block', py: 1, color: 'gray.6'}}>
             {item.title}
           </Link>
           {item.items ? <TableOfContents items={item.items} depth={depth + 1} /> : null}

theme/src/hooks/use-search.js

@@ -107,7 +107,11 @@ function useSearch() {
         case useCombobox.stateChangeTypes.InputBlur:
           if (isMobile) {
             // Don't let a blur event change the state of `inputValue` or `isOpen`.
-            return {...changes, inputValue: state.inputValue, isOpen: state.isOpen}
+            return {
+              ...changes,
+              inputValue: state.inputValue,
+              isOpen: state.isOpen,
+            }
           }
           break
       }

theme/src/mdx/heading.js

@@ -28,7 +28,7 @@ function MarkdownHeading({children, ...props}) {
 
   return (
     <StyledHeading id={id} {...props}>
-      <Link href={`#${id}`} p={2} ml={-32} color="gray.8" aria-label={`${text} permalink`}>
+      <Link href={`#${id}`} sx={{p: 2, ml: -32, color: 'gray.8'}} aria-label={`${text} permalink`}>
         <LinkIcon className="octicon-link" verticalAlign="middle" />
       </Link>
       {children}

theme/src/mdx/prompt.js

@@ -10,7 +10,11 @@ function Prompt({children}) {
       mb={3}
       p={3}
       border={0}
-      style={{color: 'rgb(57, 58, 52)', backgroundColor: 'rgb(246, 248, 250)', overflow: 'auto'}}
+      style={{
+        color: 'rgb(57, 58, 52)',
+        backgroundColor: 'rgb(246, 248, 250)',
+        overflow: 'auto',
+      }}
     >
       <Text fontFamily="mono" fontSize={1}>
         {children}

theme/src/mdx/screenshot.js

@@ -15,7 +15,12 @@ function Screenshot(props) {
       <img
         src={withPrefix(props.src)}
         alt={props.alt}
-        style={{border: 'solid 1px #999999', marginTop: '15px', maxWidth: 'min(100%, 525px)', maxHeight: '300px'}}
+        style={{
+          border: 'solid 1px #999999',
+          marginTop: '15px',
+          maxWidth: 'min(100%, 525px)',
+          maxHeight: '300px',
+        }}
       />
     </div>
   )

theme/src/page-element.js

@@ -9,7 +9,7 @@ const GlobalStyle = createGlobalStyle`
 `
 
 const SkipLinkBase = props => (
-  <Link {...props} backgroundColor="blue.6" color="white" p={3} href="#skip-nav" fontSize={1}>
+  <Link {...props} href="#skip-nav" sx={{backgroundColor: 'blue.6', color: 'white', p: 3, fontSize: 1}}>
     Skip to content
   </Link>
 )