Sharing global styles

.flowconfig

@@ -21,6 +21,8 @@ module.system.node.resolve_dirname=app
 
 module.name_mapper='^\(.*\)\.s?css$' -> 'empty/object'
 module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
+module.name_mapper='^shared\/\(.*\)$' -> '<PROJECT_ROOT>/shared/\1'
+
 module.file_ext=.js
 module.file_ext=.scss
 module.file_ext=.md

app/components/Alert/Alert.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 type Props = {
   children: React.Element<*>,

app/components/Button/Button.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import { darken, lighten } from 'polished';
 
 const RealButton = styled.button`

app/components/Collaborators/Collaborators.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import Flex from 'components/Flex';
 import Tooltip from 'components/Tooltip';
 import Document from 'models/Document';

app/components/DocumentPreview/DocumentPreview.js

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import Document from 'models/Document';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import StarredIcon from 'components/Icon/StarredIcon';
 import PublishingInfo from './components/PublishingInfo';
 

app/components/DocumentPreview/components/PublishingInfo.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
 import Flex from 'components/Flex';

app/components/DropdownMenu/DropdownMenu.js

@@ -6,8 +6,8 @@ import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import Portal from 'react-portal';
 import Flex from 'components/Flex';
-import { color } from 'styles/constants';
-import { fadeAndScaleIn } from 'styles/animations';
+import { color } from 'shared/styles/constants';
+import { fadeAndScaleIn } from 'shared/styles/animations';
 
 type Props = {
   label: React.Element<*>,

app/components/DropdownMenu/DropdownMenuItem.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import Flex from 'components/Flex';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 const DropdownMenuItem = ({
   onClick,

app/components/Editor/components/BlockInsert.js

@@ -6,7 +6,7 @@ import Portal from 'react-portal';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import PlusIcon from 'components/Icon/PlusIcon';
 import BlockMenu from 'menus/BlockMenu';
 import type { State } from '../types';

app/components/Editor/components/Code.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import CopyButton from './CopyButton';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import type { Props } from '../types';
 
 export default function Code({ children, node, readOnly, attributes }: Props) {

app/components/Editor/components/Contents.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { List } from 'immutable';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import headingToSlug from '../headingToSlug';
 import type { State, Block } from '../types';
 import styled from 'styled-components';

app/components/Editor/components/CopyButton.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import styled from 'styled-components';
 import CopyToClipboard from 'components/CopyToClipboard';
 

app/components/Editor/components/HorizontalRule.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import type { Props } from '../types';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 function HorizontalRule(props: Props) {
   const { state, node } = props;

app/components/Editor/components/Image.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import type { Props } from '../types';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 class Image extends Component {
   props: Props;

app/components/Editor/components/InlineCode.js

@@ -1,6 +1,6 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 const InlineCode = styled.code`
   padding: .25em;

app/components/Editor/components/TodoItem.js

@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import type { Props } from '../types';
 
 export default class TodoItem extends Component {

app/components/Editor/components/Toolbar/components/DocumentResult.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { fontWeight, color } from 'styles/constants';
+import { fontWeight, color } from 'shared/styles/constants';
 import Document from 'models/Document';
 import NextIcon from 'components/Icon/NextIcon';
 

app/components/Empty/Empty.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 type Props = {
   children: string,

app/components/HelpText/HelpText.js

@@ -1,6 +1,6 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 const HelpText = styled.p`
   margin-top: 0;

app/components/Icon/Icon.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 export type Props = {
   className?: string,

app/components/Input/Input.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import Flex from 'components/Flex';
-import { size, color } from 'styles/constants';
+import { size, color } from 'shared/styles/constants';
 
 const RealTextarea = styled.textarea`
   border: 0;

app/components/Key/key.js

@@ -1,6 +1,6 @@
 // @flow
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 const Key = styled.kbd`
   display: inline-block;

app/components/Labeled/Labeled.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
-import { size } from 'styles/constants';
+import { size } from 'shared/styles/constants';
 
 type Props = {
   label: React.Element<*> | string,

app/components/Layout/Layout.js

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import keydown from 'react-keydown';
 import Flex from 'components/Flex';
-import { color, layout } from 'styles/constants';
+import { color, layout } from 'shared/styles/constants';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
 
 import Avatar from 'components/Avatar';

app/components/Layout/components/HeaderBlock.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import type { User, Team } from 'types';
 import Flex from 'components/Flex';
 
@@ -28,7 +28,6 @@ const UserName = styled.div`
 `;
 
 const TeamName = styled.div`
-  font-family: 'Atlas Grotesk';
   font-weight: bold;
   color: ${color.text};
   text-decoration: none;

app/components/Layout/components/SidebarCollections.js

@@ -4,7 +4,7 @@ import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
-import { color, fontWeight } from 'styles/constants';
+import { color, fontWeight } from 'shared/styles/constants';
 
 import SidebarLink from './SidebarLink';
 import DropToImport from 'components/DropToImport';

app/components/Layout/components/SidebarLink.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { observable, action } from 'mobx';
 import { observer } from 'mobx-react';
 import { NavLink } from 'react-router-dom';
-import { color, fontWeight } from 'styles/constants';
+import { color, fontWeight } from 'shared/styles/constants';
 import styled from 'styled-components';
 import Flex from 'components/Flex';
 import CollapsedIcon from 'components/Icon/CollapsedIcon';

app/components/LoadingListPlaceholder/LoadingListPlaceholder.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import styled from 'styled-components';
-import { pulsate } from 'styles/animations';
-import { color } from 'styles/constants';
+import { pulsate } from 'shared/styles/animations';
+import { color } from 'shared/styles/constants';
 import Flex from 'components/Flex';
 
 import { randomInteger } from 'utils/random';

app/components/LoadingPlaceholder/components/Mask.js

@@ -1,8 +1,8 @@
 // @flow
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import { pulsate } from 'styles/animations';
-import { color } from 'styles/constants';
+import { pulsate } from 'shared/styles/animations';
+import { color } from 'shared/styles/constants';
 import { randomInteger } from 'utils/random';
 import Flex from 'components/Flex';
 

app/components/Modal/Modal.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
-import { color } from 'styles/constants';
-import { fadeAndScaleIn } from 'styles/animations';
+import { color } from 'shared/styles/constants';
+import { fadeAndScaleIn } from 'shared/styles/animations';
 import CloseIcon from 'components/Icon/CloseIcon';
 import Flex from 'components/Flex';
 

app/components/Toasts/Toasts.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import styled from 'styled-components';
-import { layout } from 'styles/constants';
+import { layout } from 'shared/styles/constants';
 import Toast from './components/Toast';
 
 @observer class Toasts extends Component {

app/components/Toasts/components/Toast.js

@@ -2,8 +2,8 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
-import { color } from 'styles/constants';
-import { fadeAndScaleIn } from 'styles/animations';
+import { color } from 'shared/styles/constants';
+import { fadeAndScaleIn } from 'shared/styles/animations';
 
 type Props = {
   onRequestClose: () => void,

app/index.js

@@ -14,10 +14,8 @@ import stores from 'stores';
 import DocumentsStore from 'stores/DocumentsStore';
 import CollectionsStore from 'stores/CollectionsStore';
 import CacheStore from 'stores/CacheStore';
+import globalStyles from 'shared/styles/globals';
 
-import 'normalize.css/normalize.css';
-import 'styles/base.css';
-import 'styles/fonts.css';
 import 'styles/transitions.css';
 import 'styles/prism.css';
 
@@ -103,6 +101,8 @@ const RedirectDocument = ({ match }: { match: Object }) => (
   <Redirect to={`/doc/${match.params.documentSlug}`} />
 );
 
+globalStyles();
+
 render(
   <div style={{ display: 'flex', flex: 1, height: '100%' }}>
     <Provider {...stores}>

app/scenes/Document/Document.js

@@ -7,7 +7,7 @@ import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import keydown from 'react-keydown';
 import Flex from 'components/Flex';
-import { color, layout } from 'styles/constants';
+import { color, layout } from 'shared/styles/constants';
 import {
   collectionUrl,
   updateDocumentUrl,

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

@@ -8,7 +8,7 @@ import { Search } from 'js-search';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 import _ from 'lodash';
 import styled from 'styled-components';
-import { size } from 'styles/constants';
+import { size } from 'shared/styles/constants';
 
 import Modal from 'components/Modal';
 import Input from 'components/Input';

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

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import invariant from 'invariant';
 import _ from 'lodash';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 import Flex from 'components/Flex';
 import GoToIcon from 'components/Icon/GoToIcon';

app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import styled from 'styled-components';
-import { pulsate } from 'styles/animations';
-import { color } from 'styles/constants';
+import { pulsate } from 'shared/styles/animations';
+import { color } from 'shared/styles/constants';
 import Flex from 'components/Flex';
 
 import { randomInteger } from 'utils/random';

app/scenes/Search/components/SearchField.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import SearchIcon from 'components/Icon/SearchIcon';
 import Flex from 'components/Flex';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 import styled from 'styled-components';
 
 class SearchField extends Component {

app/scenes/Search/components/SearchField/index.js

@@ -1,3 +0,0 @@
-// @flow
-import SearchField from './SearchField';
-export default SearchField;

app/scenes/Settings/Settings.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import ApiKeyRow from './components/ApiKeyRow';
 import SettingsStore from './SettingsStore';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 import Flex from 'components/Flex';
 import Button from 'components/Button';

app/scenes/Settings/components/ApiKeyRow.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
-import { color } from 'styles/constants';
+import { color } from 'shared/styles/constants';
 
 type Props = {
   id: string,

app/scenes/Settings/components/ApiKeyRow/index.js

@@ -1,3 +0,0 @@
-// @flow
-import ApiKeyRow from './ApiKeyRow';
-export default ApiKeyRow;

app/styles/base.css

@@ -1,143 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  --line-height-1: 1;
-  --line-height-2: 1.125;
-  --line-height-3: 1.25;
-  --line-height-4: 1.5;
-  --letter-spacing: 1;
-  --caps-letter-spacing: 0.2em;
-  --bold-font-weight: bold;
-}
-
-html,
-body,
-.viewport {
-  width: 100%;
-  min-height: 100vh;
-  margin: 0;
-}
-
-body,
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
-body {
-  font-size: 16px;
-  line-height: 1.5;
-  margin: 0;
-  color: #617180;
-  background-color: #fff;
-  display: flex;
-
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-svg {
-  max-height: 100%;
-}
-a {
-  color: #16B3FF;
-  text-decoration: none;
-  cursor: pointer;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 500;
-  line-height: 1.25;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-  color: #1f2429;
-}
-h1 {
-  font-size: 2em;
-}
-h2 {
-  font-size: 1.5em;
-}
-h3 {
-  font-size: 1.25em;
-}
-h4 {
-  font-size: 1em;
-}
-h5 {
-  font-size: 0.875em;
-}
-h6 {
-  font-size: 0.75em;
-}
-p,
-dl,
-ol,
-ul,
-pre,
-blockquote {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-code,
-pre,
-samp {
-  font-family: 'Atlas Typewriter', 'Source Code Pro', Menlo, Consolas,
-    'Liberation Mono', monospace;
-}
-code,
-samp {
-  font-size: 85%;
-  padding: 0.125em;
-}
-pre {
-  font-size: 85%;
-  overflow: scroll;
-}
-blockquote {
-  font-size: 1.25em;
-  font-style: italic;
-  margin-left: 0;
-}
-hr {
-  margin: 2em 0;
-  border: 0;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: #dedede;
-}
-*[role='button'] {
-  cursor: pointer;
-}
-
-.hljs {
-  border: 1px solid rgba(0, 0, 0, 0.0625);
-  padding: 1em;
-  border-radius: 0.25em;
-}
-
-.activeDropZone {
-  background: #4E5C6E;
-}
-
-.activeDropZone a {
-  color: #FFF !important;
-}
-
-.ReactModal__Body--open {
-  overflow: hidden;
-}

app/styles/fonts.css

@@ -1,62 +0,0 @@
-@font-face {
-  font-family: 'Atlas Grotesk';
-  src: url('../fonts/atlas/AtlasGrotesk-Regular-Web.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Atlas Grotesk';
-  src: url('../fonts/atlas/AtlasGrotesk-Medium-Web.woff') format('woff');
-  font-weight: bold;
-  font-style: normal;
-}
-
-/*@font-face {
-  font-family: 'Atlas Grotesk';
-  src: url('../fonts/atlas/AtlasGrotesk-Light-Web.woff') format('woff');
-  font-weight: lighter;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Atlas Grotesk';
-  src: url('../fonts/atlas/AtlasGrotesk-LightItalic-Web.woff') format('woff');
-  font-weight: lighter;
-  font-style: italic;
-}*/
-
-@font-face {
-  font-family: 'Atlas Grotesk';
-  src: url('../fonts/atlas/AtlasGrotesk-RegularItalic-Web.woff') format('woff');
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Atlas Grotesk';
-  src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff');
-  font-weight: bold;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Atlas Grotesk';
-  src: url('../fonts/atlas/AtlasGrotesk-MediumItalic-Web.woff') format('woff');
-  font-weight: bold;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Atlas Typewriter';
-  src: url('../fonts/atlas/AtlasTypewriterRegular.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Atlas Typewriter';
-  src: url('../fonts/atlas/AtlasTypewriterMedium.woff') format('woff');
-  font-weight: bold;
-  font-style: normal;
-}

package.json

@@ -167,6 +167,7 @@
     "style-loader": "^0.18.2",
     "styled-components": "^2.0.0",
     "styled-components-grid": "^1.0.0-preview.15",
+    "styled-normalize": "^2.2.1",
     "url-loader": "0.5.7",
     "uuid": "2.0.2",
     "validator": "5.2.0",

server/pages/components/Layout.js

@@ -2,12 +2,15 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import Navigation from './Navigation';
+import globalStyles from '../../../shared/styles/globals';
 
 type Props = {
   children?: React$Element<*>,
 };
 
 export default function Layout({ children }: Props) {
+  globalStyles();
+
   return (
     <html lang="en">
       <head>

server/pages/components/Navigation.js

@@ -1,10 +1,12 @@
 // @flow
 import React from 'react';
+import styled from 'styled-components';
+import { color } from '../../../shared/styles/constants';
 
-export default function Navigation() {
+function Navigation() {
   return (
     <nav>
-      <a href="/">Atlas</a>
+      <Brand href="/">Atlas</Brand>
       <ul>
         <li><a href="/about">About</a></li>
         <li><a href="/pricing">Pricing</a></li>
@@ -12,3 +14,12 @@ export default function Navigation() {
     </nav>
   );
 }
+
+const Brand = styled.a`
+  font-weight: 600;
+  font-size: 20px;
+  text-decoration: none;
+  color: ${color.black};
+`;
+
+export default Navigation;

shared/styles/base.js

@@ -0,0 +1,83 @@
+// @flow
+import { color } from './constants';
+
+export default `
+  * {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    width: 100%;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+  }
+
+  body,
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  body {
+    font-size: 16px;
+    line-height: 1.5;
+    color: ${color.text};
+
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  a {
+    color: ${color.blue};
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 500;
+    line-height: 1.25;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    color: ${color.text};
+  }
+  h1 { font-size: 2em; }
+  h2 { font-size: 1.5em; }
+  h3 { font-size: 1.25em; }
+  h4 { font-size: 1em; }
+  h5 { font-size: 0.875em; }
+  h6 { font-size: 0.75em; }
+
+  p,
+  dl,
+  ol,
+  ul,
+  pre,
+  blockquote {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  .activeDropZone {
+    background: #4E5C6E;
+  }
+
+  .activeDropZone a {
+    color: #FFF !important;
+  }
+
+  .ReactModal__Body--open {
+    overflow: hidden;
+  }
+`;

shared/styles/constants.js

@@ -1,5 +1,4 @@
 // @flow
-
 export const layout = {
   padding: '1.5vw 1.875vw',
   vpadding: '1.5vw',
@@ -60,6 +59,5 @@ export const color = {
   /* Misc */
   white: '#FFFFFF',
   black: '#000000',
-
-  /* Alert colors */
+  blue: '#16B3FF',
 };

shared/styles/globals.js

@@ -0,0 +1,9 @@
+// @flow
+import styledNormalize from 'styled-normalize';
+import { injectGlobal } from 'styled-components';
+import base from './base';
+
+export default () => injectGlobal`
+  ${styledNormalize}
+  ${base}
+`;

webpack.config.js

@@ -50,9 +50,9 @@ module.exports = {
     noParse: [new RegExp('node_modules/localforage/dist/localforage.js')],
   },
   resolve: {
-    root: path.join(__dirname, 'app'),
-    // you can now require('file') instead of require('file.json')
+    root: path.resolve(__dirname, 'app'),
     extensions: ['', '.js', '.json'],
+    alias: { shared: path.resolve(__dirname, 'shared') }
   },
   plugins: [
     definePlugin,

yarn.lock

@@ -8435,6 +8435,10 @@ styled-components@^2.0.0:
     stylis "^3.2.1"
     supports-color "^3.2.3"
 
+styled-normalize@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/styled-normalize/-/styled-normalize-2.2.1.tgz#c93a007c0339a69e3254eeef8cb6a5a96e5ca4eb"
+
 stylis@^3.2.1:
   version "3.2.15"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.15.tgz#1800f829fdf3cf0d647ae6cdb5fb70a1fd81c3e2"