ThemeProvider (#677)

closes #655

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;
   `};
 `;
 

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;

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;
 `;
 

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};
+  background: ${props => props.theme.primary};
-  color: ${color.white};
+  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};
+      color: ${props.theme.slateDark};
-      border: 1px solid ${color.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)};
     }
   `};
 `;

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

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 styled, { withTheme } from 'styled-components';
-import { color } from 'shared/styles/constants';
 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 }) => (
+const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
-  <StarredIcon color={solid ? color.black : color.text} {...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};
+    background: ${props => props.theme.smokeLight};
-    border: 2px solid ${color.smoke};
+    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};
   }
 `;
 

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')};
 `;
 

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};
+    background: ${props => props.theme.slateDark};
-    svg { fill: ${color.white}; }
+    svg { fill: ${props => props.theme.white}; }
   }
 
   .activeDropZone a {
-    color: ${color.white} !important;
+    color: ${props => props.theme.white} !important;
   }
 `;
 

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};
+  border: ${props => props.theme.slateLight};
-  background: ${color.white};
+  background: ${props => props.theme.white};
   border-radius: 2px;
   padding: 0.5em 0;
   min-width: 160px;

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};
+    color: ${props => props.theme.white};
-    background: ${color.primary};
+    background: ${props => props.theme.primary};
 
     svg {
-      fill: ${color.white};
+      fill: ${props => props.theme.white};
     }
   }
 `;

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;
 `;
 

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;

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;

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};
   }
 `;
 

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};
+  background-color: ${props => props.theme.smokeLight};
-  border: solid 1px ${color.slateLight};
+  border: solid 1px ${props => props.theme.slateLight};
-  border-bottom-color: ${color.slate};
+  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;

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;

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)};
   `};
 `;
 

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};
+  font-size: 14px;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
 `;
 
 const Actions = styled.div`

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 {

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;

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;
   `};
 `;

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;
 `;

app/components/Sidebar/components/HeaderBlock.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
-import { color } from 'shared/styles/constants';
 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);

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, { withTheme } from 'styled-components';
-import styled 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}
+          activeStyle={this.activeStyle}
-          style={active ? activeStyle : undefined}
+          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));

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};
+  background: ${props => props.theme.white};
-  border: 1px solid ${color.slateLight};
+  border: 1px solid ${props => props.theme.slateLight};
 `;
 
 export default TeamLogo;

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;

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};
+  left: ${props => props.theme.hpadding};
-  bottom: ${layout.vpadding};
+  bottom: ${props => props.theme.vpadding};
   list-style: none;
   margin: 0;
   padding: 0;

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};
+  color: ${props => props.theme.white};
-  background: ${props => color[props.type]};
+  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])};
   }
 `;
 

