diff --git a/client/common/Button.jsx b/client/common/Button.jsx
index 97a960e1..ae736abc 100644
--- a/client/common/Button.jsx
+++ b/client/common/Button.jsx
@@ -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;
}
diff --git a/client/common/Button.stories.jsx b/client/common/Button.stories.jsx
index 1af34631..2f14f9fc 100644
--- a/client/common/Button.stories.jsx
+++ b/client/common/Button.stories.jsx
@@ -23,7 +23,7 @@ export const SubmitButton = () => (
);
-export const PrimaryButton = () => ;
+export const DefaultTypeButton = () => ;
export const DisabledButton = () => ;
diff --git a/client/theme.js b/client/theme.js
index 2a8b54f3..5215dd99 100644
--- a/client/theme.js
+++ b/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,
+ },
+ },
},
};