Add theme

3 files changed, 108 insertions, 0 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
new file mode 100644
index 000000000..7eac5a3c3
--- /dev/null
+++ b/packages/theme/src/themes/dark/index.ts
@@ -0,0 +1,26 @@
+import color from 'color';
+
+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();
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
new file mode 100644
index 000000000..b22730413
--- /dev/null
+++ b/packages/theme/src/themes/default/index.ts
@@ -0,0 +1,44 @@
+import color from 'color';
+
+import * as legacyStyles from '../legacy';
+
+export const brandPrimary = '#3498db';
+export const brandSuccess = '#5cb85c';
+export const brandInfo = '#5bc0de';
+export const brandWarning = '#FF9F00';
+export const brandDanger = '#d9534f';
+
+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 = '35px';
+export const inputFontSize = '14px';
+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;
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';