Restructure theme file

This commit is contained in:
Andrew Nicolaou 2020-05-03 11:54:57 +02:00
parent ec1c8210a1
commit e22f8b8e74
3 changed files with 148 additions and 43 deletions

View file

@ -24,27 +24,46 @@ const StyledButton = styled.button`
width: max-content; width: max-content;
text-decoration: none; text-decoration: none;
background-color: ${prop('buttonColorBackground')}; color: ${prop('Button.default.foreground')};
color: ${prop('buttonColor')}; background-color: ${prop('Button.default.background')};
cursor: pointer; cursor: pointer;
border: 2px solid ${prop('buttonBorderColor')}; border: 2px solid ${prop('Button.default.border')};
border-radius: 2px; border-radius: 2px;
padding: ${remSize(8)} ${remSize(25)}; padding: ${remSize(8)} ${remSize(25)};
line-height: 1; line-height: 1;
svg * {
fill: ${prop('Button.default.foreground')};
}
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: ${prop('buttonHoverColor')}; color: ${prop('Button.hover.foreground')};
background-color: ${prop('buttonHoverColorBackground')}; background-color: ${prop('Button.hover.background')};
border-color: ${prop('Button.hover.border')};
svg * { svg * {
fill: ${prop('buttonHoverColor')}; fill: ${prop('Button.hover.foreground')};
}
}
&:active:not(:disabled) {
color: ${prop('Button.active.foreground')};
background-color: ${prop('Button.active.background')};
svg * {
fill: ${prop('Button.active.foreground')};
} }
} }
&:disabled { &:disabled {
color: ${prop('buttonDisabledColor')}; color: ${prop('Button.disabled.foreground')};
background-color: ${prop('buttonDisabledColorBackground')}; background-color: ${prop('Button.disabled.background')};
border-color: ${prop('Button.disabled.border')};
cursor: not-allowed; cursor: not-allowed;
svg * {
fill: ${prop('Button.disabled.foreground')};
}
} }
> * + * { > * + * {
@ -90,26 +109,35 @@ const StyledIconButton = styled.button`
height: ${remSize(32)}px; height: ${remSize(32)}px;
text-decoration: none; text-decoration: none;
background-color: ${prop('buttonColorBackground')}; color: ${prop('Button.default.foreground')};
color: ${prop('buttonColor')}; background-color: ${prop('Button.hover.background')};
cursor: pointer; cursor: pointer;
border: 1px solid transparen; border: 1px solid transparent;
border-radius: 50%; border-radius: 50%;
padding: ${remSize(8)} ${remSize(25)}; padding: ${remSize(8)} ${remSize(25)};
line-height: 1; line-height: 1;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: ${prop('buttonHoverColor')}; color: ${prop('Button.hover.foreground')};
background-color: ${prop('buttonHoverColorBackground')}; background-color: ${prop('Button.hover.background')};
svg * { svg * {
fill: ${prop('buttonHoverColor')}; fill: ${prop('Button.hover.foreground')};
}
}
&:active:not(:disabled) {
color: ${prop('Button.active.foreground')};
background-color: ${prop('Button.active.background')};
svg * {
fill: ${prop('Button.active.foreground')};
} }
} }
&:disabled { &:disabled {
color: ${prop('buttonDisabledColor')}; color: ${prop('Button.disabled.foreground')};
background-color: ${prop('buttonDisabledColorBackground')}; background-color: ${prop('Button.disabled.background')};
cursor: not-allowed; cursor: not-allowed;
} }

View file

@ -23,7 +23,7 @@ export const SubmitButton = () => (
<Button type="submit" label="submit">This is a submit button</Button> <Button type="submit" label="submit">This is a submit button</Button>
); );
export const PrimaryButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>; export const DefaultTypeButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>;
export const DisabledButton = () => <Button disabled label="login" onClick={action('onClick')}>Log In</Button>; export const DisabledButton = () => <Button disabled label="login" onClick={action('onClick')}>Log In</Button>;

View file

