From abd04749786bf68b03ba42b14b429958b0a85e71 Mon Sep 17 00:00:00 2001
From: Mateusz Filipowicz <matfilipowicz@gmail.com>
Date: Sat, 6 Jun 2020 13:09:30 +0200
Subject: [PATCH] feat: :lipstick: redesign theming to make components easily
 customizable

---
 src/components/{gitlab => git}/index.js    |  20 ++-
 src/components/header/index.js             |   4 +-
 src/components/header/logo.js              |   2 +-
 src/components/index.js                    |   1 -
 src/components/layout.js                   |   1 +
 src/components/mdxComponents/anchor.js     |   4 +-
 src/components/mdxComponents/codeBlock.js  |   4 +-
 src/components/mdxComponents/highlights.js |  27 ++-
 src/components/mdxComponents/icon.js       |   2 +-
 src/components/mdxComponents/index.js      |   6 +-
 src/components/mdxComponents/jargon.js     |   7 +-
 src/components/nextPrevious/index.js       |  22 +--
 src/components/scrollTop/index.js          |   6 +-
 src/components/sidebar/contentTreeGroup.js |   2 +-
 src/components/sidebar/contentTreeNode.js  |   8 +-
 src/components/sidebar/index.js            |  36 ++--
 src/components/sidebar/poweredBy.js        |   2 +-
 src/components/tableOfContents/index.js    |  14 +-
 src/components/themeProvider.js            |   2 +-
 src/styles/base.js                         |  85 +++++++++-
 src/styles/main.scss                       | 134 +--------------
 src/templates/docs.js                      |  63 +++----
 src/theme/defaultColors.js                 |   2 -
 src/theme/index.js                         | 184 +++++++++++++++++++++
 src/theme/main.js                          |  87 ----------
 25 files changed, 388 insertions(+), 337 deletions(-)
 rename src/components/{gitlab => git}/index.js (77%)
 create mode 100644 src/theme/index.js
 delete mode 100644 src/theme/main.js

diff --git a/src/components/gitlab/index.js b/src/components/git/index.js
similarity index 77%
rename from src/components/gitlab/index.js
rename to src/components/git/index.js
index 4caca47e..b64b12eb 100644
--- a/src/components/gitlab/index.js
+++ b/src/components/git/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-case-declarations */
 import React from 'react';
 import { Link } from '$components';
 import 'css';
@@ -15,16 +16,15 @@ const Edit = styled('div')`
     min-width: 175px;
     outline: none;
     transition: ${(props) => props.theme.transitions.hover};
-    border: 1px solid ${(props) => props.theme.colors.border};
+    border: 1px solid ${(props) => props.theme.editOnRepo.border};
     border-radius: 4px;
-    color: ${(props) => props.theme.colors.color};
-    background-color: ${(props) => props.theme.colors.white};
+    color: ${(props) => props.theme.editOnRepo.font.base};
+    background-color: ${(props) => props.theme.editOnRepo.background};
     height: 30px;
     padding: 5px 16px;
     &:hover {
-      background-color: ${(props) => props.theme.colors.primary};
-      border-color: ${(props) => props.theme.colors.primaryDark};
-      color: ${(props) => props.theme.colors.border};
+      background-color: ${(props) => props.theme.editOnRepo.hover};
+      color: ${(props) => props.theme.editOnRepo.font.hover};
     }
   }
 `;
