Sharing global styles

shared/styles/animations.js

@@ -0,0 +1,25 @@
+// @flow
+import { keyframes } from 'styled-components';
+
+export const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+
+export const fadeAndScaleIn = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+
+export const pulsate = keyframes`
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+`;

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

@@ -0,0 +1,63 @@
+// @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 color = {
+  text: '#171B35',
+
+  /* Brand */
+  primary: '#2B8FBF',
+  danger: '#D0021B',
+  warning: '#f08a24' /* replace */,
+  success: '#43AC6A' /* replace */,
+  info: '#a0d3e8' /* replace */,
+  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',
+};

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