Skip to content

Commit e22f8b8

Browse files
andrewnandrewn
committed
Restructure theme file
1 parent ec1c821 commit e22f8b8

File tree

3 files changed

+151
-46
lines changed

3 files changed

+151
-46
lines changed

Diff for: ‎client/common/Button.jsx

+44-16
Original file line numberDiff line numberDiff line change
@@ -24,27 +24,46 @@ const StyledButton = styled.button`
2424
width: max-content;
2525
text-decoration: none;
2626
27-
background-color: ${prop('buttonColorBackground')};
28-
color: ${prop('buttonColor')};
27+
color: ${prop('Button.default.foreground')};
28+
background-color: ${prop('Button.default.background')};
2929
cursor: pointer;
30-
border: 2px solid ${prop('buttonBorderColor')};
30+
border: 2px solid ${prop('Button.default.border')};
3131
border-radius: 2px;
3232
padding: ${remSize(8)} ${remSize(25)};
3333
line-height: 1;
34+
35+
svg * {
36+
fill: ${prop('Button.default.foreground')};
37+
}
3438
3539
&:hover:not(:disabled) {
36-
color: ${prop('buttonHoverColor')};
37-
background-color: ${prop('buttonHoverColorBackground')};
40+
color: ${prop('Button.hover.foreground')};
41+
background-color: ${prop('Button.hover.background')};
42+
border-color: ${prop('Button.hover.border')};
43+
44+
svg * {
45+
fill: ${prop('Button.hover.foreground')};
46+
}
47+
}
48+
49+
&:active:not(:disabled) {
50+
color: ${prop('Button.active.foreground')};
51+
background-color: ${prop('Button.active.background')};
3852
3953
svg * {
40-
fill: ${prop('buttonHoverColor')};
54+
fill: ${prop('Button.active.foreground')};
4155
}
4256
}
4357
4458
&:disabled {
45-
color: ${prop('buttonDisabledColor')};
46-
background-color: ${prop('buttonDisabledColorBackground')};
59+
color: ${prop('Button.disabled.foreground')};
60+
background-color: ${prop('Button.disabled.background')};
61+
border-color: ${prop('Button.disabled.border')};
4762
cursor: not-allowed;
63+
64+
svg * {
65+
fill: ${prop('Button.disabled.foreground')};
66+
}
4867
}
4968
5069
> * + * {
@@ -90,26 +109,35 @@ const StyledIconButton = styled.button`
90109
height: ${remSize(32)}px;
91110
text-decoration: none;
92111
93-
background-color: ${prop('buttonColorBackground')};
94-
color: ${prop('buttonColor')};
112+
color: ${prop('Button.default.foreground')};
113+
background-color: ${prop('Button.hover.background')};
95114
cursor: pointer;
96-
border: 1px solid transparen;
115+
border: 1px solid transparent;
97116
border-radius: 50%;
98117
padding: ${remSize(8)} ${remSize(25)};
99118
line-height: 1;
100119
101120
&:hover:not(:disabled) {
102-
color: ${prop('buttonHoverColor')};
103-
background-color: ${prop('buttonHoverColorBackground')};
121+
color: ${prop('Button.hover.foreground')};
122+
background-color: ${prop('Button.hover.background')};
123+
124+
svg * {
125+
fill: ${prop('Button.hover.foreground')};
126+
}
127+
}
128+
129+
&:active:not(:disabled) {
130+
color: ${prop('Button.active.foreground')};
131+
background-color: ${prop('Button.active.background')};
104132
105133
svg * {
106-
fill: ${prop('buttonHoverColor')};
134+
fill: ${prop('Button.active.foreground')};
107135
}
108136
}
109137
110138
&:disabled {
111-
color: ${prop('buttonDisabledColor')};
112-
background-color: ${prop('buttonDisabledColorBackground')};
139+
color: ${prop('Button.disabled.foreground')};
140+
background-color: ${prop('Button.disabled.background')};
113141
cursor: not-allowed;
114142
}
115143

Diff for: ‎client/common/Button.stories.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const SubmitButton = () => (
2323
<Button type="submit" label="submit">This is a submit button</Button>
2424
);
2525

26-
export const PrimaryButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>;
26+
export const DefaultTypeButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>;
2727

2828
export const DisabledButton = () => <Button disabled label="login" onClick={action('onClick')}>Log In</Button>;
2929

Diff for: ‎client/theme.js

+106-29
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,43 @@
1+
import lodash from 'lodash';
2+
13
export const Theme = {
24
contrast: 'contrast',
35
dark: 'dark',
46
light: 'light',
57
};
68

