1import Theme from "../themes/common/theme";
2import { withOpacity } from "../utils/color";
3import {
4 backgroundColor,
5 border,
6 iconColor,
7 modalShadow,
8 popoverShadow,
9 text,
10} from "./components";
11import statusBar from "./statusBar";
12import tabBar from "./tabBar";
13
14export function workspaceBackground(theme: Theme) {
15 return backgroundColor(theme, 300);
16}
17
18export default function workspace(theme: Theme) {
19 const titlebarPadding = 6;
20 const titlebarButton = {
21 background: backgroundColor(theme, 100),
22 border: border(theme, "secondary"),
23 cornerRadius: 6,
24 margin: {
25 top: 1,
26 },
27 padding: {
28 top: 1,
29 bottom: 1,
30 left: 7,
31 right: 7,
32 },
33 ...text(theme, "sans", "secondary", { size: "xs" }),
34 hover: {
35 ...text(theme, "sans", "active", { size: "xs" }),
36 background: backgroundColor(theme, "on300", "hovered"),
37 border: border(theme, "primary"),
38 },
39 };
40
41 return {
42 background: backgroundColor(theme, 300),
43 joiningProjectAvatar: {
44 cornerRadius: 40,
45 width: 80,
46 },
47 joiningProjectMessage: {
48 padding: 12,
49 ...text(theme, "sans", "primary", { size: "lg" }),
50 },
51 externalLocationMessage: {
52 padding: 12,
53 ...text(theme, "sans", "primary", { size: "lg" }),
54 },
55 leaderBorderOpacity: 0.7,
56 leaderBorderWidth: 2.0,
57 tabBar: tabBar(theme),
58 modal: {
59 margin: {
60 bottom: 52,
61 top: 52,
62 },
63 cursor: "Arrow",
64 },
65 sidebar: {
66 initialSize: 240,
67 border: {
68 color: border(theme, "primary").color,
69 width: 1,
70 left: true,
71 right: true,
72 }
73 },
74 paneDivider: {
75 color: border(theme, "secondary").color,
76 width: 1,
77 },
78 statusBar: statusBar(theme),
79 titlebar: {
80 avatarWidth: 18,
81 avatarMargin: 8,
82 height: 33,
83 background: backgroundColor(theme, 100),
84 padding: {
85 left: 80,
86 right: titlebarPadding,
87 },
88 title: text(theme, "sans", "primary"),
89 avatar: {
90 cornerRadius: 10,
91 border: {
92 color: "#00000088",
93 width: 1,
94 },
95 },
96 inactiveAvatar: {
97 cornerRadius: 10,
98 opacity: 0.65,
99 },
100 avatarRibbon: {
101 height: 3,
102 width: 12,
103 // TODO: The background for this ideally should be
104 // set with a token, not hardcoded in rust
105 },
106 border: border(theme, "primary", { bottom: true, overlay: true }),
107 signInPrompt: {
108 ...titlebarButton
109 },
110 offlineIcon: {
111 color: iconColor(theme, "secondary"),
112 width: 16,
113 margin: {
114 left: titlebarPadding,
115 },
116 padding: {
117 right: 4,
118 },
119 },
120 outdatedWarning: {
121 ...text(theme, "sans", "warning", { size: "xs" }),
122 background: backgroundColor(theme, "warning"),
123 border: border(theme, "warning"),
124 margin: {
125 left: titlebarPadding,
126 },
127 padding: {
128 left: 6,
129 right: 6,
130 },
131 cornerRadius: 6,
132 },
133 toggleContactsButton: {
134 cornerRadius: 6,
135 color: iconColor(theme, "secondary"),
136 iconWidth: 8,
137 buttonWidth: 20,
138 active: {
139 background: backgroundColor(theme, "on300", "active"),
140 color: iconColor(theme, "active"),
141 },
142 hover: {
143 background: backgroundColor(theme, "on300", "hovered"),
144 color: iconColor(theme, "active"),
145 },
146 },
147 shareButton: {
148 ...titlebarButton
149 },
150 contactsPopover: {
151 background: backgroundColor(theme, 300, "base"),
152 cornerRadius: 6,
153 padding: { top: 6 },
154 shadow: popoverShadow(theme),
155 border: border(theme, "primary"),
156 margin: { top: -5 },
157 width: 250,
158 height: 300
159 }
160 },
161 toolbar: {
162 height: 34,
163 background: backgroundColor(theme, 500),
164 border: border(theme, "secondary", { bottom: true }),
165 itemSpacing: 8,
166 navButton: {
167 color: iconColor(theme, "primary"),
168 iconWidth: 12,
169 buttonWidth: 24,
170 cornerRadius: 6,
171 hover: {
172 color: iconColor(theme, "active"),
173 background: backgroundColor(theme, "on500", "hovered"),
174 },
175 disabled: {
176 color: withOpacity(iconColor(theme, "muted"), 0.6),
177 },
178 },
179 padding: { left: 8, right: 8, top: 4, bottom: 4 },
180 },
181 breadcrumbs: {
182 ...text(theme, "mono", "secondary"),
183 padding: { left: 6 },
184 },
185 disconnectedOverlay: {
186 ...text(theme, "sans", "active"),
187 background: withOpacity(theme.backgroundColor[500].base, 0.8),
188 },
189 notification: {
190 margin: { top: 10 },
191 background: backgroundColor(theme, 300),
192 cornerRadius: 6,
193 padding: 12,
194 border: border(theme, "primary"),
195 shadow: modalShadow(theme),
196 },
197 notifications: {
198 width: 400,
199 margin: { right: 10, bottom: 10 },
200 },
201 dock: {
202 initialSizeRight: 640,
203 initialSizeBottom: 480,
204 wash_color: withOpacity(theme.backgroundColor[500].base, 0.5),
205 panel: {
206 border: {
207 ...border(theme, "secondary"),
208 width: 1
209 },
210 },
211 maximized: {
212 margin: 24,
213 border: border(theme, "secondary", { "overlay": true }),
214 shadow: modalShadow(theme),
215 }
216 }
217 };
218}