setup styled components

Author: chasemccoy

gatsby-config.js

@@ -4,9 +4,16 @@ module.exports = {
   siteMetadata: {
     title: `designsystems.dev`,
     siteUrl: `https://designsystems.dev`,
-    description: `Tools and resources for developing design systems.`
+    description: `Tools and resources for developing design systems.`,
   },
   plugins: [
+    'gatsby-plugin-styled-components',
+    {
+      resolve: 'gatsby-plugin-layout',
+      options: {
+        component: require.resolve('./src/components/Layout'),
+      },
+    },
     {
       resolve: `gatsby-source-airtable`,
       options: {
@@ -15,10 +22,10 @@ module.exports = {
           {
             baseId: 'appj22sdZFlI6FzjI',
             tableName: 'Table 1',
-            queryName: 'data'
-          }
-        ]
-      }
-    }
-  ]
+            queryName: 'data',
+          },
+        ],
+      },
+    },
+  ],
 }

package.json

@@ -13,13 +13,20 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
   },
   "dependencies": {
-    "gatsby": "2.13.57",
-    "gatsby-source-airtable": "2.0.8",
-    "gatsby-source-filesystem": "2.1.9",
-    "react": "16.9.0",
-    "react-dom": "16.9.0"
+    "@chasemccoy/kit": "0.7.6",
+    "babel-plugin-styled-components": "1.10.6",
+    "gatsby": "2.15.29",
+    "gatsby-plugin-layout": "1.1.10",
+    "gatsby-plugin-styled-components": "3.1.8",
+    "gatsby-source-airtable": "2.0.9",
+    "gatsby-source-filesystem": "^2.1.29",
+    "react": "16.10.2",
+    "react-dom": "16.10.2",
+    "styled-components": "^4.4.0"
   },
   "devDependencies": {
+    "husky": "3.0.8",
+    "lint-staged": "9.4.1",
     "prettier": "1.18.2"
   },
   "repository": {
@@ -28,5 +35,16 @@
   },
   "bugs": {
     "url": "https://github.com/chasemccoy/designsystems.dev/issues"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "PATH=$PATH lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }

src/components/Layout.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ThemeProvider, createGlobalStyle } from 'styled-components'
+import theme from '../utils/theme'
+import { CSSReset } from '@chasemccoy/kit'
+
+const GlobalStyles = createGlobalStyle`
+  body {
+    font-size: 18px;
+    font-family: ${p => p.theme.fonts.system};
+  }
+`
+
+const Layout = ({ children }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <CSSReset />
+      <GlobalStyles />
+      {children}
+    </ThemeProvider>
+  )
+}
+
+export default Layout

src/utils/theme.js

@@ -0,0 +1,34 @@
+const breakpoints = ['576px', '768px', '1000px', '1300px']
+
+const namedBreakpoints = {
+  tiny: breakpoints[0],
+  small: breakpoints[1],
+  medium: breakpoints[2],
+  large: breakpoints[3],
+}
+
+const space = [0, 4, 8, 12, 16, 24, 32, 40]
+
+const fontWeights = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  heavy: 800,
+}
+
+const fonts = {
+  system: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`,
+  mono: `Menlo, Monaco, OperatorMono-Book, Inconsolata, monospace`,
+}
+
+const theme = {
+  breakpoints,
+  namedBreakpoints,
+  space,
+  fontWeights,
+  fonts,
+}
+
+export default theme