diff options
Diffstat (limited to 'packages/theme/src/themes')
-rw-r--r-- | packages/theme/src/themes/IStyleTypes.ts | 1 | ||||
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 30 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 14 |
3 files changed, 34 insertions, 11 deletions
diff --git a/packages/theme/src/themes/IStyleTypes.ts b/packages/theme/src/themes/IStyleTypes.ts index df5b51c1d..cf8bdea33 100644 --- a/packages/theme/src/themes/IStyleTypes.ts +++ b/packages/theme/src/themes/IStyleTypes.ts | |||
@@ -1,4 +1,3 @@ | |||
1 | |||
2 | export default interface IStyleTypes { | 1 | export default interface IStyleTypes { |
3 | [index: string]: { | 2 | [index: string]: { |
4 | accent: string; | 3 | accent: string; |
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index c8ad78829..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 |
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index b8f3e3201..21017bbe0 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -82,7 +82,10 @@ export default (brandPrimary: string) => { | |||
82 | 82 | ||
83 | colorText, | 83 | colorText, |
84 | 84 | ||
85 | defaultContentBorder: color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string(), | 85 | defaultContentBorder: color(legacyStyles.themeGrayLighter) |
86 | .darken(0.1) | ||
87 | .rgb() | ||
88 | .string(), | ||
86 | 89 | ||
87 | // Subscription Container Component | 90 | // Subscription Container Component |
88 | colorSubscriptionContainerBackground: 'none', | 91 | colorSubscriptionContainerBackground: 'none', |
@@ -94,7 +97,10 @@ export default (brandPrimary: string) => { | |||
94 | // Loader | 97 | // Loader |
95 | colorAppLoaderSpinner: '#FFF', | 98 | colorAppLoaderSpinner: '#FFF', |
96 | colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark, | 99 | colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark, |
97 | colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string(), | 100 | colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter) |
101 | .alpha(0.8) | ||
102 | .rgb() | ||
103 | .string(), | ||
98 | 104 | ||
99 | // Input | 105 | // Input |
100 | labelColor: legacyStyles.themeGrayLight, | 106 | labelColor: legacyStyles.themeGrayLight, |
@@ -103,7 +109,9 @@ export default (brandPrimary: string) => { | |||
103 | inputBackground, | 109 | inputBackground, |
104 | inputBorder, | 110 | inputBorder, |
105 | inputModifierColor: legacyStyles.themeGrayLight, | 111 | inputModifierColor: legacyStyles.themeGrayLight, |
106 | inputPlaceholderColor: color(legacyStyles.themeGrayLight).lighten(0.3).hex(), | 112 | inputPlaceholderColor: color(legacyStyles.themeGrayLight) |
113 | .lighten(0.3) | ||
114 | .hex(), | ||
107 | inputPrefixColor, | 115 | inputPrefixColor, |
108 | inputPrefixBackground: legacyStyles.themeGrayLighter, | 116 | inputPrefixBackground: legacyStyles.themeGrayLighter, |
109 | inputDisabledOpacity, | 117 | inputDisabledOpacity, |