refactor: migrate header

package.json

@@ -136,7 +136,6 @@
     "mdx-scoped-runtime": "~0.8.0",
     "microsoft-capitalize": "~1.0.5",
     "normalize.css": "~8.0.1",
-    "palx": "~1.0.3",
     "path-browserify": "~1.0.1",
     "polished": "~4.2.2",
     "postcss": "~8.4.32",

src/components/elements/Box.js

@@ -1,21 +1,17 @@
 import {
-  color,
-  space,
-  variant,
   border,
+  color,
+  compose,
+  layout,
   position,
-  layout
+  space,
+  variant
 } from '@techstack/styled-system'
 
 import styled from 'styled-components'
 
 const Box = styled('div')(
-  border,
-  color,
-  layout,
-  position,
-  space,
-  variant({ key: 'button' })
+  compose(border, color, layout, position, space, variant({ key: 'button' }))
 )
 
 export default Box

src/components/elements/Caps.js

@@ -1,13 +1,14 @@
 import styled from 'styled-components'
+import { themeCss } from 'theme'
 
 import Text from './Text'
 
-const Caps = styled(Text)``
-
-Caps.defaultProps = {
-  textTransform: 'uppercase',
-  fontSize: 1,
-  letterSpacing: 2
-}
+const Caps = styled(Text)(
+  themeCss({
+    textTransform: 'uppercase',
+    fontSize: 1,
+    letterSpacing: 2
+  })
+)
 
 export default Caps

src/components/elements/Svg.js

@@ -6,7 +6,7 @@ const transform = system({
   cssProperty: 'transform'
 })
 
-const Svg = styled('svg')(color, space, layout, transform)
+const Svg = styled('svg')(compose(color, space, layout, transform))
 
 Svg.defaultProps = {
   fill: 'currentColor'

src/components/elements/Text.js

@@ -1,21 +1,19 @@
-import { variant, typography } from '@techstack/styled-system'
+import { compose, variant, typography } from '@techstack/styled-system'
+import { themeCss, defaultProps } from 'theme'
 import styled from 'styled-components'
 
 import Box from './Box'
 
-const Text = styled(Box)(typography, variant({ key: 'text' }))
-
-Text.defaultProps = {
-  fontWeight: 'normal',
-  letterSpacing: 0,
-  as: 'div',
-  fontFamily: 'sans',
-  mt: 0,
-  mb: 0,
-  mr: 0,
-  ml: 0,
-  lineHeight: 3,
-  fontSize: [1, 1, 2, 2]
-}
+const Text = styled(Box).attrs(defaultProps({ as: 'div' }))(
+  compose(typography, variant({ key: 'text' })),
+  themeCss({
+    fontWeight: 'normal',
+    letterSpacing: 0,
+    fontFamily: 'sans',
+    m: 0,
+    lineHeight: 3,
+    fontSize: [1, 1, 2, 2]
+  })
+)
 
 export default Text

src/components/elements/Toolbar.js

@@ -1,29 +1,27 @@
+import { defaultProps, layout, themeCss } from 'theme'
 import { hideScrollbar } from 'helpers/style'
 import styled from 'styled-components'
-import { layout } from 'theme'
 import React from 'react'
 
 import Flex from './Flex'
 
 export const TOOLBAR_PRIMARY_HEIGHT = '64px'
 export const TOOLBAR_SECONDARY_HEIGHT = '48px'
 
-const ToolbarBase = styled(Flex)`
-  overflow-x: auto;
-  overflow-y: hidden;
+const ToolbarBase = styled(Flex).attrs(defaultProps({ as: 'nav' }))`
+  ${themeCss({
+    justifyContent: 'center',
+    color: 'black60',
+    mx: 'auto',
+    alignItems: 'center',
+    maxWidth: layout.large,
+    px: 0,
+    'overflow-x': 'auto',
+    'overflow-y': 'hidden'
+  })})}
   ${hideScrollbar};
 `
 
-ToolbarBase.defaultProps = {
-  as: 'nav',
-  justifyContent: 'center',
-  color: 'black60',
-  mx: 'auto',
-  alignItems: 'center',
-  maxWidth: layout.large,
-  px: 0
-}
-
 const secondaryProps = {
   justifyContent: 'center'
 }
@@ -34,8 +32,10 @@ const Toolbar = ({ type = 'primary', ...props }) => {
   return (
     <ToolbarBase
       data-toolbar={type}
-      height={isSecondary ? TOOLBAR_SECONDARY_HEIGHT : TOOLBAR_PRIMARY_HEIGHT}
-      {...(isSecondary ? secondaryProps : {})}
+      css={{
+        height: isSecondary ? TOOLBAR_SECONDARY_HEIGHT : TOOLBAR_PRIMARY_HEIGHT,
+        ...(isSecondary ? secondaryProps : {})
+      }}
       {...props}
     />
   )

src/components/icons/GitHub.js

@@ -5,7 +5,7 @@ export const GitHub = ({ width = 18, ...props }) => (
   <Svg
     width={width}
     height='100%'
-    ariaLabel='github'
+    aria-label='github'
     viewBox='0 0 14 14'
     {...props}
   >

src/components/logos/Microlink.js

@@ -7,8 +7,7 @@ const Microlink = props => {
   return (
     <Image.Component
       alt='microlink logo'
-      width='inherit'
-      height='inherit'
+      css={{ width: 'inherit', height: 'inherit' }}
       src={logoUri}
       {...props}
     />

src/components/patterns/DotsBackground/DotsBackground.js

@@ -1,16 +1,14 @@
 import styled, { css } from 'styled-components'
 import { slide } from 'components/keyframes'
 import { Box } from 'components/elements'
+import { defaultProps } from 'theme'
 import is from 'styled-is'
 
 const darkStyle = css`
   background: #000;
   background-color: #000;
