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
|
import color from 'color';
import { cloneDeep, merge } from 'lodash';
import * as defaultStyles from '../default';
import * as legacyStyles from '../legacy';
export const colorBackground = legacyStyles.darkThemeGrayDarkest;
export const colorContentBackground = legacyStyles.darkThemeGrayDarkest;
export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
export const colorHeadline = legacyStyles.darkThemeTextColor;
export const colorText = legacyStyles.darkThemeTextColor;
// Loader
export const colorFullscreenLoaderSpinner = '#FFF';
export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string();
// Input
export const labelColor = legacyStyles.darkThemeTextColor;
export const inputColor = legacyStyles.darkThemeGrayLightest;
export const inputBackground = legacyStyles.themeGrayDark;
export const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`;
export const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
export const inputPrefixBackground = legacyStyles.darkThemeGray;
export const inputDisabledOpacity = 0.5;
export const inputScorePasswordBackground = legacyStyles.darkThemeGrayDark;
export const inputModifierColor = color(legacyStyles.darkThemeGrayLighter).lighten(0.3).hex();
export const inputPlaceholderColor = color(legacyStyles.darkThemeGrayLighter).darken(0.1).hex();
// Toggle
export const toggleBackground = legacyStyles.darkThemeGray;
export const toggleButton = legacyStyles.darkThemeGrayLighter;
// Button
export const buttonPrimaryTextColor = legacyStyles.darkThemeTextColor;
export const buttonSecondaryBackground = legacyStyles.darkThemeGrayLighter;
export const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor;
export const buttonDangerTextColor = legacyStyles.darkThemeTextColor;
export const buttonWarningTextColor = legacyStyles.darkThemeTextColor;
export const buttonLoaderColor = {
primary: '#FFF',
secondary: buttonSecondaryTextColor,
success: '#FFF',
warning: '#FFF',
danger: '#FFF',
inverted: defaultStyles.brandPrimary,
};
// Select
export const selectBackground = inputBackground;
export const selectBorder = inputBorder;
export const selectColor = inputColor;
export const selectToggleColor = inputPrefixColor;
export const selectPopupBackground = legacyStyles.darkThemeGrayLight;
export const selectOptionColor = '#FFF';
export const selectOptionBorder = `1px solid ${color(legacyStyles.darkThemeGrayLight).darken(0.2).hex()}`;
export const selectOptionItemHover = color(legacyStyles.darkThemeGrayLight).darken(0.2).hex();
export const selectOptionItemHoverColor = selectColor;
export const selectSearchColor = inputBackground;
// Modal
export const colorModalOverlayBackground = color(legacyStyles.darkThemeBlack).alpha(0.8).rgb().string();
// Services
export const services = merge({}, defaultStyles.services, {
listItems: {
borderColor: legacyStyles.darkThemeGrayDarker,
hoverBgColor: legacyStyles.darkThemeGrayDarker,
disabled: {
color: legacyStyles.darkThemeGray,
},
},
});
// Service Icon
export const serviceIcon = merge({}, defaultStyles.serviceIcon, {
isCustom: {
border: `1px solid ${legacyStyles.darkThemeGrayDark}`,
},
});
// Workspaces
const drawerBg = color(colorBackground).lighten(0.3).hex();
export const workspaces = merge({}, defaultStyles.workspaces, {
settings: {
listItems: cloneDeep(services.listItems),
},
drawer: {
background: drawerBg,
addButton: {
color: legacyStyles.darkThemeGrayLighter,
hoverColor: legacyStyles.darkThemeGraySmoke,
},
listItem: {
border: color(drawerBg).lighten(0.2).hex(),
hoverBackground: color(drawerBg).lighten(0.2).hex(),
activeBackground: defaultStyles.brandPrimary,
name: {
color: colorText,
activeColor: 'white',
},
services: {
color: color(colorText).darken(0.5).hex(),
active: color(defaultStyles.brandPrimary).lighten(0.5).hex(),
},
},
},
});
// Announcements
export const announcements = merge({}, defaultStyles.announcements, {
spotlight: {
background: legacyStyles.darkThemeGrayDark,
},
});
// Signup
export const signup = merge({}, defaultStyles.signup, {
pricing: {
feature: {
background: legacyStyles.darkThemeGrayLight,
border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(),
},
},
});
|
