diff --git a/client/index.jsx b/client/index.jsx index 140ef596..a1a880bb 100644 --- a/client/index.jsx +++ b/client/index.jsx @@ -22,7 +22,7 @@ const store = configureStore(initialState); const currentTheme = Theme.light; const App = () => ( - + diff --git a/client/theme.js b/client/theme.js index 1d90e8fc..2a8b54f3 100644 --- a/client/theme.js +++ b/client/theme.js @@ -15,7 +15,15 @@ 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]: { @@ -23,32 +31,38 @@ export default { ...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, }, };