render workspace service list like services + toggle

1 files changed, 50 insertions, 2 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index a9d1e1b46..73ffa7f5e 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';
@@ -64,11 +65,51 @@ 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,
+    },
+  },
+});
+
+// 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 = {
+export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, {
   listItemBorderColor: legacyStyles.darkThemeGrayDarker,
   listItemHoverBgColor: legacyStyles.darkThemeGrayDarker,
-};
+});
 
 // Workspace Drawer
 export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex();
@@ -81,3 +122,10 @@ 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();
+
+// Service Icon
+export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
+  isCustom: {
+    border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
+  },
+});