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 active: {
274 background: background(layer, "variant", "active"),
275 color: foreground(layer, "variant", "active"),
276 },
277 },
278 toggleContactsButton: {
279 margin: { left: itemSpacing },
280 cornerRadius: 6,
281 color: foreground(layer, "variant"),
282 iconWidth: 14,
283 buttonWidth: 20,
284 active: {
285 background: background(layer, "variant", "active"),
286 color: foreground(layer, "variant", "active"),
287 },
288 clicked: {
289 background: background(layer, "variant", "pressed"),
290 color: foreground(layer, "variant", "pressed"),
291 },
292 hover: {
293 background: background(layer, "variant", "hovered"),
294 color: foreground(layer, "variant", "hovered"),
295 },
296 },
297 userMenuButton: {
298 buttonWidth: 20,
299 iconWidth: 12,
300 ...titlebarButton,
301 },
302 toggleContactsBadge: {
303 cornerRadius: 3,
304 padding: 2,
305 margin: { top: 3, left: 3 },
306 border: border(layer),
307 background: foreground(layer, "accent"),
308 },
309 shareButton: {
310 ...titlebarButton,
311 },
312 },
313
314 toolbar: {
315 height: 34,
316 background: background(colorScheme.highest),
317 border: border(colorScheme.highest, { bottom: true }),
318 itemSpacing: 8,
319 navButton: {
320 color: foreground(colorScheme.highest, "on"),
321 iconWidth: 12,
322 buttonWidth: 24,
323 cornerRadius: 6,
324 hover: {
325 color: foreground(colorScheme.highest, "on", "hovered"),
326 background: background(
327 colorScheme.highest,
328 "on",
329 "hovered"
330 ),
331 },
332 disabled: {
333 color: foreground(colorScheme.highest, "on", "disabled"),
334 },
335 },
336 padding: { left: 8, right: 8, top: 4, bottom: 4 },
337 },
338 breadcrumbHeight: 24,
339 breadcrumbs: {
340 ...text(colorScheme.highest, "sans", "variant"),
341 cornerRadius: 6,
342 padding: {
343 left: 6,
344 right: 6,
345 },
346 hover: {
347 color: foreground(colorScheme.highest, "on", "hovered"),
348 background: background(colorScheme.highest, "on", "hovered"),
349 },
350 },
351 disconnectedOverlay: {
352 ...text(layer, "sans"),
353 background: withOpacity(background(layer), 0.8),
354 },
355 notification: {
356 margin: { top: 10 },
357 background: background(colorScheme.middle),
358 cornerRadius: 6,
359 padding: 12,
360 border: border(colorScheme.middle),
361 shadow: colorScheme.popoverShadow,
362 },
363 notifications: {
364 width: 400,
365 margin: { right: 10, bottom: 10 },
366 },
367 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
368 }
369}