Merge pull request #2249 from lindapaiste/refactor/extend-theme

Contrast theme extends dark theme

Author: raclim

client/theme.js

@@ -64,7 +64,10 @@ export const prop = (key) => (props) => {
   return value;
 };
 
-export default {
+export const extend = (baseTheme, modifications) =>
+  lodash.merge(lodash.cloneDeep(baseTheme), modifications);
+
+const baseThemes = {
   [Theme.light]: {
     colors,
     ...common,
@@ -228,35 +231,23 @@ export default {
     Policy: {
       link: colors.processingBlueLight
     }
-  },
-  [Theme.contrast]: {
-    colors,
-    ...common,
-    primaryTextColor: grays.lightest,
+  }
+};
+
+export default {
+  ...baseThemes,
+  [Theme.contrast]: extend(baseThemes[Theme.dark], {
     inactiveTextColor: grays.light,
-    backgroundColor: grays.darker,
 
     Button: {
       primary: {
-        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
+          foreground: grays.dark
         }
       },
       secondary: {
@@ -271,44 +262,20 @@ export default {
           border: colors.yellow
         },
         active: {
-          foreground: grays.dark,
-          background: colors.p5jsActivePink,
-          border: colors.p5jsActivePink
-        },
-        disabled: {
-          foreground: grays.light,
-          background: grays.dark,
-          border: grays.middleDark
+          foreground: grays.dark
         }
       }
     },
     Icon: {
       default: grays.mediumLight,
       hover: colors.yellow
     },
-    MobilePanel: {
-      default: {
-        foreground: grays.light,
-        background: grays.dark,
-        border: grays.middleDark
-      }
-    },
     Modal: {
-      background: grays.dark,
-      border: grays.middleDark,
       separator: grays.light
     },
-    Separator: grays.middleDark,
-
     TabHighlight: grays.darker,
     SketchList: {
-      background: colors.yellow,
-      card: {
-        background: grays.dark
-      }
-    },
-    Policy: {
-      link: colors.processingBlueLight
+      background: colors.yellow
     }
-  }
+  })
 };