diff options
Diffstat (limited to 'packages/theme/src/themes/dark')
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 304 |
1 files changed, 164 insertions, 140 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index b436d92f9..684865124 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -1,159 +1,183 @@ | |||
1 | import color from 'color'; | 1 | import color from 'color'; |
2 | import { cloneDeep, merge } from 'lodash'; | 2 | import { cloneDeep, merge } from 'lodash'; |
3 | 3 | ||
4 | import * as defaultStyles from '../default'; | 4 | import makeDefaultThemeConfig from '../default'; |
5 | import * as legacyStyles from '../legacy'; | 5 | import * as legacyStyles from '../legacy'; |
6 | 6 | ||
7 | export const colorBackground = legacyStyles.darkThemeGrayDarkest; | 7 | export default (brandPrimary: string) => { |
8 | export const colorContentBackground = legacyStyles.darkThemeGrayDarkest; | 8 | const defaultStyles = makeDefaultThemeConfig(brandPrimary); |
9 | export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo; | 9 | let brandPrimaryColor = color(legacyStyles.themeBrandPrimary); |
10 | try { | ||
11 | brandPrimaryColor = color(defaultStyles.brandPrimary); | ||
12 | } catch (e) { | ||
13 | // Ignore invalid color and fall back to default. | ||
14 | } | ||
15 | |||
16 | const colorBackground = legacyStyles.darkThemeGrayDarkest; | ||
17 | const colorText = legacyStyles.darkThemeTextColor; | ||
18 | const inputColor = legacyStyles.darkThemeGrayLightest; | ||
19 | const inputBackground = legacyStyles.themeGrayDark; | ||
20 | const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; | ||
21 | const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | ||
22 | const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; | ||
23 | const selectColor = inputColor; | ||
24 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | ||
25 | |||
26 | const services = merge({}, defaultStyles.services, { | ||
27 | listItems: { | ||
28 | borderColor: legacyStyles.darkThemeGrayDarker, | ||
29 | hoverBgColor: legacyStyles.darkThemeGrayDarker, | ||
30 | disabled: { | ||
31 | color: legacyStyles.darkThemeGray, | ||
32 | }, | ||
33 | }, | ||
34 | }); | ||
10 | 35 | ||
11 | export const colorHeadline = legacyStyles.darkThemeTextColor; | 36 | return { |
12 | export const colorText = legacyStyles.darkThemeTextColor; | 37 | ...defaultStyles, |
13 | 38 | ||
14 | export const defaultContentBorder = legacyStyles.themeGrayDark; | 39 | colorBackground, |
40 | colorContentBackground: legacyStyles.darkThemeGrayDarkest, | ||
41 | colorBackgroundSubscriptionContainer: legacyStyles.themeBrandInfo, | ||
15 | 42 | ||
16 | // Loader | 43 | colorHeadline: legacyStyles.darkThemeTextColor, |
17 | export const colorFullscreenLoaderSpinner = '#FFF'; | 44 | colorText: legacyStyles.darkThemeTextColor, |
18 | export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(); | ||
19 | 45 | ||
20 | // Input | 46 | defaultContentBorder: legacyStyles.themeGrayDark, |
21 | export const labelColor = legacyStyles.darkThemeTextColor; | ||
22 | export const inputColor = legacyStyles.darkThemeGrayLightest; | ||
23 | export const inputBackground = legacyStyles.themeGrayDark; | ||
24 | export const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; | ||
25 | export const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | ||
26 | export const inputPrefixBackground = legacyStyles.darkThemeGray; | ||
27 | export const inputDisabledOpacity = 0.5; | ||
28 | export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark; | ||
29 | export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | ||
30 | export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(); | ||
31 | 47 | ||
32 | // Toggle | 48 | // Loader |
33 | export const toggleBackground = legacyStyles.darkThemeGray; | 49 | colorFullscreenLoaderSpinner: '#FFF', |
34 | export const toggleButton = legacyStyles.darkThemeGrayLighter; | 50 | colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(), |
35 | 51 | ||
36 | // Button | 52 | // Input |
37 | export const buttonPrimaryTextColor = legacyStyles.darkThemeTextColor; | 53 | labelColor: legacyStyles.darkThemeTextColor, |
54 | inputColor, | ||
55 | inputBackground, | ||
56 | inputBorder, | ||
57 | inputPrefixColor, | ||
58 | inputPrefixBackground: legacyStyles.darkThemeGray, | ||
59 | inputDisabledOpacity: 0.5, | ||
60 | inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, | ||
61 | inputModifierColor: color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(), | ||
62 | inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(), | ||
38 | 63 | ||
39 | export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter; | 64 | // Toggle |
40 | export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; | 65 | toggleBackground: legacyStyles.darkThemeGray, |
66 | toggleButton: legacyStyles.darkThemeGrayLighter, | ||
41 | 67 | ||
42 | export const buttonDangerTextColor = legacyStyles.darkThemeTextColor; | 68 | // Button |
69 | buttonPrimaryTextColor: legacyStyles.darkThemeTextColor, | ||
43 | 70 | ||
44 | export const buttonWarningTextColor = legacyStyles.darkThemeTextColor; | 71 | buttonSecondaryBackground: legacyStyles.darkThemeGrayLighter, |
72 | buttonSecondaryTextColor, | ||
45 | 73 | ||
46 | export const buttonLoaderColor = { | 74 | buttonDangerTextColor: legacyStyles.darkThemeTextColor, |
47 | primary: '#FFF', | ||
48 | secondary: buttonSecondaryTextColor, | ||
49 | success: '#FFF', | ||
50 | warning: '#FFF', | ||
51 | danger: '#FFF', | ||
52 | inverted: defaultStyles.brandPrimary, | ||
53 | }; | ||
54 | 75 | ||
55 | // Select | 76 | buttonWarningTextColor: legacyStyles.darkThemeTextColor, |
56 | export const selectBackground = inputBackground; | 77 | |
57 | export const selectBorder = inputBorder; | 78 | buttonLoaderColor: { |
58 | export const selectColor = inputColor; | 79 | primary: '#FFF', |
59 | export const selectToggleColor = inputPrefixColor; | 80 | secondary: buttonSecondaryTextColor, |
60 | export const selectPopupBackground = legacyStyles.darkThemeGrayLight; | 81 | success: '#FFF', |
61 | export const selectOptionColor = '#FFF'; | 82 | warning: '#FFF', |
62 | export const selectOptionBorder = `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`; | 83 | danger: '#FFF', |
63 | export const selectOptionItemHover = color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(); | 84 | inverted: defaultStyles.brandPrimary, |
64 | export const selectOptionItemHoverColor = selectColor; | ||
65 | export const selectSearchColor = inputBackground; | ||
66 | |||
67 | // Modal | ||
68 | export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string(); | ||
69 | export const colorModalBackground = legacyStyles.darkThemeGrayDark; | ||
70 | |||
71 | // Services | ||
72 | export const services = merge({}, defaultStyles.services, { | ||
73 | listItems: { | ||
74 | borderColor: legacyStyles.darkThemeGrayDarker, | ||
75 | hoverBgColor: legacyStyles.darkThemeGrayDarker, | ||
76 | disabled: { | ||
77 | color: legacyStyles.darkThemeGray, | ||
78 | }, | ||
79 | }, | ||
80 | }); | ||
81 | |||
82 | // Service Icon | ||
83 | export const serviceIcon = merge({}, defaultStyles.serviceIcon, { | ||
84 | isCustom: { | ||
85 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
86 | }, | ||
87 | }); | ||
88 | |||
89 | // Workspaces | ||
90 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | ||
91 | |||
92 | export const workspaces = merge({}, defaultStyles.workspaces, { | ||
93 | settings: { | ||
94 | listItems: cloneDeep(services.listItems), | ||
95 | }, | ||
96 | drawer: { | ||
97 | background: drawerBg, | ||
98 | addButton: { | ||
99 | color: legacyStyles.darkThemeGrayLighter, | ||
100 | hoverColor: legacyStyles.darkThemeGraySmoke, | ||
101 | }, | 85 | }, |
102 | listItem: { | 86 | |
103 | border: color(drawerBg).lighten(0.2).hex(), | 87 | // Select |
104 | hoverBackground: color(drawerBg).lighten(0.2).hex(), | 88 | selectBackground: inputBackground, |
105 | activeBackground: defaultStyles.brandPrimary, | 89 | selectBorder: inputBorder, |
106 | name: { | 90 | selectColor, |
107 | color: colorText, | 91 | selectToggleColor: inputPrefixColor, |
108 | activeColor: 'white', | 92 | selectPopupBackground: legacyStyles.darkThemeGrayLight, |
93 | selectOptionColor: '#FFF', | ||
94 | selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`, | ||
95 | selectOptionItemHover: color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(), | ||
96 | selectOptionItemHoverColor: selectColor, | ||
97 | selectSearchColor: inputBackground, | ||
98 | |||
99 | // Modal | ||
100 | colorModalOverlayBackground: color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string(), | ||
101 | colorModalBackground: legacyStyles.darkThemeGrayDark, | ||
102 | |||
103 | // Services | ||
104 | services, | ||
105 | |||
106 | // Service Icon | ||
107 | serviceIcon: merge({}, defaultStyles.serviceIcon, { | ||
108 | isCustom: { | ||
109 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
109 | }, | 110 | }, |
110 | services: { | 111 | }), |
111 | color: color(colorText).darken(0.5).hex(), | 112 | |
112 | active: color(defaultStyles.brandPrimary).lighten(0.5).hex(), | 113 | // Workspaces |
114 | workspaces: merge({}, defaultStyles.workspaces, { | ||
115 | settings: { | ||
116 | listItems: cloneDeep(services.listItems), | ||
113 | }, | 117 | }, |
114 | }, | 118 | drawer: { |
115 | }, | 119 | background: drawerBg, |
116 | }); | 120 | addButton: { |
117 | 121 | color: legacyStyles.darkThemeGrayLighter, | |
118 | // Announcements | 122 | hoverColor: legacyStyles.darkThemeGraySmoke, |
119 | export const announcements = merge({}, defaultStyles.announcements, { | 123 | }, |
120 | spotlight: { | 124 | listItem: { |
121 | background: legacyStyles.darkThemeGrayDark, | 125 | border: color(drawerBg).lighten(0.2).hex(), |
122 | }, | 126 | hoverBackground: color(drawerBg).lighten(0.2).hex(), |
123 | }); | 127 | activeBackground: defaultStyles.brandPrimary, |
124 | 128 | name: { | |
125 | // Signup | 129 | color: colorText, |
126 | export const signup = merge({}, defaultStyles.signup, { | 130 | activeColor: 'white', |
127 | pricing: { | 131 | }, |
128 | feature: { | 132 | services: { |
129 | background: legacyStyles.darkThemeGrayLight, | 133 | color: color(colorText).darken(0.5).hex(), |
130 | border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(), | 134 | active: brandPrimaryColor.lighten(0.5).hex(), |
131 | }, | 135 | }, |
132 | }, | 136 | }, |
133 | }); | 137 | }, |
134 | 138 | }), | |
135 | // Todos | 139 | |
136 | export const todos = merge({}, defaultStyles.todos, { | 140 | // Announcements |
137 | todosLayer: { | 141 | announcements: merge({}, defaultStyles.announcements, { |
138 | borderLeftColor: legacyStyles.darkThemeGrayDarker, | 142 | spotlight: { |
139 | }, | 143 | background: legacyStyles.darkThemeGrayDark, |
140 | toggleButton: { | 144 | }, |
141 | background: defaultStyles.styleTypes.primary.accent, | 145 | }), |
142 | textColor: defaultStyles.styleTypes.primary.contrast, | 146 | |
143 | shadowColor: 'rgba(0, 0, 0, 0.2)', | 147 | // Signup |
144 | }, | 148 | signup: merge({}, defaultStyles.signup, { |
145 | dragIndicator: { | 149 | pricing: { |
146 | background: legacyStyles.themeGrayLight, | 150 | feature: { |
147 | }, | 151 | background: legacyStyles.darkThemeGrayLight, |
148 | }); | 152 | border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(), |
149 | 153 | }, | |
150 | // TrialStatusBar | 154 | }, |
151 | export const trialStatusBar = merge({}, defaultStyles.trialStatusBar, { | 155 | }), |
152 | bar: { | 156 | |
153 | background: legacyStyles.darkThemeGray, | 157 | // Todos |
154 | }, | 158 | todos: merge({}, defaultStyles.todos, { |
155 | progressBar: { | 159 | todosLayer: { |
156 | background: legacyStyles.darkThemeGrayLighter, | 160 | borderLeftColor: legacyStyles.darkThemeGrayDarker, |
157 | progressIndicator: legacyStyles.darkThemeGrayLightest, | 161 | }, |
158 | }, | 162 | toggleButton: { |
159 | }); | 163 | background: defaultStyles.styleTypes.primary.accent, |
164 | textColor: defaultStyles.styleTypes.primary.contrast, | ||
165 | shadowColor: 'rgba(0, 0, 0, 0.2)', | ||
166 | }, | ||
167 | dragIndicator: { | ||
168 | background: legacyStyles.themeGrayLight, | ||
169 | }, | ||
170 | }), | ||
171 | |||
172 | // TrialStatusBar | ||
173 | trialStatusBar: merge({}, defaultStyles.trialStatusBar, { | ||
174 | bar: { | ||
175 | background: legacyStyles.darkThemeGray, | ||
176 | }, | ||
177 | progressBar: { | ||
178 | background: legacyStyles.darkThemeGrayLighter, | ||
179 | progressIndicator: legacyStyles.darkThemeGrayLightest, | ||
180 | }, | ||
181 | }), | ||
182 | }; | ||
183 | }; | ||