diff options
author | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2021-10-15 17:20:09 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-15 17:20:09 +0530 |
commit | a05ef4bb5101e6e8d999ad0d7383b394996fb763 (patch) | |
tree | 38072e3abe8d0bdaababf0abd1710dc47baa4a3c /src | |
parent | chore: move 'packages/forms' into 'src' (no longer an injected package) (#2079) (diff) | |
download | ferdium-app-a05ef4bb5101e6e8d999ad0d7383b394996fb763.tar.gz ferdium-app-a05ef4bb5101e6e8d999ad0d7383b394996fb763.tar.zst ferdium-app-a05ef4bb5101e6e8d999ad0d7383b394996fb763.zip |
chore: move 'packages/themes' into 'src' (no longer an injected package) (#2080)
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ui/badge/ProBadge.tsx | 2 | ||||
-rw-r--r-- | src/components/ui/badge/index.tsx | 2 | ||||
-rw-r--r-- | src/components/ui/button/index.tsx | 2 | ||||
-rw-r--r-- | src/components/ui/error/styles.ts | 2 | ||||
-rw-r--r-- | src/components/ui/headline/index.tsx | 2 | ||||
-rw-r--r-- | src/components/ui/icon/index.tsx | 2 | ||||
-rw-r--r-- | src/components/ui/infobox/index.tsx | 2 | ||||
-rw-r--r-- | src/components/ui/input/styles.ts | 2 | ||||
-rw-r--r-- | src/components/ui/label/styles.ts | 2 | ||||
-rw-r--r-- | src/components/ui/select/index.tsx | 3 | ||||
-rw-r--r-- | src/components/ui/textarea/styles.ts | 2 | ||||
-rw-r--r-- | src/components/ui/toggle/index.tsx | 2 | ||||
-rw-r--r-- | src/components/ui/typings/generic.ts | 2 | ||||
-rw-r--r-- | src/config.ts | 2 | ||||
-rw-r--r-- | src/features/todos/store.js | 2 | ||||
-rw-r--r-- | src/stores/UIStore.ts | 2 | ||||
-rw-r--r-- | src/themes/IStyleTypes.ts | 7 | ||||
-rw-r--r-- | src/themes/dark/index.ts | 171 | ||||
-rw-r--r-- | src/themes/default/index.ts | 251 | ||||
-rw-r--r-- | src/themes/index.ts | 21 | ||||
-rw-r--r-- | src/themes/legacy/index.ts | 40 |
21 files changed, 506 insertions, 17 deletions
diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx index cb6bc4c98..dc1e76f7f 100644 --- a/src/components/ui/badge/ProBadge.tsx +++ b/src/components/ui/badge/ProBadge.tsx | |||
@@ -3,7 +3,7 @@ import classnames from 'classnames'; | |||
3 | import { Component } from 'react'; | 3 | import { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
5 | 5 | ||
6 | import { Theme } from '@meetfranz/theme'; | 6 | import { Theme } from '../../../themes'; |
7 | import { Icon } from '../icon'; | 7 | import { Icon } from '../icon'; |
8 | import { Badge } from './index'; | 8 | import { Badge } from './index'; |
9 | import { IWithStyle } from '../typings/generic'; | 9 | import { IWithStyle } from '../typings/generic'; |
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx index 6495036ff..61bede937 100644 --- a/src/components/ui/badge/index.tsx +++ b/src/components/ui/badge/index.tsx | |||
@@ -2,7 +2,7 @@ import classnames from 'classnames'; | |||
2 | import { Component, ReactNode } from 'react'; | 2 | import { Component, ReactNode } from 'react'; |
3 | import injectStyle from 'react-jss'; | 3 | import injectStyle from 'react-jss'; |
4 | 4 | ||
5 | import { Theme } from '@meetfranz/theme'; | 5 | import { Theme } from '../../../themes'; |
6 | import { IWithStyle } from '../typings/generic'; | 6 | import { IWithStyle } from '../typings/generic'; |
7 | 7 | ||
8 | interface IProps extends IWithStyle { | 8 | interface IProps extends IWithStyle { |
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index 5b8927b51..12e5e4449 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -4,8 +4,8 @@ import { Property } from 'csstype'; | |||
4 | import { Component, MouseEvent } from 'react'; | 4 | import { Component, MouseEvent } from 'react'; |
5 | import injectStyle, { withTheme } from 'react-jss'; | 5 | import injectStyle, { withTheme } from 'react-jss'; |
6 | import Loader from 'react-loader'; | 6 | import Loader from 'react-loader'; |
7 | import { Theme } from '@meetfranz/theme'; | ||
8 | 7 | ||
8 | import { Theme } from '../../../themes'; | ||
9 | import { IFormField, IWithStyle } from '../typings/generic'; | 9 | import { IFormField, IWithStyle } from '../typings/generic'; |
10 | 10 | ||
11 | type ButtonType = | 11 | type ButtonType = |
diff --git a/src/components/ui/error/styles.ts b/src/components/ui/error/styles.ts index ed993ddd5..9da95705a 100644 --- a/src/components/ui/error/styles.ts +++ b/src/components/ui/error/styles.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '../../../themes'; |
2 | 2 | ||
3 | export default (theme: Theme) => ({ | 3 | export default (theme: Theme) => ({ |
4 | message: { | 4 | message: { |
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx index 3a3654f02..ea2949102 100644 --- a/src/components/ui/headline/index.tsx +++ b/src/components/ui/headline/index.tsx | |||
@@ -2,7 +2,7 @@ import classnames from 'classnames'; | |||
2 | import { Component, createElement, ReactNode } from 'react'; | 2 | import { Component, createElement, ReactNode } from 'react'; |
3 | import injectStyle from 'react-jss'; | 3 | import injectStyle from 'react-jss'; |
4 | 4 | ||
5 | import { Theme } from '@meetfranz/theme'; | 5 | import { Theme } from '../../../themes'; |
6 | import { IWithStyle, Omit } from '../typings/generic'; | 6 | import { IWithStyle, Omit } from '../typings/generic'; |
7 | 7 | ||
8 | interface IProps extends IWithStyle { | 8 | interface IProps extends IWithStyle { |
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx index fdc48d14a..85bb61d13 100644 --- a/src/components/ui/icon/index.tsx +++ b/src/components/ui/icon/index.tsx | |||
@@ -3,7 +3,7 @@ import classnames from 'classnames'; | |||
3 | import { Component } from 'react'; | 3 | import { Component } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
5 | 5 | ||
6 | import { Theme } from '@meetfranz/theme'; | 6 | import { Theme } from '../../../themes'; |
7 | import { IWithStyle } from '../typings/generic'; | 7 | import { IWithStyle } from '../typings/generic'; |
8 | 8 | ||
9 | interface IProps extends IWithStyle { | 9 | interface IProps extends IWithStyle { |
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx index e6be83556..87940c4d4 100644 --- a/src/components/ui/infobox/index.tsx +++ b/src/components/ui/infobox/index.tsx | |||
@@ -3,7 +3,7 @@ import classnames from 'classnames'; | |||
3 | import { Component, ReactNode } from 'react'; | 3 | import { Component, ReactNode } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
5 | 5 | ||
6 | import { Theme } from '@meetfranz/theme'; | 6 | import { Theme } from '../../../themes'; |
7 | import { Icon } from '../icon'; | 7 | import { Icon } from '../icon'; |
8 | import { IWithStyle } from '../typings/generic'; | 8 | import { IWithStyle } from '../typings/generic'; |
9 | 9 | ||
diff --git a/src/components/ui/input/styles.ts b/src/components/ui/input/styles.ts index 27426152e..04c1b3991 100644 --- a/src/components/ui/input/styles.ts +++ b/src/components/ui/input/styles.ts | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Property } from 'csstype'; | 1 | import { Property } from 'csstype'; |
2 | 2 | ||
3 | import { Theme } from '@meetfranz/theme'; | 3 | import { Theme } from '../../../themes'; |
4 | 4 | ||
5 | const prefixStyles = (theme: Theme) => ({ | 5 | const prefixStyles = (theme: Theme) => ({ |
6 | background: theme.inputPrefixBackground, | 6 | background: theme.inputPrefixBackground, |
diff --git a/src/components/ui/label/styles.ts b/src/components/ui/label/styles.ts index 0c9cef8bf..faa44ae5b 100644 --- a/src/components/ui/label/styles.ts +++ b/src/components/ui/label/styles.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | 1 | import { Theme } from '../../../themes'; |
2 | 2 | ||
3 | export default (theme: Theme) => ({ | 3 | export default (theme: Theme) => ({ |
4 | content: {}, | 4 | content: {}, |
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx index 41cab7818..2605503a3 100644 --- a/src/components/ui/select/index.tsx +++ b/src/components/ui/select/index.tsx | |||
@@ -8,8 +8,7 @@ import classnames from 'classnames'; | |||
8 | import { ChangeEvent, Component, createRef } from 'react'; | 8 | import { ChangeEvent, Component, createRef } from 'react'; |
9 | import injectStyle from 'react-jss'; | 9 | import injectStyle from 'react-jss'; |
10 | 10 | ||
11 | import { Theme } from '@meetfranz/theme'; | 11 | import { Theme } from '../../../themes'; |
12 | |||
13 | import { IFormField, IWithStyle } from '../typings/generic'; | 12 | import { IFormField, IWithStyle } from '../typings/generic'; |
14 | 13 | ||
15 | import { Error } from '../error'; | 14 | import { Error } from '../error'; |
diff --git a/src/components/ui/textarea/styles.ts b/src/components/ui/textarea/styles.ts index f2267e000..36fc2a82e 100644 --- a/src/components/ui/textarea/styles.ts +++ b/src/components/ui/textarea/styles.ts | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Property } from 'csstype'; | 1 | import { Property } from 'csstype'; |
2 | 2 | ||
3 | import { Theme } from '@meetfranz/theme'; | 3 | import { Theme } from '../../../themes'; |
4 | 4 | ||
5 | export default (theme: Theme) => ({ | 5 | export default (theme: Theme) => ({ |
6 | label: { | 6 | label: { |
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx index 67b6c3835..7b6ba147f 100644 --- a/src/components/ui/toggle/index.tsx +++ b/src/components/ui/toggle/index.tsx | |||
@@ -2,8 +2,8 @@ import classnames from 'classnames'; | |||
2 | import { Property } from 'csstype'; | 2 | import { Property } from 'csstype'; |
3 | import { Component, InputHTMLAttributes } from 'react'; | 3 | import { Component, InputHTMLAttributes } from 'react'; |
4 | import injectStyle from 'react-jss'; | 4 | import injectStyle from 'react-jss'; |
5 | import { Theme } from '@meetfranz/theme'; | ||
6 | 5 | ||
6 | import { Theme } from '../../../themes'; | ||
7 | import { IFormField, IWithStyle } from '../typings/generic'; | 7 | import { IFormField, IWithStyle } from '../typings/generic'; |
8 | 8 | ||
9 | import { Error } from '../error'; | 9 | import { Error } from '../error'; |
diff --git a/src/components/ui/typings/generic.ts b/src/components/ui/typings/generic.ts index 084e0e0a5..65b996d59 100644 --- a/src/components/ui/typings/generic.ts +++ b/src/components/ui/typings/generic.ts | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Classes } from 'jss'; | 1 | import { Classes } from 'jss'; |
2 | 2 | ||
3 | import { Theme } from '@meetfranz/theme'; | 3 | import { Theme } from '../../../themes'; |
4 | 4 | ||
5 | export interface IFormField { | 5 | export interface IFormField { |
6 | showLabel?: boolean; | 6 | showLabel?: boolean; |
diff --git a/src/config.ts b/src/config.ts index e1e8230c2..5f95a59f4 100644 --- a/src/config.ts +++ b/src/config.ts | |||
@@ -2,7 +2,7 @@ | |||
2 | 2 | ||
3 | import ms from 'ms'; | 3 | import ms from 'ms'; |
4 | 4 | ||
5 | import { DEFAULT_ACCENT_COLOR } from '@meetfranz/theme'; | 5 | export const DEFAULT_ACCENT_COLOR = '#7266F0'; |
6 | 6 | ||
7 | export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks | 7 | export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks |
8 | 8 | ||
diff --git a/src/features/todos/store.js b/src/features/todos/store.js index ec06c279d..010a029ff 100644 --- a/src/features/todos/store.js +++ b/src/features/todos/store.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import { ThemeType } from '@meetfranz/theme'; | ||
2 | import { computed, action, observable } from 'mobx'; | 1 | import { computed, action, observable } from 'mobx'; |
3 | import localStorage from 'mobx-localstorage'; | 2 | import localStorage from 'mobx-localstorage'; |
4 | 3 | ||
4 | import { ThemeType } from '../../themes'; | ||
5 | import { todoActions } from './actions'; | 5 | import { todoActions } from './actions'; |
6 | import { | 6 | import { |
7 | CUSTOM_TODO_SERVICE, | 7 | CUSTOM_TODO_SERVICE, |
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts index 6ab63c2ee..6a9597006 100644 --- a/src/stores/UIStore.ts +++ b/src/stores/UIStore.ts | |||
@@ -1,7 +1,7 @@ | |||
1 | import { action, observable, computed, reaction } from 'mobx'; | 1 | import { action, observable, computed, reaction } from 'mobx'; |
2 | import { theme, ThemeType } from '@meetfranz/theme'; | ||
3 | import { nativeTheme, systemPreferences } from '@electron/remote'; | 2 | import { nativeTheme, systemPreferences } from '@electron/remote'; |
4 | 3 | ||
4 | import { theme, ThemeType } from '../themes'; | ||
5 | import Store from './lib/Store'; | 5 | import Store from './lib/Store'; |
6 | import { isMac, isWindows } from '../environment'; | 6 | import { isMac, isWindows } from '../environment'; |
7 | 7 | ||
diff --git a/src/themes/IStyleTypes.ts b/src/themes/IStyleTypes.ts new file mode 100644 index 000000000..48f52daf2 --- /dev/null +++ b/src/themes/IStyleTypes.ts | |||
@@ -0,0 +1,7 @@ | |||
1 | export interface IStyleTypes { | ||
2 | [index: string]: { | ||
3 | accent: string; | ||
4 | contrast: string; | ||
5 | border?: string; | ||
6 | }; | ||
7 | } | ||
diff --git a/src/themes/dark/index.ts b/src/themes/dark/index.ts new file mode 100644 index 000000000..aa132c743 --- /dev/null +++ b/src/themes/dark/index.ts | |||
@@ -0,0 +1,171 @@ | |||
1 | import color from 'color'; | ||
2 | import { cloneDeep, merge } from 'lodash'; | ||
3 | |||
4 | import makeDefaultThemeConfig from '../default'; | ||
5 | import * as legacyStyles from '../legacy'; | ||
6 | |||
7 | export default (brandPrimary: string) => { | ||
8 | const defaultStyles = makeDefaultThemeConfig(brandPrimary); | ||
9 | let brandPrimaryColor = color(legacyStyles.themeBrandPrimary); | ||
10 | try { | ||
11 | brandPrimaryColor = color(defaultStyles.brandPrimary); | ||
12 | } catch { | ||
13 | // Ignore invalid color and fall back to default. | ||
14 | } | ||
15 | |||
16 | const colorBackground = legacyStyles.darkThemeGrayDarkest; | ||
17 | const colorText = legacyStyles.darkThemeTextColor; | ||
18 | const inputColor = legacyStyles.darkThemeGrayLightest; | ||
19 | const inputBackground = legacyStyles.themeGrayDark; | ||
20 | const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; | ||
21 | const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter) | ||
22 | .lighten(0.3) | ||
23 | .hex(); | ||
24 | const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; | ||
25 | const selectColor = inputColor; | ||
26 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | ||
27 | |||
28 | const services = merge({}, defaultStyles.services, { | ||
29 | listItems: { | ||
30 | borderColor: legacyStyles.darkThemeGrayDarker, | ||
31 | hoverBgColor: legacyStyles.darkThemeGrayDarker, | ||
32 | disabled: { | ||
33 | color: legacyStyles.darkThemeGray, | ||
34 | }, | ||
35 | }, | ||
36 | }); | ||
37 | |||
38 | return { | ||
39 | ...defaultStyles, | ||
40 | |||
41 | colorBackground, | ||
42 | colorContentBackground: legacyStyles.darkThemeGrayDarkest, | ||
43 | colorBackgroundSubscriptionContainer: legacyStyles.themeBrandInfo, | ||
44 | |||
45 | colorHeadline: legacyStyles.darkThemeTextColor, | ||
46 | colorText: legacyStyles.darkThemeTextColor, | ||
47 | |||
48 | defaultContentBorder: legacyStyles.themeGrayDark, | ||
49 | |||
50 | // Loader | ||
51 | colorFullscreenLoaderSpinner: '#FFF', | ||
52 | colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest) | ||
53 | .alpha(0.5) | ||
54 | .rgb() | ||
55 | .string(), | ||
56 | |||
57 | // Input | ||
58 | labelColor: legacyStyles.darkThemeTextColor, | ||
59 | inputColor, | ||
60 | inputBackground, | ||
61 | inputBorder, | ||
62 | inputPrefixColor, | ||
63 | inputPrefixBackground: legacyStyles.darkThemeGray, | ||
64 | inputDisabledOpacity: 0.5, | ||
65 | inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, | ||
66 | inputModifierColor: color(legacyStyles.darkThemeGrayLighter) | ||
67 | .lighten(0.3) | ||
68 | .hex(), | ||
69 | inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter) | ||
70 | .darken(0.1) | ||
71 | .hex(), | ||
72 | |||
73 | // Toggle | ||
74 | toggleBackground: legacyStyles.darkThemeGray, | ||
75 | toggleButton: legacyStyles.darkThemeGrayLighter, | ||
76 | |||
77 | // Button | ||
78 | buttonPrimaryTextColor: legacyStyles.darkThemeTextColor, | ||
79 | |||
80 | buttonSecondaryBackground: legacyStyles.darkThemeGrayLighter, | ||
81 | buttonSecondaryTextColor, | ||
82 | |||
83 | buttonDangerTextColor: legacyStyles.darkThemeTextColor, | ||
84 | |||
85 | buttonWarningTextColor: legacyStyles.darkThemeTextColor, | ||
86 | |||
87 | buttonLoaderColor: { | ||
88 | primary: '#FFF', | ||
89 | secondary: buttonSecondaryTextColor, | ||
90 | success: '#FFF', | ||
91 | warning: '#FFF', | ||
92 | danger: '#FFF', | ||
93 | inverted: defaultStyles.brandPrimary, | ||
94 | }, | ||
95 | |||
96 | // Select | ||
97 | selectBackground: inputBackground, | ||
98 | selectBorder: inputBorder, | ||
99 | selectColor, | ||
100 | selectToggleColor: inputPrefixColor, | ||
101 | selectPopupBackground: legacyStyles.darkThemeGrayLight, | ||
102 | selectOptionColor: '#FFF', | ||
103 | selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight) | ||
104 | .darken(0.2) | ||
105 | .hex()}`, | ||
106 | selectOptionItemHover: color(legacyStyles.darkThemeGrayLight) | ||
107 | .darken(0.2) | ||
108 | .hex(), | ||
109 | selectOptionItemHoverColor: selectColor, | ||
110 | selectSearchColor: inputBackground, | ||
111 | |||
112 | // Modal | ||
113 | colorModalOverlayBackground: color(legacyStyles.darkThemeBlack) | ||
114 | .alpha(0.9) | ||
115 | .rgb() | ||
116 | .string(), | ||
117 | colorModalBackground: legacyStyles.darkThemeGrayDark, | ||
118 | |||
119 | // Services | ||
120 | services, | ||
121 | |||
122 | // Service Icon | ||
123 | serviceIcon: merge({}, defaultStyles.serviceIcon, { | ||
124 | isCustom: { | ||
125 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
126 | }, | ||
127 | }), | ||
128 | |||
129 | // Workspaces | ||
130 | workspaces: merge({}, defaultStyles.workspaces, { | ||
131 | settings: { | ||
132 | listItems: cloneDeep(services.listItems), | ||
133 | }, | ||
134 | drawer: { | ||
135 | background: drawerBg, | ||
136 | addButton: { | ||
137 | color: legacyStyles.darkThemeGrayLighter, | ||
138 | hoverColor: legacyStyles.darkThemeGraySmoke, | ||
139 | }, | ||
140 | listItem: { | ||
141 | border: color(drawerBg).lighten(0.2).hex(), | ||
142 | hoverBackground: color(drawerBg).lighten(0.2).hex(), | ||
143 | activeBackground: defaultStyles.brandPrimary, | ||
144 | name: { | ||
145 | color: colorText, | ||
146 | activeColor: 'white', | ||
147 | }, | ||
148 | services: { | ||
149 | color: color(colorText).darken(0.5).hex(), | ||
150 | active: brandPrimaryColor.lighten(0.5).hex(), | ||
151 | }, | ||
152 | }, | ||
153 | }, | ||
154 | }), | ||
155 | |||
156 | // Todos | ||
157 | todos: merge({}, defaultStyles.todos, { | ||
158 | todosLayer: { | ||
159 | borderLeftColor: legacyStyles.darkThemeGrayDarker, | ||
160 | }, | ||
161 | toggleButton: { | ||
162 | background: defaultStyles.styleTypes.primary.accent, | ||
163 | textColor: defaultStyles.styleTypes.primary.contrast, | ||
164 | shadowColor: 'rgba(0, 0, 0, 0.2)', | ||
165 | }, | ||
166 | dragIndicator: { | ||
167 | background: legacyStyles.themeGrayLight, | ||
168 | }, | ||
169 | }), | ||
170 | }; | ||
171 | }; | ||
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 @@ | |||
1 | import color from 'color'; | ||
2 | import { cloneDeep } from 'lodash'; | ||
3 | |||
4 | import * as legacyStyles from '../legacy'; | ||
5 | import type { IStyleTypes } from '../IStyleTypes'; | ||
6 | |||
7 | export default (brandPrimary: string) => { | ||
8 | const brandSuccess = '#5cb85c'; | ||
9 | const brandInfo = '#5bc0de'; | ||
10 | const brandWarning = '#FF9F00'; | ||
11 | const brandDanger = '#d9534f'; | ||
12 | const uiFontSize = 14; | ||
13 | const colorBackground = legacyStyles.themeGrayLighter; | ||
14 | const colorContentBackground = '#FFFFFF'; | ||
15 | const colorText = legacyStyles.themeTextColor; | ||
16 | const inputColor = legacyStyles.themeGray; | ||
17 | const inputBackground = legacyStyles.themeGrayLightest; | ||
18 | const inputHeight = 40; | ||
19 | const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; | ||
20 | const inputPrefixColor = legacyStyles.themeGrayLight; | ||
21 | const inputDisabledOpacity = 0.5; | ||
22 | const buttonSecondaryTextColor = legacyStyles.themeGray; | ||
23 | const selectColor = inputColor; | ||
24 | const drawerBg = color(colorBackground).lighten(0.1).hex(); | ||
25 | |||
26 | const styleTypes: IStyleTypes = { | ||
27 | primary: { | ||
28 | accent: brandPrimary, | ||
29 | contrast: '#FFF', | ||
30 | }, | ||
31 | secondary: { | ||
32 | accent: legacyStyles.themeGrayLighter, | ||
33 | contrast: legacyStyles.themeGray, | ||
34 | }, | ||
35 | success: { | ||
36 | accent: brandSuccess, | ||
37 | contrast: '#FFF', | ||
38 | }, | ||
39 | warning: { | ||
40 | accent: brandWarning, | ||
41 | contrast: '#FFF', | ||
42 | }, | ||
43 | danger: { | ||
44 | accent: brandDanger, | ||
45 | contrast: '#FFF', | ||
46 | }, | ||
47 | inverted: { | ||
48 | accent: 'none', | ||
49 | contrast: brandPrimary, | ||
50 | border: `1px solid ${brandPrimary}`, | ||
51 | }, | ||
52 | }; | ||
53 | |||
54 | const services = { | ||
55 | listItems: { | ||
56 | padding: 10, | ||
57 | height: 57, | ||
58 | borderColor: legacyStyles.themeGrayLightest, | ||
59 | hoverBgColor: legacyStyles.themeGrayLightest, | ||
60 | disabled: { | ||
61 | color: legacyStyles.themeGrayLight, | ||
62 | }, | ||
63 | }, | ||
64 | }; | ||
65 | |||
66 | return { | ||
67 | brandPrimary, | ||
68 | brandSuccess, | ||
69 | brandInfo, | ||
70 | brandWarning, | ||
71 | brandDanger, | ||
72 | |||
73 | uiFontSize, | ||
74 | |||
75 | borderRadius: legacyStyles.themeBorderRadius, | ||
76 | borderRadiusSmall: legacyStyles.themeBorderRadiusSmall, | ||
77 | |||
78 | colorBackground, | ||
79 | |||
80 | colorContentBackground, | ||
81 | colorHeadline: legacyStyles.themeGrayDark, | ||
82 | |||
83 | colorText, | ||
84 | |||
85 | defaultContentBorder: color(legacyStyles.themeGrayLighter) | ||
86 | .darken(0.1) | ||
87 | .rgb() | ||
88 | .string(), | ||
89 | |||
90 | // Subscription Container Component | ||
91 | colorSubscriptionContainerBackground: 'none', | ||
92 | colorSubscriptionContainerBorder: `1px solid ${brandPrimary}`, | ||
93 | colorSubscriptionContainerTitle: brandPrimary, | ||
94 | colorSubscriptionContainerActionButtonBackground: brandPrimary, | ||
95 | colorSubscriptionContainerActionButtonColor: '#FFF', | ||
96 | |||
97 | // Loader | ||
98 | colorAppLoaderSpinner: '#FFF', | ||
99 | colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark, | ||
100 | colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter) | ||
101 | .alpha(0.8) | ||
102 | .rgb() | ||
103 | .string(), | ||
104 | |||
105 | // Input | ||
106 | labelColor: legacyStyles.themeGrayLight, | ||
107 | inputColor, | ||
108 | inputHeight, | ||
109 | inputBackground, | ||
110 | inputBorder, | ||
111 | inputModifierColor: legacyStyles.themeGrayLight, | ||
112 | inputPlaceholderColor: color(legacyStyles.themeGrayLight) | ||
113 | .lighten(0.3) | ||
114 | .hex(), | ||
115 | inputPrefixColor, | ||
116 | inputPrefixBackground: legacyStyles.themeGrayLighter, | ||
117 | inputDisabledOpacity, | ||
118 | inputScorePasswordBackground: legacyStyles.themeGrayLighter, | ||
119 | |||
120 | // Toggle | ||
121 | toggleBackground: legacyStyles.themeGrayLighter, | ||
122 | toggleButton: legacyStyles.themeGrayLight, | ||
123 | toggleButtonActive: brandPrimary, | ||
124 | toggleWidth: 40, | ||
125 | toggleHeight: 14, | ||
126 | |||
127 | // Style Types | ||
128 | styleTypes, | ||
129 | |||
130 | // Button | ||
131 | buttonPrimaryBackground: brandPrimary, | ||
132 | buttonPrimaryTextColor: '#FFF', | ||
133 | |||
134 | buttonSecondaryBackground: legacyStyles.themeGrayLighter, | ||
135 | buttonSecondaryTextColor, | ||
136 | |||
137 | buttonSuccessBackground: brandSuccess, | ||
138 | buttonSuccessTextColor: '#FFF', | ||
139 | |||
140 | buttonDangerBackground: brandDanger, | ||
141 | buttonDangerTextColor: '#FFF', | ||
142 | |||
143 | buttonWarningBackground: brandWarning, | ||
144 | buttonWarningTextColor: '#FFF', | ||
145 | |||
146 | buttonInvertedBackground: 'none', | ||
147 | buttonInvertedTextColor: brandPrimary, | ||
148 | buttonInvertedBorder: `1px solid ${brandPrimary}`, | ||
149 | |||
150 | buttonHeight: inputHeight, | ||
151 | |||
152 | buttonLoaderColor: { | ||
153 | primary: '#FFF', | ||
154 | secondary: buttonSecondaryTextColor, | ||
155 | success: '#FFF', | ||
156 | warning: '#FFF', | ||
157 | danger: '#FFF', | ||
158 | inverted: brandPrimary, | ||
159 | }, | ||
160 | |||
161 | // Select | ||
162 | selectBackground: inputBackground, | ||
163 | selectBorder: inputBorder, | ||
164 | selectHeight: inputHeight, | ||
165 | selectColor, | ||
166 | selectToggleColor: inputPrefixColor, | ||
167 | selectPopupBackground: '#FFF', | ||
168 | selectOptionColor: inputColor, | ||
169 | selectOptionBorder: `1px solid ${legacyStyles.themeGrayLightest}`, | ||
170 | selectOptionItemHover: legacyStyles.themeGrayLighter, | ||
171 | selectOptionItemHoverColor: selectColor, | ||
172 | selectOptionItemActive: brandPrimary, | ||
173 | selectOptionItemActiveColor: '#FFF', | ||
174 | selectSearchBackground: legacyStyles.themeGrayLighter, | ||
175 | selectSearchColor: inputColor, | ||
176 | selectDisabledOpacity: inputDisabledOpacity, | ||
177 | |||
178 | // Badge | ||
179 | badgeFontSize: uiFontSize - 2, | ||
180 | badgeBorderRadius: 50, | ||
181 | |||
182 | // Modal | ||
183 | colorModalOverlayBackground: color('#000').alpha(0.8).rgb().string(), | ||
184 | colorModalBackground: colorContentBackground, | ||
185 | |||
186 | // Services | ||
187 | services, | ||
188 | |||
189 | // Service Icon | ||
190 | serviceIcon: { | ||
191 | width: 35, | ||
192 | isCustom: { | ||
193 | border: `1px solid ${legacyStyles.themeGrayLighter}`, | ||
194 | borderRadius: legacyStyles.themeBorderRadius, | ||
195 | width: 37, | ||
196 | }, | ||
197 | }, | ||
198 | |||
199 | // Workspaces | ||
200 | workspaces: { | ||
201 | settings: { | ||
202 | listItems: cloneDeep(services.listItems), | ||
203 | }, | ||
204 | drawer: { | ||
205 | width: 300, | ||
206 | padding: 20, | ||
207 | background: drawerBg, | ||
208 | buttons: { | ||
209 | color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), | ||
210 | hoverColor: legacyStyles.themeGrayLight, | ||
211 | }, | ||
212 | listItem: { | ||
213 | hoverBackground: color(drawerBg).darken(0.01).hex(), | ||
214 | activeBackground: legacyStyles.themeGrayLightest, | ||
215 | border: color(drawerBg).darken(0.05).hex(), | ||
216 | name: { | ||
217 | color: colorText, | ||
218 | activeColor: colorText, | ||
219 | }, | ||
220 | services: { | ||
221 | color: color(colorText).lighten(1.5).hex(), | ||
222 | active: color(colorText).lighten(1.5).hex(), | ||
223 | }, | ||
224 | }, | ||
225 | }, | ||
226 | switchingIndicator: { | ||
227 | spinnerColor: 'white', | ||
228 | }, | ||
229 | }, | ||
230 | |||
231 | // Todos | ||
232 | todos: { | ||
233 | todosLayer: { | ||
234 | borderLeftColor: color(legacyStyles.themeGrayLighter).darken(0.1).hex(), | ||
235 | }, | ||
236 | toggleButton: { | ||
237 | background: styleTypes.primary.accent, | ||
238 | textColor: styleTypes.primary.contrast, | ||
239 | shadowColor: 'rgba(0, 0, 0, 0.2)', | ||
240 | }, | ||
241 | dragIndicator: { | ||
242 | background: legacyStyles.themeGrayLight, | ||
243 | }, | ||
244 | resizeHandler: { | ||
245 | backgroundHover: styleTypes.primary.accent, | ||
246 | }, | ||
247 | }, | ||
248 | |||
249 | legacyStyles, | ||
250 | }; | ||
251 | }; | ||
diff --git a/src/themes/index.ts b/src/themes/index.ts new file mode 100644 index 000000000..27be4d04b --- /dev/null +++ b/src/themes/index.ts | |||
@@ -0,0 +1,21 @@ | |||
1 | import makeDarkThemeConfig from './dark'; | ||
2 | import makeDefaultThemeConfig from './default'; | ||
3 | import { themeBrandPrimary } from './legacy'; | ||
4 | |||
5 | export enum ThemeType { | ||
6 | default = 'default', | ||
7 | dark = 'dark', | ||
8 | } | ||
9 | |||
10 | export function theme( | ||
11 | themeId: ThemeType, | ||
12 | brandColor: string = themeBrandPrimary, | ||
13 | ) { | ||
14 | return themeId === ThemeType.dark | ||
15 | ? makeDarkThemeConfig(brandColor) | ||
16 | : makeDefaultThemeConfig(brandColor); | ||
17 | } | ||
18 | |||
19 | const defaultThemeConfigWithDefaultAccentColor = makeDefaultThemeConfig(themeBrandPrimary); | ||
20 | |||
21 | export type Theme = typeof defaultThemeConfigWithDefaultAccentColor; | ||
diff --git a/src/themes/legacy/index.ts b/src/themes/legacy/index.ts new file mode 100644 index 000000000..c6105a4e2 --- /dev/null +++ b/src/themes/legacy/index.ts | |||
@@ -0,0 +1,40 @@ | |||
1 | import { DEFAULT_ACCENT_COLOR } from '../../config'; | ||
2 | |||
3 | /* legacy config, injected into sass */ | ||
4 | export const themeBrandPrimary = DEFAULT_ACCENT_COLOR; | ||
5 | export const themeBrandSuccess = '#5cb85c'; | ||
6 | export const themeBrandInfo = '#5bc0de'; | ||
7 | export const themeBrandWarning = '#FF9F00'; | ||
8 | export const themeBrandDanger = '#d9534f'; | ||
9 | |||
10 | export const themeGrayDark = '#373a3c'; | ||
11 | export const themeGray = '#55595c'; | ||
12 | export const themeGrayLight = '#818a91'; | ||
13 | export const themeGrayLighter = '#eceeef'; | ||
14 | export const themeGrayLightest = '#f7f7f9'; | ||
15 | |||
16 | export const themeBorderRadius = '6px'; | ||
17 | export const themeBorderRadiusSmall = '3px'; | ||
18 | |||
19 | export const themeSidebarWidth = '68px'; | ||
20 | |||
21 | export const themeTextColor = themeGrayDark; | ||
22 | |||
23 | export const themeTransitionTime = '.5s'; | ||
24 | |||
25 | export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)'; | ||
26 | |||
27 | export const darkThemeBlack = '#1A1A1A'; | ||
28 | |||
29 | export const darkThemeGrayDarkest = '#1E1E1E'; | ||
30 | export const darkThemeGrayDarker = '#2D2F31'; | ||
31 | export const darkThemeGrayDark = '#383A3B'; | ||
32 | |||
33 | export const darkThemeGray = '#47494B'; | ||
34 | |||
35 | export const darkThemeGrayLight = '#515355'; | ||
36 | export const darkThemeGrayLighter = '#8a8b8b'; | ||
37 | export const darkThemeGrayLightest = '#FFFFFF'; | ||
38 | |||
39 | export const darkThemeGraySmoke = '#CED0D1'; | ||
40 | export const darkThemeTextColor = '#FFFFFF'; | ||