ThemeProvider (#677)

closes #655

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;