aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/theme/src/index.ts20
-rw-r--r--packages/theme/src/themes/IStyleTypes.ts8
-rw-r--r--packages/theme/src/themes/dark/index.ts304
-rw-r--r--packages/theme/src/themes/default/index.ts478
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 @@
1import * as darkThemeConfig from './themes/dark'; 1import makeDarkThemeConfig from './themes/dark';
2import * as defaultThemeConfig from './themes/default'; 2import makeDefaultThemeConfig from './themes/default';
3import * as legacyStyles from './themes/legacy'; 3import * as legacyStyles from './themes/legacy';
4 4
5export enum ThemeType { 5export enum ThemeType {
@@ -7,12 +7,16 @@ export enum ThemeType {
7 dark = 'dark', 7 dark = 'dark',
8} 8}
9 9
10export function theme(themeId: ThemeType) { 10export 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 }); 12export 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
18export type Theme = typeof defaultThemeConfig; 19const defaultThemeConfigWithDefaultAccentColor =
20 makeDefaultThemeConfig(DEFAULT_ACCENT_COLOR);
21
22export 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
2export 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 @@
1import color from 'color'; 1import color from 'color';
2import { cloneDeep, merge } from 'lodash'; 2import { cloneDeep, merge } from 'lodash';
3 3
4import * as defaultStyles from '../default'; 4import makeDefaultThemeConfig from '../default';
5import * as legacyStyles from '../legacy'; 5import * as legacyStyles from '../legacy';
6 6
7export const colorBackground = legacyStyles.darkThemeGrayDarkest; 7export default (brandPrimary: string) => {
8export const colorContentBackground = legacyStyles.darkThemeGrayDarkest; 8 const defaultStyles = makeDefaultThemeConfig(brandPrimary);
9export 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
11export const colorHeadline = legacyStyles.darkThemeTextColor; 36 return {
12export const colorText = legacyStyles.darkThemeTextColor; 37 ...defaultStyles,
13 38
14export const defaultContentBorder = legacyStyles.themeGrayDark; 39 colorBackground,
40 colorContentBackground: legacyStyles.darkThemeGrayDarkest,
41 colorBackgroundSubscriptionContainer: legacyStyles.themeBrandInfo,
15 42
16// Loader 43 colorHeadline: legacyStyles.darkThemeTextColor,
17export const colorFullscreenLoaderSpinner = '#FFF'; 44 colorText: legacyStyles.darkThemeTextColor,
18export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string();
19 45
20// Input 46 defaultContentBorder: legacyStyles.themeGrayDark,
21export const labelColor = legacyStyles.darkThemeTextColor;
22export const inputColor = legacyStyles.darkThemeGrayLightest;
23export const inputBackground = legacyStyles.themeGrayDark;
24export const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
25export const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
26export const inputPrefixBackground = legacyStyles.darkThemeGray;
27export const inputDisabledOpacity = 0.5;
28export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark;
29export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
30export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex();
31 47
32// Toggle 48 // Loader
33export const toggleBackground = legacyStyles.darkThemeGray; 49 colorFullscreenLoaderSpinner: '#FFF',
34export const toggleButton = legacyStyles.darkThemeGrayLighter; 50 colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string(),
35 51
36// Button 52 // Input
37export 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
39export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter; 64 // Toggle
40export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; 65 toggleBackground: legacyStyles.darkThemeGray,
66 toggleButton: legacyStyles.darkThemeGrayLighter,
41 67
42export const buttonDangerTextColor = legacyStyles.darkThemeTextColor; 68 // Button
69 buttonPrimaryTextColor: legacyStyles.darkThemeTextColor,
43 70
44export const buttonWarningTextColor = legacyStyles.darkThemeTextColor; 71 buttonSecondaryBackground: legacyStyles.darkThemeGrayLighter,
72 buttonSecondaryTextColor,
45 73
46export 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,
56export const selectBackground = inputBackground; 77
57export const selectBorder = inputBorder; 78 buttonLoaderColor: {
58export const selectColor = inputColor; 79 primary: '#FFF',
59export const selectToggleColor = inputPrefixColor; 80 secondary: buttonSecondaryTextColor,
60export const selectPopupBackground = legacyStyles.darkThemeGrayLight; 81 success: '#FFF',
61export const selectOptionColor = '#FFF'; 82 warning: '#FFF',
62export const selectOptionBorder = `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`; 83 danger: '#FFF',
63export const selectOptionItemHover = color(legacyStyles.darkThemeGrayLight).darken(0.2).hex(); 84 inverted: defaultStyles.brandPrimary,
64export const selectOptionItemHoverColor = selectColor;
65export const selectSearchColor = inputBackground;
66
67// Modal
68export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.9).rgb().string();
69export const colorModalBackground = legacyStyles.darkThemeGrayDark;
70
71// Services
72export 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
83export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
84 isCustom: {
85 border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
86 },
87});
88
89// Workspaces
90const drawerBg = color(colorBackground).lighten(0.3).hex();
91
92export 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,
119export 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,
126export 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
136export 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 },
151export 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';
2import { cloneDeep } from 'lodash'; 2import { cloneDeep } from 'lodash';
3 3
4import * as legacyStyles from '../legacy'; 4import * as legacyStyles from '../legacy';
5 5import IStyleTypes from '../IStyleTypes';
6export interface IStyleTypes { 6
7 [index: string]: { 7export 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
14export const brandPrimary = '#7266F0';
15export const brandSuccess = '#5cb85c';
16export const brandInfo = '#5bc0de';
17export const brandWarning = '#FF9F00';
18export const brandDanger = '#d9534f';
19
20export const uiFontSize = 14;
21
22export const borderRadius = legacyStyles.themeBorderRadius;
23export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall;
24
25export const colorBackground = legacyStyles.themeGrayLighter;
26export const colorContentBackground = '#FFFFFF';
27export const colorHeadline = legacyStyles.themeGrayDark;
28
29export const colorText = legacyStyles.themeTextColor;
30
31export const defaultContentBorder = color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string();
32
33// Subscription Container Component
34export const colorSubscriptionContainerBackground = 'none';
35export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`;
36export const colorSubscriptionContainerTitle = brandPrimary;
37export const colorSubscriptionContainerActionButtonBackground = brandPrimary;
38export const colorSubscriptionContainerActionButtonColor = '#FFF';
39
40// Loader
41export const colorAppLoaderSpinner = '#FFF';
42export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark;
43export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string();
44
45// Input
46export const labelColor = legacyStyles.themeGrayLight;
47export const inputColor = legacyStyles.themeGray;
48export const inputHeight = 40;
49export const inputBackground = legacyStyles.themeGrayLightest;
50export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`;
51export const inputModifierColor = legacyStyles.themeGrayLight;
52export const inputPlaceholderColor = color(legacyStyles.themeGrayLight).lighten(0.3).hex();
53export const inputPrefixColor = legacyStyles.themeGrayLight;
54export const inputPrefixBackground = legacyStyles.themeGrayLighter;
55export const inputDisabledOpacity = 0.5;
56export const inputScorePasswordBackground = legacyStyles.themeGrayLighter;
57
58// Toggle
59export const toggleBackground = legacyStyles.themeGrayLighter;
60export const toggleButton = legacyStyles.themeGrayLight;
61export const toggleButtonActive = brandPrimary;
62export const toggleWidth = 40;
63export const toggleHeight = 14;
64
65// Style Types
66export 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
95export const buttonPrimaryBackground = brandPrimary;
96export const buttonPrimaryTextColor = '#FFF';
97
98export const buttonSecondaryBackground = legacyStyles.themeGrayLighter;
99export const buttonSecondaryTextColor = legacyStyles.themeGray;
100 53
101export const buttonSuccessBackground = brandSuccess; 54 const services = {
102export const buttonSuccessTextColor = '#FFF'; 55 listItems: {
103 56 padding: 10,
104export const buttonDangerBackground = brandDanger; 57 height: 57,
105export const buttonDangerTextColor = '#FFF'; 58 borderColor: legacyStyles.themeGrayLightest,
59 hoverBgColor: legacyStyles.themeGrayLightest,
60 disabled: {
61 color: legacyStyles.themeGrayLight,
62 },
63 },
64 };
106 65
107export const buttonWarningBackground = brandWarning; 66 return {
108export const buttonWarningTextColor = '#FFF'; 67 brandPrimary,
68 brandSuccess,
69 brandInfo,
70 brandWarning,
71 brandDanger,
109 72
110export const buttonInvertedBackground = 'none'; 73 uiFontSize,
111export const buttonInvertedTextColor = brandPrimary;
112export const buttonInvertedBorder = `1px solid ${brandPrimary}`;
113 74
114export 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
116export 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
126export const selectBackground = inputBackground; 192 workspaces: {
127export const selectBorder = inputBorder; 193 settings: {
128export const selectHeight = inputHeight; 194 listItems: cloneDeep(services.listItems),
129export const selectColor = inputColor; 195 },
130export const selectToggleColor = inputPrefixColor; 196 drawer: {
131export const selectPopupBackground = '#FFF'; 197 width: 300,
132export const selectOptionColor = inputColor; 198 padding: 20,
133export const selectOptionBorder = `1px solid ${legacyStyles.themeGrayLightest}`; 199 background: drawerBg,
134export const selectOptionItemHover = legacyStyles.themeGrayLighter; 200 buttons: {
135export const selectOptionItemHoverColor = selectColor; 201 color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(),
136export const selectOptionItemActive = brandPrimary; 202 hoverColor: legacyStyles.themeGrayLight,
137export const selectOptionItemActiveColor = '#FFF'; 203 },
138export const selectSearchBackground = legacyStyles.themeGrayLighter; 204 listItem: {
139export const selectSearchColor = inputColor; 205 hoverBackground: color(drawerBg).darken(0.01).hex(),
140export const selectDisabledOpacity = inputDisabledOpacity; 206 activeBackground: legacyStyles.themeGrayLightest,
141 207 border: color(drawerBg).darken(0.05).hex(),
142// Badge 208 name: {
143export const badgeFontSize = uiFontSize - 2; 209 color: colorText,
144export const badgeBorderRadius = 50; 210 activeColor: colorText,
145 211 },
146// Modal 212 services: {
147export const colorModalOverlayBackground = color('#000').alpha(0.8).rgb().string(); 213 color: color(colorText).lighten(1.5).hex(),
148export const colorModalBackground = colorContentBackground; 214 active: color(colorText).lighten(1.5).hex(),
149 215 },
150// Services 216 },
151export 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
164export 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
174const drawerBg = color(colorBackground).lighten(0.1).hex(); 231 signup: {
175 232 pricing: {
176export 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
208export 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,
215export 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,
225export 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
243export 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};
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-16 06:46:12 +0000