Base Style & Theme Setup

gatsby-config.js

@@ -31,6 +31,7 @@ module.exports = {
     ...metadataNordDocs
   },
   plugins: [
+    "gatsby-plugin-styled-components",
     "gatsby-plugin-react-helmet",
     "gatsby-plugin-catch-links",
     "gatsby-plugin-remove-trailing-slashes",

package.json

@@ -54,6 +54,7 @@
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "babel-plugin-react-remove-properties": "0.2.5",
+    "babel-plugin-styled-components": "1.9.2",
     "babel-plugin-transform-react-remove-prop-types": "0.4.20",
     "babel-preset-gatsby": "0.1.4",
     "del-cli": "1.1.0",
@@ -85,14 +86,19 @@
     "gatsby-plugin-no-sourcemaps": "2.0.1",
     "gatsby-plugin-react-helmet": "3.0.2",
     "gatsby-plugin-remove-trailing-slashes": "2.0.5",
+    "gatsby-plugin-styled-components": "3.0.4",
     "gatsby-source-filesystem": "2.0.9",
     "gatsby-transformer-yaml": "2.1.5",
     "inter-ui": "3.0.0",
     "nord": ">=0.2.1 <1.0.0",
+    "polished": "2.3.1",
     "prop-types": "15.6.2",
     "react": "16.6.3",
     "react-dom": "16.6.3",
     "react-helmet": "5.2.0",
+    "styled-components": "4.1.2",
+    "styled-modern-normalize": ">=0.2.0 <1.0.0",
+    "styled-theming": "2.2.0",
     "typeface-rubik": "0.0.54",
     "typeface-source-code-pro": "0.0.54"
   }

src/components/containers/core/Root/Root.jsx

@@ -9,15 +9,40 @@
 
 import React, { Fragment } from "react";
 import PropTypes from "prop-types";
+import { ThemeProvider, createGlobalStyle } from "styled-components";
+import modernNormalize from "styled-modern-normalize";
+
+import theme, { globals, normalize } from "styles/theme";
+
+import "inter-ui/inter-ui.css";
+import "typeface-rubik/index.css";
+import "typeface-source-code-pro/index.css";
+
+/**
+ * A React component that injects global CSS inline styles in page headers.
+ *
+ * @see https://www.styled-components.com/docs/api#createglobalstyle
+ * @since 0.2.0
+ */
+const GlobalStyle = createGlobalStyle`
+  ${modernNormalize};
+  ${globals};
+  ${normalize};
+`;
 
 /**
- * The root container.
+ * The root container with injected global CSS styles.
  *
  * @author Arctic Ice Studio <[email protected]>
  * @author Sven Greb <[email protected]>
  * @since 0.1.0
  */
-const Root = ({ children }) => <Fragment>{children}</Fragment>;
+const Root = ({ children }) => (
+  <Fragment>
+    <GlobalStyle />
+    <ThemeProvider theme={theme}>{children}</ThemeProvider>
+  </Fragment>
+);
 
 Root.propTypes = {
   children: PropTypes.node.isRequired

src/components/containers/core/Root/index.js

@@ -1 +1,10 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
 export { default } from "./Root";