diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-10 11:22:25 +0200 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-10 11:22:25 +0200 |
commit | 9472deab9496aca3a9bdf20b93f2a84e3e4569b7 (patch) | |
tree | 4785fcbd438330eaa5463203bba249080e6c02e5 /packages/theme | |
parent | fix drawer add workspace label styles (diff) | |
download | ferdium-app-9472deab9496aca3a9bdf20b93f2a84e3e4569b7.tar.gz ferdium-app-9472deab9496aca3a9bdf20b93f2a84e3e4569b7.tar.zst ferdium-app-9472deab9496aca3a9bdf20b93f2a84e3e4569b7.zip |
refactors workspace theme vars into object structure
Diffstat (limited to 'packages/theme')
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 49 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 60 |
2 files changed, 55 insertions, 54 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index 73ffa7f5e..fd04b106c 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -76,6 +76,13 @@ export const services = merge({}, defaultStyles.services, { | |||
76 | }, | 76 | }, |
77 | }); | 77 | }); |
78 | 78 | ||
79 | // Service Icon | ||
80 | export const serviceIcon = merge({}, defaultStyles.serviceIcon, { | ||
81 | isCustom: { | ||
82 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
83 | }, | ||
84 | }); | ||
85 | |||
79 | // Workspaces | 86 | // Workspaces |
80 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | 87 | const drawerBg = color(colorBackground).lighten(0.3).hex(); |
81 | 88 | ||
@@ -105,27 +112,21 @@ export const workspaces = merge({}, defaultStyles.workspaces, { | |||
105 | }, | 112 | }, |
106 | }); | 113 | }); |
107 | 114 | ||
108 | // Workspace settings | 115 | // // Workspace settings |
109 | export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, { | 116 | // export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, { |
110 | listItemBorderColor: legacyStyles.darkThemeGrayDarker, | 117 | // listItemBorderColor: legacyStyles.darkThemeGrayDarker, |
111 | listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, | 118 | // listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, |
112 | }); | 119 | // }); |
113 | 120 | // | |
114 | // Workspace Drawer | 121 | // // Workspace Drawer |
115 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); | 122 | // export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); |
116 | export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter; | 123 | // export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter; |
117 | export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke; | 124 | // export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke; |
118 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); | 125 | // export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); |
119 | export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex(); | 126 | // export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex(); |
120 | export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; | 127 | // export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; |
121 | export const workspaceDrawerItemNameColor = colorText; | 128 | // export const workspaceDrawerItemNameColor = colorText; |
122 | export const workspaceDrawerItemNameActiveColor = 'white'; | 129 | // export const workspaceDrawerItemNameActiveColor = 'white'; |
123 | export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); | 130 | // export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); |
124 | export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); | 131 | // export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); |
125 | 132 | // | |
126 | // Service Icon | ||
127 | export const serviceIcon = merge({}, defaultStyles.serviceIcon, { | ||
128 | isCustom: { | ||
129 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
130 | }, | ||
131 | }); | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index eb7e80b9f..48111d22b 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -157,6 +157,16 @@ export const services = { | |||
157 | }, | 157 | }, |
158 | }; | 158 | }; |
159 | 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 | |||
160 | // Workspaces | 170 | // Workspaces |
161 | const drawerBg = color(colorBackground).lighten(0.1).hex(); | 171 | const drawerBg = color(colorBackground).lighten(0.1).hex(); |
162 | 172 | ||
@@ -168,7 +178,7 @@ export const workspaces = { | |||
168 | width: 300, | 178 | width: 300, |
169 | padding: 20, | 179 | padding: 20, |
170 | background: drawerBg, | 180 | background: drawerBg, |
171 | addButton: { | 181 | buttons: { |
172 | color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), | 182 | color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), |
173 | hoverColor: legacyStyles.themeGrayLight, | 183 | hoverColor: legacyStyles.themeGrayLight, |
174 | }, | 184 | }, |
@@ -188,32 +198,22 @@ export const workspaces = { | |||
188 | }, | 198 | }, |
189 | }; | 199 | }; |
190 | 200 | ||
191 | export const workspaceSettings = { | 201 | // export const workspaceSettings = { |
192 | listItemHeight: 57, | 202 | // listItemHeight: 57, |
193 | listItemBorderColor: legacyStyles.themeGrayLightest, | 203 | // listItemBorderColor: legacyStyles.themeGrayLightest, |
194 | listItemHoverBgColor: legacyStyles.themeGrayLightest, | 204 | // listItemHoverBgColor: legacyStyles.themeGrayLightest, |
195 | }; | 205 | // }; |
196 | 206 | // | |
197 | // Workspace Drawer | 207 | // // Workspace Drawer |
198 | export const workspaceDrawerWidth = 300; | 208 | // export const workspaceDrawerWidth = 300; |
199 | export const workspaceDrawerPadding = 20; | 209 | // export const workspaceDrawerPadding = 20; |
200 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); | 210 | // export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); |
201 | export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; | 211 | // export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; |
202 | export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); | 212 | // export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); |
203 | export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex(); | 213 | // export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex(); |
204 | export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; | 214 | // export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; |
205 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); | 215 | // export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); |
206 | export const workspaceDrawerItemNameColor = colorText; | 216 | // export const workspaceDrawerItemNameColor = colorText; |
207 | export const workspaceDrawerItemNameActiveColor = colorText; | 217 | // export const workspaceDrawerItemNameActiveColor = colorText; |
208 | export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); | 218 | // export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); |
209 | export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; | 219 | // export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; |
210 | |||
211 | // Service Icon | ||
212 | export const serviceIcon = { | ||
213 | width: 35, | ||
214 | isCustom: { | ||
215 | border: `1px solid ${legacyStyles.themeGrayLighter}`, | ||
216 | borderRadius: legacyStyles.themeBorderRadius, | ||
217 | width: 37, | ||
218 | }, | ||
219 | }; | ||