app/index.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'mobx-react';
+import { ThemeProvider } from 'styled-components';
 import {
   BrowserRouter as Router,
   Switch,
@@ -10,6 +11,7 @@ import {
 } from 'react-router-dom';
 
 import stores from 'stores';
+import theme from 'shared/styles/theme';
 import globalStyles from 'shared/styles/globals';
 import 'shared/styles/prism.css';
 
@@ -55,6 +57,7 @@ if (element) {
   render(
     <React.Fragment>
       <ErrorBoundary>
+        <ThemeProvider theme={theme}>
           <Provider {...stores}>
             <Router>
               <ScrollToTop>
@@ -73,9 +76,21 @@ if (element) {
                           path="/settings/details"
                           component={Details}
                         />
-                      <Route exact path="/settings/people" component={People} />
+                        <Route
-                      <Route exact path="/settings/shares" component={Shares} />
+                          exact
-                      <Route exact path="/settings/tokens" component={Tokens} />
+                          path="/settings/people"
+                          component={People}
+                        />
+                        <Route
+                          exact
+                          path="/settings/shares"
+                          component={Shares}
+                        />
+                        <Route
+                          exact
+                          path="/settings/tokens"
+                          component={Tokens}
+                        />
                         <Route
                           exact
                           path="/settings/integrations/slack"
@@ -122,6 +137,7 @@ if (element) {
               </ScrollToTop>
             </Router>
           </Provider>
+        </ThemeProvider>
       </ErrorBoundary>
       {DevTools && <DevTools position={{ bottom: 0, right: 0 }} />}
     </React.Fragment>,

app/scenes/Document/Document.js

@@ -330,7 +330,7 @@ const Container = styled(Flex)`
 `;
 
 const LoadingState = styled(LoadingPlaceholder)`
-  margin: 90px 0;
+  margin: 40px 0;
 `;
 
 export default withRouter(inject('ui', 'auth', 'documents')(DocumentScene));

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};
+    background: ${props => props.theme.black};
-    color: ${color.smokeLight};
+    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;
 `;
 

app/scenes/Search/components/SearchField.js

@@ -1,13 +1,12 @@
 // @flow
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import { SearchIcon } from 'outline-icons';
-
 import Flex from 'shared/components/Flex';
-import { color } from 'shared/styles/constants';
 
 type Props = {
   onChange: string => *,
+  theme: Object,
 };
 
 class SearchField extends React.Component<Props> {
@@ -31,7 +30,7 @@ class SearchField extends React.Component<Props> {
         <StyledIcon
           type="Search"
           size={46}
-          color={color.slateLight}
+          color={this.props.theme.slateLight}
           onClick={this.focusInput}
         />
         <StyledInput
@@ -56,16 +55,16 @@ const StyledInput = styled.input`
   border: 0;
 
   ::-webkit-input-placeholder {
-    color: ${color.slateLight};
+    color: ${props => props.theme.slateLight};
   }
   :-moz-placeholder {
-    color: ${color.slateLight};
+    color: ${props => props.theme.slateLight};
   }
   ::-moz-placeholder {
-    color: ${color.slateLight};
+    color: ${props => props.theme.slateLight};
   }
   :-ms-input-placeholder {
-    color: ${color.slateLight};
+    color: ${props => props.theme.slateLight};
   }
 `;
 
@@ -74,4 +73,4 @@ const StyledIcon = styled(SearchIcon)`
   top: 4px;
 `;
 
-export default SearchField;
+export default withTheme(SearchField);

app/scenes/Settings/Details.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import styled from 'styled-components';
-import { color, size } from 'shared/styles/constants';
 
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
@@ -120,7 +119,7 @@ class Details extends React.Component<Props> {
 }
 
 const ProfilePicture = styled(Flex)`
-  margin-bottom: ${size.huge};
+  margin-bottom: 24px;
 `;
 
 const avatarStyles = `
@@ -133,7 +132,7 @@ const AvatarContainer = styled(Flex)`
   ${avatarStyles};
   position: relative;
   box-shadow: 0 0 0 1px #dae1e9;
-  background: ${color.white};
+  background: ${props => props.theme.white};
 
   div div {
     ${avatarStyles};
@@ -150,7 +149,7 @@ const AvatarContainer = styled(Flex)`
   &:hover div {
     opacity: 1;
     background: rgba(0, 0, 0, 0.75);
-    color: ${color.white};
+    color: ${props => props.theme.white};
   }
 `;
 

app/scenes/Settings/Profile.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import styled from 'styled-components';
-import { color, size } from 'shared/styles/constants';
 
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
@@ -104,7 +103,7 @@ class Profile extends React.Component<Props> {
 }
 
 const ProfilePicture = styled(Flex)`
-  margin-bottom: ${size.huge};
+  margin-bottom: 24px;
 `;
 
 const avatarStyles = `
@@ -132,7 +131,7 @@ const AvatarContainer = styled(Flex)`
   &:hover div {
     opacity: 1;
     background: rgba(0, 0, 0, 0.75);
-    color: ${color.white};
+    color: ${props => props.theme.white};
   }
 `;
 

app/scenes/Settings/components/UserListItem.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
 
 import UserMenu from 'menus/UserMenu';
 import Avatar from 'components/Avatar';
@@ -34,8 +33,9 @@ const UserListItem = ({ user, isCurrentUser }: Props) => {
 const Badge = styled.span`
   margin-left: 10px;
   padding: 2px 6px 3px;
-  background-color: ${({ admin }) => (admin ? color.primary : color.smokeDark)};
+  background-color: ${({ admin, theme }) =>
-  color: ${({ admin }) => (admin ? color.white : color.text)};
+    admin ? theme.primary : theme.smokeDark};
+  color: ${({ admin, theme }) => (admin ? theme.white : theme.text)};
   border-radius: 2px;
   font-size: 11px;
   text-transform: uppercase;

server/emails/components/EmailLayout.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import { Table, TBody, TR, TD } from 'oy-vey';
-import { fonts } from '../../../shared/styles/constants';
+import theme from '../../../shared/styles/theme';
 
 type Props = {
   children: React.Node,
@@ -19,7 +19,7 @@ export default (props: Props) => (
 
 export const baseStyles = `
   #__bodyTable__ {
-    font-family: ${fonts.regular};
+    font-family: ${theme.fontFamily};
     font-size: 16px;
     line-height: 1.5;
   }

server/emails/components/Footer.js

@@ -1,26 +1,26 @@
 // @flow
 import * as React from 'react';
 import { Table, TBody, TR, TD } from 'oy-vey';
-import { color } from '../../../shared/styles/constants';
 import { twitterUrl, spectrumUrl } from '../../../shared/utils/routeHelpers';
+import theme from '../../../shared/styles/theme';
 
 export default () => {
   const style = {
     padding: '20px 0',
-    borderTop: `1px solid ${color.smokeDark}`,
+    borderTop: `1px solid ${theme.smokeDark}`,
-    color: color.slate,
+    color: theme.slate,
     fontSize: '14px',
   };
 
   const linkStyle = {
-    color: color.slate,
+    color: theme.slate,
     fontWeight: 500,
     textDecoration: 'none',
     marginRight: '10px',
   };
 
   const externalLinkStyle = {
-    color: color.slate,
+    color: theme.slate,
     textDecoration: 'none',
     margin: '0 10px',
   };

server/pages/Changelog.js

@@ -6,7 +6,6 @@ import Grid from 'styled-components-grid';
 import ReactMarkdown from 'react-markdown';
 import { Helmet } from 'react-helmet';
 import Header from './components/Header';
-import { color } from '../../shared/styles/constants';
 
 type Release = {
   id: string,
@@ -46,7 +45,7 @@ function Changelog({ releases }: { releases: Release[] }) {
 
 const Heading = styled.h1`
   a {
-    color: ${color.text};
+    color: ${props => props.theme.text};
   }
   a:hover {
     text-decoration: underline;
@@ -54,7 +53,7 @@ const Heading = styled.h1`
 `;
 
 const Time = styled.time`
-  color: ${color.slateDark};
+  color: ${props => props.theme.slateDark};
   margin-top: -16px;
   display: block;
 `;
@@ -67,7 +66,7 @@ const Container = styled.div`
 `;
 
 const Article = styled.div`
-  border-bottom: 1px solid ${color.slateLight};
+  border-bottom: 1px solid ${props => props.theme.slateLight};
   padding-bottom: 2em;
 
   &:last-child {

server/pages/Home.js

@@ -8,7 +8,6 @@ import Notice from '../../shared/components/Notice';
 import Hero from './components/Hero';
 import SigninButtons from './components/SigninButtons';
 import { developers, githubUrl } from '../../shared/utils/routeHelpers';
-import { color } from '../../shared/styles/constants';
 
 type Props = {
   notice?: 'google-hd' | 'auth-error',
@@ -133,7 +132,7 @@ const Screenshot = styled.img`
 `;
 
 const Highlights = styled(Grid)`
-  background: ${color.yellow};
+  background: ${props => props.theme.yellow};
   margin: 0 1em;
   padding: 0 1em;
 `;
@@ -151,7 +150,7 @@ const Feature = styled(Grid.Unit)`
   }
 
   a {
-    color: ${color.black};
+    color: ${props => props.theme.black};
     text-decoration: underline;
     text-transform: uppercase;
     font-weight: 500;

server/pages/components/Header.js

@@ -1,12 +1,11 @@
 // @flow
 import styled from 'styled-components';
-import { color } from '../../../shared/styles/constants';
 
 const Header = styled.div`
   width: 100%;
   padding: 0 2em 2em;
   text-align: center;
-  background: ${color.slateLight};
+  background: ${props => props.theme.slateLight};
   margin-bottom: 2em;
 
   p {

server/pages/components/Layout.js

@@ -4,7 +4,6 @@ import { Helmet } from 'react-helmet';
 import { TopNavigation, BottomNavigation } from './Navigation';
 import Analytics from '../../../shared/components/Analytics';
 import globalStyles from '../../../shared/styles/globals';
-import { color } from '../../../shared/styles/constants';
 import prefetchTags from '../../utils/prefetchTags';
 
 export const title = 'Outline';
@@ -43,7 +42,6 @@ export default function Layout({ children }: Props) {
           <meta name="twitter:image" content={screenshotUrl} />
           <meta name="twitter:url" value={process.env.URL} />
 
-          <meta name="theme-color" content={color.primary} />
           <link
             rel="shortcut icon"
             type="image/png"

server/pages/components/Navigation.js

@@ -13,7 +13,6 @@ import {
   spectrumUrl,
   blogUrl,
 } from '../../../shared/utils/routeHelpers';
-import { color } from '../../../shared/styles/constants';
 
 function TopNavigation() {
   return (
@@ -65,16 +64,16 @@ function BottomNavigation() {
   );
 }
 
-const MenuLinkStyle = `
+const MenuLinkStyle = props => `
   font-size: 15px;
   font-weight: 500;
 
   a {
-    color: ${color.slate};
+    color: ${props.theme.slate};
   }
 
   a:hover {
-    color: ${color.slateDark};
+    color: ${props.theme.slateDark};
     text-decoration: underline;
   }
 `;
@@ -141,7 +140,7 @@ const Brand = styled.a`
   font-weight: 600;
   font-size: 20px;
   text-decoration: none;
-  color: ${color.black};
+  color: ${props => props.theme.black};
 `;
 
 export { TopNavigation, BottomNavigation };

server/pages/components/SigninButtons.js

@@ -5,7 +5,6 @@ import { signin } from '../../../shared/utils/routeHelpers';
 import Flex from '../../../shared/components/Flex';
 import GoogleLogo from '../../../shared/components/GoogleLogo';
 import SlackLogo from '../../../shared/components/SlackLogo';
-import { color } from '../../../shared/styles/constants';
 
 type Props = {
   lastSignedIn: string,
@@ -56,8 +55,8 @@ const Button = styled.a`
   display: inline-flex;
   align-items: center;
   padding: 10px 20px;
-  color: ${color.white};
+  color: ${props => props.theme.white};
-  background: ${color.black};
+  background: ${props => props.theme.black};
   border-radius: 4px;
   font-weight: 600;
   height: 56px;
@@ -65,7 +64,7 @@ const Button = styled.a`
 
 const LastLogin = styled.p`
   font-size: 12px;
-  color: ${color.slate};
+  color: ${props => props.theme.slate};
   padding-top: 4px;
 `;
 

server/utils/renderpage.js

@@ -2,15 +2,22 @@
 import * as React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { Helmet } from 'react-helmet';
-import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+import {
+  ServerStyleSheet,
+  StyleSheetManager,
+  ThemeProvider,
+} from 'styled-components';
 import Layout from '../pages/components/Layout';
+import theme from '../../shared/styles/theme';
 
 const sheet = new ServerStyleSheet();
 
 export default function renderpage(ctx: Object, children: React.Node) {
   const html = ReactDOMServer.renderToString(
     <StyleSheetManager sheet={sheet.instance}>
+      <ThemeProvider theme={theme}>
         <Layout>{children}</Layout>
+      </ThemeProvider>
     </StyleSheetManager>
   );
 

shared/styles/base.js

@@ -1,5 +1,5 @@
 // @flow
-import { color } from './constants';
+import theme from './theme';
 
 export default `
   * {
@@ -27,7 +27,7 @@ export default `
   body {
     font-size: 16px;
     line-height: 1.5;
-    color: ${color.text};
+    color: ${theme.text};
 
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
@@ -35,7 +35,7 @@ export default `
   }
 
   a {
-    color: ${color.blue};
+    color: ${theme.blue};
     text-decoration: none;
     cursor: pointer;
   }
@@ -50,7 +50,7 @@ export default `
     line-height: 1.25;
     margin-top: 1em;
     margin-bottom: 0.5em;
-    color: ${color.text};
+    color: ${theme.text};
   }
   h1 { font-size: 2em; }
   h2 { font-size: 1.5em; }

shared/styles/constants.js

@@ -1,70 +0,0 @@
-// @flow
-export const layout = {
-  padding: '1.5vw 1.875vw',
-  vpadding: '1.5vw',
-  hpadding: '1.875vw',
-  sidebarWidth: '280px',
-  sidebarMinWidth: '250px',
-  sidebarMaxWidth: '350px',
-};
-
-export const size = {
-  tiny: '2px',
-  small: '4px',
-  medium: '8px',
-  large: '16px',
-  huge: '24px',
-  enormous: '32px',
-};
-
-export const fontSize = {
-  small: '14px',
-  medium: '16px',
-  large: '18px',
-  huge: '24px',
-};
-
-export const fontWeight = {
-  ultraLight: 100,
-  thin: 200,
-  light: 300,
-  regular: 400,
-  medium: 500,
-  semiBold: 600,
-  bold: 700,
-  heavy: 800,
-};
-
-export const fonts = {
-  regular: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-  Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;`,
-  monospace: `Menlo, Consolas, 'Liberation Mono', monospace;`,
-};
-
-export const color = {
-  text: '#171B35',
-
-  /* Brand */
-  primary: '#1AB6FF',
-  danger: '#D0021B',
-  warning: '#f08a24',
-  success: '#1AB6FF',
-  info: '#a0d3e8',
-  offline: '#000000',
-
-  /* Dark Grays */
-  slate: '#9BA6B2',
-  slateLight: '#DAE1E9',
-  slateDark: '#4E5C6E',
-
-  /* Light Grays */
-  smoke: '#F4F7FA',
-  smokeLight: '#F9FBFC',
-  smokeDark: '#E8EBED',
-
-  /* Misc */
-  white: '#FFFFFF',
-  black: '#000000',
-  blue: '#16B3FF',
-  yellow: '#FFD95C',
-};

shared/styles/theme.js

@@ -0,0 +1,34 @@
+// @flow
+const theme = {
+  fontFamily:
+    "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
+  monospaceFontFamily: `Menlo, Consolas, 'Liberation Mono', monospace;`,
+  fontWeight: 400,
+
+  text: '#171B35',
+  link: '#1AB6FF',
+  primary: '#1AB6FF',
+  placeholder: '#b1becc',
+
+  slate: '#9BA6B2',
+  slateLight: '#DAE1E9',
+  slateDark: '#4E5C6E',
+
+  smoke: '#F4F7FA',
+  smokeLight: '#F9FBFC',
+  smokeDark: '#E8EBED',
+
+  white: '#FFFFFF',
+  blue: '#1AB6FF',
+  black: '#000000',
+  blackLight: '#2f3336',
+
+  padding: '1.5vw 1.875vw',
+  vpadding: '1.5vw',
+  hpadding: '1.875vw',
+  sidebarWidth: '280px',
+  sidebarMinWidth: '250px',
+  sidebarMaxWidth: '350px',
+};
+
+export default theme;