diff options
Diffstat (limited to 'packages/theme/src')
-rw-r--r-- | packages/theme/src/index.ts | 18 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 62 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 139 | ||||
-rw-r--r-- | packages/theme/src/themes/legacy/index.ts | 38 |
4 files changed, 257 insertions, 0 deletions
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts new file mode 100644 index 000000000..524a9edf1 --- /dev/null +++ b/packages/theme/src/index.ts | |||
@@ -0,0 +1,18 @@ | |||
1 | import * as darkThemeConfig from './themes/dark'; | ||
2 | import * as defaultThemeConfig from './themes/default'; | ||
3 | import * as legacyStyles from './themes/legacy'; | ||
4 | |||
5 | export enum ThemeType { | ||
6 | default = 'default', | ||
7 | dark = 'dark', | ||
8 | } | ||
9 | |||
10 | export function theme(themeId: ThemeType) { | ||
11 | if (themeId === ThemeType.dark) { | ||
12 | return Object.assign({}, defaultThemeConfig, darkThemeConfig, { legacyStyles }); | ||
13 | } | ||
14 | |||
15 | return Object.assign({}, defaultThemeConfig, { legacyStyles }); | ||
16 | } | ||
17 | |||
18 | export type Theme = typeof defaultThemeConfig; | ||
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts new file mode 100644 index 000000000..9b6bf055c --- /dev/null +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -0,0 +1,62 @@ | |||
1 | import color from 'color'; | ||
2 | |||
3 | import * as defaultStyles from '../default'; | ||
4 | import * as legacyStyles from '../legacy'; | ||
5 | |||
6 | export const colorBackground = legacyStyles.darkThemeGrayDarkest; | ||
7 | export const colorContentBackground = legacyStyles.darkThemeGrayDarkest; | ||
8 | export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo; | ||
9 | |||
10 | export const colorHeadline = legacyStyles.darkThemeTextColor; | ||
11 | export const colorText = legacyStyles.darkThemeTextColor; | ||
12 | |||
13 | // Loader | ||
14 | export const colorFullscreenLoaderSpinner = '#FFF'; | ||
15 | export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(); | ||
16 | |||
17 | // Input | ||
18 | export const labelColor = legacyStyles.darkThemeTextColor; | ||
19 | export const inputColor = legacyStyles.darkThemeGrayLightest; | ||
20 | export const inputBackground = legacyStyles.themeGrayDark; | ||
21 | export const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; | ||
22 | export const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | ||
23 | export const inputPrefixBackground = legacyStyles.darkThemeGray; | ||
24 | export const inputDisabledOpacity = 0.5; | ||
25 | export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark; | ||
26 | export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex(); | ||
27 | export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex(); | ||
28 | |||
29 | // Toggle | ||
30 | export const toggleBackground = legacyStyles.darkThemeGray; | ||
31 | export const toggleButton = legacyStyles.darkThemeGrayLighter; | ||
32 | |||
33 | // Button | ||
34 | export const buttonPrimaryTextColor = legacyStyles.darkThemeTextColor; | ||
35 | |||
36 | export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter; | ||
37 | export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; | ||
38 | |||
39 | export const buttonDangerTextColor = legacyStyles.darkThemeTextColor; | ||
40 | |||
41 | export const buttonWarningTextColor = legacyStyles.darkThemeTextColor; | ||
42 | |||
43 | export const buttonLoaderColor = { | ||
44 | primary: '#FFF', | ||
45 | secondary: buttonSecondaryTextColor, | ||
46 | success: '#FFF', | ||
47 | warning: '#FFF', | ||
48 | danger: '#FFF', | ||
49 | inverted: defaultStyles.brandPrimary, | ||
50 | }; | ||
51 | |||
52 | // Select | ||
53 | export const selectBackground = inputBackground; | ||
54 | export const selectBorder = inputBorder; | ||
55 | export const selectColor = inputColor; | ||
56 | export const selectToggleColor = inputPrefixColor; | ||
57 | export const selectPopupBackground = legacyStyles.darkThemeGrayLight; | ||
58 | export const selectOptionColor = '#FFF'; | ||
59 | export const selectOptionBorder = `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`; | ||
60 | export const selectOptionItemHover = color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(); | ||
61 | export const selectOptionItemHoverColor = selectColor; | ||
62 | export const selectSearchColor = inputBackground; | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts new file mode 100644 index 000000000..d36558ff0 --- /dev/null +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -0,0 +1,139 @@ | |||
1 | import color from 'color'; | ||
2 | |||
3 | import * as legacyStyles from '../legacy'; | ||
4 | |||
5 | export interface IStyleTypes { | ||
6 | [index: string]: { | ||
7 | accent: string; | ||
8 | contrast: string; | ||
9 | border?: string; | ||
10 | }; | ||
11 | } | ||
12 | |||
13 | export const brandPrimary = '#3498db'; | ||
14 | export const brandSuccess = '#5cb85c'; | ||
15 | export const brandInfo = '#5bc0de'; | ||
16 | export const brandWarning = '#FF9F00'; | ||
17 | export const brandDanger = '#d9534f'; | ||
18 | |||
19 | export const uiFontSize = 14; | ||
20 | |||
21 | export const borderRadius = legacyStyles.themeBorderRadius; | ||
22 | export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall; | ||
23 | |||
24 | export const colorBackground = legacyStyles.themeGrayLighter; | ||
25 | export const colorContentBackground = '#FFFFFF'; | ||
26 | export const colorHeadline = legacyStyles.themeGrayDark; | ||
27 | |||
28 | export const colorText = legacyStyles.themeTextColor; | ||
29 | |||
30 | // Subscription Container Component | ||
31 | export const colorSubscriptionContainerBackground = 'none'; | ||
32 | export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`; | ||
33 | export const colorSubscriptionContainerTitle = brandPrimary; | ||
34 | export const colorSubscriptionContainerActionButtonBackground = brandPrimary; | ||
35 | export const colorSubscriptionContainerActionButtonColor = '#FFF'; | ||
36 | |||
37 | // Loader | ||
38 | export const colorAppLoaderSpinner = '#FFF'; | ||
39 | export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark; | ||
40 | export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string(); | ||
41 | |||
42 | // Input | ||
43 | export const labelColor = legacyStyles.themeGrayLight; | ||
44 | export const inputColor = legacyStyles.themeGray; | ||
45 | export const inputHeight = '35px'; | ||
46 | export const inputBackground = legacyStyles.themeGrayLightest; | ||
47 | export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; | ||
48 | export const inputModifierColor = legacyStyles.themeGrayLight; | ||
49 | export const inputPlaceholderColor = color(legacyStyles.themeGrayLight).lighten(0.3).hex(); | ||
50 | export const inputPrefixColor = legacyStyles.themeGrayLight; | ||
51 | export const inputPrefixBackground = legacyStyles.themeGrayLighter; | ||
52 | export const inputDisabledOpacity = 0.5; | ||
53 | export const inputScorePasswordBackground = legacyStyles.themeGrayLighter; | ||
54 | |||
55 | // Toggle | ||
56 | export const toggleBackground = legacyStyles.themeGrayLighter; | ||
57 | export const toggleButton = legacyStyles.themeGrayLight; | ||
58 | export const toggleButtonActive = brandPrimary; | ||
59 | export const toggleWidth = 40; | ||
60 | export const toggleHeight = 14; | ||
61 | |||
62 | // Style Types | ||
63 | export const styleTypes: IStyleTypes = { | ||
64 | primary: { | ||
65 | accent: brandPrimary, | ||
66 | contrast: '#FFF', | ||
67 | }, | ||
68 | secondary: { | ||
69 | accent: legacyStyles.themeGrayLighter, | ||
70 | contrast: legacyStyles.themeGray, | ||
71 | }, | ||
72 | success: { | ||
73 | accent: brandSuccess, | ||
74 | contrast: '#FFF', | ||
75 | }, | ||
76 | warning: { | ||
77 | accent: brandWarning, | ||
78 | contrast: '#FFF', | ||
79 | }, | ||
80 | danger: { | ||
81 | accent: brandDanger, | ||
82 | contrast: '#FFF', | ||
83 | }, | ||
84 | inverted: { | ||
85 | accent: 'none', | ||
86 | contrast: brandPrimary, | ||
87 | border: `1px solid ${brandPrimary}`, | ||
88 | }, | ||
89 | }; | ||
90 | |||
91 | // Button | ||
92 | export const buttonPrimaryBackground = brandPrimary; | ||
93 | export const buttonPrimaryTextColor = '#FFF'; | ||
94 | |||
95 | export const buttonSecondaryBackground = legacyStyles.themeGrayLighter; | ||
96 | export const buttonSecondaryTextColor = legacyStyles.themeGray; | ||
97 | |||
98 | export const buttonSuccessBackground = brandSuccess; | ||
99 | export const buttonSuccessTextColor = '#FFF'; | ||
100 | |||
101 | export const buttonDangerBackground = brandDanger; | ||
102 | export const buttonDangerTextColor = '#FFF'; | ||
103 | |||
104 | export const buttonWarningBackground = brandWarning; | ||
105 | export const buttonWarningTextColor = '#FFF'; | ||
106 | |||
107 | export const buttonInvertedBackground = 'none'; | ||
108 | export const buttonInvertedTextColor = brandPrimary; | ||
109 | export const buttonInvertedBorder = `1px solid ${brandPrimary}`; | ||
110 | |||
111 | export const buttonLoaderColor = { | ||
112 | primary: '#FFF', | ||
113 | secondary: buttonSecondaryTextColor, | ||
114 | success: '#FFF', | ||
115 | warning: '#FFF', | ||
116 | danger: '#FFF', | ||
117 | inverted: brandPrimary, | ||
118 | }; | ||
119 | |||
120 | // Select | ||
121 | export const selectBackground = inputBackground; | ||
122 | export const selectBorder = inputBorder; | ||
123 | export const selectHeight = inputHeight; | ||
124 | export const selectColor = inputColor; | ||
125 | export const selectToggleColor = inputPrefixColor; | ||
126 | export const selectPopupBackground = '#FFF'; | ||
127 | export const selectOptionColor = inputColor; | ||
128 | export const selectOptionBorder = `1px solid ${legacyStyles.themeGrayLightest}`; | ||
129 | export const selectOptionItemHover = legacyStyles.themeGrayLighter; | ||
130 | export const selectOptionItemHoverColor = selectColor; | ||
131 | export const selectOptionItemActive = brandPrimary; | ||
132 | export const selectOptionItemActiveColor = '#FFF'; | ||
133 | export const selectSearchBackground = legacyStyles.themeGrayLighter; | ||
134 | export const selectSearchColor = inputColor; | ||
135 | export const selectDisabledOpacity = inputDisabledOpacity; | ||
136 | |||
137 | // Badge | ||
138 | export const badgeFontSize = uiFontSize - 2; | ||
139 | export const badgeBorderRadius = 50; | ||
diff --git a/packages/theme/src/themes/legacy/index.ts b/packages/theme/src/themes/legacy/index.ts new file mode 100644 index 000000000..2114b92c1 --- /dev/null +++ b/packages/theme/src/themes/legacy/index.ts | |||
@@ -0,0 +1,38 @@ | |||
1 | /* legacy config, injected into sass */ | ||
2 | export const themeBrandPrimary = '#3498db'; | ||
3 | export const themeBrandSuccess = '#5cb85c'; | ||
4 | export const themeBrandInfo = '#5bc0de'; | ||
5 | export const themeBrandWarning = '#FF9F00'; | ||
6 | export const themeBrandDanger = '#d9534f'; | ||
7 | |||
8 | export const themeGrayDark = '#373a3c'; | ||
9 | export const themeGray = '#55595c'; | ||
10 | export const themeGrayLight = '#818a91'; | ||
11 | export const themeGrayLighter = '#eceeef'; | ||
12 | export const themeGrayLightest = '#f7f7f9'; | ||
13 | |||
14 | export const themeBorderRadius = '6px'; | ||
15 | export const themeBorderRadiusSmall = '3px'; | ||
16 | |||
17 | export const themeSidebarWidth = '68px'; | ||
18 | |||
19 | export const themeTextColor = themeGrayDark; | ||
20 | |||
21 | export const themeTransitionTime = '.5s'; | ||
22 | |||
23 | export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)'; | ||
24 | |||
25 | export const darkThemeBlack = '#1A1A1A'; | ||
26 | |||
27 | export const darkThemeGrayDarkest = '#1E1E1E'; | ||
28 | export const darkThemeGrayDarker = '#2D2F31'; | ||
29 | export const darkThemeGrayDark = '#383A3B'; | ||
30 | |||
31 | export const darkThemeGray = '#47494B'; | ||
32 | |||
33 | export const darkThemeGrayLight = '#515355'; | ||
34 | export const darkThemeGrayLighter = '#8a8b8b'; | ||
35 | export const darkThemeGrayLightest = '#FFFFFF'; | ||
36 | |||
37 | export const darkThemeGraySmoke = '#CED0D1'; | ||
38 | export const darkThemeTextColor = '#FFFFFF'; | ||