Restructure theme file
This commit is contained in:
Andrew Nicolaou
parent
ec1c8210a1
commit
e22f8b8e74
3 changed files with 148 additions and 43 deletions
|
|
@ -24,27 +24,46 @@ const StyledButton = styled.button`
|
|||
width: max-content;
|
||||
text-decoration: none;
|
||||
|
||||
background-color: ${prop('buttonColorBackground')};
|
||||
color: ${prop('buttonColor')};
|
||||
color: ${prop('Button.default.foreground')};
|
||||
background-color: ${prop('Button.default.background')};
|
||||
cursor: pointer;
|
||||
border: 2px solid ${prop('buttonBorderColor')};
|
||||
border: 2px solid ${prop('Button.default.border')};
|
||||
border-radius: 2px;
|
||||
padding: ${remSize(8)} ${remSize(25)};
|
||||
line-height: 1;
|
||||
|
||||
svg * {
|
||||
fill: ${prop('Button.default.foreground')};
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: ${prop('buttonHoverColor')};
|
||||
background-color: ${prop('buttonHoverColorBackground')};
|
||||
color: ${prop('Button.hover.foreground')};
|
||||
background-color: ${prop('Button.hover.background')};
|
||||
border-color: ${prop('Button.hover.border')};
|
||||
|
||||
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 {
|
||||
color: ${prop('buttonDisabledColor')};
|
||||
background-color: ${prop('buttonDisabledColorBackground')};
|
||||
color: ${prop('Button.disabled.foreground')};
|
||||
background-color: ${prop('Button.disabled.background')};
|
||||
border-color: ${prop('Button.disabled.border')};
|
||||
cursor: not-allowed;
|
||||
|
||||
svg * {
|
||||
fill: ${prop('Button.disabled.foreground')};
|
||||
}
|
||||
}
|
||||
|
||||
> * + * {
|
||||
|
|
@ -90,26 +109,35 @@ const StyledIconButton = styled.button`
|
|||
height: ${remSize(32)}px;
|
||||
text-decoration: none;
|
||||
|
||||
background-color: ${prop('buttonColorBackground')};
|
||||
color: ${prop('buttonColor')};
|
||||
color: ${prop('Button.default.foreground')};
|
||||
background-color: ${prop('Button.hover.background')};
|
||||
cursor: pointer;
|
||||
border: 1px solid transparen;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
padding: ${remSize(8)} ${remSize(25)};
|
||||
line-height: 1;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: ${prop('buttonHoverColor')};
|
||||
background-color: ${prop('buttonHoverColorBackground')};
|
||||
color: ${prop('Button.hover.foreground')};
|
||||
background-color: ${prop('Button.hover.background')};
|
||||
|
||||
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 {
|
||||
color: ${prop('buttonDisabledColor')};
|
||||
background-color: ${prop('buttonDisabledColorBackground')};
|
||||
color: ${prop('Button.disabled.foreground')};
|
||||
background-color: ${prop('Button.disabled.background')};
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const SubmitButton = () => (
|
|||
<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>;
|
||||
|
||||
|
|
|
|||
129
client/theme.js
129
client/theme.js
|
|
@ -1,3 +1,5 @@
|
|||
import lodash from 'lodash';
|
||||
|
||||
export const Theme = {
|
||||
contrast: 'contrast',
|
||||
dark: 'dark',
|
||||
|
|
@ -5,8 +7,37 @@ export const Theme = {
|
|||
};
|
||||
|
||||
export const colors = {
|
||||
p5pink: '#ed225d',
|
||||
p5jsPink: '#ed225d',
|
||||
processingBlue: '#007BBB',
|
||||
p5jsActivePink: '#f10046',
|
||||
white: '#fff',
|
||||
black: '#000',
|
||||
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 = {
|
||||
|
|
@ -16,7 +47,8 @@ export const common = {
|
|||
export const remSize = size => `${size / common.baseFontSize}rem`;
|
||||
|
||||
export const prop = key => (props) => {
|
||||
const value = props.theme[key];
|
||||
const keypath = `theme.${key}`;
|
||||
const value = lodash.get(props, keypath);
|
||||
|
||||
if (value == null) {
|
||||
throw new Error(`themed prop ${key} not found`);
|
||||
|
|
@ -29,40 +61,85 @@ export default {
|
|||
[Theme.light]: {
|
||||
colors,
|
||||
...common,
|
||||
primaryTextColor: '#333',
|
||||
primaryTextColor: grays.dark,
|
||||
|
||||
buttonColor: '#000',
|
||||
buttonColorBackground: '#f4f4f4',
|
||||
buttonBorderColor: '#b5b5b5',
|
||||
buttonHoverColor: '#fff',
|
||||
buttonHoverColorBackground: colors.p5pink,
|
||||
buttonDisabledColor: '#f10046',
|
||||
buttonDisabledColorBackground: '#fff',
|
||||
Button: {
|
||||
default: {
|
||||
foreground: colors.black,
|
||||
background: grays.light,
|
||||
border: grays.middleLight,
|
||||
},
|
||||
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]: {
|
||||
colors,
|
||||
...common,
|
||||
primaryTextColor: '#FFF',
|
||||
primaryTextColor: grays.lightest,
|
||||
|
||||
buttonColor: '#000',
|
||||
buttonColorBackground: '#f4f4f4',
|
||||
buttonBorderColor: '#b5b5b5',
|
||||
buttonHoverColor: '#fff',
|
||||
buttonHoverColorBackground: colors.p5pink,
|
||||
buttonDisabledColor: '#f10046',
|
||||
buttonDisabledColorBackground: '#fff',
|
||||
Button: {
|
||||
default: {
|
||||
foreground: grays.light,
|
||||
background: grays.dark,
|
||||
border: grays.middleDark,
|
||||
},
|
||||
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]: {
|
||||
colors,
|
||||
...common,
|
||||
primaryTextColor: '#F5DC23',
|
||||
primaryTextColor: grays.lightest,
|
||||
|
||||
buttonColor: '#000',
|
||||
buttonColorBackground: colors.yellow,
|
||||
buttonBorderColor: '#b5b5b5',
|
||||
buttonHoverColor: '#333',
|
||||
buttonHoverColorBackground: '#fff',
|
||||
buttonDisabledColor: '#333',
|
||||
buttonDisabledColorBackground: colors.yellow,
|
||||
Button: {
|
||||
default: {
|
||||
foreground: grays.light,
|
||||
background: grays.dark,
|
||||
border: grays.middleDark,
|
||||
},
|
||||
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,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue