refactors workspace theme vars into object structure

2 files changed, 55 insertions, 54 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 73ffa7f5e..fd04b106c 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -76,6 +76,13 @@ export const services = merge({}, defaultStyles.services, {
   },
 });
 
+// Service Icon
+export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
+  isCustom: {
+    border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
+  },
+});
+
 // Workspaces
 const drawerBg = color(colorBackground).lighten(0.3).hex();
 
@@ -105,27 +112,21 @@ export const workspaces = merge({}, defaultStyles.workspaces, {
   },
 });
 
-// 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();
-
-// Service Icon
-export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
-  isCustom: {
-    border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
-  },
-});
+// // 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 eb7e80b9f..48111d22b 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -157,6 +157,16 @@ export const services = {
   },
 };
 
+// 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();
 
@@ -168,7 +178,7 @@ export const workspaces = {
     width: 300,
     padding: 20,
     background: drawerBg,
-    addButton: {
+    buttons: {
       color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(),
       hoverColor: legacyStyles.themeGrayLight,
     },
@@ -188,32 +198,22 @@ export const workspaces = {
   },
 };
 
-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;
-
-// Service Icon
-export const serviceIcon = {
-  width: 35,
-  isCustom: {
-    border: `1px solid ${legacyStyles.themeGrayLighter}`,
-    borderRadius: legacyStyles.themeBorderRadius,
-    width: 37,
-  },
-};
+// 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;