diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-01-03 16:46:40 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-01-03 16:46:40 +0100 |
commit | ad585791493b09609be885e0304d987a0382db9a (patch) | |
tree | b36509117e1e60f827a56a2caec12e566e015274 /packages/theme/src | |
parent | Add lerna (diff) | |
download | ferdium-app-ad585791493b09609be885e0304d987a0382db9a.tar.gz ferdium-app-ad585791493b09609be885e0304d987a0382db9a.tar.zst ferdium-app-ad585791493b09609be885e0304d987a0382db9a.zip |
Add theme
Diffstat (limited to 'packages/theme/src')
-rw-r--r-- | packages/theme/src/index.ts | 17 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 26 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 44 | ||||
-rw-r--r-- | packages/theme/src/themes/legacy/index.ts | 38 |
4 files changed, 125 insertions, 0 deletions
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts new file mode 100644 index 000000000..35dad298c --- /dev/null +++ b/packages/theme/src/index.ts | |||
@@ -0,0 +1,17 @@ | |||
1 | enum Themes { | ||
2 | default = 'default', | ||
3 | dark = 'dark', | ||
4 | } | ||
5 | |||
6 | import * as darkThemeConfig from './themes/dark'; | ||
7 | import * as defaultThemeConfig from './themes/default'; | ||
8 | |||
9 | export default (themeId: Themes) => { | ||
10 | if (themeId === Themes.dark) { | ||
11 | return Object.assign({}, defaultThemeConfig, darkThemeConfig); | ||
12 | } | ||
13 | |||
14 | return Object.assign({}, defaultThemeConfig); | ||
15 | }; | ||
16 | |||
17 | 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..7eac5a3c3 --- /dev/null +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -0,0 +1,26 @@ | |||
1 | import color from 'color'; | ||
2 | |||
3 | import * as legacyStyles from '../legacy'; | ||
4 | |||
5 | export const colorBackground = legacyStyles.darkThemeGrayDarkest; | ||
6 | export const colorContentBackground = legacyStyles.darkThemeGrayDarkest; | ||
7 | export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo; | ||
8 | |||
9 | export const colorHeadline = legacyStyles.darkThemeTextColor; | ||
10 | export const colorText = legacyStyles.darkThemeTextColor; | ||
11 | |||
12 | // Loader | ||
13 | export const colorFullscreenLoaderSpinner = '#FFF'; | ||
14 | export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(); | ||
15 | |||
16 | // Input | ||
17 | export const labelColor = legacyStyles.darkThemeTextColor; | ||
18 | export const inputColor = legacyStyles.darkThemeGrayLightest; | ||
19 | export const inputBackground = legacyStyles.themeGrayDark; | ||
20 | export const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; | ||
21 | export const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | ||
22 | export const inputPrefixBackground = legacyStyles.darkThemeGray; | ||
23 | export const inputDisabledOpacity = 0.5; | ||
24 | export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark; | ||
25 | export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | ||
26 | 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 @@ | |||
1 | import color from 'color'; | ||
2 | |||
3 | import * as legacyStyles from '../legacy'; | ||
4 | |||
5 | export const brandPrimary = '#3498db'; | ||
6 | export const brandSuccess = '#5cb85c'; | ||
7 | export const brandInfo = '#5bc0de'; | ||
8 | export const brandWarning = '#FF9F00'; | ||
9 | export const brandDanger = '#d9534f'; | ||
10 | |||
11 | export const borderRadius = legacyStyles.themeBorderRadius; | ||
12 | export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall; | ||
13 | |||
14 | export const colorBackground = legacyStyles.themeGrayLighter; | ||
15 | export const colorContentBackground = '#FFFFFF'; | ||
16 | export const colorHeadline = legacyStyles.themeGrayDark; | ||
17 | |||
18 | export const colorText = legacyStyles.themeTextColor; | ||
19 | |||
20 | // Subscription Container Component | ||
21 | export const colorSubscriptionContainerBackground = 'none'; | ||
22 | export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`; | ||
23 | export const colorSubscriptionContainerTitle = brandPrimary; | ||
24 | export const colorSubscriptionContainerActionButtonBackground = brandPrimary; | ||
25 | export const colorSubscriptionContainerActionButtonColor = '#FFF'; | ||
26 | |||
27 | // Loader | ||
28 | export const colorAppLoaderSpinner = '#FFF'; | ||
29 | export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark; | ||
30 | export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string(); | ||
31 | |||
32 | // Input | ||
33 | export const labelColor = legacyStyles.themeGrayLight; | ||
34 | export const inputColor = legacyStyles.themeGray; | ||
35 | export const inputHeight = '35px'; | ||
36 | export const inputFontSize = '14px'; | ||
37 | export const inputBackground = legacyStyles.themeGrayLightest; | ||
38 | export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; | ||
39 | export const inputModifierColor = legacyStyles.themeGrayLight; | ||
40 | export const inputPlaceholderColor = color(legacyStyles.themeGrayLight).lighten(0.3).hex(); | ||
41 | export const inputPrefixColor = legacyStyles.themeGrayLight; | ||
42 | export const inputPrefixBackground = legacyStyles.themeGrayLighter; | ||
43 | export const inputDisabledOpacity = 0.5; | ||
44 | 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 @@ | |||
1 | /* legacy config, injected into sass */ | ||
2 | export const themeBrandPrimary = '#3498db'; | ||
3 | export const themeBrandSuccess = '#5cb85c'; | ||
4 | export const themeBrandInfo = '#5bc0de'; | ||
5 | export const themeBrandWarning = '#FF9F00'; | ||
6 | export const themeBrandDanger = '#d9534f'; | ||
7 | |||
8 | export const themeGrayDark = '#373a3c'; | ||
9 | export const themeGray = '#55595c'; | ||
10 | export const themeGrayLight = '#818a91'; | ||
11 | export const themeGrayLighter = '#eceeef'; | ||
12 | export const themeGrayLightest = '#f7f7f9'; | ||
13 | |||
14 | export const themeBorderRadius = '6px'; | ||
15 | export const themeBorderRadiusSmall = '3px'; | ||
16 | |||
17 | export const themeSidebarWidth = '68px'; | ||
18 | |||
19 | export const themeTextColor = themeGrayDark; | ||
20 | |||
21 | export const themeTransitionTime = '.5s'; | ||
22 | |||
23 | export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)'; | ||
24 | |||
25 | export const darkThemeBlack = '#1A1A1A'; | ||
26 | |||
27 | export const darkThemeGrayDarkest = '#1E1E1E'; | ||
28 | export const darkThemeGrayDarker = '#2D2F31'; | ||
29 | export const darkThemeGrayDark = '#383A3B'; | ||
30 | |||
31 | export const darkThemeGray = '#47494B'; | ||
32 | |||
33 | export const darkThemeGrayLight = '#515355'; | ||
34 | export const darkThemeGrayLighter = '#8a8b8b'; | ||
35 | export const darkThemeGrayLightest = '#FFFFFF'; | ||
36 | |||
37 | export const darkThemeGraySmoke = '#CED0D1'; | ||
38 | export const darkThemeTextColor = '#FFFFFF'; | ||