2 files changed, 24 insertions, 0 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index 3a56719b2..cb7ffc1cf 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -63,3 +63,14 @@ export const selectSearchColor = inputBackground;
 
 // Modal
 export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string();
+
+// 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 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..f2632ee20 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -142,3 +142,16 @@ export const badgeBorderRadius = 50;
 
 // Modal
 export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
+
+// 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 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;