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/themes/default/index.ts | |
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/themes/default/index.ts')
-rw-r--r-- | src/themes/default/index.ts | 251 |
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 @@ | |||
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 | }; | ||