1 files changed, 251 insertions, 0 deletions

diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts
new file mode 100644
index 000000000..80bcba766
--- /dev/null
+++ b/src/themes/default/index.ts
@@ -0,0 +1,251 @@
+import color from 'color';
+import { cloneDeep } from 'lodash';
+
+import * as legacyStyles from '../legacy';
+import type { 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}`,
+    },
+  };
+
+  const services = {
+    listItems: {
+      padding: 10,
+      height: 57,
+      borderColor: legacyStyles.themeGrayLightest,
+      hoverBgColor: legacyStyles.themeGrayLightest,
+      disabled: {
+        color: legacyStyles.themeGrayLight,
+      },
+    },
+  };
+
+  return {
+    brandPrimary,
+    brandSuccess,
+    brandInfo,
+    brandWarning,
+    brandDanger,
+
+    uiFontSize,
+
+    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,
+    },
+
+    // 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,
+      },
+    },
+
+    // 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',
+      },
+    },
+
+    // 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)',
+      },
+      dragIndicator: {
+        background: legacyStyles.themeGrayLight,
+      },
+      resizeHandler: {
+        backgroundHover: styleTypes.primary.accent,
+      },
+    },
+
+    legacyStyles,
+  };
+};