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, 164 insertions, 140 deletions

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