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.

1 files changed, 249 insertions, 229 deletions

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,
+  };
 };