diff options
Diffstat (limited to 'packages/theme/src/themes/dark/index.ts')
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 51 |
1 files changed, 23 insertions, 28 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index 684865124..7d7bab399 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -18,7 +18,9 @@ export default (brandPrimary: string) => { | |||
18 | const inputColor = legacyStyles.darkThemeGrayLightest; | 18 | const inputColor = legacyStyles.darkThemeGrayLightest; |
19 | const inputBackground = legacyStyles.themeGrayDark; | 19 | const inputBackground = legacyStyles.themeGrayDark; |
20 | const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; | 20 | const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; |
21 | const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | 21 | const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter) |
22 | .lighten(0.3) | ||
23 | .hex(); | ||
22 | const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; | 24 | const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; |
23 | const selectColor = inputColor; | 25 | const selectColor = inputColor; |
24 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | 26 | const drawerBg = color(colorBackground).lighten(0.3).hex(); |
@@ -47,7 +49,10 @@ export default (brandPrimary: string) => { | |||
47 | 49 | ||
48 | // Loader | 50 | // Loader |
49 | colorFullscreenLoaderSpinner: '#FFF', | 51 | colorFullscreenLoaderSpinner: '#FFF', |
50 | colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(), | 52 | colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest) |
53 | .alpha(0.5) | ||
54 | .rgb() | ||
55 | .string(), | ||
51 | 56 | ||
52 | // Input | 57 | // Input |
53 | labelColor: legacyStyles.darkThemeTextColor, | 58 | labelColor: legacyStyles.darkThemeTextColor, |
@@ -58,8 +63,12 @@ export default (brandPrimary: string) => { | |||
58 | inputPrefixBackground: legacyStyles.darkThemeGray, | 63 | inputPrefixBackground: legacyStyles.darkThemeGray, |
59 | inputDisabledOpacity: 0.5, | 64 | inputDisabledOpacity: 0.5, |
60 | inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, | 65 | inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, |
61 | inputModifierColor: color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(), | 66 | inputModifierColor: color(legacyStyles.darkThemeGrayLighter) |
62 | inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(), | 67 | .lighten(0.3) |
68 | .hex(), | ||
69 | inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter) | ||
70 | .darken(0.1) | ||
71 | .hex(), | ||
63 | 72 | ||
64 | // Toggle | 73 | // Toggle |
65 | toggleBackground: legacyStyles.darkThemeGray, | 74 | toggleBackground: legacyStyles.darkThemeGray, |
@@ -91,13 +100,20 @@ export default (brandPrimary: string) => { | |||
91 | selectToggleColor: inputPrefixColor, | 100 | selectToggleColor: inputPrefixColor, |
92 | selectPopupBackground: legacyStyles.darkThemeGrayLight, | 101 | selectPopupBackground: legacyStyles.darkThemeGrayLight, |
93 | selectOptionColor: '#FFF', | 102 | selectOptionColor: '#FFF', |
94 | selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`, | 103 | selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight) |
95 | selectOptionItemHover: color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(), | 104 | .darken(0.2) |
105 | .hex()}`, | ||
106 | selectOptionItemHover: color(legacyStyles.darkThemeGrayLight) | ||
107 | .darken(0.2) | ||
108 | .hex(), | ||
96 | selectOptionItemHoverColor: selectColor, | 109 | selectOptionItemHoverColor: selectColor, |
97 | selectSearchColor: inputBackground, | 110 | selectSearchColor: inputBackground, |
98 | 111 | ||
99 | // Modal | 112 | // Modal |
100 | colorModalOverlayBackground: color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string(), | 113 | colorModalOverlayBackground: color(legacyStyles.darkThemeBlack) |
114 | .alpha(0.9) | ||
115 | .rgb() | ||
116 | .string(), | ||
101 | colorModalBackground: legacyStyles.darkThemeGrayDark, | 117 | colorModalBackground: legacyStyles.darkThemeGrayDark, |
102 | 118 | ||
103 | // Services | 119 | // Services |
@@ -144,16 +160,6 @@ export default (brandPrimary: string) => { | |||
144 | }, | 160 | }, |
145 | }), | 161 | }), |
146 | 162 | ||
147 | // Signup | ||
148 | signup: merge({}, defaultStyles.signup, { | ||
149 | pricing: { | ||
150 | feature: { | ||
151 | background: legacyStyles.darkThemeGrayLight, | ||
152 | border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(), | ||
153 | }, | ||
154 | }, | ||
155 | }), | ||
156 | |||
157 | // Todos | 163 | // Todos |
158 | todos: merge({}, defaultStyles.todos, { | 164 | todos: merge({}, defaultStyles.todos, { |
159 | todosLayer: { | 165 | todosLayer: { |
@@ -168,16 +174,5 @@ export default (brandPrimary: string) => { | |||
168 | background: legacyStyles.themeGrayLight, | 174 | background: legacyStyles.themeGrayLight, |
169 | }, | 175 | }, |
170 | }), | 176 | }), |
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 | }; | 177 | }; |
183 | }; | 178 | }; |