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