Set up system-components

ins-nishidh-47 · May 19, 2018 · a9f40cf · a9f40cf
1 parent 648d69c
commit a9f40cf
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
     "react-helmet": "5.2.0",
     "rebass": "1.0.4",
     "styled-components": "2.4.0",
-    "styled-system": "1.1.1"
+    "styled-system": "^2.2.5",
+    "system-components": "^2.0.3"
   },
   "devDependencies": {
     "babel-eslint": "8.2.1",

diff --git a/src/components/Container.js b/src/components/Container.js
@@ -1,4 +1,9 @@
-import React from 'react'
-import { Container } from 'rebass'
+import system from 'system-components'
 
-export default props => <Container width={0.85} px={0} {...props} />
+const Container = system({
+  is: 'div',
+  width: 0.85,
+  mx: 'auto',
+})
+
+export default Container
diff --git a/src/globalCss.js b/src/globalCss.js
@@ -0,0 +1,25 @@
+/* eslint-disable no-unused-expressions */
+import { injectGlobal } from 'styled-components'
+import { fonts } from './theme'
+
+injectGlobal`
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  body {
+    box-sizing: border-box;
+    margin: 0;
+    font-family: ${fonts.sans};
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  button::-moz-focus-inner {
+    border: 0;
+  }
+`
diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -1,12 +1,11 @@
-import React from 'react'
 import { func, shape, string } from 'prop-types'
+import React from 'react'
 import Helmet from 'react-helmet'
-import { injectGlobal } from 'styled-components'
-import { Provider } from 'rebass'
-
-import theme from '../theme'
-import Header from '../components/Header'
+import { ThemeProvider } from 'styled-components'
 import Footer from '../components/Footer'
+import Header from '../components/Header'
+import '../globalCss'
+import theme from '../theme'
 
 const propTypes = {
   children: func.isRequired,
@@ -21,33 +20,12 @@ const propTypes = {
   }).isRequired,
 }
 
-/* eslint-disable no-unused-expressions */
-
-injectGlobal`
-  *,
-  *:before,
-  *:after {
-    transition: inherit;
-  }
-
-  body {
-    margin: 0;
-    transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
-  }
-
-  a {
-    text-decoration: none;
-  }
-`
-
-/* eslint-enable no-unused-expressions */
-
 function Template({
   children,
   data: { site: { siteMetadata: { title, description, siteUrl } } },
 }) {
   return (
-    <Provider theme={theme}>
+    <ThemeProvider theme={theme}>
       <div>
         <Helmet>
           <html lang="en" />
@@ -80,7 +58,7 @@ function Template({
         <main>{children()}</main>
         <Footer />
       </div>
-    </Provider>
+    </ThemeProvider>
   )
 }
 

diff --git a/src/theme.js b/src/theme.js
@@ -1,20 +1,34 @@
-const space = [0, 4, 8, 12, 16, 24, 32, 64, 128, 256, 512]
+export const space = [0, 4, 8, 12, 16, 24, 32, 64, 128, 256, 512]
 
-const font =
-  '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+export const fonts = {
+  sans: [
+    'system-ui',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    '"Segoe UI"',
+    '"Roboto"',
+    '"Oxygen"',
+    '"Ubuntu"',
+    '"Cantarell"',
+    '"Fira Sans"',
+    '"Droid Sans"',
+    '"Helvetica Neue"',
+    'sans-serif',
+  ].join(', '),
+}
 
-const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64]
+export const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64]
 
-const weights = [400, 500]
+export const weights = [400, 500]
 
-const lineHeights = {
+export const lineHeights = {
   none: 1,
   tight: 1.25,
   normal: 1.5,
   loose: 2,
 }
 
-const colors = {
+export const colors = {
   base: '#06f',
   black: '#000',
   white: '#fff',
@@ -32,18 +46,18 @@ const colors = {
   gray9: '#393f49',
 }
 
-const shadows = {
+export const shadows = {
   none: 'none',
   small: '0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1)',
   medium: '0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.1)',
   outline: `0 0 0 3px ${colors.base}`,
 }
 
-const radius = 4
+export const radius = 4
 
 export default {
   space,
-  font,
+  fonts,
   fontSizes,
   weights,
   lineHeights,