ThemeProvider (#677)

closes #655
2018-06-09 19:10:30 -07:00
parent 0942deec38
commit 434129a434
50 changed files with 277 additions and 324 deletions
--- a/app/components/Actions/Actions.js
+++ b/app/components/Actions/Actions.js
@@ -2,7 +2,6 @@
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import Flex from 'shared/components/Flex';
-import { layout, color } from 'shared/styles/constants';

 export const Action = styled(Flex)`
  justify-content: center;
@@ -10,7 +9,7 @@ export const Action = styled(Flex)`
  padding: 0 0 0 12px;

  a {
-    color: ${color.text};
+    color: ${props => props.theme.text};
    height: 24px;
  }
 `;
@@ -19,7 +18,7 @@ export const Separator = styled.div`
  margin-left: 12px;
  width: 1px;
  height: 20px;
-  background: ${color.slateLight};
+  background: ${props => props.theme.slateLight};
 `;

 const Actions = styled(Flex)`
@@ -38,7 +37,8 @@ const Actions = styled(Flex)`

  ${breakpoint('tablet')`
    left: auto;
-    padding: ${layout.vpadding} ${layout.hpadding} 8px 8px;
+    padding: ${props => props.theme.vpadding} ${props =>
+    props.theme.hpadding} 8px 8px;
  `};
 `;

--- a/app/components/Alert/Alert.js
+++ b/app/components/Alert/Alert.js
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 type Props = {
  children: React.Node,
@@ -31,7 +30,7 @@ const Container = styled(Flex)`
  font-size: 14px;
  line-height: 1;

-  background-color: ${({ type }) => color[type]};
+  background-color: ${({ theme, type }) => theme.color[type]};
 `;

 export default Alert;
--- a/app/components/Avatar/Avatar.js
+++ b/app/components/Avatar/Avatar.js
@@ -3,7 +3,6 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { color } from 'shared/styles/constants';
 import placeholder from './placeholder.png';

 type Props = {
@@ -38,7 +37,7 @@ const CircleImg = styled.img`
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border-radius: 50%;
-  border: 2px solid ${color.white};
+  border: 2px solid ${props => props.theme.white};
  flex-shrink: 0;
 `;

--- a/app/components/Button/Button.js
+++ b/app/components/Button/Button.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
 import { darken } from 'polished';

 const RealButton = styled.button`
@@ -9,8 +8,8 @@ const RealButton = styled.button`
  margin: 0;
  padding: 0;
  border: 0;
-  background: ${color.primary};
-  color: ${color.white};
+  background: ${props => props.theme.primary};
+  color: ${props => props.theme.white};
  border-radius: 4px;
  font-size: 15px;
  height: 36px;
@@ -24,7 +23,7 @@ const RealButton = styled.button`
    border: 0;
  }
  &:hover {
-    background: ${darken(0.05, color.primary)};
+    background: ${props => darken(0.05, props.theme.primary)};
  }

  svg {
@@ -40,30 +39,30 @@ const RealButton = styled.button`
  ${props =>
    props.light &&
    `
-    color: ${color.slate};
+    color: ${props.theme.slate};
    background: transparent;
-    border: 1px solid ${color.slate};
+    border: 1px solid ${props.theme.slate};

    &:hover {
      background: transparent;
-      color: ${color.slateDark};
-      border: 1px solid ${color.slateDark};
+      color: ${props.theme.slateDark};
+      border: 1px solid ${props.theme.slateDark};
    }
  `} ${props =>
      props.neutral &&
      `
-    background: ${color.slate};
+    background: ${props.theme.slate};

    &:hover {
-      background: ${darken(0.05, color.slate)};
+      background: ${darken(0.05, props.theme.slate)};
    }
  `} ${props =>
      props.danger &&
      `
-    background: ${color.danger};
+    background: ${props.theme.danger};

    &:hover {
-      background: ${darken(0.05, color.danger)};
+      background: ${darken(0.05, props.theme.danger)};
    }
  `};
 `;
--- a/app/components/ColorPicker/ColorPicker.js
+++ b/app/components/ColorPicker/ColorPicker.js
@@ -5,7 +5,6 @@ import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
 import { LabelText, Outline } from 'components/Input';
-import { color, fonts, fontWeight } from 'shared/styles/constants';
 import { validateColorHex } from 'shared/utils/color';

 const colors = [
@@ -165,7 +164,7 @@ const StyledOutline = styled(Outline)`
 const HexHash = styled.div`
  margin-left: 12px;
  padding-bottom: 0;
-  font-weight: ${fontWeight.medium};
+  font-weight: 500;
  user-select: none;
 `;

@@ -177,13 +176,13 @@ const CustomColorInput = styled.input`
  padding-bottom: 0;
  outline: none;
  background: none;
-  font-family: ${fonts.monospace};
-  font-weight: ${fontWeight.medium};
+  font-family: ${props => props.theme.monospaceFontFamily};
+  font-weight: 500;

  &::placeholder {
-    color: ${color.slate};
-    font-family: ${fonts.monospace};
-    font-weight: ${fontWeight.medium};
+    color: ${props => props.theme.slate};
+    font-family: ${props => props.theme.monospaceFontFamily};
+    font-weight: 500;
  }
 `;

--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/app/components/DocumentPreview/DocumentPreview.js
@@ -3,8 +3,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import Document from 'models/Document';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
+import styled, { withTheme } from 'styled-components';
 import Flex from 'shared/components/Flex';
 import Highlight from 'components/Highlight';
 import { StarredIcon } from 'outline-icons';
@@ -15,11 +14,11 @@ type Props = {
  document: Document,
  highlight?: ?string,
  showCollection?: boolean,
-  innerRef?: Function,
+  innerRef?: *,
 };

-const StyledStar = styled(({ solid, ...props }) => (
-  <StarredIcon color={solid ? color.black : color.text} {...props} />
+const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
+  <StarredIcon color={solid ? theme.black : theme.text} {...props} />
 ))`
  opacity: ${props => (props.solid ? '1 !important' : 0)};
  transition: all 100ms ease-in-out;
@@ -30,7 +29,7 @@ const StyledStar = styled(({ solid, ...props }) => (
  &:active {
    transform: scale(0.95);
  }
-`;
+`);

 const StyledDocumentMenu = styled(DocumentMenu)`
  position: absolute;
@@ -57,8 +56,8 @@ const DocumentLink = styled(Link)`
  &:hover,
  &:active,
  &:focus {
-    background: ${color.smokeLight};
-    border: 2px solid ${color.smoke};
+    background: ${props => props.theme.smokeLight};
+    border: 2px solid ${props => props.theme.smoke};
    outline: none;

    ${StyledStar}, ${StyledDocumentMenu} {
@@ -71,7 +70,7 @@ const DocumentLink = styled(Link)`
  }

  &:focus {
-    border: 2px solid ${color.slateDark};
+    border: 2px solid ${props => props.theme.slateDark};
  }
 `;

--- a/app/components/DocumentPreview/components/PublishingInfo.js
+++ b/app/components/DocumentPreview/components/PublishingInfo.js
@@ -2,18 +2,18 @@
 import * as React from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
 import Flex from 'shared/components/Flex';

 const Container = styled(Flex)`
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
  font-size: 13px;
 `;

 const Modified = styled.span`
-  color: ${props => (props.highlight ? color.slateDark : color.slate)};
+  color: ${props =>
+    props.highlight ? props.theme.slateDark : props.theme.slate};
  font-weight: ${props => (props.highlight ? '600' : '400')};
 `;

--- a/app/components/DropToImport/DropToImport.js
+++ b/app/components/DropToImport/DropToImport.js
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { injectGlobal } from 'styled-components';
-import { color } from 'shared/styles/constants';
 import importFile from 'utils/importFile';
 import invariant from 'invariant';
 import _ from 'lodash';
@@ -25,12 +24,12 @@ type Props = {
 // eslint-disable-next-line
 injectGlobal`
  .activeDropZone {
-    background: ${color.slateDark};
-    svg { fill: ${color.white}; }
+    background: ${props => props.theme.slateDark};
+    svg { fill: ${props => props.theme.white}; }
  }

  .activeDropZone a {
-    color: ${color.white} !important;
+    color: ${props => props.theme.white} !important;
  }
 `;

--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -6,7 +6,6 @@ import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import { PortalWithState } from 'react-portal';
 import Flex from 'shared/components/Flex';
-import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';

 type Props = {
@@ -90,8 +89,8 @@ const Menu = styled.div`
  right: ${({ right }) => right}px;
  top: ${({ top }) => top}px;
  z-index: 1000;
-  border: ${color.slateLight};
-  background: ${color.white};
+  border: ${props => props.theme.slateLight};
+  background: ${props => props.theme.white};
  border-radius: 2px;
  padding: 0.5em 0;
  min-width: 160px;
--- a/app/components/DropdownMenu/DropdownMenuItem.js
+++ b/app/components/DropdownMenu/DropdownMenuItem.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 type Props = {
  onClick?: (SyntheticEvent<*>) => *,
@@ -22,7 +21,7 @@ const MenuItem = styled.a`
  padding: 6px 12px;
  height: 32px;

-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
  justify-content: left;
  align-items: center;
  cursor: pointer;
@@ -33,11 +32,11 @@ const MenuItem = styled.a`
  }

  &:hover {
-    color: ${color.white};
-    background: ${color.primary};
+    color: ${props => props.theme.white};
+    background: ${props => props.theme.primary};

    svg {
-      fill: ${color.white};
+      fill: ${props => props.theme.white};
    }
  }
 `;
--- a/app/components/Empty/Empty.js
+++ b/app/components/Empty/Empty.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 type Props = {
  children: string,
@@ -14,7 +13,7 @@ const Empty = (props: Props) => {

 const Container = styled.div`
  display: flex;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
  text-align: center;
 `;

--- a/app/components/HelpText/HelpText.js
+++ b/app/components/HelpText/HelpText.js
@@ -1,10 +1,9 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 const HelpText = styled.p`
  margin-top: 0;
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
 `;

 export default HelpText;
--- a/app/components/Highlight/Highlight.js
+++ b/app/components/Highlight/Highlight.js
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import replace from 'string-replace-to-array';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 type Props = {
  highlight: ?string,
@@ -28,7 +27,7 @@ function Highlight({ highlight, caseSensitive, text, ...rest }: Props) {
 }

 const Mark = styled.mark`
-  background: ${color.yellow};
+  background: ${props => props.theme.yellow};
 `;

 export default Highlight;
--- a/app/components/Input/Input.js
+++ b/app/components/Input/Input.js
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
-import { size, color } from 'shared/styles/constants';

 const RealTextarea = styled.textarea`
  border: 0;
@@ -13,7 +12,7 @@ const RealTextarea = styled.textarea`

  &:disabled,
  &::placeholder {
-    color: ${color.slate};
+    color: ${props => props.theme.slate};
  }
 `;

@@ -26,7 +25,7 @@ const RealInput = styled.input`

  &:disabled,
  &::placeholder {
-    color: ${color.slate};
+    color: ${props => props.theme.slate};
  }
 `;

@@ -37,16 +36,16 @@ const Wrapper = styled.div`
 export const Outline = styled(Flex)`
  display: flex;
  flex: 1;
-  margin: 0 0 ${size.large};
+  margin: 0 0 16px;
  color: inherit;
  border-width: 1px;
  border-style: solid;
-  border-color: ${props => (props.hasError ? 'red' : color.slateLight)};
+  border-color: ${props => (props.hasError ? 'red' : props.theme.slateLight)};
  border-radius: 4px;
  font-weight: normal;

  &:focus {
-    border-color: ${color.slate};
+    border-color: ${props => props.theme.slate};
  }
 `;

--- a/app/components/Key/key.js
+++ b/app/components/Key/key.js
@@ -1,6 +1,5 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 const Key = styled.kbd`
  display: inline-block;
@@ -8,13 +7,13 @@ const Key = styled.kbd`
  font: 11px 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
    monospace;
  line-height: 10px;
-  color: ${color.text};
+  color: ${props => props.theme.text};
  vertical-align: middle;
-  background-color: ${color.smokeLight};
-  border: solid 1px ${color.slateLight};
-  border-bottom-color: ${color.slate};
+  background-color: ${props => props.theme.smokeLight};
+  border: solid 1px ${props => props.theme.slateLight};
+  border-bottom-color: ${props => props.theme.slate};
  border-radius: 3px;
-  box-shadow: inset 0 -1px 0 ${color.slate};
+  box-shadow: inset 0 -1px 0 ${props => props.theme.slate};
 `;

 export default Key;
--- a/app/components/Labeled/Labeled.js
+++ b/app/components/Labeled/Labeled.js
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
-import { size } from 'shared/styles/constants';

 type Props = {
  label: React.Node | string,
@@ -18,7 +17,7 @@ const Labeled = ({ label, children, ...props }: Props) => (
 );

 export const Label = styled(Flex)`
-  margin-bottom: ${size.medium};
+  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
--- a/app/components/Layout/Layout.js
+++ b/app/components/Layout/Layout.js
@@ -9,7 +9,6 @@ import { observer, inject } from 'mobx-react';
 import keydown from 'react-keydown';
 import Analytics from 'shared/components/Analytics';
 import Flex from 'shared/components/Flex';
-import { layout } from 'shared/styles/constants';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';

 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
@@ -133,7 +132,7 @@ const Content = styled(Flex)`
  }

  ${breakpoint('tablet')`
-    margin-left: ${props => (props.editMode ? 0 : layout.sidebarWidth)};
+    margin-left: ${props => (props.editMode ? 0 : props.theme.sidebarWidth)};
  `};
 `;

--- a/app/components/List/Item.js
+++ b/app/components/List/Item.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { color, fontSize } from 'shared/styles/constants';

 type Props = {
  image?: React.Node,
@@ -27,7 +26,7 @@ const Wrapper = styled.li`
  display: flex;
  padding: 12px 0;
  margin: 0;
-  border-bottom: 1px solid ${color.smokeDark};
+  border-bottom: 1px solid ${props => props.theme.smokeDark};
 `;

 const Image = styled.div`
@@ -36,7 +35,7 @@ const Image = styled.div`
 `;

 const Heading = styled.h2`
-  font-size: ${fontSize.medium};
+  font-size: 16px;
  margin: 0;
 `;

@@ -46,8 +45,8 @@ const Content = styled.div`

 const Subtitle = styled.p`
  margin: 0;
-  font-size: ${fontSize.small};
-  color: ${color.slate};
+  font-size: 14px;
+  color: ${props => props.theme.slate};
 `;

 const Actions = styled.div`
--- a/app/components/LoadingPlaceholder/components/Mask.js
+++ b/app/components/LoadingPlaceholder/components/Mask.js
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { pulsate } from 'shared/styles/animations';
-import { color } from 'shared/styles/constants';
 import { randomInteger } from 'shared/random';
 import Flex from 'shared/components/Flex';

@@ -26,7 +25,7 @@ const Redacted = styled(Flex)`
  width: ${props => (props.header ? props.width / 2 : props.width)}%;
  height: ${props => (props.header ? 28 : 18)}px;
  margin-bottom: ${props => (props.header ? 18 : 12)}px;
-  background-color: ${color.smokeDark};
+  background-color: ${props => props.theme.smokeDark};
  animation: ${pulsate} 1.3s infinite;

  &:last-child {
--- a/app/components/Modal/Modal.js
+++ b/app/components/Modal/Modal.js
@@ -5,7 +5,6 @@ import styled, { injectGlobal } from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import ReactModal from 'react-modal';
 import { CloseIcon } from 'outline-icons';
-import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';
 import Flex from 'shared/components/Flex';

@@ -84,7 +83,7 @@ const Close = styled.a`
  top: 16px;
  right: 16px;
  opacity: 0.5;
-  color: ${color.text};
+  color: ${props => props.theme.text};

  &:hover {
    opacity: 1;
--- a/app/components/Sidebar/Sidebar.js
+++ b/app/components/Sidebar/Sidebar.js
@@ -7,7 +7,6 @@ import breakpoint from 'styled-components-breakpoint';
 import { observer, inject } from 'mobx-react';
 import { CloseIcon, MenuIcon } from 'outline-icons';
 import Flex from 'shared/components/Flex';
-import { color, layout } from 'shared/styles/constants';

 import AuthStore from 'stores/AuthStore';
 import DocumentsStore from 'stores/DocumentsStore';
@@ -59,9 +58,9 @@ const Container = styled(Flex)`
  position: fixed;
  top: 0;
  bottom: 0;
-  left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
+  left: ${props => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
  width: 100%;
-  background: ${color.smoke};
+  background: ${props => props.theme.smoke};
  transition: left 200ms ease-in-out;
  margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
  z-index: 1;
@@ -72,7 +71,7 @@ const Container = styled(Flex)`
  }

  ${breakpoint('tablet')`
-    width: ${layout.sidebarWidth};
+    width: ${props => props.theme.sidebarWidth};
    margin: 0;
  `};
 `;
--- a/app/components/Sidebar/components/Header.js
+++ b/app/components/Sidebar/components/Header.js
@@ -1,13 +1,12 @@
 // @flow
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
-import { color, fontWeight } from 'shared/styles/constants';

 const Header = styled(Flex)`
  font-size: 11px;
-  font-weight: ${fontWeight.semiBold};
+  font-weight: 600;
  text-transform: uppercase;
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
  letter-spacing: 0.04em;
  margin-bottom: 4px;
 `;
--- a/app/components/Sidebar/components/HeaderBlock.js
+++ b/app/components/Sidebar/components/HeaderBlock.js
@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
-import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
+import styled, { withTheme } from 'styled-components';
 import { ExpandedIcon } from 'outline-icons';
 import Flex from 'shared/components/Flex';
 import TeamLogo from './TeamLogo';
@@ -11,6 +10,7 @@ type Props = {
  subheading: string,
  showDisclosure?: boolean,
  logoUrl: string,
+  theme: Object,
 };

 function HeaderBlock({
@@ -18,6 +18,7 @@ function HeaderBlock({
  teamName,
  subheading,
  logoUrl,
+  theme,
  ...rest
 }: Props) {
  return (
@@ -26,7 +27,7 @@ function HeaderBlock({
      <Flex align="flex-start" column>
        <TeamName showDisclosure>
          {teamName}{' '}
-          {showDisclosure && <StyledExpandedIcon color={color.text} />}
+          {showDisclosure && <StyledExpandedIcon color={theme.text} />}
        </TeamName>
        <Subheading>{subheading}</Subheading>
      </Flex>
@@ -45,7 +46,7 @@ const Subheading = styled.div`
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 500;
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
 `;

 const TeamName = styled.div`
@@ -53,7 +54,7 @@ const TeamName = styled.div`
  padding-left: 10px;
  padding-right: 24px;
  font-weight: 600;
-  color: ${color.text};
+  color: ${props => props.theme.text};
  text-decoration: none;
  font-size: 16px;
 `;
@@ -72,4 +73,4 @@ const Header = styled(Flex)`
  }
 `;

-export default HeaderBlock;
+export default withTheme(HeaderBlock);
--- a/app/components/Sidebar/components/SidebarLink.js
+++ b/app/components/Sidebar/components/SidebarLink.js
@@ -4,15 +4,9 @@ import { observable, action } from 'mobx';
 import { observer } from 'mobx-react';
 import { withRouter, NavLink } from 'react-router-dom';
 import { CollapsedIcon } from 'outline-icons';
-import { color, fontWeight } from 'shared/styles/constants';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import Flex from 'shared/components/Flex';

-const activeStyle = {
-  color: color.black,
-  fontWeight: fontWeight.medium,
-};
-
 const StyledGoTo = styled(CollapsedIcon)`
  margin-bottom: -4px;
  margin-left: 1px;
@@ -34,12 +28,12 @@ const StyledNavLink = styled(NavLink)`
  text-overflow: ellipsis;
  padding: 4px 0;
  margin-left: ${({ icon }) => (icon ? '-20px;' : '0')};
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
  font-size: 15px;
  cursor: pointer;

  &:hover {
-    color: ${color.text};
+    color: ${props => props.theme.text};
  }
 `;

@@ -57,11 +51,22 @@ type Props = {
  hideExpandToggle?: boolean,
  iconColor?: string,
  active?: boolean,
+  theme: Object,
 };

@observer
 class SidebarLink extends React.Component<Props> {
  @observable expanded: boolean = false;
+  activeStyle: Object;
+
+  constructor(props) {
+    super(props);
+
+    this.activeStyle = {
+      color: props.theme.black,
+      fontWeight: 500,
+    };
+  }

  componentDidMount() {
    if (this.props.expand) this.handleExpand();
@@ -104,8 +109,8 @@ class SidebarLink extends React.Component<Props> {
      <Wrapper menuOpen={menuOpen} column>
        <Component
          icon={showExpandIcon}
-          activeStyle={activeStyle}
-          style={active ? activeStyle : undefined}
+          activeStyle={this.activeStyle}
+          style={active ? this.activeStyle : undefined}
          onClick={onClick}
          to={to}
          exact
@@ -128,7 +133,7 @@ const Action = styled.span`
  position: absolute;
  right: 0;
  top: 2px;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
  svg {
    opacity: 0.75;
  }
@@ -158,4 +163,4 @@ const Content = styled.div`
  width: 100%;
 `;

-export default withRouter(SidebarLink);
+export default withRouter(withTheme(SidebarLink));
--- a/app/components/Sidebar/components/TeamLogo.js
+++ b/app/components/Sidebar/components/TeamLogo.js
@@ -1,13 +1,12 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 const TeamLogo = styled.img`
  width: 38px;
  height: 38px;
  border-radius: 4px;
-  background: ${color.white};
-  border: 1px solid ${color.slateLight};
+  background: ${props => props.theme.white};
+  border: 1px solid ${props => props.theme.slateLight};
 `;

 export default TeamLogo;
--- a/app/components/Subheading.js
+++ b/app/components/Subheading.js
@@ -1,14 +1,13 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';

 const Subheading = styled.h3`
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
  letter-spacing: 0.04em;
-  border-bottom: 1px solid ${color.slateLight};
+  border-bottom: 1px solid ${props => props.theme.slateLight};
  padding-bottom: 8px;
  margin-top: 30px;
  margin-bottom: 10px;
--- a/app/components/Toasts/Toasts.js
+++ b/app/components/Toasts/Toasts.js
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
-import { layout } from 'shared/styles/constants';
 import Toast from './components/Toast';
 import UiStore from '../../stores/UiStore';

@@ -34,8 +33,8 @@ class Toasts extends React.Component<Props> {

 const List = styled.ol`
  position: fixed;
-  left: ${layout.hpadding};
-  bottom: ${layout.vpadding};
+  left: ${props => props.theme.hpadding};
+  bottom: ${props => props.theme.vpadding};
  list-style: none;
  margin: 0;
  padding: 0;
--- a/app/components/Toasts/components/Toast.js
+++ b/app/components/Toasts/components/Toast.js
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
-import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';
 import type { Toast as TToast } from '../../../types';

@@ -51,14 +50,14 @@ const Container = styled.li`
  animation: ${fadeAndScaleIn} 100ms ease;
  margin: 8px 0;
  padding: 8px;
-  color: ${color.white};
-  background: ${props => color[props.type]};
+  color: ${props => props.theme.white};
+  background: ${props => props.theme[props.type]};
  font-size: 15px;
  border-radius: 5px;
  cursor: default;

  &:hover {
-    background: ${props => darken(0.05, color[props.type])};
+    background: ${props => darken(0.05, props.theme[props.type])};
  }
 `;