Send current theme variables directly into provider

Author: andrewn

client/index.jsx

@@ -22,7 +22,7 @@ const store = configureStore(initialState);
 const currentTheme = Theme.light;
 
 const App = () => (
-  <ThemeProvider theme={{ ...theme, current: theme[currentTheme] }}>
+  <ThemeProvider theme={{ ...theme[currentTheme] }}>
     <Provider store={store}>
       <Router history={history} routes={routes(store)} />
     </Provider>

client/theme.js

@@ -15,40 +15,54 @@ export const common = {
 
 export const remSize = size => `${size / common.baseFontSize}rem`;
 
-export const prop = key => props => props.theme[key];
+export const prop = key => (props) => {
+  const value = props.theme[key];
+
+  if (value == null) {
+    throw new Error(`themed prop ${key} not found`);
+  }
+
+  return value;
+};
 
 export default {
   [Theme.light]: {
     colors,
     ...common,
     primaryTextColor: '#333',
 
-    buttonColor: '#f10046',
-    buttonColorBackground: '#fff',
+    buttonColor: '#000',
+    buttonColorBackground: '#f4f4f4',
     buttonBorderColor: '#b5b5b5',
     buttonHoverColor: '#fff',
     buttonHoverColorBackground: colors.p5pink,
+    buttonDisabledColor: '#f10046',
+    buttonDisabledColorBackground: '#fff',
   },
   [Theme.dark]: {
     colors,
     ...common,
     primaryTextColor: '#FFF',
 
-    buttonColor: '#f10046',
-    buttonColorBackground: '#fff',
+    buttonColor: '#000',
+    buttonColorBackground: '#f4f4f4',
     buttonBorderColor: '#b5b5b5',
     buttonHoverColor: '#fff',
     buttonHoverColorBackground: colors.p5pink,
+    buttonDisabledColor: '#f10046',
+    buttonDisabledColorBackground: '#fff',
   },
   [Theme.contrast]: {
     colors,
     ...common,
     primaryTextColor: '#F5DC23',
 
-    buttonColor: '#333',
+    buttonColor: '#000',
     buttonColorBackground: colors.yellow,
     buttonBorderColor: '#b5b5b5',
     buttonHoverColor: '#333',
     buttonHoverColorBackground: '#fff',
+    buttonDisabledColor: '#333',
+    buttonDisabledColorBackground: colors.yellow,
   },
 };