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
|
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,
},
});
|
