Restructure theme file

client/common/Button.jsx

@@ -24,27 +24,46 @@ const StyledButton = styled.button`
     width: max-content;
     text-decoration: none;
 
-    background-color: ${prop('buttonColorBackground')};
+    color: ${prop('Button.default.foreground')};
-    color: ${prop('buttonColor')};
+    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')};
+      color: ${prop('Button.hover.foreground')};
-      background-color: ${prop('buttonHoverColorBackground')};
+      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')};
+      color: ${prop('Button.disabled.foreground')};
-      background-color: ${prop('buttonDisabledColorBackground')};
+      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('Button.default.foreground')};
-    color: ${prop('buttonColor')};
+    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')};
+      color: ${prop('Button.hover.foreground')};
-      background-color: ${prop('buttonHoverColorBackground')};
+      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')};
+      color: ${prop('Button.disabled.foreground')};
-      background-color: ${prop('buttonDisabledColorBackground')};
+      background-color: ${prop('Button.disabled.background')};
       cursor: not-allowed;
     }
 

client/common/Button.stories.jsx

@@ -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>;
 

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',
+    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]: {
     colors,
     ...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]: {
     colors,
     ...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,
+      },
+    },
   },
 };