ThemeProvider (#677)

closes #655

app/scenes/Document/components/Actions.js

@@ -2,8 +2,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { NewDocumentIcon } from 'outline-icons';
-
-import { color } from 'shared/styles/constants';
 import Document from 'models/Document';
 import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers';
 
@@ -123,7 +121,7 @@ const Link = styled.a`
   align-items: center;
   font-weight: ${props => (props.highlight ? 500 : 'inherit')};
   color: ${props =>
-    props.highlight ? `${color.primary} !important` : 'inherit'};
+    props.highlight ? `${props.theme.primary} !important` : 'inherit'};
   opacity: ${props => (props.disabled ? 0.5 : 1)};
   pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
   cursor: ${props => (props.disabled ? 'default' : 'pointer')};

app/scenes/Document/components/DocumentMove/DocumentMove.js

@@ -8,7 +8,6 @@ import { Search } from 'js-search';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 import _ from 'lodash';
 import styled from 'styled-components';
-import { size } from 'shared/styles/constants';
 
 import Modal from 'components/Modal';
 import Input from 'components/Input';
@@ -181,7 +180,7 @@ class DocumentMove extends React.Component<Props> {
 }
 
 const Section = styled(Flex)`
-  margin-bottom: ${size.huge};
+  margin-bottom: 24px;
 `;
 
 const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`

app/scenes/Document/components/DocumentMove/components/PathToDocument.js

@@ -4,8 +4,6 @@ import { observer } from 'mobx-react';
 import invariant from 'invariant';
 import styled from 'styled-components';
 import { GoToIcon } from 'outline-icons';
-
-import { color } from 'shared/styles/constants';
 import Flex from 'shared/components/Flex';
 
 import Document from 'models/Document';
@@ -14,7 +12,7 @@ const ResultWrapper = styled.div`
   display: flex;
   margin-bottom: 10px;
 
-  color: ${color.text};
+  color: ${props => props.theme.text};
   cursor: default;
 `;
 
@@ -30,13 +28,13 @@ const ResultWrapperLink = ResultWrapper.withComponent('a').extend`
   &:focus {
     margin-left: 0px;
     border-radius: 2px;
-    background: ${color.black};
-    color: ${color.smokeLight};
+    background: ${props => props.theme.black};
+    color: ${props => props.theme.smokeLight};
     outline: none;
     cursor: pointer;
 
     ${StyledGoToIcon} {
-      fill: ${color.white};
+      fill: ${props => props.theme.white};
     }
   }
 `;

app/scenes/Document/components/LoadingPlaceholder.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 Flex from 'shared/components/Flex';
 import Fade from 'components/Fade';
 
@@ -29,7 +28,7 @@ const LoadingPlaceholder = (props: Object) => {
 const Mask = styled(Flex)`
   height: ${props => (props.header ? 28 : 18)}px;
   margin-bottom: ${props => (props.header ? 32 : 14)}px;
-  background-color: ${color.smoke};
+  background-color: ${props => props.theme.smoke};
   animation: ${pulsate} 1.3s infinite;
 `;