feat: 💄 redesign theming to make components easily customizable

filipowm · Jun 6, 2020 · abd0474 · abd0474
1 parent 4f63846
commit abd0474
Show file tree

Hide file tree

Showing 25 changed files with 388 additions and 337 deletions.
diff --git a/src/components/gitlab/index.js → src/components/git/index.js b/src/components/gitlab/index.js → 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -20,20 +20,21 @@ 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;
  font-size: 90%;
  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
@@ -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
@@ -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
@@ -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
@@ -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};
  }
  }
 `;