1import { ColorScheme } from "../theme/colorScheme"
2import { withOpacity } from "../theme/color"
3import {
4 background,
5 border,
6 borderColor,
7 foreground,
8 svg,
9 text,
10} from "./components"
11import statusBar from "./statusBar"
12import tabBar from "./tabBar"
13
14export default function workspace(colorScheme: ColorScheme) {
15 const layer = colorScheme.lowest
16 const isLight = colorScheme.isLight
17 const itemSpacing = 8
18 const titlebarButton = {
19 cornerRadius: 6,
20 padding: {
21 top: 1,
22 bottom: 1,
23 left: 8,
24 right: 8,
25 },
26 ...text(layer, "sans", "variant", { size: "xs" }),
27 background: background(layer, "variant"),
28 border: border(layer),
29 hover: {
30 ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
31 background: background(layer, "variant", "hovered"),
32 border: border(layer, "variant", "hovered"),
33 },
34 clicked: {
35 ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
36 background: background(layer, "variant", "pressed"),
37 border: border(layer, "variant", "pressed"),
38 },
39 active: {
40 ...text(layer, "sans", "variant", "active", { size: "xs" }),
41 background: background(layer, "variant", "active"),
42 border: border(layer, "variant", "active"),
43 },
44 }
45 const signInButton = {
46 cornerRadius: 6,
47 padding: {
48 top: 1,
49 bottom: 1,
50 left: 8,
51 right: 8,
52 },
53 ...text(layer, "sans", "variant", { size: "xs" }),
54 background: background(layer, "variant"),
55 //border: border(layer),
56 hover: {
57 ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
58 background: background(layer, "variant", "hovered"),
59 //border: border(layer, "variant", "hovered"),
60 },
61 clicked: {
62 ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
63 background: background(layer, "variant", "pressed"),
64 //border: border(layer, "variant", "pressed"),
65 },
66 active: {
67 ...text(layer, "sans", "variant", "active", { size: "xs" }),
68 background: background(layer, "variant", "active"),
69 //border: border(layer, "variant", "active"),
70 },
71 }
72 const avatarWidth = 18
73 const avatarOuterWidth = avatarWidth + 4
74 const followerAvatarWidth = 14
75 const followerAvatarOuterWidth = followerAvatarWidth + 4
76
77 return {
78 background: background(colorScheme.lowest),
79 blankPane: {
80 logoContainer: {
81 width: 256,
82 height: 256,
83 },
84 logo: svg(
85 withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
86 "icons/logo_96.svg",
87 256,
88 256
89 ),
90
91 logoShadow: svg(
92 withOpacity(
93 colorScheme.isLight
94 ? "#FFFFFF"
95 : colorScheme.lowest.base.default.background,
96 colorScheme.isLight ? 1 : 0.6
97 ),
98 "icons/logo_96.svg",
99 256,
100 256
101 ),
102 keyboardHints: {
103 margin: {
104 top: 96,
105 },
106 cornerRadius: 4,
107 },
108 keyboardHint: {
109 ...text(layer, "sans", "variant", { size: "sm" }),
110 padding: {
111 top: 3,
112 left: 8,
113 right: 8,
114 bottom: 3,
115 },
116 cornerRadius: 8,
117 hover: {
118 ...text(layer, "sans", "active", { size: "sm" }),
119 },
120 },
121 keyboardHintWidth: 320,
122 },
123 joiningProjectAvatar: {
124 cornerRadius: 40,
125 width: 80,
126 },
127 joiningProjectMessage: {
128 padding: 12,
129 ...text(layer, "sans", { size: "lg" }),
130 },
131 externalLocationMessage: {
132 background: background(colorScheme.middle, "accent"),
133 border: border(colorScheme.middle, "accent"),
134 cornerRadius: 6,
135 padding: 12,
136 margin: { bottom: 8, right: 8 },
137 ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
138 },
139 leaderBorderOpacity: 0.7,
140 leaderBorderWidth: 2.0,
141 tabBar: tabBar(colorScheme),
142 modal: {
143 margin: {
144 bottom: 52,
145 top: 52,
146 },
147 cursor: "Arrow",
148 },
149 zoomedBackground: {
150 cursor: "Arrow",
151 background: isLight
152 ? withOpacity(background(colorScheme.lowest), 0.8)
153 : withOpacity(background(colorScheme.highest), 0.6),
154 },
155 zoomedPaneForeground: {
156 margin: 16,
157 shadow: colorScheme.modalShadow,
158 border: border(colorScheme.lowest, { overlay: true }),
159 },
160 zoomedPanelForeground: {
161 margin: 16,
162 border: border(colorScheme.lowest, { overlay: true }),
163 },
164 dock: {
165 left: {
166 border: border(layer, { right: true }),
167 },
168 bottom: {
169 border: border(layer, { top: true }),
170 },
171 right: {
172 border: border(layer, { left: true }),
173 },
174 },
175 paneDivider: {
176 color: borderColor(layer),
177 width: 1,
178 },
179 statusBar: statusBar(colorScheme),
180 titlebar: {
181 itemSpacing,
182 facePileSpacing: 2,
183 height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images.
184 background: background(layer),
185 border: border(layer, { bottom: true }),
186 padding: {
187 left: 80,
188 right: itemSpacing,
189 },
190
191 // Project
192 title: text(layer, "sans", "variant"),
193 highlight_color: text(layer, "sans", "active").color,
194
195 // Collaborators
196 leaderAvatar: {
197 width: avatarWidth,
198 outerWidth: avatarOuterWidth,
199 cornerRadius: avatarWidth / 2,
200 outerCornerRadius: avatarOuterWidth / 2,
201 },
202 followerAvatar: {
203 width: followerAvatarWidth,
204 outerWidth: followerAvatarOuterWidth,
205 cornerRadius: followerAvatarWidth / 2,
206 outerCornerRadius: followerAvatarOuterWidth / 2,
207 },
208 inactiveAvatarGrayscale: true,
209 followerAvatarOverlap: 8,
210 leaderSelection: {
211 margin: {
212 top: 4,
213 bottom: 4,
214 },
215 padding: {
216 left: 2,
217 right: 2,
218 top: 2,
219 bottom: 2,
220 },
221 cornerRadius: 6,
222 },
223 avatarRibbon: {
224 height: 3,
225 width: 12,
226 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
227 },
228
229 // Sign in buttom
230 // FlatButton, Variant
231 signInPrompt: {
232 margin: {
233 left: itemSpacing,
234 },
235 ...signInButton,
236 },
237
238 // Offline Indicator
239 offlineIcon: {
240 color: foreground(layer, "variant"),
241 width: 16,
242 margin: {
243 left: itemSpacing,
244 },
245 padding: {
246 right: 4,
247 },
248 },
249
250 // Notice that the collaboration server is out of date
251 outdatedWarning: {
252 ...text(layer, "sans", "warning", { size: "xs" }),
253 background: withOpacity(background(layer, "warning"), 0.3),
254 border: border(layer, "warning"),
255 margin: {
256 left: itemSpacing,
257 },
258 padding: {
259 left: 8,
260 right: 8,
261 },
262 cornerRadius: 6,
263 },
264 callControl: {
265 cornerRadius: 6,
266 color: foreground(layer, "variant"),
267 iconWidth: 12,
268 buttonWidth: 20,
269 hover: {
270 background: background(layer, "variant", "hovered"),
271 color: foreground(layer, "variant", "hovered"),
272 },
273 },
274 toggleContactsButton: {
275 margin: { left: itemSpacing },
276 cornerRadius: 6,
277 color: foreground(layer, "variant"),
278 iconWidth: 14,
279 buttonWidth: 20,
280 active: {
281 background: background(layer, "variant", "active"),
282 color: foreground(layer, "variant", "active"),
283 },
284 clicked: {
285 background: background(layer, "variant", "pressed"),
286 color: foreground(layer, "variant", "pressed"),
287 },
288 hover: {
289 background: background(layer, "variant", "hovered"),
290 color: foreground(layer, "variant", "hovered"),
291 },
292 },
293 userMenuButton: {
294 buttonWidth: 20,
295 iconWidth: 12,
296 ...titlebarButton,
297 },
298 toggleContactsBadge: {
299 cornerRadius: 3,
300 padding: 2,
301 margin: { top: 3, left: 3 },
302 border: border(layer),
303 background: foreground(layer, "accent"),
304 },
305 shareButton: {
306 ...titlebarButton,
307 },
308 },
309
310 toolbar: {
311 height: 34,
312 background: background(colorScheme.highest),
313 border: border(colorScheme.highest, { bottom: true }),
314 itemSpacing: 8,
315 navButton: {
316 color: foreground(colorScheme.highest, "on"),
317 iconWidth: 12,
318 buttonWidth: 24,
319 cornerRadius: 6,
320 hover: {
321 color: foreground(colorScheme.highest, "on", "hovered"),
322 background: background(
323 colorScheme.highest,
324 "on",
325 "hovered"
326 ),
327 },
328 disabled: {
329 color: foreground(colorScheme.highest, "on", "disabled"),
330 },
331 },
332 padding: { left: 8, right: 8, top: 4, bottom: 4 },
333 },
334 breadcrumbHeight: 24,
335 breadcrumbs: {
336 ...text(colorScheme.highest, "sans", "variant"),
337 cornerRadius: 6,
338 padding: {
339 left: 6,
340 right: 6,
341 },
342 hover: {
343 color: foreground(colorScheme.highest, "on", "hovered"),
344 background: background(colorScheme.highest, "on", "hovered"),
345 },
346 },
347 disconnectedOverlay: {
348 ...text(layer, "sans"),
349 background: withOpacity(background(layer), 0.8),
350 },
351 notification: {
352 margin: { top: 10 },
353 background: background(colorScheme.middle),
354 cornerRadius: 6,
355 padding: 12,
356 border: border(colorScheme.middle),
357 shadow: colorScheme.popoverShadow,
358 },
359 notifications: {
360 width: 400,
361 margin: { right: 10, bottom: 10 },
362 },
363 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
364 }
365}