11 files changed, 506 insertions, 0 deletions

diff --git a/packages/theme/.gitignore b/packages/theme/.gitignore
new file mode 100644
index 000000000..d01826a6b
--- /dev/null
+++ b/packages/theme/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+lib
diff --git a/packages/theme/README.md b/packages/theme/README.md
new file mode 100644
index 000000000..6f9cc406b
--- /dev/null
+++ b/packages/theme/README.md
@@ -0,0 +1,11 @@
+# `theme`
+
+> TODO: description
+
+## Usage
+
+```
+const theme = require('theme');
+
+// TODO: DEMONSTRATE API
+```
diff --git a/packages/theme/package-lock.json b/packages/theme/package-lock.json
new file mode 100644
index 000000000..f74af2f24
--- /dev/null
+++ b/packages/theme/package-lock.json
@@ -0,0 +1,52 @@
+{
+  "name": "@meetfranz/theme",
+  "version": "1.0.4",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.1.0.tgz",
+      "integrity": "sha512-CwyopLkuRYO5ei2EpzpIh6LqJMt6Mt+jZhO5VI5f/wJLZriXQE32/SSqzmrh+QB+AZT81Cj8yv+7zwToW8ahZg==",
+      "requires": {
+        "color-convert": "^1.9.1",
+        "color-string": "^1.5.2"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "color-string": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
+      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      }
+    }
+  }
+}
diff --git a/packages/theme/package.json b/packages/theme/package.json
new file mode 100644
index 000000000..642904089
--- /dev/null
+++ b/packages/theme/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@meetfranz/theme",
+  "version": "1.0.13",
+  "description": "Theme configuration for Franz",
+  "author": "Stefan Malzner <stefan@adlk.io>",
+  "homepage": "https://github.com/meetfranz/franz",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meetfranz/franz.git"
+  },
+  "scripts": {
+    "dev": "tsc -w",
+    "prepare": "tsc",
+    "preprepare": "npm run test",
+    "test": "npx mocha"
+  },
+  "bugs": {
+    "url": "https://github.com/meetfranz/franz/issues"
+  },
+  "dependencies": {
+    "color": "^3.1.0"
+  },
+  "gitHead": "e9b9079dc921e85961954727a7b2a8eabe5b9798"
+}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
new file mode 100644
index 000000000..524a9edf1
--- /dev/null
+++ b/packages/theme/src/index.ts
@@ -0,0 +1,18 @@
+import * as darkThemeConfig from './themes/dark';
+import * as defaultThemeConfig from './themes/default';
+import * as legacyStyles from './themes/legacy';
+
+export enum ThemeType {
+  default = 'default',
+  dark = 'dark',
+}
+
+export function theme(themeId: ThemeType) {
+  if (themeId === ThemeType.dark) {
+    return Object.assign({}, defaultThemeConfig, darkThemeConfig, { legacyStyles });
+  }
+
+  return Object.assign({}, defaultThemeConfig, { legacyStyles });
+}
+
+export type Theme = typeof defaultThemeConfig;
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
new file mode 100644
index 000000000..d48dbf916
--- /dev/null
+++ b/packages/theme/src/themes/dark/index.ts
@@ -0,0 +1,120 @@
+import color from 'color';
+import { cloneDeep, merge } from 'lodash';
+
+import * as defaultStyles from '../default';
+import * as legacyStyles from '../legacy';
+
+export const colorBackground = legacyStyles.darkThemeGrayDarkest;
+export const colorContentBackground = legacyStyles.darkThemeGrayDarkest;
+export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
+
+export const colorHeadline = legacyStyles.darkThemeTextColor;
+export const colorText = legacyStyles.darkThemeTextColor;
+
+// Loader
+export const colorFullscreenLoaderSpinner = '#FFF';
+export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string();
+
+// 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();
+
+// Toggle
+export const toggleBackground = legacyStyles.darkThemeGray;
+export const toggleButton = legacyStyles.darkThemeGrayLighter;
+
+// Button
+export const buttonPrimaryTextColor = legacyStyles.darkThemeTextColor;
+
+export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter;
+export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
+
+export const buttonDangerTextColor = legacyStyles.darkThemeTextColor;
+
+export const buttonWarningTextColor = legacyStyles.darkThemeTextColor;
+
+export const buttonLoaderColor = {
+  primary: '#FFF',
+  secondary: buttonSecondaryTextColor,
+  success: '#FFF',
+  warning: '#FFF',
+  danger: '#FFF',
+  inverted: defaultStyles.brandPrimary,
+};
+
+// 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.8).rgb().string();
+
+// 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,
+    },
+    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: color(defaultStyles.brandPrimary).lighten(0.5).hex(),
+      },
+    },
+  },
+});
+
+// Announcements
+export const announcements = merge({}, defaultStyles.workspaces, {
+  spotlight: {
+    background: legacyStyles.darkThemeGrayDark,
+  },
+});
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
new file mode 100644
index 000000000..0f02fa3c8
--- /dev/null
+++ b/packages/theme/src/themes/default/index.ts
@@ -0,0 +1,209 @@
+import color from 'color';
+import { cloneDeep } from 'lodash';
+
+import * as legacyStyles from '../legacy';
+
+export interface IStyleTypes {
+  [index: string]: {
+    accent: string;
+    contrast: string;
+    border?: string;
+  };
+}
+
+export const brandPrimary = '#3498db';
+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;
+
+// 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';
+
+export const buttonWarningBackground = brandWarning;
+export const buttonWarningTextColor = '#FFF';
+
+export const buttonInvertedBackground = 'none';
+export const buttonInvertedTextColor = brandPrimary;
+export const buttonInvertedBorder = `1px solid ${brandPrimary}`;
+
+export const buttonHeight = inputHeight;
+
+export const buttonLoaderColor = {
+  primary: '#FFF',
+  secondary: buttonSecondaryTextColor,
+  success: '#FFF',
+  warning: '#FFF',
+  danger: '#FFF',
+  inverted: brandPrimary,
+};
+
+// 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.5).rgb().string();
+
+// Services
+export const services = {
+  listItems: {
+    padding: 10,
+    height: 57,
+    borderColor: legacyStyles.themeGrayLightest,
+    hoverBgColor: legacyStyles.themeGrayLightest,
+    disabled: {
+      color: legacyStyles.themeGrayLight,
+    },
+  },
+};
+
+// 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();
+
+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,
+    },
+    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',
+  },
+};
+
+// Announcements
+export const announcements = {
+  spotlight: {
+    background: legacyStyles.themeGrayLightest,
+  },
+};
diff --git a/packages/theme/src/themes/legacy/index.ts b/packages/theme/src/themes/legacy/index.ts
new file mode 100644
index 000000000..2114b92c1
--- /dev/null
+++ b/packages/theme/src/themes/legacy/index.ts
@@ -0,0 +1,38 @@
+/* legacy config, injected into sass */
+export const themeBrandPrimary = '#3498db';
+export const themeBrandSuccess = '#5cb85c';
+export const themeBrandInfo = '#5bc0de';
+export const themeBrandWarning = '#FF9F00';
+export const themeBrandDanger = '#d9534f';
+
+export const themeGrayDark = '#373a3c';
+export const themeGray = '#55595c';
+export const themeGrayLight = '#818a91';
+export const themeGrayLighter = '#eceeef';
+export const themeGrayLightest = '#f7f7f9';
+
+export const themeBorderRadius = '6px';
+export const themeBorderRadiusSmall = '3px';
+
+export const themeSidebarWidth = '68px';
+
+export const themeTextColor = themeGrayDark;
+
+export const themeTransitionTime = '.5s';
+
+export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)';
+
+export const darkThemeBlack = '#1A1A1A';
+
+export const darkThemeGrayDarkest = '#1E1E1E';
+export const darkThemeGrayDarker = '#2D2F31';
+export const darkThemeGrayDark = '#383A3B';
+
+export const darkThemeGray = '#47494B';
+
+export const darkThemeGrayLight = '#515355';
+export const darkThemeGrayLighter = '#8a8b8b';
+export const darkThemeGrayLightest = '#FFFFFF';
+
+export const darkThemeGraySmoke = '#CED0D1';
+export const darkThemeTextColor = '#FFFFFF';
diff --git a/packages/theme/test/index.test.js b/packages/theme/test/index.test.js
new file mode 100644
index 000000000..3906433c1
--- /dev/null
+++ b/packages/theme/test/index.test.js
@@ -0,0 +1,17 @@
+const expect = require('expect.js');
+
+const { colorBackground: colorBackgroundDefault } = require('../lib/themes/default');
+const { colorBackground: colorBackgroundDark } = require('../lib/themes/dark');
+const { default: theme } = require('../lib');
+
+describe('Load theme', () => {
+  it('Should load default theme', () => {
+    const { colorBackground } = theme('default');
+    expect(colorBackground).to.be(colorBackgroundDefault);
+  });
+
+  it('Should load dark theme', () => {
+    const { colorBackground } = theme('dark');
+    expect(colorBackground).to.be(colorBackgroundDark);
+  });
+});
diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json
new file mode 100644
index 000000000..d80ee9ee7
--- /dev/null
+++ b/packages/theme/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.settings.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  },
+}
diff --git a/packages/theme/tslint.json b/packages/theme/tslint.json
new file mode 100644
index 000000000..0946f2096
--- /dev/null
+++ b/packages/theme/tslint.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tslint.json"
+}