diff options
Diffstat (limited to 'packages')
-rw-r--r-- | packages/theme/src/index.ts | 20 | ||||
-rw-r--r-- | packages/theme/src/themes/IStyleTypes.ts | 8 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 304 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 478 |
4 files changed, 433 insertions, 377 deletions
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 524a9edf1..78d1dcbb9 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts | |||
@@ -1,5 +1,5 @@ | |||
1 | import * as darkThemeConfig from './themes/dark'; | 1 | import makeDarkThemeConfig from './themes/dark'; |
2 | import * as defaultThemeConfig from './themes/default'; | 2 | import makeDefaultThemeConfig from './themes/default'; |
3 | import * as legacyStyles from './themes/legacy'; | 3 | import * as legacyStyles from './themes/legacy'; |
4 | 4 | ||
5 | export enum ThemeType { | 5 | export enum ThemeType { |
@@ -7,12 +7,16 @@ export enum ThemeType { | |||
7 | dark = 'dark', | 7 | dark = 'dark', |
8 | } | 8 | } |
9 | 9 | ||
10 | export function theme(themeId: ThemeType) { | 10 | export const DEFAULT_ACCENT_COLOR = legacyStyles.themeBrandPrimary; |
11 | if (themeId === ThemeType.dark) { | ||
12 | return Object.assign({}, defaultThemeConfig, darkThemeConfig, { legacyStyles }); | ||
13 | } | ||
14 | 11 | ||
15 | return Object.assign({}, defaultThemeConfig, { legacyStyles }); | 12 | export function theme(themeId: ThemeType, |
13 | brandColor: string = DEFAULT_ACCENT_COLOR) { | ||
14 | return themeId === ThemeType.dark ? | ||
15 | makeDarkThemeConfig(brandColor) : | ||
16 | makeDefaultThemeConfig(brandColor); | ||
16 | } | 17 | } |
17 | 18 | ||
18 | export type Theme = typeof defaultThemeConfig; | 19 | const defaultThemeConfigWithDefaultAccentColor = |
20 | makeDefaultThemeConfig(DEFAULT_ACCENT_COLOR); | ||
21 | |||
22 | export type Theme = typeof defaultThemeConfigWithDefaultAccentColor; | ||
diff --git a/packages/theme/src/themes/IStyleTypes.ts b/packages/theme/src/themes/IStyleTypes.ts new file mode 100644 index 000000000..df5b51c1d --- /dev/null +++ b/packages/theme/src/themes/IStyleTypes.ts | |||
@@ -0,0 +1,8 @@ | |||
1 | |||
2 | export default interface IStyleTypes { | ||
3 | [index: string]: { | ||
4 | accent: string; | ||
5 | contrast: string; | ||
6 | border?: string; | ||
7 | }; | ||
8 | } | ||
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 | }; | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index 8e5e93b2a..cceb321c9 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -2,250 +2,270 @@ import color from 'color'; | |||
2 | import { cloneDeep } from 'lodash'; | 2 | import { cloneDeep } from 'lodash'; |
3 | 3 | ||
4 | import * as legacyStyles from '../legacy'; | 4 | import * as legacyStyles from '../legacy'; |
5 | 5 | import IStyleTypes from '../IStyleTypes'; | |
6 | export interface IStyleTypes { | 6 | |
7 | [index: string]: { | 7 | export default (brandPrimary: string) => { |
8 | accent: string; | 8 | const brandSuccess = '#5cb85c'; |
9 | contrast: string; | 9 | const brandInfo = '#5bc0de'; |
10 | border?: string; | 10 | const brandWarning = '#FF9F00'; |
11 | const brandDanger = '#d9534f'; | ||
12 | const uiFontSize = 14; | ||
13 | const colorBackground = legacyStyles.themeGrayLighter; | ||
14 | const colorContentBackground = '#FFFFFF'; | ||
15 | const colorText = legacyStyles.themeTextColor; | ||
16 | const inputColor = legacyStyles.themeGray; | ||
17 | const inputBackground = legacyStyles.themeGrayLightest; | ||
18 | const inputHeight = 40; | ||
19 | const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; | ||
20 | const inputPrefixColor = legacyStyles.themeGrayLight; | ||
21 | const inputDisabledOpacity = 0.5; | ||
22 | const buttonSecondaryTextColor = legacyStyles.themeGray; | ||
23 | const selectColor = inputColor; | ||
24 | const drawerBg = color(colorBackground).lighten(0.1).hex(); | ||
25 | |||
26 | const styleTypes: IStyleTypes = { | ||
27 | primary: { | ||
28 | accent: brandPrimary, | ||
29 | contrast: '#FFF', | ||
30 | }, | ||
31 | secondary: { | ||
32 | accent: legacyStyles.themeGrayLighter, | ||
33 | contrast: legacyStyles.themeGray, | ||
34 | }, | ||
35 | success: { | ||
36 | accent: brandSuccess, | ||
37 | contrast: '#FFF', | ||
38 | }, | ||
39 | warning: { | ||
40 | accent: brandWarning, | ||
41 | contrast: '#FFF', | ||
42 | }, | ||
43 | danger: { | ||
44 | accent: brandDanger, | ||
45 | contrast: '#FFF', | ||
46 | }, | ||
47 | inverted: { | ||
48 | accent: 'none', | ||
49 | contrast: brandPrimary, | ||
50 | border: `1px solid ${brandPrimary}`, | ||
51 | }, | ||
11 | }; | 52 | }; |
12 | } | ||
13 | |||
14 | export const brandPrimary = '#7266F0'; | ||
15 | export const brandSuccess = '#5cb85c'; | ||
16 | export const brandInfo = '#5bc0de'; | ||
17 | export const brandWarning = '#FF9F00'; | ||
18 | export const brandDanger = '#d9534f'; | ||
19 | |||
20 | export const uiFontSize = 14; | ||
21 | |||
22 | export const borderRadius = legacyStyles.themeBorderRadius; | ||
23 | export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall; | ||
24 | |||
25 | export const colorBackground = legacyStyles.themeGrayLighter; | ||
26 | export const colorContentBackground = '#FFFFFF'; | ||
27 | export const colorHeadline = legacyStyles.themeGrayDark; | ||
28 | |||
29 | export const colorText = legacyStyles.themeTextColor; | ||
30 | |||
31 | export const defaultContentBorder = color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string(); | ||
32 | |||
33 | // Subscription Container Component | ||
34 | export const colorSubscriptionContainerBackground = 'none'; | ||
35 | export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`; | ||
36 | export const colorSubscriptionContainerTitle = brandPrimary; | ||
37 | export const colorSubscriptionContainerActionButtonBackground = brandPrimary; | ||
38 | export const colorSubscriptionContainerActionButtonColor = '#FFF'; | ||
39 | |||
40 | // Loader | ||
41 | export const colorAppLoaderSpinner = '#FFF'; | ||
42 | export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark; | ||
43 | export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string(); | ||
44 | |||
45 | // Input | ||
46 | export const labelColor = legacyStyles.themeGrayLight; | ||
47 | export const inputColor = legacyStyles.themeGray; | ||
48 | export const inputHeight = 40; | ||
49 | export const inputBackground = legacyStyles.themeGrayLightest; | ||
50 | export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; | ||
51 | export const inputModifierColor = legacyStyles.themeGrayLight; | ||
52 | export const inputPlaceholderColor = color(legacyStyles.themeGrayLight).lighten(0.3).hex(); | ||
53 | export const inputPrefixColor = legacyStyles.themeGrayLight; | ||
54 | export const inputPrefixBackground = legacyStyles.themeGrayLighter; | ||
55 | export const inputDisabledOpacity = 0.5; | ||
56 | export const inputScorePasswordBackground = legacyStyles.themeGrayLighter; | ||
57 | |||
58 | // Toggle | ||
59 | export const toggleBackground = legacyStyles.themeGrayLighter; | ||
60 | export const toggleButton = legacyStyles.themeGrayLight; | ||
61 | export const toggleButtonActive = brandPrimary; | ||
62 | export const toggleWidth = 40; | ||
63 | export const toggleHeight = 14; | ||
64 | |||
65 | // Style Types | ||
66 | export const styleTypes: IStyleTypes = { | ||
67 | primary: { | ||
68 | accent: brandPrimary, | ||
69 | contrast: '#FFF', | ||
70 | }, | ||
71 | secondary: { | ||
72 | accent: legacyStyles.themeGrayLighter, | ||
73 | contrast: legacyStyles.themeGray, | ||
74 | }, | ||
75 | success: { | ||
76 | accent: brandSuccess, | ||
77 | contrast: '#FFF', | ||
78 | }, | ||
79 | warning: { | ||
80 | accent: brandWarning, | ||
81 | contrast: '#FFF', | ||
82 | }, | ||
83 | danger: { | ||
84 | accent: brandDanger, | ||
85 | contrast: '#FFF', | ||
86 | }, | ||
87 | inverted: { | ||
88 | accent: 'none', | ||
89 | contrast: brandPrimary, | ||
90 | border: `1px solid ${brandPrimary}`, | ||
91 | }, | ||
92 | }; | ||
93 | |||
94 | // Button | ||
95 | export const buttonPrimaryBackground = brandPrimary; | ||
96 | export const buttonPrimaryTextColor = '#FFF'; | ||
97 | |||
98 | export const buttonSecondaryBackground = legacyStyles.themeGrayLighter; | ||
99 | export const buttonSecondaryTextColor = legacyStyles.themeGray; | ||
100 | 53 | ||
101 | export const buttonSuccessBackground = brandSuccess; | 54 | const services = { |
102 | export const buttonSuccessTextColor = '#FFF'; | 55 | listItems: { |
103 | 56 | padding: 10, | |
104 | export const buttonDangerBackground = brandDanger; | 57 | height: 57, |
105 | export const buttonDangerTextColor = '#FFF'; | 58 | borderColor: legacyStyles.themeGrayLightest, |
59 | hoverBgColor: legacyStyles.themeGrayLightest, | ||
60 | disabled: { | ||
61 | color: legacyStyles.themeGrayLight, | ||
62 | }, | ||
63 | }, | ||
64 | }; | ||
106 | 65 | ||
107 | export const buttonWarningBackground = brandWarning; | 66 | return { |
108 | export const buttonWarningTextColor = '#FFF'; | 67 | brandPrimary, |
68 | brandSuccess, | ||
69 | brandInfo, | ||
70 | brandWarning, | ||
71 | brandDanger, | ||
109 | 72 | ||
110 | export const buttonInvertedBackground = 'none'; | 73 | uiFontSize, |
111 | export const buttonInvertedTextColor = brandPrimary; | ||
112 | export const buttonInvertedBorder = `1px solid ${brandPrimary}`; | ||
113 | 74 | ||
114 | export const buttonHeight = inputHeight; | 75 | borderRadius: legacyStyles.themeBorderRadius, |
76 | borderRadiusSmall: legacyStyles.themeBorderRadiusSmall, | ||
77 | |||
78 | colorBackground, | ||
79 | |||
80 | colorContentBackground, | ||
81 | colorHeadline: legacyStyles.themeGrayDark, | ||
82 | |||
83 | colorText, | ||
84 | |||
85 | defaultContentBorder: color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string(), | ||
86 | |||
87 | // Subscription Container Component | ||
88 | colorSubscriptionContainerBackground: 'none', | ||
89 | colorSubscriptionContainerBorder: `1px solid ${brandPrimary}`, | ||
90 | colorSubscriptionContainerTitle: brandPrimary, | ||
91 | colorSubscriptionContainerActionButtonBackground: brandPrimary, | ||
92 | colorSubscriptionContainerActionButtonColor: '#FFF', | ||
93 | |||
94 | // Loader | ||
95 | colorAppLoaderSpinner: '#FFF', | ||
96 | colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark, | ||
97 | colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string(), | ||
98 | |||
99 | // Input | ||
100 | labelColor: legacyStyles.themeGrayLight, | ||
101 | inputColor, | ||
102 | inputHeight, | ||
103 | inputBackground, | ||
104 | inputBorder, | ||
105 | inputModifierColor: legacyStyles.themeGrayLight, | ||
106 | inputPlaceholderColor: color(legacyStyles.themeGrayLight).lighten(0.3).hex(), | ||
107 | inputPrefixColor, | ||
108 | inputPrefixBackground: legacyStyles.themeGrayLighter, | ||
109 | inputDisabledOpacity, | ||
110 | inputScorePasswordBackground: legacyStyles.themeGrayLighter, | ||
111 | |||
112 | // Toggle | ||
113 | toggleBackground: legacyStyles.themeGrayLighter, | ||
114 | toggleButton: legacyStyles.themeGrayLight, | ||
115 | toggleButtonActive: brandPrimary, | ||
116 | toggleWidth: 40, | ||
117 | toggleHeight: 14, | ||
118 | |||
119 | // Style Types | ||
120 | styleTypes, | ||
121 | |||
122 | // Button | ||
123 | buttonPrimaryBackground: brandPrimary, | ||
124 | buttonPrimaryTextColor: '#FFF', | ||
125 | |||
126 | buttonSecondaryBackground: legacyStyles.themeGrayLighter, | ||
127 | buttonSecondaryTextColor, | ||
128 | |||
129 | buttonSuccessBackground: brandSuccess, | ||
130 | buttonSuccessTextColor: '#FFF', | ||
131 | |||
132 | buttonDangerBackground: brandDanger, | ||
133 | buttonDangerTextColor: '#FFF', | ||
134 | |||
135 | buttonWarningBackground: brandWarning, | ||
136 | buttonWarningTextColor: '#FFF', | ||
137 | |||
138 | buttonInvertedBackground: 'none', | ||
139 | buttonInvertedTextColor: brandPrimary, | ||
140 | buttonInvertedBorder: `1px solid ${brandPrimary}`, | ||
141 | |||
142 | buttonHeight: inputHeight, | ||
143 | |||
144 | buttonLoaderColor: { | ||
145 | primary: '#FFF', | ||
146 | secondary: buttonSecondaryTextColor, | ||
147 | success: '#FFF', | ||
148 | warning: '#FFF', | ||
149 | danger: '#FFF', | ||
150 | inverted: brandPrimary, | ||
151 | }, | ||
115 | 152 | ||
116 | export const buttonLoaderColor = { | 153 | // Select |
117 | primary: '#FFF', | 154 | selectBackground: inputBackground, |
118 | secondary: buttonSecondaryTextColor, | 155 | selectBorder: inputBorder, |
119 | success: '#FFF', | 156 | selectHeight: inputHeight, |
120 | warning: '#FFF', | 157 | selectColor, |
121 | danger: '#FFF', | 158 | selectToggleColor: inputPrefixColor, |
122 | inverted: brandPrimary, | 159 | selectPopupBackground: '#FFF', |
123 | }; | 160 | selectOptionColor: inputColor, |
161 | selectOptionBorder: `1px solid ${legacyStyles.themeGrayLightest}`, | ||
162 | selectOptionItemHover: legacyStyles.themeGrayLighter, | ||
163 | selectOptionItemHoverColor: selectColor, | ||
164 | selectOptionItemActive: brandPrimary, | ||
165 | selectOptionItemActiveColor: '#FFF', | ||
166 | selectSearchBackground: legacyStyles.themeGrayLighter, | ||
167 | selectSearchColor: inputColor, | ||
168 | selectDisabledOpacity: inputDisabledOpacity, | ||
169 | |||
170 | // Badge | ||
171 | badgeFontSize: uiFontSize - 2, | ||
172 | badgeBorderRadius: 50, | ||
173 | |||
174 | // Modal | ||
175 | colorModalOverlayBackground: color('#000').alpha(0.8).rgb().string(), | ||
176 | colorModalBackground: colorContentBackground, | ||
177 | |||
178 | // Services | ||
179 | services, | ||
180 | |||
181 | // Service Icon | ||
182 | serviceIcon: { | ||
183 | width: 35, | ||
184 | isCustom: { | ||
185 | border: `1px solid ${legacyStyles.themeGrayLighter}`, | ||
186 | borderRadius: legacyStyles.themeBorderRadius, | ||
187 | width: 37, | ||
188 | }, | ||
189 | }, | ||
124 | 190 | ||
125 | // Select | 191 | // Workspaces |
126 | export const selectBackground = inputBackground; | 192 | workspaces: { |
127 | export const selectBorder = inputBorder; | 193 | settings: { |
128 | export const selectHeight = inputHeight; | 194 | listItems: cloneDeep(services.listItems), |
129 | export const selectColor = inputColor; | 195 | }, |
130 | export const selectToggleColor = inputPrefixColor; | 196 | drawer: { |
131 | export const selectPopupBackground = '#FFF'; | 197 | width: 300, |
132 | export const selectOptionColor = inputColor; | 198 | padding: 20, |
133 | export const selectOptionBorder = `1px solid ${legacyStyles.themeGrayLightest}`; | 199 | background: drawerBg, |
134 | export const selectOptionItemHover = legacyStyles.themeGrayLighter; | 200 | buttons: { |
135 | export const selectOptionItemHoverColor = selectColor; | 201 | color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), |
136 | export const selectOptionItemActive = brandPrimary; | 202 | hoverColor: legacyStyles.themeGrayLight, |
137 | export const selectOptionItemActiveColor = '#FFF'; | 203 | }, |
138 | export const selectSearchBackground = legacyStyles.themeGrayLighter; | 204 | listItem: { |
139 | export const selectSearchColor = inputColor; | 205 | hoverBackground: color(drawerBg).darken(0.01).hex(), |
140 | export const selectDisabledOpacity = inputDisabledOpacity; | 206 | activeBackground: legacyStyles.themeGrayLightest, |
141 | 207 | border: color(drawerBg).darken(0.05).hex(), | |
142 | // Badge | 208 | name: { |
143 | export const badgeFontSize = uiFontSize - 2; | 209 | color: colorText, |
144 | export const badgeBorderRadius = 50; | 210 | activeColor: colorText, |
145 | 211 | }, | |
146 | // Modal | 212 | services: { |
147 | export const colorModalOverlayBackground = color('#000').alpha(0.8).rgb().string(); | 213 | color: color(colorText).lighten(1.5).hex(), |
148 | export const colorModalBackground = colorContentBackground; | 214 | active: color(colorText).lighten(1.5).hex(), |
149 | 215 | }, | |
150 | // Services | 216 | }, |
151 | export const services = { | 217 | }, |
152 | listItems: { | 218 | switchingIndicator: { |
153 | padding: 10, | 219 | spinnerColor: 'white', |
154 | height: 57, | 220 | }, |
155 | borderColor: legacyStyles.themeGrayLightest, | ||
156 | hoverBgColor: legacyStyles.themeGrayLightest, | ||
157 | disabled: { | ||
158 | color: legacyStyles.themeGrayLight, | ||
159 | }, | 221 | }, |
160 | }, | ||
161 | }; | ||
162 | 222 | ||
163 | // Service Icon | 223 | // Announcements |
164 | export const serviceIcon = { | 224 | announcements: { |
165 | width: 35, | 225 | spotlight: { |
166 | isCustom: { | 226 | background: legacyStyles.themeGrayLightest, |
167 | border: `1px solid ${legacyStyles.themeGrayLighter}`, | 227 | }, |
168 | borderRadius: legacyStyles.themeBorderRadius, | 228 | }, |
169 | width: 37, | ||
170 | }, | ||
171 | }; | ||
172 | 229 | ||
173 | // Workspaces | 230 | // Signup |
174 | const drawerBg = color(colorBackground).lighten(0.1).hex(); | 231 | signup: { |
175 | 232 | pricing: { | |
176 | export const workspaces = { | 233 | feature: { |
177 | settings: { | 234 | background: legacyStyles.themeGrayLightest, |
178 | listItems: cloneDeep(services.listItems), | 235 | border: legacyStyles.themeGrayLighter, |
179 | }, | 236 | }, |
180 | drawer: { | 237 | }, |
181 | width: 300, | ||
182 | padding: 20, | ||
183 | background: drawerBg, | ||
184 | buttons: { | ||
185 | color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), | ||
186 | hoverColor: legacyStyles.themeGrayLight, | ||
187 | }, | 238 | }, |
188 | listItem: { | 239 | |
189 | hoverBackground: color(drawerBg).darken(0.01).hex(), | 240 | // Todos |
190 | activeBackground: legacyStyles.themeGrayLightest, | 241 | todos: { |
191 | border: color(drawerBg).darken(0.05).hex(), | 242 | todosLayer: { |
192 | name: { | 243 | borderLeftColor: color(legacyStyles.themeGrayLighter).darken(0.1).hex(), |
193 | color: colorText, | 244 | }, |
194 | activeColor: colorText, | 245 | toggleButton: { |
246 | background: styleTypes.primary.accent, | ||
247 | textColor: styleTypes.primary.contrast, | ||
248 | shadowColor: 'rgba(0, 0, 0, 0.2)', | ||
195 | }, | 249 | }, |
196 | services: { | 250 | dragIndicator: { |
197 | color: color(colorText).lighten(1.5).hex(), | 251 | background: legacyStyles.themeGrayLight, |
198 | active: color(colorText).lighten(1.5).hex(), | 252 | }, |
253 | resizeHandler: { | ||
254 | backgroundHover: styleTypes.primary.accent, | ||
199 | }, | 255 | }, |
200 | }, | 256 | }, |
201 | }, | ||
202 | switchingIndicator: { | ||
203 | spinnerColor: 'white', | ||
204 | }, | ||
205 | }; | ||
206 | 257 | ||
207 | // Announcements | 258 | // TrialStatusBar |
208 | export const announcements = { | 259 | trialStatusBar: { |
209 | spotlight: { | 260 | bar: { |
210 | background: legacyStyles.themeGrayLightest, | 261 | background: legacyStyles.themeGrayLightest, |
211 | }, | 262 | }, |
212 | }; | 263 | progressBar: { |
213 | 264 | background: color(legacyStyles.themeGrayLighter).darken(0.1).hex(), | |
214 | // Signup | 265 | progressIndicator: legacyStyles.themeGrayLight, |
215 | export const signup = { | 266 | }, |
216 | pricing: { | ||
217 | feature: { | ||
218 | background: legacyStyles.themeGrayLightest, | ||
219 | border: legacyStyles.themeGrayLighter, | ||
220 | }, | 267 | }, |
221 | }, | ||
222 | }; | ||
223 | 268 | ||
224 | // Todos | 269 | legacyStyles, |
225 | export const todos = { | 270 | }; |
226 | todosLayer: { | ||
227 | borderLeftColor: color(legacyStyles.themeGrayLighter).darken(0.1).hex(), | ||
228 | }, | ||
229 | toggleButton: { | ||
230 | background: styleTypes.primary.accent, | ||
231 | textColor: styleTypes.primary.contrast, | ||
232 | shadowColor: 'rgba(0, 0, 0, 0.2)', | ||
233 | }, | ||
234 | dragIndicator: { | ||
235 | background: legacyStyles.themeGrayLight, | ||
236 | }, | ||
237 | resizeHandler: { | ||
238 | backgroundHover: styleTypes.primary.accent, | ||
239 | }, | ||
240 | }; | ||
241 | |||
242 | // TrialStatusBar | ||
243 | export const trialStatusBar = { | ||
244 | bar: { | ||
245 | background: legacyStyles.themeGrayLightest, | ||
246 | }, | ||
247 | progressBar: { | ||
248 | background: color(legacyStyles.themeGrayLighter).darken(0.1).hex(), | ||
249 | progressIndicator: legacyStyles.themeGrayLight, | ||
250 | }, | ||
251 | }; | 271 | }; |