-  background-image: radial-gradient(
-      rgba(215, 215, 215, 0.15) 1px,
-      transparent 0
-    ),
-    radial-gradient(rgba(215, 215, 215, 0.15) 1px, transparent 0);
+  background-image: radial-gradient(rgba(215, 215, 215, 0.3) 1px, transparent 0),
+    radial-gradient(rgba(215, 215, 215, 0.3) 1px, transparent 0);
 `
 
 const lightStyle = css`
@@ -23,9 +21,16 @@ const animateStyle = css`
   animation-direction: reverse;
 `
 
-const Dots = styled(Box)`
-  position: relative;
-  overflow: hidden;
+const Dots = styled(Box)
+  .attrs(defaultProps({ theme: 'light', animate: true }))
+  .withConfig({ shouldForwardProp: prop => !['animate'].includes(prop) })`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  min-height: 100vh;
+  z-index: -1;
 
   &:before {
     content: '';
@@ -42,9 +47,4 @@ const Dots = styled(Box)`
   }
 `
 
-Dots.defaultProps = {
-  theme: 'light',
-  animate: true
-}
-
 export default Dots

src/components/patterns/Layout.js

@@ -6,7 +6,8 @@ import { Box, Flex } from 'components/elements'
 import { useBreakpoint } from 'components/hook'
 import { noop } from 'helpers'
 
-import themeSpec from 'theme'
+import themeSpec, { themeCss } from 'theme'
+
 import 'styles/main.scss'
 
 import {
@@ -50,16 +51,16 @@ const Layout = ({
       <ThemeProvider theme={themeSpec}>
         <Flex
           data-breakpoint={breakpoint}
-          flexDirection='column'
           onClick={onClick}
           style={style}
-          css={`
-            overflow-x: hidden;
-            min-height: 100vh;
-          `}
+          css={themeCss({
+            flexDirection: 'column',
+            'overflow-x': 'hidden',
+            'min-height': '100vh'
+          })}
         >
           <Toolbar as='header' theme={theme} style={style} />
-          {createElement(
+          {/* {createElement(
             component,
             {
               as: 'main',
@@ -71,12 +72,12 @@ const Layout = ({
               style: { flex: 1 }
             },
             children
-          )}
-          {footer && (
+          )} */}
+          {/* {footer && (
             <Box as='footer' className='hidden-print'>
               <Footer theme={theme} {...footer} />
             </Box>
-          )}
+          )} */}
         </Flex>
       </ThemeProvider>
     </BreakpointProvider>

src/components/patterns/Toolbar/NavLink.js

@@ -1,8 +1,7 @@
+import { colors, fontWeights, transition, themeCss } from 'theme'
+import { withLink, withAnalytics } from 'helpers/hoc'
 import styled, { css } from 'styled-components'
-import { colors, fontWeights, transition } from 'theme'
-
 import { Caps } from 'components/elements'
-import { withLink, withAnalytics } from 'helpers/hoc'
 
 const activeStyle = css`
   font-weight: ${fontWeights.bold};
@@ -19,8 +18,12 @@ const style = css`
   }
 `
 
-const NavLink = styled(Caps)(
-  {
+const NavLink = styled(Caps).withConfig({
+  shouldForwardProp: prop => !['isDark'].includes(prop)
+})(
+  themeCss({
+    fontSize: 0,
+    pl: 3,
     display: 'inline-flex',
     alignItems: 'center',
     alignSelf: 'stretch',
@@ -30,15 +33,8 @@ const NavLink = styled(Caps)(
     '&:disabled': {
       opacity: 1 / 4
     }
-  },
+  }),
   style
 )
 
-NavLink.defaultProps = {
-  // TODO: this seems like a bug
-  // https://github.com/The-Code-Monkey/styled-system/issues/640
-  fontSize: [0, 0, 0, 0],
-  pl: 3
-}
-
 export default withAnalytics(withLink(NavLink))