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/dark/index.ts | |
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/dark/index.ts')
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 52 |
1 files changed, 50 insertions, 2 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index a9d1e1b46..73ffa7f5e 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'; |
@@ -64,11 +65,51 @@ export const selectSearchColor = inputBackground; | |||
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(); |
66 | 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 | // Workspaces | ||
80 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | ||
81 | |||
82 | export const workspaces = merge({}, defaultStyles.workspaces, { | ||
83 | settings: { | ||
84 | listItems: cloneDeep(services.listItems), | ||
85 | }, | ||
86 | drawer: { | ||
87 | background: drawerBg, | ||
88 | addButton: { | ||
89 | color: legacyStyles.darkThemeGrayLighter, | ||
90 | hoverColor: legacyStyles.darkThemeGraySmoke, | ||
91 | }, | ||
92 | listItem: { | ||
93 | border: color(drawerBg).lighten(0.2).hex(), | ||
94 | hoverBackground: color(drawerBg).lighten(0.2).hex(), | ||
95 | activeBackground: defaultStyles.brandPrimary, | ||
96 | name: { | ||
97 | color: colorText, | ||
98 | activeColor: 'white', | ||
99 | }, | ||
100 | services: { | ||
101 | color: color(colorText).darken(0.5).hex(), | ||
102 | active: color(defaultStyles.brandPrimary).lighten(0.5).hex(), | ||
103 | }, | ||
104 | }, | ||
105 | }, | ||
106 | }); | ||
107 | |||
67 | // Workspace settings | 108 | // Workspace settings |
68 | export const workspaceSettings = { | 109 | export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, { |
69 | listItemBorderColor: legacyStyles.darkThemeGrayDarker, | 110 | listItemBorderColor: legacyStyles.darkThemeGrayDarker, |
70 | listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, | 111 | listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, |
71 | }; | 112 | }); |
72 | 113 | ||
73 | // Workspace Drawer | 114 | // Workspace Drawer |
74 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); | 115 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); |
@@ -81,3 +122,10 @@ export const workspaceDrawerItemNameColor = colorText; | |||
81 | export const workspaceDrawerItemNameActiveColor = 'white'; | 122 | export const workspaceDrawerItemNameActiveColor = 'white'; |
82 | export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); | 123 | export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); |
83 | export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); | 124 | export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); |
125 | |||
126 | // Service Icon | ||
127 | export const serviceIcon = merge({}, defaultStyles.serviceIcon, { | ||
128 | isCustom: { | ||
129 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
130 | }, | ||
131 | }); | ||