2 files changed, 145 insertions, 0 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 3a56719b2..fd04b106c 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -1,4 +1,5 @@
 import color from 'color';
+import { merge, cloneDeep } from 'lodash';
 
 import * as defaultStyles from '../default';
 import * as legacyStyles from '../legacy';
@@ -63,3 +64,69 @@ export const selectSearchColor = inputBackground;
 
 // Modal
 export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string();
+
+// Services
+export const services = merge({}, defaultStyles.services, {
+  listItems: {
+    borderColor: legacyStyles.darkThemeGrayDarker,
+    hoverBgColor: legacyStyles.darkThemeGrayDarker,
+    disabled: {
+      color: legacyStyles.darkThemeGray,
+    },
+  },
+});
+
+// Service Icon
+export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
+  isCustom: {
+    border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
+  },
+});
+
+// Workspaces
+const drawerBg = color(colorBackground).lighten(0.3).hex();
+
+export const workspaces = merge({}, defaultStyles.workspaces, {
+  settings: {
+    listItems: cloneDeep(services.listItems),
+  },
+  drawer: {
+    background: drawerBg,
+    addButton: {
+      color: legacyStyles.darkThemeGrayLighter,
+      hoverColor: legacyStyles.darkThemeGraySmoke,
+    },
+    listItem: {
+      border: color(drawerBg).lighten(0.2).hex(),
+      hoverBackground: color(drawerBg).lighten(0.2).hex(),
+      activeBackground: defaultStyles.brandPrimary,
+      name: {
+        color: colorText,
+        activeColor: 'white',
+      },
+      services: {
+        color: color(colorText).darken(0.5).hex(),
+        active: color(defaultStyles.brandPrimary).lighten(0.5).hex(),
+      },
+    },
+  },
+});
+
+// // Workspace settings
+// export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, {
+//   listItemBorderColor: legacyStyles.darkThemeGrayDarker,
+//   listItemHoverBgColor: legacyStyles.darkThemeGrayDarker,
+// });
+//
+// // Workspace Drawer
+// export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
+// export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter;
+// export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke;
+// export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex();
+// export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex();
+// export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary;
+// export const workspaceDrawerItemNameColor = colorText;
+// export const workspaceDrawerItemNameActiveColor = 'white';
+// export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex();
+// export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex();
+//
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 273792d46..d0493b82f 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -1,4 +1,5 @@
 import color from 'color';
+import { cloneDeep } from 'lodash';
 
 import * as legacyStyles from '../legacy';
 
@@ -142,3 +143,80 @@ export const badgeBorderRadius = 50;
 
 // Modal
 export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
+
+// Services
+export const services = {
+  listItems: {
+    padding: 10,
+    height: 57,
+    borderColor: legacyStyles.themeGrayLightest,
+    hoverBgColor: legacyStyles.themeGrayLightest,
+    disabled: {
+      color: legacyStyles.themeGrayLight,
+    },
+  },
+};
+
+// Service Icon
+export const serviceIcon = {
+  width: 35,
+  isCustom: {
+    border: `1px solid ${legacyStyles.themeGrayLighter}`,
+    borderRadius: legacyStyles.themeBorderRadius,
+    width: 37,
+  },
+};
+
+// Workspaces
+const drawerBg = color(colorBackground).lighten(0.1).hex();
+
+export const workspaces = {
+  settings: {
+    listItems: cloneDeep(services.listItems),
+  },
+  drawer: {
+    width: 300,
+    padding: 20,
+    background: drawerBg,
+    buttons: {
+      color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(),
+      hoverColor: legacyStyles.themeGrayLight,
+    },
+    listItem: {
+      hoverBackground: color(drawerBg).darken(0.01).hex(),
+      activeBackground: legacyStyles.themeGrayLightest,
+      border: color(drawerBg).darken(0.05).hex(),
+      name: {
+        color: colorText,
+        activeColor: colorText,
+      },
+      services: {
+        color: color(colorText).lighten(1.5).hex(),
+        active: color(colorText).lighten(1.5).hex(),
+      },
+    },
+  },
+  switchingIndicator: {
+    spinnerColor: 'white',
+  },
+};
+
+// export const workspaceSettings = {
+//   listItemHeight: 57,
+//   listItemBorderColor: legacyStyles.themeGrayLightest,
+//   listItemHoverBgColor: legacyStyles.themeGrayLightest,
+// };
+//
+// // Workspace Drawer
+// export const workspaceDrawerWidth = 300;
+// export const workspaceDrawerPadding = 20;
+// export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex();
+// export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight;
+// export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex();
+// export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex();
+// export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest;
+// export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex();
+// export const workspaceDrawerItemNameColor = colorText;
+// export const workspaceDrawerItemNameActiveColor = colorText;
+// export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex();
+// export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor;