diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-07 19:50:40 +0200 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-07 19:50:40 +0200 |
commit | b3afb9f45d47ebc352b28eb106b22fffc2f17707 (patch) | |
tree | 1cdcd243eba4e797c75747379f2ed8ad8a392cdc /packages/theme/src/themes/default | |
parent | refactor workspace table css away from legacy styles (diff) | |
download | ferdium-app-b3afb9f45d47ebc352b28eb106b22fffc2f17707.tar.gz ferdium-app-b3afb9f45d47ebc352b28eb106b22fffc2f17707.tar.zst ferdium-app-b3afb9f45d47ebc352b28eb106b22fffc2f17707.zip |
render workspace service list like services + toggle
Diffstat (limited to 'packages/theme/src/themes/default')
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 57 |
1 files changed, 56 insertions, 1 deletions
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index e4c74a5c9..d2b9014b4 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 | ||
@@ -143,8 +144,52 @@ export const badgeBorderRadius = 50; | |||
143 | // Modal | 144 | // Modal |
144 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); | 145 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); |
145 | 146 | ||
146 | // Workspace settings | 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 | // Workspaces | ||
161 | const drawerBg = color(colorBackground).lighten(0.1).hex(); | ||
162 | |||
163 | export const workspaces = { | ||
164 | settings: { | ||
165 | listItems: cloneDeep(services.listItems), | ||
166 | }, | ||
167 | drawer: { | ||
168 | width: 300, | ||
169 | padding: 20, | ||
170 | background: drawerBg, | ||
171 | addButton: { | ||
172 | color: legacyStyles.themeGrayLight, | ||
173 | hoverColor: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), | ||
174 | }, | ||
175 | listItem: { | ||
176 | hoverBackground: color(drawerBg).darken(0.01).hex(), | ||
177 | activeBackground: legacyStyles.themeGrayLightest, | ||
178 | border: color(drawerBg).darken(0.05).hex(), | ||
179 | name: { | ||
180 | color: colorText, | ||
181 | activeColor: colorText, | ||
182 | }, | ||
183 | services: { | ||
184 | color: color(colorText).lighten(1.5).hex(), | ||
185 | active: color(colorText).lighten(1.5).hex(), | ||
186 | }, | ||
187 | }, | ||
188 | }, | ||
189 | }; | ||
190 | |||
147 | export const workspaceSettings = { | 191 | export const workspaceSettings = { |
192 | listItemHeight: 57, | ||
148 | listItemBorderColor: legacyStyles.themeGrayLightest, | 193 | listItemBorderColor: legacyStyles.themeGrayLightest, |
149 | listItemHoverBgColor: legacyStyles.themeGrayLightest, | 194 | listItemHoverBgColor: legacyStyles.themeGrayLightest, |
150 | }; | 195 | }; |
@@ -162,3 +207,13 @@ export const workspaceDrawerItemNameColor = colorText; | |||
162 | export const workspaceDrawerItemNameActiveColor = colorText; | 207 | export const workspaceDrawerItemNameActiveColor = colorText; |
163 | export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); | 208 | export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); |
164 | export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; | 209 | 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 | }; | ||