p5.js-web-editor/client/theme.js

69 lines
1.4 KiB
JavaScript
Raw Normal View History

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