@ -1,3 +1,5 @@
import lodash from 'lodash';
export const Theme = { export const Theme = {
contrast: 'contrast', contrast: 'contrast',
dark: 'dark', dark: 'dark',
@ -5,8 +7,37 @@ export const Theme = {
}; };
export const colors = { export const colors = {
p5pink: '#ed225d', p5jsPink: '#ed225d',
processingBlue: '#007BBB',
p5jsActivePink: '#f10046',
white: '#fff',
black: '#000',
yellow: '#f5dc23', yellow: '#f5dc23',
orange: '#ffa500',
red: '#ff0000',
lightsteelblue: '#B0C4DE',
dodgerblue: '#1E90FF',
p5ContrastPink: ' #FFA9D9',
borderColor: ' #B5B5B5',
outlineColor: '#0F9DD7',
};
export const grays = {
lightest: '#FFF', // primary
lighter: '#FBFBFB',
light: '#F0F0F0', // primary
mediumLight: '#D9D9D9',
middleLight: '#A6A6A6',
middleGray: '#747474', // primary
middleDark: '#666',
mediumDark: '#4D4D4D',
dark: '#333', // primary
darker: '#1C1C1C',
darkest: '#000',
}; };
export const common = { export const common = {
@ -16,7 +47,8 @@ export const common = {
export const remSize = size => `${size / common.baseFontSize}rem`; export const remSize = size => `${size / common.baseFontSize}rem`;
export const prop = key => (props) => { export const prop = key => (props) => {
const value = props.theme[key]; const keypath = `theme.${key}`;
const value = lodash.get(props, keypath);
if (value == null) { if (value == null) {
throw new Error(`themed prop ${key} not found`); throw new Error(`themed prop ${key} not found`);
@ -29,40 +61,85 @@ export default {
[Theme.light]: { [Theme.light]: {
colors, colors,
...common, ...common,
primaryTextColor: '#333', primaryTextColor: grays.dark,
buttonColor: '#000', Button: {
buttonColorBackground: '#f4f4f4', default: {
buttonBorderColor: '#b5b5b5', foreground: colors.black,
buttonHoverColor: '#fff', background: grays.light,
buttonHoverColorBackground: colors.p5pink, border: grays.middleLight,
buttonDisabledColor: '#f10046', },
buttonDisabledColorBackground: '#fff', hover: {
foreground: grays.lightest,
background: colors.p5jsPink,
border: colors.p5jsPink,
},
active: {
foreground: grays.lightest,
background: colors.p5jsActivePink,
border: colors.p5jsActivePink,
},
disabled: {
foreground: colors.black,
background: grays.light,
border: grays.middleLight,
},
},
}, },
[Theme.dark]: { [Theme.dark]: {
colors, colors,
...common, ...common,
primaryTextColor: '#FFF', primaryTextColor: grays.lightest,
buttonColor: '#000', Button: {
buttonColorBackground: '#f4f4f4', default: {
buttonBorderColor: '#b5b5b5', foreground: grays.light,
buttonHoverColor: '#fff', background: grays.dark,
buttonHoverColorBackground: colors.p5pink, border: grays.middleDark,
buttonDisabledColor: '#f10046', },
buttonDisabledColorBackground: '#fff', hover: {
foreground: grays.lightest,
background: colors.p5jsPink,
border: colors.p5jsPink,
},
active: {
foreground: grays.lightest,
background: colors.p5jsActivePink,
border: colors.p5jsActivePink,
},
disabled: {
foreground: grays.light,
background: grays.dark,
border: grays.middleDark,
},
},
}, },
[Theme.contrast]: { [Theme.contrast]: {
colors, colors,
...common, ...common,
primaryTextColor: '#F5DC23', primaryTextColor: grays.lightest,
buttonColor: '#000', Button: {
buttonColorBackground: colors.yellow, default: {
buttonBorderColor: '#b5b5b5', foreground: grays.light,
buttonHoverColor: '#333', background: grays.dark,
buttonHoverColorBackground: '#fff', border: grays.middleDark,
buttonDisabledColor: '#333', },
buttonDisabledColorBackground: colors.yellow, hover: {
foreground: grays.dark,
background: colors.yellow,
border: colors.yellow,
},
active: {
foreground: grays.dark,
background: colors.p5jsActivePink,
border: colors.p5jsActivePink,
},
disabled: {
foreground: grays.light,
background: grays.dark,
border: grays.middleDark,
},
},
}, },
}; };