Fix some appearance issues (#1398)

* Fix property spelling in Sidebar component

* Fix typo in todos partition name

* Use the FerdiDev setting.json in dev mode

The app.setPath calls are still a mess and need to be fixed, but this at
least allows me to experiment locally.

* Make @meetfranz/theme follow the accent color

We inject the value of the accent color into the themes, so the buttons
show the appropriate color. This allows removing some existing css
hacks.

In order to do this, the themes had to be turned into functions that
take the brand color (accent color) as an argument instead of
hard-coding it.

The css-based accent color for legacy components is left unchanged.

* Remove superfluous scrollbars

While overflow: scroll doesn't look ugly on macs, because the system
hides scrollbars by default (except on hower), on Linux and Windows, the
disabled scrollbars appearing by default look ugly.

We set overflow-y: auto instead to display a scrollbar only when needed.

* Simplify theme generation in @meetfranz/themes

* Remove default accent color code duplication

* Apply accent color to styles not in themeInfo.json

Some colors are darkened/lightened versions of the primary brand color,
so they are not caught by build-theme-info. We create these styles with
`color` manually.

* Inset shadow on sidebar

This creates a more flat look that projecting a shadow over the service,
and avoid compositing a shadow over the webview.

* Apply accent color to vertical style tab bar

* Workspace drawer styling in vertical mode

* Fix sidebar layout

In vertical mode, the top of the service was clipped by the sidebar

Also removes unnecessary whitespace in sidebar

* Fix 1px wide line on right when todos are hidden

* Fix window menu

When building the menu bar, the File / app menu is added later, so we
must be careful about indexing the menu bar.

* Update locale files

* Report the default accent color accurately

* Fix inverted button with dark theme

* Fix crash with invalid accent color

Fall back to the default accent color instead

* Darker secondary buttons in dark mode

* Vertical workspace drawer style outside debug mode

In order to reliably apply the style, we need to add a class name to the
drawer manually, as component names only appear in class names in debug
mode.

4 files changed, 433 insertions, 377 deletions

diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index 524a9edf1..78d1dcbb9 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -1,5 +1,5 @@
-import * as darkThemeConfig from './themes/dark';
-import * as defaultThemeConfig from './themes/default';
+import makeDarkThemeConfig from './themes/dark';
+import makeDefaultThemeConfig from './themes/default';
 import * as legacyStyles from './themes/legacy';
 
 export enum ThemeType {
@@ -7,12 +7,16 @@ export enum ThemeType {
   dark = 'dark',
 }
 
-export function theme(themeId: ThemeType) {
-  if (themeId === ThemeType.dark) {
-    return Object.assign({}, defaultThemeConfig, darkThemeConfig, { legacyStyles });
-  }
+export const DEFAULT_ACCENT_COLOR = legacyStyles.themeBrandPrimary;
 
-  return Object.assign({}, defaultThemeConfig, { legacyStyles });
+export function theme(themeId: ThemeType,
+                      brandColor: string = DEFAULT_ACCENT_COLOR) {
+  return themeId === ThemeType.dark ?
+    makeDarkThemeConfig(brandColor) :
+    makeDefaultThemeConfig(brandColor);
 }
 
-export type Theme = typeof defaultThemeConfig;
+const defaultThemeConfigWithDefaultAccentColor =
+  makeDefaultThemeConfig(DEFAULT_ACCENT_COLOR);
+
+export type Theme = typeof defaultThemeConfigWithDefaultAccentColor;
diff --git a/packages/theme/src/themes/IStyleTypes.ts b/packages/theme/src/themes/IStyleTypes.ts
new file mode 100644
index 000000000..df5b51c1d
--- /dev/null
+++ b/packages/theme/src/themes/IStyleTypes.ts
@@ -0,0 +1,8 @@
+
+export default interface IStyleTypes {
+  [index: string]: {
+    accent: string;
+    contrast: string;
+    border?: string;
+  };
+}
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index b436d92f9..684865124 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -1,159 +1,183 @@
 import color from 'color';
 import { cloneDeep, merge } from 'lodash';
 
-import * as defaultStyles from '../default';
+import makeDefaultThemeConfig from '../default';
 import * as legacyStyles from '../legacy';
 
-export const colorBackground = legacyStyles.darkThemeGrayDarkest;
-export const colorContentBackground = legacyStyles.darkThemeGrayDarkest;
-export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
+export default (brandPrimary: string) => {
+  const defaultStyles = makeDefaultThemeConfig(brandPrimary);
+  let brandPrimaryColor = color(legacyStyles.themeBrandPrimary);
+  try {
+    brandPrimaryColor = color(defaultStyles.brandPrimary);
+  } catch (e) {
+    // Ignore invalid color and fall back to default.
+  }
+
+  const colorBackground = legacyStyles.darkThemeGrayDarkest;
+  const colorText = legacyStyles.darkThemeTextColor;
+  const inputColor = legacyStyles.darkThemeGrayLightest;
+  const inputBackground = legacyStyles.themeGrayDark;
+  const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
+  const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
+  const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
+  const selectColor = inputColor;
+  const drawerBg = color(colorBackground).lighten(0.3).hex();
+
+  const services = merge({}, defaultStyles.services, {
+    listItems: {
+      borderColor: legacyStyles.darkThemeGrayDarker,
+      hoverBgColor: legacyStyles.darkThemeGrayDarker,
+      disabled: {
+        color: legacyStyles.darkThemeGray,
+      },
+    },
+  });
 
-export const colorHeadline = legacyStyles.darkThemeTextColor;
-export const colorText = legacyStyles.darkThemeTextColor;
+  return {
+    ...defaultStyles,
 
-export const defaultContentBorder = legacyStyles.themeGrayDark;
+    colorBackground,
+    colorContentBackground: legacyStyles.darkThemeGrayDarkest,
+    colorBackgroundSubscriptionContainer: legacyStyles.themeBrandInfo,
 
-// Loader
-export const colorFullscreenLoaderSpinner = '#FFF';
-export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string();
+    colorHeadline: legacyStyles.darkThemeTextColor,
+    colorText: legacyStyles.darkThemeTextColor,
 
-// Input
-export const labelColor = legacyStyles.darkThemeTextColor;
-export const inputColor = legacyStyles.darkThemeGrayLightest;
-export const inputBackground = legacyStyles.themeGrayDark;
-export const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
-export const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
-export const inputPrefixBackground = legacyStyles.darkThemeGray;
-export const inputDisabledOpacity = 0.5;
-export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark;
-export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
-export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex();
+    defaultContentBorder: legacyStyles.themeGrayDark,
 
-// Toggle
-export const toggleBackground = legacyStyles.darkThemeGray;
-export const toggleButton = legacyStyles.darkThemeGrayLighter;
+    // Loader
+    colorFullscreenLoaderSpinner: '#FFF',
+    colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(),
 
-// Button
-export const buttonPrimaryTextColor = legacyStyles.darkThemeTextColor;
+    // Input
+    labelColor: legacyStyles.darkThemeTextColor,
+    inputColor,
+    inputBackground,
+    inputBorder,
+    inputPrefixColor,
+    inputPrefixBackground: legacyStyles.darkThemeGray,
+    inputDisabledOpacity: 0.5,
+    inputScorePasswordBackground: legacyStyles.darkThemeGrayDark,
+    inputModifierColor: color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(),
+    inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(),
 
-export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter;
-export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
+    // Toggle
+    toggleBackground: legacyStyles.darkThemeGray,
+    toggleButton: legacyStyles.darkThemeGrayLighter,
 
-export const buttonDangerTextColor = legacyStyles.darkThemeTextColor;
+    // Button
+    buttonPrimaryTextColor: legacyStyles.darkThemeTextColor,
 
-export const buttonWarningTextColor = legacyStyles.darkThemeTextColor;
+    buttonSecondaryBackground: legacyStyles.darkThemeGrayLighter,
+    buttonSecondaryTextColor,
 
-export const buttonLoaderColor = {
-  primary: '#FFF',
-  secondary: buttonSecondaryTextColor,
-  success: '#FFF',
-  warning: '#FFF',
-  danger: '#FFF',
-  inverted: defaultStyles.brandPrimary,
-};
+    buttonDangerTextColor: legacyStyles.darkThemeTextColor,
 
-// Select
-export const selectBackground = inputBackground;
-export const selectBorder = inputBorder;
-export const selectColor = inputColor;
-export const selectToggleColor = inputPrefixColor;
-export const selectPopupBackground = legacyStyles.darkThemeGrayLight;
-export const selectOptionColor = '#FFF';
-export const selectOptionBorder = `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`;
-export const selectOptionItemHover = color(legacyStyles.darkThemeGrayLight).darken(0.2).hex();
-export const selectOptionItemHoverColor = selectColor;
-export const selectSearchColor = inputBackground;
-
-// Modal
-export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string();
-export const colorModalBackground = legacyStyles.darkThemeGrayDark;
-
-// 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,
+    buttonWarningTextColor: legacyStyles.darkThemeTextColor,
+
+    buttonLoaderColor: {
+      primary: '#FFF',
+      secondary: buttonSecondaryTextColor,
+      success: '#FFF',
+      warning: '#FFF',
+      danger: '#FFF',
+      inverted: defaultStyles.brandPrimary,
     },
-    listItem: {
-      border: color(drawerBg).lighten(0.2).hex(),
-      hoverBackground: color(drawerBg).lighten(0.2).hex(),
-      activeBackground: defaultStyles.brandPrimary,
-      name: {
-        color: colorText,
-        activeColor: 'white',
+
+    // Select
+    selectBackground: inputBackground,
+    selectBorder: inputBorder,
+    selectColor,
+    selectToggleColor: inputPrefixColor,
+    selectPopupBackground: legacyStyles.darkThemeGrayLight,
+    selectOptionColor: '#FFF',
+    selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`,
+    selectOptionItemHover: color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(),
+    selectOptionItemHoverColor: selectColor,
+    selectSearchColor: inputBackground,
+
+    // Modal
+    colorModalOverlayBackground: color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string(),
+    colorModalBackground: legacyStyles.darkThemeGrayDark,
+
+    // Services
+    services,
+
+    // Service Icon
+    serviceIcon: merge({}, defaultStyles.serviceIcon, {
+      isCustom: {
+        border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
       },
-      services: {
-        color: color(colorText).darken(0.5).hex(),
-        active: color(defaultStyles.brandPrimary).lighten(0.5).hex(),
+    }),
+
+    // Workspaces
+    workspaces: merge({}, defaultStyles.workspaces, {
+      settings: {
+        listItems: cloneDeep(services.listItems),
       },
-    },
-  },
-});
-
-// Announcements
-export const announcements = merge({}, defaultStyles.announcements, {
-  spotlight: {
-    background: legacyStyles.darkThemeGrayDark,
-  },
-});
-
-// Signup
-export const signup = merge({}, defaultStyles.signup, {
-  pricing: {
-    feature: {
-      background: legacyStyles.darkThemeGrayLight,
-      border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(),
-    },
-  },
-});
-
-// Todos
-export const todos = merge({}, defaultStyles.todos, {
-  todosLayer: {
-    borderLeftColor: legacyStyles.darkThemeGrayDarker,
-  },
-  toggleButton: {
-    background: defaultStyles.styleTypes.primary.accent,
-    textColor: defaultStyles.styleTypes.primary.contrast,
-    shadowColor: 'rgba(0, 0, 0, 0.2)',
-  },
-  dragIndicator: {
-    background: legacyStyles.themeGrayLight,
-  },
-});
-
-// TrialStatusBar
-export const trialStatusBar = merge({}, defaultStyles.trialStatusBar, {
-  bar: {
-    background: legacyStyles.darkThemeGray,
-  },
-  progressBar: {
-    background: legacyStyles.darkThemeGrayLighter,
-    progressIndicator: legacyStyles.darkThemeGrayLightest,
-  },
-});
+      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: brandPrimaryColor.lighten(0.5).hex(),
+          },
+        },
+      },
+    }),
+
+    // Announcements
+    announcements: merge({}, defaultStyles.announcements, {
+      spotlight: {
+        background: legacyStyles.darkThemeGrayDark,
+      },
+    }),
+
+    // Signup
+    signup: merge({}, defaultStyles.signup, {
+      pricing: {
+        feature: {
+          background: legacyStyles.darkThemeGrayLight,
+          border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(),
+        },
+      },
+    }),
+
+    // Todos
+    todos: merge({}, defaultStyles.todos, {
+      todosLayer: {
+        borderLeftColor: legacyStyles.darkThemeGrayDarker,
+      },
+      toggleButton: {
+        background: defaultStyles.styleTypes.primary.accent,
+        textColor: defaultStyles.styleTypes.primary.contrast,
+        shadowColor: 'rgba(0, 0, 0, 0.2)',
+      },
+      dragIndicator: {
+        background: legacyStyles.themeGrayLight,
+      },
+    }),
+
+    // TrialStatusBar
+    trialStatusBar: merge({}, defaultStyles.trialStatusBar, {
+      bar: {
+        background: legacyStyles.darkThemeGray,
+      },
+      progressBar: {
+        background: legacyStyles.darkThemeGrayLighter,
+        progressIndicator: legacyStyles.darkThemeGrayLightest,
+      },
+    }),
+  };
+};
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 8e5e93b2a..cceb321c9 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -2,250 +2,270 @@ import color from 'color';
 import { cloneDeep } from 'lodash';
 
 import * as legacyStyles from '../legacy';
-
-export interface IStyleTypes {
-  [index: string]: {
-    accent: string;
-    contrast: string;
-    border?: string;
+import IStyleTypes from '../IStyleTypes';
+
+export default (brandPrimary: string) => {
+  const brandSuccess = '#5cb85c';
+  const brandInfo = '#5bc0de';
+  const brandWarning = '#FF9F00';
+  const brandDanger = '#d9534f';
+  const uiFontSize = 14;
+  const colorBackground = legacyStyles.themeGrayLighter;
+  const colorContentBackground = '#FFFFFF';
+  const colorText = legacyStyles.themeTextColor;
+  const inputColor = legacyStyles.themeGray;
+  const inputBackground = legacyStyles.themeGrayLightest;
+  const inputHeight = 40;
+  const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`;
+  const inputPrefixColor = legacyStyles.themeGrayLight;
+  const inputDisabledOpacity = 0.5;
+  const buttonSecondaryTextColor = legacyStyles.themeGray;
+  const selectColor = inputColor;
+  const drawerBg = color(colorBackground).lighten(0.1).hex();
+
+  const styleTypes: IStyleTypes = {
+    primary: {
+      accent: brandPrimary,
+      contrast: '#FFF',
+    },
+    secondary: {
+      accent: legacyStyles.themeGrayLighter,
+      contrast: legacyStyles.themeGray,
+    },
+    success: {
+      accent: brandSuccess,
+      contrast: '#FFF',
+    },
+    warning: {
+      accent: brandWarning,
+      contrast: '#FFF',
+    },
+    danger: {
+      accent: brandDanger,
+      contrast: '#FFF',
+    },
+    inverted: {
+      accent: 'none',
+      contrast: brandPrimary,
+      border: `1px solid ${brandPrimary}`,
+    },
   };
-}
-
-export const brandPrimary = '#7266F0';
-export const brandSuccess = '#5cb85c';
-export const brandInfo = '#5bc0de';
-export const brandWarning = '#FF9F00';
-export const brandDanger = '#d9534f';
-
-export const uiFontSize = 14;
-
-export const borderRadius = legacyStyles.themeBorderRadius;
-export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall;
-
-export const colorBackground = legacyStyles.themeGrayLighter;
-export const colorContentBackground = '#FFFFFF';
-export const colorHeadline = legacyStyles.themeGrayDark;
-
-export const colorText = legacyStyles.themeTextColor;
-
-export const defaultContentBorder = color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string();
-
-// Subscription Container Component
-export const colorSubscriptionContainerBackground = 'none';
-export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`;
-export const colorSubscriptionContainerTitle = brandPrimary;
-export const colorSubscriptionContainerActionButtonBackground = brandPrimary;
-export const colorSubscriptionContainerActionButtonColor = '#FFF';
-
-// Loader
-export const colorAppLoaderSpinner = '#FFF';
-export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark;
-export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string();
-
-// Input
-export const labelColor = legacyStyles.themeGrayLight;
-export const inputColor = legacyStyles.themeGray;
-export const inputHeight = 40;
-export const inputBackground = legacyStyles.themeGrayLightest;
-export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`;
-export const inputModifierColor = legacyStyles.themeGrayLight;
-export const inputPlaceholderColor = color(legacyStyles.themeGrayLight).lighten(0.3).hex();
-export const inputPrefixColor = legacyStyles.themeGrayLight;
-export const inputPrefixBackground = legacyStyles.themeGrayLighter;
-export const inputDisabledOpacity = 0.5;
-export const inputScorePasswordBackground = legacyStyles.themeGrayLighter;
-
-// Toggle
-export const toggleBackground = legacyStyles.themeGrayLighter;
-export const toggleButton = legacyStyles.themeGrayLight;
-export const toggleButtonActive = brandPrimary;
-export const toggleWidth = 40;
-export const toggleHeight = 14;
-
-// Style Types
-export const styleTypes: IStyleTypes = {
-  primary: {
-    accent: brandPrimary,
-    contrast: '#FFF',
-  },
-  secondary: {
-    accent: legacyStyles.themeGrayLighter,
-    contrast: legacyStyles.themeGray,
-  },
-  success: {
-    accent: brandSuccess,
-    contrast: '#FFF',
-  },
-  warning: {
-    accent: brandWarning,
-    contrast: '#FFF',
-  },
-  danger: {
-    accent: brandDanger,
-    contrast: '#FFF',
-  },
-  inverted: {
-    accent: 'none',
-    contrast: brandPrimary,
-    border: `1px solid ${brandPrimary}`,
-  },
-};
-
-// Button
-export const buttonPrimaryBackground = brandPrimary;
-export const buttonPrimaryTextColor = '#FFF';
-
-export const buttonSecondaryBackground = legacyStyles.themeGrayLighter;
-export const buttonSecondaryTextColor = legacyStyles.themeGray;
 
-export const buttonSuccessBackground = brandSuccess;
-export const buttonSuccessTextColor = '#FFF';
-
-export const buttonDangerBackground = brandDanger;
-export const buttonDangerTextColor = '#FFF';
+  const services = {
+    listItems: {
+      padding: 10,
+      height: 57,
+      borderColor: legacyStyles.themeGrayLightest,
+      hoverBgColor: legacyStyles.themeGrayLightest,
+      disabled: {
+        color: legacyStyles.themeGrayLight,
+      },
+    },
+  };
 
-export const buttonWarningBackground = brandWarning;
-export const buttonWarningTextColor = '#FFF';
+  return {
+    brandPrimary,
+    brandSuccess,
+    brandInfo,
+    brandWarning,
+    brandDanger,
 
-export const buttonInvertedBackground = 'none';
-export const buttonInvertedTextColor = brandPrimary;
-export const buttonInvertedBorder = `1px solid ${brandPrimary}`;
+    uiFontSize,
 
-export const buttonHeight = inputHeight;
+    borderRadius: legacyStyles.themeBorderRadius,
+    borderRadiusSmall: legacyStyles.themeBorderRadiusSmall,
+
+    colorBackground,
+
+    colorContentBackground,
+    colorHeadline: legacyStyles.themeGrayDark,
+
+    colorText,
+
+    defaultContentBorder: color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string(),
+
+    // Subscription Container Component
+    colorSubscriptionContainerBackground: 'none',
+    colorSubscriptionContainerBorder: `1px solid ${brandPrimary}`,
+    colorSubscriptionContainerTitle: brandPrimary,
+    colorSubscriptionContainerActionButtonBackground: brandPrimary,
+    colorSubscriptionContainerActionButtonColor: '#FFF',
+
+    // Loader
+    colorAppLoaderSpinner: '#FFF',
+    colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark,
+    colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string(),
+
+    // Input
+    labelColor: legacyStyles.themeGrayLight,
+    inputColor,
+    inputHeight,
+    inputBackground,
+    inputBorder,
+    inputModifierColor: legacyStyles.themeGrayLight,
+    inputPlaceholderColor: color(legacyStyles.themeGrayLight).lighten(0.3).hex(),
+    inputPrefixColor,
+    inputPrefixBackground: legacyStyles.themeGrayLighter,
+    inputDisabledOpacity,
+    inputScorePasswordBackground: legacyStyles.themeGrayLighter,
+
+    // Toggle
+    toggleBackground: legacyStyles.themeGrayLighter,
+    toggleButton: legacyStyles.themeGrayLight,
+    toggleButtonActive: brandPrimary,
+    toggleWidth: 40,
+    toggleHeight: 14,
+
+    // Style Types
+    styleTypes,
+
+    // Button
+    buttonPrimaryBackground: brandPrimary,
+    buttonPrimaryTextColor: '#FFF',
+
+    buttonSecondaryBackground: legacyStyles.themeGrayLighter,
+    buttonSecondaryTextColor,
+
+    buttonSuccessBackground: brandSuccess,
+    buttonSuccessTextColor: '#FFF',
+
+    buttonDangerBackground: brandDanger,
+    buttonDangerTextColor: '#FFF',
+
+    buttonWarningBackground: brandWarning,
+    buttonWarningTextColor: '#FFF',
+
+    buttonInvertedBackground: 'none',
+    buttonInvertedTextColor: brandPrimary,
+    buttonInvertedBorder: `1px solid ${brandPrimary}`,
+
+    buttonHeight: inputHeight,
+
+    buttonLoaderColor: {
+      primary: '#FFF',
+      secondary: buttonSecondaryTextColor,
+      success: '#FFF',
+      warning: '#FFF',
+      danger: '#FFF',
+      inverted: brandPrimary,
+    },
 
-export const buttonLoaderColor = {
-  primary: '#FFF',
-  secondary: buttonSecondaryTextColor,
-  success: '#FFF',
-  warning: '#FFF',
-  danger: '#FFF',
-  inverted: brandPrimary,
-};
+    // Select
+    selectBackground: inputBackground,
+    selectBorder: inputBorder,
+    selectHeight: inputHeight,
+    selectColor,
+    selectToggleColor: inputPrefixColor,
+    selectPopupBackground: '#FFF',
+    selectOptionColor: inputColor,
+    selectOptionBorder: `1px solid ${legacyStyles.themeGrayLightest}`,
+    selectOptionItemHover: legacyStyles.themeGrayLighter,
+    selectOptionItemHoverColor: selectColor,
+    selectOptionItemActive: brandPrimary,
+    selectOptionItemActiveColor: '#FFF',
+    selectSearchBackground: legacyStyles.themeGrayLighter,
+    selectSearchColor: inputColor,
+    selectDisabledOpacity: inputDisabledOpacity,
+
+    // Badge
+    badgeFontSize: uiFontSize - 2,
+    badgeBorderRadius: 50,
+
+    // Modal
+    colorModalOverlayBackground: color('#000').alpha(0.8).rgb().string(),
+    colorModalBackground: colorContentBackground,
+
+    // Services
+    services,
+
+    // Service Icon
+    serviceIcon: {
+      width: 35,
+      isCustom: {
+        border: `1px solid ${legacyStyles.themeGrayLighter}`,
+        borderRadius: legacyStyles.themeBorderRadius,
+        width: 37,
+      },
+    },
 
-// Select
-export const selectBackground = inputBackground;
-export const selectBorder = inputBorder;
-export const selectHeight = inputHeight;
-export const selectColor = inputColor;
-export const selectToggleColor = inputPrefixColor;
-export const selectPopupBackground = '#FFF';
-export const selectOptionColor = inputColor;
-export const selectOptionBorder = `1px solid ${legacyStyles.themeGrayLightest}`;
-export const selectOptionItemHover = legacyStyles.themeGrayLighter;
-export const selectOptionItemHoverColor = selectColor;
-export const selectOptionItemActive = brandPrimary;
-export const selectOptionItemActiveColor = '#FFF';
-export const selectSearchBackground = legacyStyles.themeGrayLighter;
-export const selectSearchColor = inputColor;
-export const selectDisabledOpacity = inputDisabledOpacity;
-
-// Badge
-export const badgeFontSize = uiFontSize - 2;
-export const badgeBorderRadius = 50;
-
-// Modal
-export const colorModalOverlayBackground = color('#000').alpha(0.8).rgb().string();
-export const colorModalBackground = colorContentBackground;
-
-// Services
-export const services = {
-  listItems: {
-    padding: 10,
-    height: 57,
-    borderColor: legacyStyles.themeGrayLightest,
-    hoverBgColor: legacyStyles.themeGrayLightest,
-    disabled: {
-      color: legacyStyles.themeGrayLight,
+    // Workspaces
+    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',
+      },
     },
-  },
-};
 
-// Service Icon
-export const serviceIcon = {
-  width: 35,
-  isCustom: {
-    border: `1px solid ${legacyStyles.themeGrayLighter}`,
-    borderRadius: legacyStyles.themeBorderRadius,
-    width: 37,
-  },
-};
+    // Announcements
+    announcements: {
+      spotlight: {
+        background: legacyStyles.themeGrayLightest,
+      },
+    },
 
-// 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,
+    // Signup
+    signup: {
+      pricing: {
+        feature: {
+          background: legacyStyles.themeGrayLightest,
+          border: legacyStyles.themeGrayLighter,
+        },
+      },
     },
-    listItem: {
-      hoverBackground: color(drawerBg).darken(0.01).hex(),
-      activeBackground: legacyStyles.themeGrayLightest,
-      border: color(drawerBg).darken(0.05).hex(),
-      name: {
-        color: colorText,
-        activeColor: colorText,
+
+    // Todos
+    todos: {
+      todosLayer: {
+        borderLeftColor: color(legacyStyles.themeGrayLighter).darken(0.1).hex(),
+      },
+      toggleButton: {
+        background: styleTypes.primary.accent,
+        textColor: styleTypes.primary.contrast,
+        shadowColor: 'rgba(0, 0, 0, 0.2)',
       },
-      services: {
-        color: color(colorText).lighten(1.5).hex(),
-        active: color(colorText).lighten(1.5).hex(),
+      dragIndicator: {
+        background: legacyStyles.themeGrayLight,
+      },
+      resizeHandler: {
+        backgroundHover: styleTypes.primary.accent,
       },
     },
-  },
-  switchingIndicator: {
-    spinnerColor: 'white',
-  },
-};
 
-// Announcements
-export const announcements = {
-  spotlight: {
-    background: legacyStyles.themeGrayLightest,
-  },
-};
-
-// Signup
-export const signup = {
-  pricing: {
-    feature: {
-      background: legacyStyles.themeGrayLightest,
-      border: legacyStyles.themeGrayLighter,
+    // TrialStatusBar
+    trialStatusBar: {
+      bar: {
+        background: legacyStyles.themeGrayLightest,
+      },
+      progressBar: {
+        background: color(legacyStyles.themeGrayLighter).darken(0.1).hex(),
+        progressIndicator: legacyStyles.themeGrayLight,
+      },
     },
-  },
-};
 
-// Todos
-export const todos = {
-  todosLayer: {
-    borderLeftColor: color(legacyStyles.themeGrayLighter).darken(0.1).hex(),
-  },
-  toggleButton: {
-    background: styleTypes.primary.accent,
-    textColor: styleTypes.primary.contrast,
-    shadowColor: 'rgba(0, 0, 0, 0.2)',
-  },
-  dragIndicator: {
-    background: legacyStyles.themeGrayLight,
-  },
-  resizeHandler: {
-    backgroundHover: styleTypes.primary.accent,
-  },
-};
-
-// TrialStatusBar
-export const trialStatusBar = {
-  bar: {
-    background: legacyStyles.themeGrayLightest,
-  },
-  progressBar: {
-    background: color(legacyStyles.themeGrayLighter).darken(0.1).hex(),
-    progressIndicator: legacyStyles.themeGrayLight,
-  },
+    legacyStyles,
+  };
 };