@@ -52,6 +52,8 @@ const EditButton = styled(({ className, icon, link, text }) => {
   }
 `;
 
+const rootDir = 'content';
+
 const EditOnRepo = ({ repoType, branch, location, path }) => {
   let icon = null;
   let link = `${location}/${path}`;
@@ -64,17 +66,17 @@ const EditOnRepo = ({ repoType, branch, location, path }) => {
       const host = splitted[2];
       // it does not support contexts
       const repo = splitted.slice(3).join('/');
-      link = `${protocol}//${host}/-/ide/project/${repo}/blob/${branch}/-/${path}`;
+      link = `${protocol}//${host}/-/ide/project/${repo}/blob/${branch}/-/${rootDir}/${path}`;
       text += 'GitLab';
       break;
     case 'github':
       icon = require('images/github.svg');
-      link = `${location}/edit/${branch}/${path}`;
+      link = `${location}/edit/${branch}/${rootDir}/${path}`;
       text += 'Github';
       break;
     case 'bitbucket':
       icon = require('images/bitbucket.svg');
-      link = `${location}/src/${branch}/${path}?mode=edit&spa=0&at=${branch}`;
+      link = `${location}/src/${branch}/${rootDir}/${path}?mode=edit&spa=0&at=${branch}`;
       text += 'Bitbucket';
       break;
     default:
diff --git a/src/components/header/index.js b/src/components/header/index.js
index 0bcecf7a..0dfbcdde 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -47,8 +47,8 @@ const Header = styled.header`
   border: 0;
   display: flex;
   align-items: center;
-  box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
-  border-bottom: 1px solid #d4dadf;
+  box-shadow: 0 3px 8px 0 ${(props) => props.theme.header.shadow};
+  border-bottom: 1px solid ${(props) => props.theme.header.border};
   z-index: 100;
   padding: 15px 0;
   position: relative;
diff --git a/src/components/header/logo.js b/src/components/header/logo.js
index 62cf69a9..b70c9576 100644
--- a/src/components/header/logo.js
+++ b/src/components/header/logo.js
@@ -21,7 +21,7 @@ const MobileToggle = styled(({ className }) => (
     <span></span>
   </span>
 ))`
-  border: 1px solid $white;
+  border: 1px solid ${(props) => props.theme.header.border};
   border-radius: 4px;
   width: 36px;
   height: 33px;
diff --git a/src/components/index.js b/src/components/index.js
index 7de47245..40cf1213 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,4 +1,3 @@
-export theme from '../theme/main';
 export mdxComponents from './mdxComponents';
 export ThemeProvider from './themeProvider';
 export Layout from './layout';
diff --git a/src/components/layout.js b/src/components/layout.js
index ecfd630b..ecd30643 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -24,6 +24,7 @@ const Content = styled('main')`
   flex-grow: 1;
   flex-direction: column;
   padding: 50px 70px;
+  background-color: ${(props) => props.theme.content.background};
 
   @media only screen and (max-width: 1023px) {
     padding-right: 0;
diff --git a/src/components/mdxComponents/anchor.js b/src/components/mdxComponents/anchor.js
index 40296260..eda60728 100644
--- a/src/components/mdxComponents/anchor.js
+++ b/src/components/mdxComponents/anchor.js
@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { anchor } from '../../styles/base';
+import { useTheme } from 'emotion-theming';
 
 const AnchorTag = ({ children: link, ...props }) => {
   if (link) {
     return (
-      <a href={props.href} target="_blank" rel="noopener noreferrer">
+      <a href={props.href} css={anchor(useTheme())} target="_blank" rel="noopener noreferrer">
         {link}
       </a>
     );
diff --git a/src/components/mdxComponents/codeBlock.js b/src/components/mdxComponents/codeBlock.js
index 6b8f54a7..9ffdcaa2 100644
--- a/src/components/mdxComponents/codeBlock.js
+++ b/src/components/mdxComponents/codeBlock.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import prismTheme from 'prism-react-renderer/themes/vsDark';
+import theme from 'prism-react-renderer/themes/dracula';
 import Loadable from 'react-loadable';
 import LoadingProvider from './loading';
 
@@ -30,7 +30,7 @@ const CodeBlock = ({ children: exampleCode, ...props }) => {
     return <LoadableComponent code={exampleCode} />;
   } else {
     return (
-      <Highlight {...defaultProps} code={exampleCode} language="javascript" theme={prismTheme}>
+      <Highlight {...defaultProps} code={exampleCode} language="javascript" theme={theme}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre className={className + ' pre'} style={style} p={3}>
             {cleanTokens(tokens).map((line, i) => {
diff --git a/src/components/mdxComponents/highlights.js b/src/components/mdxComponents/highlights.js
index 14ad0541..253226fd 100644
--- a/src/components/mdxComponents/highlights.js
+++ b/src/components/mdxComponents/highlights.js
@@ -28,15 +28,18 @@ const HighlightWrapper = styled(({ className, children }) => (
   border-radius: 4px;
 `;
 
-const Highlight = ({ children, border, background, font, icon, ...props }) => {
+const Highlight = ({ children, color, icon, ...props }) => {
   const theme = useTheme();
-  const borderColor = theme.colors[border];
-  const backgroundColor = theme.colors[background];
-  const fontColor = theme.colors[font || theme.colors.color];
+  const highlightColor = theme.highlights[color];
   return (
-    <HighlightWrapper background={backgroundColor} border={borderColor} font={fontColor} {...props}>
+    <HighlightWrapper
+      background={highlightColor.background}
+      border={highlightColor.border}
+      font={highlightColor.font}
+      {...props}
+    >
       <div css={{ marginRight: '16px', lineHeight: 0 }}>
-        {icon.render({ color: borderColor, size: 24 })}
+        {icon.render({ color: highlightColor.border, size: 24 })}
       </div>
       <div css={skipParagraph}>{children}</div>
     </HighlightWrapper>
@@ -46,30 +49,26 @@ const Highlight = ({ children, border, background, font, icon, ...props }) => {
 export default {
   Note: (props) =>
     Highlight({
-      border: 'orange',
+      color: 'note',
       icon: AlertTriangle,
-      background: 'orangeLight',
       ...props,
     }),
   Warning: (props) =>
     Highlight({
-      border: 'red',
+      color: 'warning',
       icon: AlertOctagon,
-      background: 'redLight',
       ...props,
     }),
   Info: (props) =>
     Highlight({
-      border: 'blue',
+      color: 'info',
       icon: AlertCircle,
-      background: 'blueLight',
       ...props,
     }),
   Tip: (props) =>
     Highlight({
-      border: 'green',
+      color: 'tip',
       icon: AlertCircle,
-      background: 'greenLight',
       ...props,
     }),
 };
diff --git a/src/components/mdxComponents/icon.js b/src/components/mdxComponents/icon.js
index c707e21e..f8e3b937 100644
--- a/src/components/mdxComponents/icon.js
+++ b/src/components/mdxComponents/icon.js
@@ -17,7 +17,7 @@ const Icon = ({ ...props }) => {
 
   const config = {
     size: props.size || 22,
-    color: props.color || theme.colors.color,
+    color: props.color || theme.colors.font,
   };
   const margin = props.margin || '5px';
   return (
diff --git a/src/components/mdxComponents/index.js b/src/components/mdxComponents/index.js
index 946e2b3b..195688ce 100644
--- a/src/components/mdxComponents/index.js
+++ b/src/components/mdxComponents/index.js
@@ -3,11 +3,10 @@ import CodeBlock from './codeBlock';
 import AnchorTag from './anchor';
 import Layout from './layout';
 import Highlights from './highlights';
-import 'css';
 import Icon from './icon';
 import Badge from './badge';
 import Jargon from './jargon';
-import { blockquote } from '../../styles/base';
+import { blockquote, pre, table } from '../../styles/base';
 import { useTheme } from 'emotion-theming';
 
 const idFromHeader = (props) => {
@@ -47,7 +46,8 @@ export default {
   section: (props) => Section(props),
   blockquote: (props) => <blockquote css={blockquote(useTheme())} {...props} />,
   p: (props) => <p className="paragraph" {...props} />,
-  pre: (props) => <pre className="pre" {...props} />,
+  pre: (props) => <pre css={pre(useTheme())} {...props} />,
+  table: (props) => <table css={table(useTheme())} {...props} />,
   em: Jargon,
   code: CodeBlock,
   a: AnchorTag,
diff --git a/src/components/mdxComponents/jargon.js b/src/components/mdxComponents/jargon.js
index 45e04570..3fed67bb 100644
--- a/src/components/mdxComponents/jargon.js
+++ b/src/components/mdxComponents/jargon.js
@@ -20,12 +20,13 @@ const JargonWrapper = styled.em`
       cursor: help;
 
       .jargon-info {
+        color: ${(props) => props.theme.jargon.font};
         display: block;
         position: absolute;
         top: 1.5em;
         left: 0;
-        background: ${(props) => props.theme.colors.grayLightest};
-        border: 1px solid ${(props) => props.theme.colors.grayLight};
+        background: ${(props) => props.theme.jargon.background};
+        border: 1px solid ${(props) => props.theme.jargon.border};
         border-left: 4px solid ${(props) => props.theme.colors.primary};
         padding: 1rem;
         border-radius: 4px;
@@ -33,7 +34,7 @@ const JargonWrapper = styled.em`
         min-width: 300px;
         max-width: 400px;
         z-index: 1;
-        box-shadow: 0 0 4px 2px ${(props) => props.theme.colors.shadow};
+        box-shadow: 0 0 4px 2px ${(props) => props.theme.jargon.shadow};
         span:first-child {
           width: 100%;
           padding-bottom: 10px;
diff --git a/src/components/nextPrevious/index.js b/src/components/nextPrevious/index.js
index 7d70395e..4c0c7e27 100644
--- a/src/components/nextPrevious/index.js
+++ b/src/components/nextPrevious/index.js
@@ -60,7 +60,7 @@ const RightArrow = () => (
 const Arrow = styled(({ className, arrow }) => <div className={className}>{arrow()}</div>)`
   display: block;
   margin: 0;
-  color: rgb(157, 170, 182);
+  color: ${(props) => props.theme.previousNext.font};
   flex: 0 0 auto;
   font-size: 24px;
   transition: color 200ms ease 0s;
@@ -84,7 +84,7 @@ const Label = styled.div`
   display: block;
   margin: 0;
   padding: 0;
-  color: #6e6e6e;
+  color: ${(props) => props.theme.previousNext.fontLabel};
 
   span {
     font-size: 12px;
@@ -147,20 +147,20 @@ const Button = styled(({ className, url, children }) => {
   flex-direction: row;
   align-items: center;
   place-self: stretch;
-  color: rgb(36, 42, 49);
-  background-color: rgb(255, 255, 255);
+  color: ${(props) => props.theme.previousNext.font};
+  background-color: ${(props) => props.theme.previousNext.background};
   border-radius: 4px;
-  border: 1px solid rgb(230, 236, 241);
+  border: 1px solid ${(props) => props.theme.previousNext.border};
   transition: border 200ms ease 0s;
-  box-shadow: rgba(116, 129, 141, 0.1) 0 3px 8px;
+  box-shadow: ${(props) => props.theme.previousNext.shadow} 0 3px 8px;
   text-decoration: none;
 
   &:hover {
-    color: ${(props) => props.theme.colors.blue};
+    color: ${(props) => props.theme.previousNext.hover};
     text-decoration: none;
-    border: 1px solid ${(props) => props.theme.colors.blue};
+    border: 1px solid ${(props) => props.theme.previousNext.hover};
     svg * {
-      color: ${(props) => props.theme.colors.blue};
+      color: ${(props) => props.theme.previousNext.hover};
     }
   }
 `;
@@ -214,8 +214,8 @@ const setArrowNavigation = (previous, next) => {
         navigate(next.url);
       }
     };
-  }, [previous, next])
-}
+  }, [previous, next]);
+};
 
 const nextPrevious = ({ mdx }) => {
   const edges = getNavigationData();
diff --git a/src/components/scrollTop/index.js b/src/components/scrollTop/index.js
index 0c9eecbd..b2985607 100644
--- a/src/components/scrollTop/index.js
+++ b/src/components/scrollTop/index.js
@@ -11,7 +11,7 @@ const ScrollTop = styled(({ className }) => {
     </div>
   );
 })`
-  background-color: ${(props) => props.theme.colors.primary};
+  background-color: ${(props) => props.theme.scrollTop.background};
   width: 35px;
   height: 35px;
   position: fixed;
@@ -30,11 +30,11 @@ const ScrollTop = styled(({ className }) => {
     right: 0;
     bottom: 0;
     path {
-      fill: ${(props) => props.theme.colors.primaryLightest};
+      fill: ${(props) => props.theme.scrollTop.arrow};
     }
   }
   &:hover {
-    background: ${(props) => props.theme.colors.blueDark};
+    background: ${(props) => props.theme.scrollTop.hover};
   }
 `;
 
diff --git a/src/components/sidebar/contentTreeGroup.js b/src/components/sidebar/contentTreeGroup.js
index 7288d5fd..117f078f 100644
--- a/src/components/sidebar/contentTreeGroup.js
+++ b/src/components/sidebar/contentTreeGroup.js
@@ -61,7 +61,7 @@ const ContentTreeGroup = styled(({ className, treeState, title, icon, location,
     letter-spacing: 1.2px;
     text-transform: uppercase;
     position: relative;
-    color: ${(props) => props.theme.navigationSidebar.font.header};
+    color: ${(props) => props.theme.navigationSidebar.font.group};
   }
   > span {
     margin-bottom: 5px;
diff --git a/src/components/sidebar/contentTreeNode.js b/src/components/sidebar/contentTreeNode.js
index 29ee4c42..222d07e3 100644
--- a/src/components/sidebar/contentTreeNode.js
+++ b/src/components/sidebar/contentTreeNode.js
@@ -15,12 +15,12 @@ import emoji from 'node-emoji';
 // let SomeComponent = styled('div')`${dynamicStyle}`
 
 const activeNode = (theme) => css`
-  border: 1px solid ${theme.navigationSidebar.rowActiveBorder};
+  border: 1px solid ${theme.navigationSidebar.row.activeBorder};
   border-right: none;
   > a,
   button {
     padding: 7px 23px 7px 17px;
-    background-color: ${theme.navigationSidebar.rowActive};
+    background-color: ${theme.navigationSidebar.row.active};
     color: ${theme.navigationSidebar.font.active} !important;
   }
 `;
@@ -59,7 +59,7 @@ const NodeContent = styled(({ className, text, link, children }) => (
   &:hover {
     > a,
     > button {
-      background-color: ${(props) => props.theme.navigationSidebar.rowHover};
+      background-color: ${(props) => props.theme.navigationSidebar.row.hover};
     }
   }
 `;
@@ -109,7 +109,7 @@ const NodeCollapseButton = styled(({ className, isCollapsed, collapse }) => {
   }
   &:hover {
     svg path {
-      fill: ${(props) => props.theme.navigationSidebar.collapseHover};
+      fill: ${(props) => props.theme.navigationSidebar.row.collapseHover};
     }
   }
 `;
diff --git a/src/components/sidebar/index.js b/src/components/sidebar/index.js
index 510ec033..42545752 100644
--- a/src/components/sidebar/index.js
+++ b/src/components/sidebar/index.js
@@ -31,7 +31,7 @@ const PoweredByWrapper = styled.div`
   display: block;
   padding: 0;
   position: relative;
-  box-shadow: 0 -7px 10px -5px ${(props) => props.theme.navigationSidebar.backgroundDark};
+  box-shadow: 0 -7px 10px -5px ${(props) => props.theme.navigationSidebar.backgroundPrimary};
 `;
 
 const NavigationWrapper = styled(({ className, children, ...props }) => {
@@ -45,53 +45,53 @@ const NavigationWrapper = styled(({ className, children, ...props }) => {
   top: 0;
   z-index: 15;
   flex: 0 0 ${(props) => props.theme.layout.leftWidth};
-  background: ${(props) => props.theme.navigationSidebar.backgroundDark};
+  background: ${(props) => props.theme.navigationSidebar.backgroundPrimary};
   background: linear-gradient(
-    ${(props) => props.theme.navigationSidebar.backgroundDark},
-    ${(props) => props.theme.navigationSidebar.backgroundLight}
+    ${(props) => props.theme.navigationSidebar.backgroundPrimary},
+    ${(props) => props.theme.navigationSidebar.backgroundSecondary}
   );
   /* Safari 4-5, Chrome 1-9 */
   background: linear-gradient(
-    ${(props) => props.theme.navigationSidebar.backgroundDark},
-    ${(props) => props.theme.navigationSidebar.backgroundLight}
+    ${(props) => props.theme.navigationSidebar.backgroundPrimary},
+    ${(props) => props.theme.navigationSidebar.backgroundSecondary}
   );
   background: -webkit-gradient(
     linear,
     0% 0%,
     0% 100%,
-    from(${(props) => props.theme.navigationSidebar.backgroundDark}),
-    to(${(props) => props.theme.navigationSidebar.backgroundLight})
+    from(${(props) => props.theme.navigationSidebar.backgroundPrimary}),
+    to(${(props) => props.theme.navigationSidebar.backgroundSecondary})
   );
   /* Safari 5.1, Chrome 10+ */
   background: -webkit-linear-gradient(
     top,
-    ${(props) => props.theme.navigationSidebar.backgroundDark},
-    ${(props) => props.theme.navigationSidebar.backgroundLight}
+    ${(props) => props.theme.navigationSidebar.backgroundPrimary},
+    ${(props) => props.theme.navigationSidebar.backgroundSecondary}
   );
   /* Firefox 3.6+ */
   background: -moz-linear-gradient(
     top,
-    ${(props) => props.theme.navigationSidebar.backgroundDark},
-    ${(props) => props.theme.navigationSidebar.backgroundLight}
+    ${(props) => props.theme.navigationSidebar.backgroundPrimary},
+    ${(props) => props.theme.navigationSidebar.backgroundSecondary}
   );
   /* IE 10 */
   background: -ms-linear-gradient(
     top,
-    ${(props) => props.theme.navigationSidebar.backgroundDark},
-    ${(props) => props.theme.navigationSidebar.backgroundLight}
+    ${(props) => props.theme.navigationSidebar.backgroundPrimary},
+    ${(props) => props.theme.navigationSidebar.backgroundSecondary}
   );
   /* Opera 11.10+ */
   background: -o-linear-gradient(
     top,
-    ${(props) => props.theme.navigationSidebar.backgroundDark},
-    ${(props) => props.theme.navigationSidebar.backgroundLight}
+    ${(props) => props.theme.navigationSidebar.backgroundPrimary},
+    ${(props) => props.theme.navigationSidebar.backgroundSecondary}
   );
   border-right: 1px solid ${(props) => props.theme.navigationSidebar.border};
   position: sticky;
   @media (max-width: ${(props) => props.theme.breakpoints['small']}) {
     width: 100%;
     height: auto;
-    background: ${(props) => props.theme.navigationSidebar.backgroundDark};
+    background: ${(props) => props.theme.navigationSidebar.backgroundPrimary};
   }
 `;
 
@@ -105,7 +105,7 @@ const Divider = styled((props) => (
     margin: 0;
     padding: 0;
     border: 0;
-    border-bottom: 1px solid #ede7f3;
+    border-bottom: 1px solid ${(props) => props.theme.navigationSidebar.border};
   }
 `;
 const ContentNavigation = ({ className, location }) => {
diff --git a/src/components/sidebar/poweredBy.js b/src/components/sidebar/poweredBy.js
index 53c61a95..81c6c393 100644
--- a/src/components/sidebar/poweredBy.js
+++ b/src/components/sidebar/poweredBy.js
@@ -49,7 +49,7 @@ const PoweredBy = styled(({ className, trademark, name, link }) => (
   border-radius: 4px;
   text-decoration: none;
   background-color: ${(props) => props.theme.navigationSidebar.poweredBy.background};
-  transition: ${(props) => props.theme.transitions.hoverFast2};
+  transition: ${(props) => props.theme.transitions.hoverColor};
   &:hover {
     border: 1px solid ${(props) => props.theme.navigationSidebar.poweredBy.hover};
     margin-top: 11px;
diff --git a/src/components/tableOfContents/index.js b/src/components/tableOfContents/index.js
index 035ed5e1..af91980c 100644
--- a/src/components/tableOfContents/index.js
+++ b/src/components/tableOfContents/index.js
@@ -7,12 +7,12 @@ import Scrollspy from 'react-scrollspy';
 import { sleep } from '../../utils/utils';
 
 const Sidebar = styled.aside`
-  margin-top: 10px;
+  background-color: ${(props) => props.theme.tableOfContents.background};
 
   min-width: 260px;
   height: 100vh;
   overflow: auto;
-  padding: 40px 15px 0 5px;
+  padding: 50px 15px 0 5px;
   position: sticky;
   top: 0;
 
@@ -21,10 +21,6 @@ const Sidebar = styled.aside`
     position: relative;
   }
 
-  > ul {
-    padding-top: 5px;
-  }
-
   li {
     list-style-type: none;
     a {
@@ -36,7 +32,7 @@ const Sidebar = styled.aside`
       text-decoration: none;
       display: block;
       position: relative;
-      border-left: 1px solid rgb(230, 236, 241);
+      border-left: 1px solid ${(props) => props.theme.tableOfContents.border};
       transition: ${(props) => props.theme.transitions.hover};
     }
 
@@ -48,8 +44,9 @@ const Sidebar = styled.aside`
     }
   }
   .currentItem {
-    border-left: 2px solid ${(props) => props.theme.tableOfContents.font.current} !important;
     a {
+      padding-left: 13px !important;
+      border-left: 2px solid ${(props) => props.theme.tableOfContents.font.current} !important;
       color: ${(props) => props.theme.tableOfContents.font.current} !important;
     }
   }
@@ -90,7 +87,6 @@ const TocTitle = styled(({ className }) => {
   letter-spacing: 1.2px;
   padding: 7px 24px 7px 16px;
   border-left: 1px solid ${(props) => props.theme.tableOfContents.border};
-  border-left-color: rgb(230, 236, 241);
   color: ${(props) => props.theme.tableOfContents.font.base};
   display: flex;
   align-items: center;
diff --git a/src/components/themeProvider.js b/src/components/themeProvider.js
index 7f69dce6..960408d3 100644
--- a/src/components/themeProvider.js
+++ b/src/components/themeProvider.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
-import { default as defaultTheme } from '../theme/main';
+import { default as defaultTheme } from '../theme';
 import 'css';
 
 export default function ThemeProvider({ children, theme = {} }) {
diff --git a/src/styles/base.js b/src/styles/base.js
index 1f471283..a0221d69 100644
--- a/src/styles/base.js
+++ b/src/styles/base.js
@@ -40,7 +40,7 @@ export const blockquote = (theme) => css`
   width: 100%;
   margin: 50px auto;
   font-style: italic;
-  color: ${theme.colors.color};
+  color: ${theme.colors.font};
   padding: 14px 30px 14px 75px;
   border-left: 8px solid ${theme.colors.primary};
   line-height: 1.6;
@@ -64,3 +64,86 @@ export const blockquote = (theme) => css`
     margin-top: 1.5em;
   }
 `;
+
+export const pre = (theme) => css`
+  background-color: transparent;
+  border: 0 !important;
+  font-size: 14px;
+  pre.prism-code {
+    margin: 0;
+    padding: 16px;
+    overflow: auto;
+    border-radius: 4px;
+  }
+`;
+
+export const anchor = (theme) => css`
+  transition: color 0.15s;
+  color: ${theme.colors.primary};
+  &:hover {
+    color: ${theme.colors.primaryDark};
+  }
+`;
+
+export const table = (theme) => css`
+  padding: 0;
+  border: 1px solid ${theme.table.border};
+  border-radius: 4px;
+  border-spacing: 0;
+  thead {
+    background-color: ${theme.table.header.background};
+    color: ${theme.table.header.font};
+    tr {
+      font-weight: bold;
+      text-align: left;
+      th:first-child {
+        border-top-left-radius: 4px;
+      }
+      th:last-child {
+        border-top-right-radius: 4px;
+      }
+      th {
+        margin: 0;
+        padding: 6px 13px;
+      }
+    }
+  }
+
+  tbody tr {
+    border-top: 1px solid ${theme.table.primary};
+    margin: 0;
+    padding: 0;
+
+    &:nth-child(even) {
+      background-color: ${theme.table.evenRow};
+    }
+
+    &:nth-child(odd) {
+      background-color: ${theme.table.oddRow};
+    }
+
+    &:last-child {
+      td:first-child {
+        border-bottom-left-radius: 4px;
+      }
+      td:last-child {
+        border-bottom-right-radius: 4px;
+      }
+    }
+
+    td {
+      margin: 0;
+      padding: 6px 13px;
+    }
+  }
+
+  th :first-child,
+  td :first-child {
+    margin-top: 0;
+  }
+
+  th :last-child,
+  td :last-child {
+    margin-bottom: 0;
+  }
+`;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index eb455211..a3e87a28 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -11,31 +11,12 @@
   position: relative;
 }
 
-::-webkit-input-placeholder {
-  /* Edge */
-  color: #C2C2C2;
-}
-
-:-ms-input-placeholder {
-  /* Internet Explorer */
-  color: #C2C2C2;
-}
-
-::placeholder {
-  color: #C2C2C2;
-}
-
 html, body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Roboto Light", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 16px;
   scroll-behavior: smooth;
 }
 
-a {
-  transition: color 0.15s;
-  color: $base-color;
-}
-
 body {
   font-family: 'Roboto';
 }
@@ -67,26 +48,18 @@ a {
   height: 100%;
 }
 
+// TO CHANGE
 .diffNewLine {
   color: #22863a;
   background-color: #f0fff4;
 }
 
+// TO CHANGE
 .diffRemoveLine {
   color: red;
   background-color: #ffcccc;
 }
 
-.divider {
-  height: 30px;
-  margin: 0 15px;
-  border-right: 1px solid rgba(255, 255, 255, 0.3);
-
-  @include tablet {
-    margin: 0 5px;
-    height: 20px;
-  }
-}
 
 .githubSection {
   display: flex;
@@ -106,79 +79,6 @@ pre {
   background-color: rgb(245, 247, 249);
 }
 
-.mainWrapper {
-  color: rgb(59, 69, 78);
-  max-width: 750px;
-  code {
-    background: #f9f7fb;
-    border: 1px solid #ede7f3;
-    border-radius: 4px;
-    padding: 2px 6px;
-    font-size: 0.9375em;
-  }
-  ul, ol {
-    -webkit-padding-start: 40px;
-    -moz-padding-start: 40px;
-    -o-padding-start: 40px;
-    margin: 24px 0px;
-    padding: 0px 0px 0px 2em;
-  }
-
-  ul li, ol li {
-    font-size: 16px;
-    line-height: 1.8;
-    font-weight: 400;
-  }
-}
-
-
-.addPaddTopBottom {
-  padding: 50px 0;
-}
-
-
-/* tables.css */
-
-table {
-  padding: 0;
-
-  tr {
-    border-top: 1px solid #cccccc;
-    background-color: white;
-    margin: 0;
-    padding: 0;
-
-    &:nth-child(2n) {
-      background-color: #f8f8f8;
-    }
-
-    th {
-      font-weight: bold;
-      border: 1px solid #cccccc;
-      text-align: left;
-      margin: 0;
-      padding: 6px 13px;
-    }
-
-    td {
-      border: 1px solid #cccccc;
-      text-align: left;
-      margin: 0;
-      padding: 6px 13px;
-    }
-
-    th :first-child, td :first-child {
-      margin-top: 0;
-    }
-
-    th :last-child, td :last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-/* end - tables.css */
-
 /* Image styling */
 
 img {
@@ -285,24 +185,12 @@ img {
   line-height: 1.625;
 }
 
-.pre {
-  font-size: 14px;
-  margin: 0;
-  padding: 16px;
-  overflow: auto;
-  border-radius: 4px;
-}
-
-.poweredBy {
-  font-size: 0.6em;
-  text-align: end;
-  padding: 0;
-}
 @media (max-width: $breakpoint-medium) {
   .hiddenTablet {
     display: none !important;
   }
 }
+
 @media (max-width: ($breakpoint-small - 1)) {
   .responsive {
     margin-top: 15px;
@@ -328,19 +216,6 @@ img {
     margin-bottom: 0;
   }
 
-  .mainWrapper {
-    padding: 0 15px;
-  }
-
-  .nextPreviousWrapper {
-    display: block;
-    padding: 0 15px;
-  }
-
-  .previousBtn {
-    margin-bottom: 20px;
-  }
-
   .mobileView {
     text-align: left !important;
     padding-left: 0 !important;
@@ -354,6 +229,3 @@ img {
 .hidden {
   display: none;
 }
-//*:hover {
-//  @include hover-transition;
-//}
diff --git a/src/templates/docs.js b/src/templates/docs.js
index 26af5ca6..3e514bae 100644
--- a/src/templates/docs.js
+++ b/src/templates/docs.js
@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 import { Layout } from '$components';
 import NextPrevious from '$components/nextPrevious';
 import config from 'config';
-import EditOnRepo from '$components/gitlab';
+import EditOnRepo from '$components/git';
 import emoji from 'node-emoji';
 
 const Title = styled.h1`
@@ -24,8 +24,9 @@ const PageTitle = styled.div`
   flex-flow: wrap;
   align-items: center;
   padding-bottom: 30px;
-  border-bottom: 1px solid rgb(230, 236, 241);
+  border-bottom: 1px solid ${(props) => props.theme.content.border};
   margin-bottom: 20px;
+  color: ${(props) => props.theme.content.titleFont};
   @media (max-width: ${(props) => props.theme.breakpoints['small']}) {
     padding: 0 15px;
     display: block;
@@ -41,14 +42,14 @@ const TitleWrapper = styled.div`
 `;
 
 const ContentWrapper = styled.div`
-  color: ${(props) => props.theme.colors.color};
-  // max-width: 750px;
+  color: ${(props) => props.theme.content.font};
   code {
-    background: #f9f7fb;
-    border: 1px solid #ede7f3;
+    background: ${(props) => props.theme.content.code.background};
+    border: 1px solid ${(props) => props.theme.content.code.border};
     border-radius: 4px;
     padding: 2px 6px;
     font-size: 0.9375em;
+    color: ${(props) => props.theme.content.code.font};
   }
   ul,
   ol {
@@ -134,41 +135,41 @@ export default class MDXRuntimeTest extends React.Component {
                 branch={gitBranch.name}
                 path={mdx.parent.relativePath}
                 repoType={docsLocationType}
-                text="Edit on GitLab"
               />
             ) : (
               ''
             )}
           </TitleWrapper>
-          {(config.features.showMetadata === true && mdx.frontmatter.showMetadata !== false) 
-            || mdx.frontmatter.showMetadata === true ? (  
-              <div css={{ display: 'block' }}>
-                {mdx.parent.fields ? (
-                  <LastUpdated
-                    time={mdx.parent.fields.gitLogLatestDate}
-                    name={mdx.parent.fields.gitLogLatestAuthorName}
-                    email={mdx.parent.fields.gitLogLatestAuthorEmail}
-                  />
-                ) : (
-                  ''
-                )}
-                <ReadingTime time={mdx.timeToRead * 2} />
-              </div>
-            ) : (
-              ''
+          {(config.features.showMetadata === true && mdx.frontmatter.showMetadata !== false) ||
+          mdx.frontmatter.showMetadata === true ? (
+            <div css={{ display: 'block' }}>
+              {mdx.parent.fields ? (
+                <LastUpdated
+                  time={mdx.parent.fields.gitLogLatestDate}
+                  name={mdx.parent.fields.gitLogLatestAuthorName}
+                  email={mdx.parent.fields.gitLogLatestAuthorEmail}
+                />
+              ) : (
+                ''
+              )}
+              <ReadingTime time={mdx.timeToRead * 2} />
+            </div>
+          ) : (
+            ''
           )}
         </PageTitle>
         <ContentWrapper>
           <MDXRenderer>{mdx.body}</MDXRenderer>
         </ContentWrapper>
-        {(config.features.previousNext.enabled === true && mdx.frontmatter.showPreviousNext !== false) ||
-            mdx.frontmatter.showPreviousNext ? (
-              <div css={{ padding: '50px 0' }}>
-                <NextPrevious mdx={mdx} />
-              </div>
-            ) : (
-              ''
-            )}
+        {(config.features.previousNext.enabled === true &&
+          mdx.frontmatter.showPreviousNext !== false) ||
+        mdx.frontmatter.showPreviousNext ? (
+          <div css={{ padding: '50px 0' }}>
+            <NextPrevious mdx={mdx} />
+          </div>
+        ) : (
+          ''
+        )}
       </Layout>
     );
   }
diff --git a/src/theme/defaultColors.js b/src/theme/defaultColors.js
index 819c9b09..c6f68ab5 100644
--- a/src/theme/defaultColors.js
+++ b/src/theme/defaultColors.js
@@ -11,12 +11,10 @@ const colors = {
   yellow: '#FFC72C',
   orange: '#ED8B00',
   orangeLight: '#FBE9D0',
-  cyan: '#00E5EF',
   white: '#FFFFFF',
   black: '#000000',
   gray: '#5C6975',
   grayLight: '#AEAEAE',
-  grayLightest: '#DEDEDE',
   grayDark: '#3B4656',
 };
 
diff --git a/src/theme/index.js b/src/theme/index.js
new file mode 100644
index 00000000..7706aea3
--- /dev/null
+++ b/src/theme/index.js
@@ -0,0 +1,184 @@
+import defaultColors from './defaultColors';
+import colorfn from 'color';
+
+const increaseIntensivity = (color, factor) => {
+  const clr = colorfn(color);
+  const intensified = clr.isDark() ? clr.darken(factor) : clr.lighten(factor);
+  return intensified.hex();
+};
+
+const decreaseIntensivity = (color, factor) => {
+  const clr = colorfn(color);
+  const intensified = clr.isDark() ? clr.lighten(factor) : clr.darken(factor);
+  return intensified.hex();
+};
+
+const colors = {
+  ...defaultColors,
+
+  primary: defaultColors.blue,
+  primaryDark: defaultColors.blueDark,
+  font: '#333334',
+  fontDark: '#121213',
+  background: '#F5F7F9',
+  mainBackground: '#fefefe',
+  border: '#DBDDDF',
+  hover: defaultColors.blue,
+  shadow: defaultColors.gray + '33',
+};
+
+const breakpoints = {
+  small: '768px',
+  large: '1024px',
+};
+
+const pageLayout = {
+  leftWidth: '318px',
+  leftMargin: '30px',
+  rightWidth: '',
+  rightMargin: '',
+};
+
+const transitions = {
+  hover: 'all .5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s',
+  hoverFast: 'all .3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s',
+  hoverColor: 'color .5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s',
+};
+
+const header = {
+  background: colors.background,
+  shadow: colors.shadow,
+  font: {
+    base: colors.primary,
+    hover: colorfn(colors.primary).negate().hex(),
+  },
+  border: colors.border,
+};
+
+const navigationSidebar = {
+  backgroundSecondary: colors.background,
+  backgroundPrimary: colors.background,
+  border: colors.border,
+  row: {
+    hover: colors.border,
+    active: colors.white,
+    activeBorder: colors.border,
+    collapseHover: colors.hover,
+  },
+  font: {
+    group: decreaseIntensivity(colors.font, 2),
+    base: colors.font,
+    nested: decreaseIntensivity(colors.font, 2),
+    active: colors.primary,
+    hover: colors.primary,
+  },
+  poweredBy: {
+    font: colors.grayLight,
+    background: colors.border,
+    hover: colors.primary,
+  },
+};
+
+const content = {
+  background: colors.mainBackground,
+  border: colors.border,
+  font: colors.font,
+  titleFont: increaseIntensivity(colors.font, 0.15),
+  code: {
+    border: colors.border,
+    font: colors.fontDark,
+    background: colors.background,
+  },
+};
+
+const editOnRepo = {
+  background: colors.background,
+  border: colors.border,
+  hover: colors.hover,
+  font: {
+    base: colors.font,
+    hover: colorfn(colors.hover).rotate(90).grayscale().hex(),
+  },
+};
+
+const jargon = {
+  background: colors.background,
+  border: colors.border,
+  font: colors.font,
+  shadow: colors.shadow,
+};
+
+const highlights = {
+  note: {
+    border: colors.orange,
+    background: colors.orangeLight,
+    font: colors.font,
+  },
+  warning: {
+    border: colors.red,
+    background: colors.redLight,
+    font: colors.font,
+  },
+  info: {
+    border: colors.blue,
+    background: colors.blueLight,
+    font: colors.font,
+  },
+  tip: {
+    border: colors.green,
+    background: colors.greenLight,
+    font: colors.font,
+  },
+};
+
+const table = {
+  header: {
+    background: colors.primary,
+    font: increaseIntensivity(colorfn(colors.primary).negate().grayscale(), 0.5),
+  },
+  oddRow: colors.mainBackground,
+  evenRow: colors.background,
+  border: colors.border,
+};
+
+const tableOfContents = {
+  background: colors.mainBackground,
+  font: {
+    base: decreaseIntensivity(colors.font, 1.5),
+    hover: colors.primary,
+    current: colors.primary,
+  },
+  border: colors.border,
+};
+
+const previousNext = {
+  background: colors.mainBackground,
+  hover: colors.primary,
+  font: colors.font,
+  fontLabel: decreaseIntensivity(colors.font, 0.45),
+  border: colors.border,
+  shadow: colors.shadow,
+};
+
+const scrollTop = {
+  background: colors.primary,
+  hover: colorfn(colors.primary).darken(0.3).rgb().string(),
+  arrow: colorfn(colors.primary).negate().grayscale().lighten(0.4).rgb().string(),
+};
+
+export default {
+  colors: colors,
+  breakpoints: breakpoints,
+  layout: pageLayout,
+  transitions: transitions,
+  header: header,
+  navigationSidebar: navigationSidebar,
+  content: content,
+  editOnRepo: editOnRepo,
+  jargon: jargon,
+  highlights: highlights,
+  table: table,
+  tableOfContents: tableOfContents,
+  previousNext: previousNext,
+  scrollTop: scrollTop,
+};
diff --git a/src/theme/main.js b/src/theme/main.js
deleted file mode 100644
index 8612fa4a..00000000
--- a/src/theme/main.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import defaultColors from './defaultColors';
-
-const colors = {
-  ...defaultColors,
-
-  primary: defaultColors.blue,
-  primaryLight: '#d2e9ff',
-  primaryLightest: '#e9f4ff',
-  primaryDark: defaultColors.blueDark,
-  color: '#333333',
-  background: '#F5F7F9',
-  backgroundSecondary: '#fafafa',
-  border: '#E6ECF1',
-  hover: defaultColors.blue,
-  hoverLight: 'rgba(205, 223, 245, .6)',
-  hoverDark: 'rgba(205, 223, 245, .9)',
-  shadow: defaultColors.gray + '33',
-};
-
-const transitions = {
-  hover: 'all .5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s',
-  hoverFast: 'all .3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s',
-  hoverFast2: 'color .5s cubic-bezier(0.25, 0.8, 0.25, 1) 0s',
-};
-
-const navigationSidebar = {
-  backgroundDark: colors.background,
-  backgroundLight: colors.background,
-  rowHover: colors.border,
-  rowActive: colors.white,
-  rowActiveBorder: colors.border,
-  collapseHover: colors.hover,
-  border: colors.border,
-  font: {
-    header: '#9DAAB6',
-    base: '#3B454E',
-    nested: '#9DAAB6',
-    active: colors.primary,
-    hover: colors.primary,
-  },
-  poweredBy: {
-    font: colors.grayLight,
-    background: colors.border,
-    hover: colors.primary,
-  },
-};
-
-const header = {
-  background: colors.white,
-  font: {
-    base: colors.primary,
-    hover: colors.orange,
-    title: colors.white,
-  },
-  border: colors.border,
-};
-
-const tableOfContents = {
-  font: {
-    base: colors.gray,
-    hover: colors.blue,
-    current: colors.blue,
-  },
-  border: colors.border,
-};
-
-const breakpoints = {
-  small: '768px',
-  large: '1024px',
-};
-
-const pageLayout = {
-  leftWidth: '318px',
-  leftMargin: '30px',
-  rightWidth: '',
-  rightMargin: '',
-};
-
-export default {
-  colors: colors,
-  navigationSidebar: navigationSidebar,
-  tableOfContents: tableOfContents,
-  header: header,
-  breakpoints: breakpoints,
-  transitions: transitions,
-  layout: pageLayout,
-};