79
export const colors = {
8-
p5pink: '#ed225d',
10+
p5jsPink: '#ed225d',
11+
processingBlue: '#007BBB',
12+
p5jsActivePink: '#f10046',
13+
white: '#fff',
14+
black: '#000',
915
yellow: '#f5dc23',
16+
orange: '#ffa500',
17+
red: '#ff0000',
18+
lightsteelblue: '#B0C4DE',
19+
dodgerblue: '#1E90FF',
20+
p5ContrastPink: ' #FFA9D9',
21+
22+
borderColor: ' #B5B5B5',
23+
outlineColor: '#0F9DD7',
24+
};
25+
26+
export const grays = {
27+
lightest: '#FFF', // primary
28+
lighter: '#FBFBFB',
29+
30+
light: '#F0F0F0', // primary
31+
mediumLight: '#D9D9D9',
32+
middleLight: '#A6A6A6',
33+
34+
middleGray: '#747474', // primary
35+
middleDark: '#666',
36+
mediumDark: '#4D4D4D',
37+
38+
dark: '#333', // primary
39+
darker: '#1C1C1C',
40+
darkest: '#000',
1041
};
1142

1243
export const common = {
@@ -16,7 +47,8 @@ export const common = {
1647
export const remSize = size => `${size / common.baseFontSize}rem`;
1748

1849
export const prop = key => (props) => {
19-
const value = props.theme[key];
50+
const keypath = `theme.${key}`;
51+
const value = lodash.get(props, keypath);
2052

2153
if (value == null) {
2254
throw new Error(`themed prop ${key} not found`);
@@ -29,40 +61,85 @@ export default {
2961
[Theme.light]: {
3062
colors,
3163
...common,
32-
primaryTextColor: '#333',
33-
34-
buttonColor: '#000',
35-
buttonColorBackground: '#f4f4f4',
36-
buttonBorderColor: '#b5b5b5',
37-
buttonHoverColor: '#fff',
38-
buttonHoverColorBackground: colors.p5pink,
39-
buttonDisabledColor: '#f10046',
40-
buttonDisabledColorBackground: '#fff',
64+
primaryTextColor: grays.dark,
65+
66+
Button: {
67+
default: {
68+
foreground: colors.black,
69+
background: grays.light,
70+
border: grays.middleLight,
71+
},
72+
hover: {
73+
foreground: grays.lightest,
74+
background: colors.p5jsPink,
75+
border: colors.p5jsPink,
76+
},
77+
active: {
78+
foreground: grays.lightest,
79+
background: colors.p5jsActivePink,
80+
border: colors.p5jsActivePink,
81+
},
82+
disabled: {
83+
foreground: colors.black,
84+
background: grays.light,
85+
border: grays.middleLight,
86+
},
87+
},
4188
},
4289
[Theme.dark]: {
4390
colors,
4491
...common,
45-
primaryTextColor: '#FFF',
46-
47-
buttonColor: '#000',
48-
buttonColorBackground: '#f4f4f4',
49-
buttonBorderColor: '#b5b5b5',
50-
buttonHoverColor: '#fff',
51-
buttonHoverColorBackground: colors.p5pink,
52-
buttonDisabledColor: '#f10046',
53-
buttonDisabledColorBackground: '#fff',
92+
primaryTextColor: grays.lightest,
93+
94+
Button: {
95+
default: {
96+
foreground: grays.light,
97+
background: grays.dark,
98+
border: grays.middleDark,
99+
},
100+
hover: {
101+
foreground: grays.lightest,
102+
background: colors.p5jsPink,
103+
border: colors.p5jsPink,
104+
},
105+
active: {
106+
foreground: grays.lightest,
107+
background: colors.p5jsActivePink,
108+
border: colors.p5jsActivePink,
109+
},
110+
disabled: {
111+
foreground: grays.light,
112+
background: grays.dark,
113+
border: grays.middleDark,
114+
},
115+
},
54116
},
55117
[Theme.contrast]: {
56118
colors,
57119
...common,
58-
primaryTextColor: '#F5DC23',
59-
60-
buttonColor: '#000',
61-
buttonColorBackground: colors.yellow,
62-
buttonBorderColor: '#b5b5b5',
63-
buttonHoverColor: '#333',
64-
buttonHoverColorBackground: '#fff',
65-
buttonDisabledColor: '#333',
66-
buttonDisabledColorBackground: colors.yellow,
120+
primaryTextColor: grays.lightest,
121+
122+
Button: {
123+
default: {
124+
foreground: grays.light,
125+
background: grays.dark,
126+
border: grays.middleDark,
127+
},
128+
hover: {
129+
foreground: grays.dark,
130+
background: colors.yellow,
131+
border: colors.yellow,
132+
},
133+
active: {
134+
foreground: grays.dark,
135+
background: colors.p5jsActivePink,
136+
border: colors.p5jsActivePink,
137+
},
138+
disabled: {
139+
foreground: grays.light,
140+
background: grays.dark,
141+
border: grays.middleDark,
142+
},
143+
},
67144
},
68145
};

0 commit comments

Comments
 (0)