From 9472deab9496aca3a9bdf20b93f2a84e3e4569b7 Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Wed, 10 Apr 2019 11:22:25 +0200 Subject: refactors workspace theme vars into object structure --- packages/theme/src/themes/dark/index.ts | 49 ++++++++++++------------ packages/theme/src/themes/default/index.ts | 60 +++++++++++++++--------------- 2 files changed, 55 insertions(+), 54 deletions(-) (limited to 'packages/theme') 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; -- cgit v1.2.3-54-g00ecf