diff options
Diffstat (limited to 'packages/theme')
-rw-r--r-- | packages/theme/package.json | 4 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 67 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 82 |
3 files changed, 150 insertions, 3 deletions
diff --git a/packages/theme/package.json b/packages/theme/package.json index 5c21a787f..642904089 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json | |||
@@ -1,6 +1,6 @@ | |||
1 | { | 1 | { |
2 | "name": "@meetfranz/theme", | 2 | "name": "@meetfranz/theme", |
3 | "version": "1.0.9", | 3 | "version": "1.0.13", |
4 | "description": "Theme configuration for Franz", | 4 | "description": "Theme configuration for Franz", |
5 | "author": "Stefan Malzner <stefan@adlk.io>", | 5 | "author": "Stefan Malzner <stefan@adlk.io>", |
6 | "homepage": "https://github.com/meetfranz/franz", | 6 | "homepage": "https://github.com/meetfranz/franz", |
@@ -25,5 +25,5 @@ | |||
25 | "dependencies": { | 25 | "dependencies": { |
26 | "color": "^3.1.0" | 26 | "color": "^3.1.0" |
27 | }, | 27 | }, |
28 | "gitHead": "14b151cad6a5a849bb476aaa3fc53bf1eead7f4b" | 28 | "gitHead": "e9b9079dc921e85961954727a7b2a8eabe5b9798" |
29 | } | 29 | } |
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index 3a56719b2..fd04b106c 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -1,4 +1,5 @@ | |||
1 | import color from 'color'; | 1 | import color from 'color'; |
2 | import { merge, cloneDeep } from 'lodash'; | ||
2 | 3 | ||
3 | import * as defaultStyles from '../default'; | 4 | import * as defaultStyles from '../default'; |
4 | import * as legacyStyles from '../legacy'; | 5 | import * as legacyStyles from '../legacy'; |
@@ -63,3 +64,69 @@ export const selectSearchColor = inputBackground; | |||
63 | 64 | ||
64 | // Modal | 65 | // Modal |
65 | export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string(); | 66 | export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string(); |
67 | |||
68 | // Services | ||
69 | export const services = merge({}, defaultStyles.services, { | ||
70 | listItems: { | ||
71 | borderColor: legacyStyles.darkThemeGrayDarker, | ||
72 | hoverBgColor: legacyStyles.darkThemeGrayDarker, | ||
73 | disabled: { | ||
74 | color: legacyStyles.darkThemeGray, | ||
75 | }, | ||
76 | }, | ||
77 | }); | ||
78 | |||
79 | // Service Icon | ||
80 | export const serviceIcon = merge({}, defaultStyles.serviceIcon, { | ||
81 | isCustom: { | ||
82 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
83 | }, | ||
84 | }); | ||
85 | |||
86 | // Workspaces | ||
87 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | ||
88 | |||
89 | export const workspaces = merge({}, defaultStyles.workspaces, { | ||
90 | settings: { | ||
91 | listItems: cloneDeep(services.listItems), | ||
92 | }, | ||
93 | drawer: { | ||
94 | background: drawerBg, | ||
95 | addButton: { | ||
96 | color: legacyStyles.darkThemeGrayLighter, | ||
97 | hoverColor: legacyStyles.darkThemeGraySmoke, | ||
98 | }, | ||
99 | listItem: { | ||
100 | border: color(drawerBg).lighten(0.2).hex(), | ||
101 | hoverBackground: color(drawerBg).lighten(0.2).hex(), | ||
102 | activeBackground: defaultStyles.brandPrimary, | ||
103 | name: { | ||
104 | color: colorText, | ||
105 | activeColor: 'white', | ||
106 | }, | ||
107 | services: { | ||
108 | color: color(colorText).darken(0.5).hex(), | ||
109 | active: color(defaultStyles.brandPrimary).lighten(0.5).hex(), | ||
110 | }, | ||
111 | }, | ||
112 | }, | ||
113 | }); | ||
114 | |||
115 | // // Workspace settings | ||
116 | // export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, { | ||
117 | // listItemBorderColor: legacyStyles.darkThemeGrayDarker, | ||
118 | // listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, | ||
119 | // }); | ||
120 | // | ||
121 | // // Workspace Drawer | ||
122 | // export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); | ||
123 | // export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter; | ||
124 | // export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke; | ||
125 | // export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); | ||
126 | // export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex(); | ||
127 | // export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; | ||
128 | // export const workspaceDrawerItemNameColor = colorText; | ||
129 | // export const workspaceDrawerItemNameActiveColor = 'white'; | ||
130 | // export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); | ||
131 | // export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); | ||
132 | // | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index 8a71e61cf..d0493b82f 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -1,4 +1,5 @@ | |||
1 | import color from 'color'; | 1 | import color from 'color'; |
2 | import { cloneDeep } from 'lodash'; | ||
2 | 3 | ||
3 | import * as legacyStyles from '../legacy'; | 4 | import * as legacyStyles from '../legacy'; |
4 | 5 | ||
@@ -42,7 +43,7 @@ export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter) | |||
42 | // Input | 43 | // Input |
43 | export const labelColor = legacyStyles.themeGrayLight; | 44 | export const labelColor = legacyStyles.themeGrayLight; |
44 | export const inputColor = legacyStyles.themeGray; | 45 | export const inputColor = legacyStyles.themeGray; |
45 | export const inputHeight = '35px'; | 46 | export const inputHeight = 40; |
46 | export const inputBackground = legacyStyles.themeGrayLightest; | 47 | export const inputBackground = legacyStyles.themeGrayLightest; |
47 | export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; | 48 | export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; |
48 | export const inputModifierColor = legacyStyles.themeGrayLight; | 49 | export const inputModifierColor = legacyStyles.themeGrayLight; |
@@ -108,6 +109,8 @@ export const buttonInvertedBackground = 'none'; | |||
108 | export const buttonInvertedTextColor = brandPrimary; | 109 | export const buttonInvertedTextColor = brandPrimary; |
109 | export const buttonInvertedBorder = `1px solid ${brandPrimary}`; | 110 | export const buttonInvertedBorder = `1px solid ${brandPrimary}`; |
110 | 111 | ||
112 | export const buttonHeight = inputHeight; | ||
113 | |||
111 | export const buttonLoaderColor = { | 114 | export const buttonLoaderColor = { |
112 | primary: '#FFF', | 115 | primary: '#FFF', |
113 | secondary: buttonSecondaryTextColor, | 116 | secondary: buttonSecondaryTextColor, |
@@ -140,3 +143,80 @@ export const badgeBorderRadius = 50; | |||
140 | 143 | ||
141 | // Modal | 144 | // Modal |
142 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); | 145 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); |
146 | |||
147 | // Services | ||
148 | export const services = { | ||
149 | listItems: { | ||
150 | padding: 10, | ||
151 | height: 57, | ||
152 | borderColor: legacyStyles.themeGrayLightest, | ||
153 | hoverBgColor: legacyStyles.themeGrayLightest, | ||
154 | disabled: { | ||
155 | color: legacyStyles.themeGrayLight, | ||
156 | }, | ||
157 | }, | ||
158 | }; | ||
159 | |||
160 | // Service Icon | ||
161 | export const serviceIcon = { | ||
162 | width: 35, | ||
163 | isCustom: { | ||
164 | border: `1px solid ${legacyStyles.themeGrayLighter}`, | ||
165 | borderRadius: legacyStyles.themeBorderRadius, | ||
166 | width: 37, | ||
167 | }, | ||
168 | }; | ||
169 | |||
170 | // Workspaces | ||
171 | const drawerBg = color(colorBackground).lighten(0.1).hex(); | ||
172 | |||
173 | export const workspaces = { | ||
174 | settings: { | ||
175 | listItems: cloneDeep(services.listItems), | ||
176 | }, | ||
177 | drawer: { | ||
178 | width: 300, | ||
179 | padding: 20, | ||
180 | background: drawerBg, | ||
181 | buttons: { | ||
182 | color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), | ||
183 | hoverColor: legacyStyles.themeGrayLight, | ||
184 | }, | ||
185 | listItem: { | ||
186 | hoverBackground: color(drawerBg).darken(0.01).hex(), | ||
187 | activeBackground: legacyStyles.themeGrayLightest, | ||
188 | border: color(drawerBg).darken(0.05).hex(), | ||
189 | name: { | ||
190 | color: colorText, | ||
191 | activeColor: colorText, | ||
192 | }, | ||
193 | services: { | ||
194 | color: color(colorText).lighten(1.5).hex(), | ||
195 | active: color(colorText).lighten(1.5).hex(), | ||
196 | }, | ||
197 | }, | ||
198 | }, | ||
199 | switchingIndicator: { | ||
200 | spinnerColor: 'white', | ||
201 | }, | ||
202 | }; | ||
203 | |||
204 | // export const workspaceSettings = { | ||
205 | // listItemHeight: 57, | ||
206 | // listItemBorderColor: legacyStyles.themeGrayLightest, | ||
207 | // listItemHoverBgColor: legacyStyles.themeGrayLightest, | ||
208 | // }; | ||
209 | // | ||
210 | // // Workspace Drawer | ||
211 | // export const workspaceDrawerWidth = 300; | ||
212 | // export const workspaceDrawerPadding = 20; | ||
213 | // export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); | ||
214 | // export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; | ||
215 | // export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); | ||
216 | // export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex(); | ||
217 | // export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; | ||
218 | // export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); | ||
219 | // export const workspaceDrawerItemNameColor = colorText; | ||
220 | // export const workspaceDrawerItemNameActiveColor = colorText; | ||
221 | // export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); | ||
222 | // export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; | ||