1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
import color from 'color';
import { cloneDeep } from 'lodash';
import * as legacyStyles from '../legacy';
export interface IStyleTypes {
[index: string]: {
accent: string;
contrast: string;
border?: string;
};
}
export const brandPrimary = '#3498db';
export const brandSuccess = '#5cb85c';
export const brandInfo = '#5bc0de';
export const brandWarning = '#FF9F00';
export const brandDanger = '#d9534f';
export const uiFontSize = 14;
export const borderRadius = legacyStyles.themeBorderRadius;
export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall;
export const colorBackground = legacyStyles.themeGrayLighter;
export const colorContentBackground = '#FFFFFF';
export const colorHeadline = legacyStyles.themeGrayDark;
export const colorText = legacyStyles.themeTextColor;
// Subscription Container Component
export const colorSubscriptionContainerBackground = 'none';
export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`;
export const colorSubscriptionContainerTitle = brandPrimary;
export const colorSubscriptionContainerActionButtonBackground = brandPrimary;
export const colorSubscriptionContainerActionButtonColor = '#FFF';
// Loader
export const colorAppLoaderSpinner = '#FFF';
export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark;
export const colorWebviewLoaderBackground = color(legacyStyles.themeGrayLighter).alpha(0.8).rgb().string();
// Input
export const labelColor = legacyStyles.themeGrayLight;
export const inputColor = legacyStyles.themeGray;
export const inputHeight = 40;
export const inputBackground = legacyStyles.themeGrayLightest;
export const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`;
export const inputModifierColor = legacyStyles.themeGrayLight;
export const inputPlaceholderColor = color(legacyStyles.themeGrayLight).lighten(0.3).hex();
export const inputPrefixColor = legacyStyles.themeGrayLight;
export const inputPrefixBackground = legacyStyles.themeGrayLighter;
export const inputDisabledOpacity = 0.5;
export const inputScorePasswordBackground = legacyStyles.themeGrayLighter;
// Toggle
export const toggleBackground = legacyStyles.themeGrayLighter;
export const toggleButton = legacyStyles.themeGrayLight;
export const toggleButtonActive = brandPrimary;
export const toggleWidth = 40;
export const toggleHeight = 14;
// Style Types
export const styleTypes: IStyleTypes = {
primary: {
accent: brandPrimary,
contrast: '#FFF',
},
secondary: {
accent: legacyStyles.themeGrayLighter,
contrast: legacyStyles.themeGray,
},
success: {
accent: brandSuccess,
contrast: '#FFF',
},
warning: {
accent: brandWarning,
contrast: '#FFF',
},
danger: {
accent: brandDanger,
contrast: '#FFF',
},
inverted: {
accent: 'none',
contrast: brandPrimary,
border: `1px solid ${brandPrimary}`,
},
};
// Button
export const buttonPrimaryBackground = brandPrimary;
export const buttonPrimaryTextColor = '#FFF';
export const buttonSecondaryBackground = legacyStyles.themeGrayLighter;
export const buttonSecondaryTextColor = legacyStyles.themeGray;
export const buttonSuccessBackground = brandSuccess;
export const buttonSuccessTextColor = '#FFF';
export const buttonDangerBackground = brandDanger;
export const buttonDangerTextColor = '#FFF';
export const buttonWarningBackground = brandWarning;
export const buttonWarningTextColor = '#FFF';
export const buttonInvertedBackground = 'none';
export const buttonInvertedTextColor = brandPrimary;
export const buttonInvertedBorder = `1px solid ${brandPrimary}`;
export const buttonHeight = inputHeight;
export const buttonLoaderColor = {
primary: '#FFF',
secondary: buttonSecondaryTextColor,
success: '#FFF',
warning: '#FFF',
danger: '#FFF',
inverted: brandPrimary,
};
// Select
export const selectBackground = inputBackground;
export const selectBorder = inputBorder;
export const selectHeight = inputHeight;
export const selectColor = inputColor;
export const selectToggleColor = inputPrefixColor;
export const selectPopupBackground = '#FFF';
export const selectOptionColor = inputColor;
export const selectOptionBorder = `1px solid ${legacyStyles.themeGrayLightest}`;
export const selectOptionItemHover = legacyStyles.themeGrayLighter;
export const selectOptionItemHoverColor = selectColor;
export const selectOptionItemActive = brandPrimary;
export const selectOptionItemActiveColor = '#FFF';
export const selectSearchBackground = legacyStyles.themeGrayLighter;
export const selectSearchColor = inputColor;
export const selectDisabledOpacity = inputDisabledOpacity;
// Badge
export const badgeFontSize = uiFontSize - 2;
export const badgeBorderRadius = 50;
// Modal
export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string();
// Services
export const services = {
listItems: {
padding: 10,
height: 57,
borderColor: legacyStyles.themeGrayLightest,
hoverBgColor: legacyStyles.themeGrayLightest,
disabled: {
color: legacyStyles.themeGrayLight,
},
},
};
// Service Icon
export const serviceIcon = {
width: 35,
isCustom: {
border: `1px solid ${legacyStyles.themeGrayLighter}`,
borderRadius: legacyStyles.themeBorderRadius,
width: 37,
},
};
// Workspaces
const drawerBg = color(colorBackground).lighten(0.1).hex();
export const workspaces = {
settings: {
listItems: cloneDeep(services.listItems),
},
drawer: {
width: 300,
padding: 20,
background: drawerBg,
buttons: {
color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(),
hoverColor: legacyStyles.themeGrayLight,
},
listItem: {
hoverBackground: color(drawerBg).darken(0.01).hex(),
activeBackground: legacyStyles.themeGrayLightest,
border: color(drawerBg).darken(0.05).hex(),
name: {
color: colorText,
activeColor: colorText,
},
services: {
color: color(colorText).lighten(1.5).hex(),
active: color(colorText).lighten(1.5).hex(),
},
},
},
switchingIndicator: {
spinnerColor: 'white',
},
};
// Announcements
export const announcements = {
spotlight: {
background: legacyStyles.themeGrayLightest,
},
};
|
