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