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 zoomedBackground: {
122 padding: 10,
123 cursor: "Arrow",
124 background: withOpacity(background(colorScheme.lowest), 0.5)
125 },
126 zoomedForeground: {
127 shadow: colorScheme.modalShadow,
128 border: border(colorScheme.highest, { overlay: true }),
129 },
130 dock: {
131 left: {
132 border: border(layer, { right: true }),
133 },
134 bottom: {
135 border: border(layer, { top: true }),
136 },
137 right: {
138 border: border(layer, { left: true }),
139 }
140 },
141 paneDivider: {
142 color: borderColor(layer),
143 width: 1,
144 },
145 statusBar: statusBar(colorScheme),
146 titlebar: {
147 itemSpacing,
148 facePileSpacing: 2,
149 height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images.
150 background: background(layer),
151 border: border(layer, { bottom: true }),
152 padding: {
153 left: 80,
154 right: itemSpacing,
155 },
156
157 // Project
158 title: text(layer, "sans", "variant"),
159 highlight_color: text(layer, "sans", "active").color,
160
161 // Collaborators
162 leaderAvatar: {
163 width: avatarWidth,
164 outerWidth: avatarOuterWidth,
165 cornerRadius: avatarWidth / 2,
166 outerCornerRadius: avatarOuterWidth / 2,
167 },
168 followerAvatar: {
169 width: followerAvatarWidth,
170 outerWidth: followerAvatarOuterWidth,
171 cornerRadius: followerAvatarWidth / 2,
172 outerCornerRadius: followerAvatarOuterWidth / 2,
173 },
174 inactiveAvatarGrayscale: true,
175 followerAvatarOverlap: 8,
176 leaderSelection: {
177 margin: {
178 top: 4,
179 bottom: 4,
180 },
181 padding: {
182 left: 2,
183 right: 2,
184 top: 2,
185 bottom: 2,
186 },
187 cornerRadius: 6,
188 },
189 avatarRibbon: {
190 height: 3,
191 width: 12,
192 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
193 },
194
195 // Sign in buttom
196 // FlatButton, Variant
197 signInPrompt: {
198 margin: {
199 left: itemSpacing,
200 },
201 ...titlebarButton,
202 },
203
204 // Offline Indicator
205 offlineIcon: {
206 color: foreground(layer, "variant"),
207 width: 16,
208 margin: {
209 left: itemSpacing,
210 },
211 padding: {
212 right: 4,
213 },
214 },
215
216 // Notice that the collaboration server is out of date
217 outdatedWarning: {
218 ...text(layer, "sans", "warning", { size: "xs" }),
219 background: withOpacity(background(layer, "warning"), 0.3),
220 border: border(layer, "warning"),
221 margin: {
222 left: itemSpacing,
223 },
224 padding: {
225 left: 8,
226 right: 8,
227 },
228 cornerRadius: 6,
229 },
230 callControl: {
231 cornerRadius: 6,
232 color: foreground(layer, "variant"),
233 iconWidth: 12,
234 buttonWidth: 20,
235 hover: {
236 background: background(layer, "variant", "hovered"),
237 color: foreground(layer, "variant", "hovered"),
238 },
239 },
240 toggleContactsButton: {
241 margin: { left: itemSpacing },
242 cornerRadius: 6,
243 color: foreground(layer, "variant"),
244 iconWidth: 14,
245 buttonWidth: 20,
246 active: {
247 background: background(layer, "variant", "active"),
248 color: foreground(layer, "variant", "active"),
249 },
250 clicked: {
251 background: background(layer, "variant", "pressed"),
252 color: foreground(layer, "variant", "pressed"),
253 },
254 hover: {
255 background: background(layer, "variant", "hovered"),
256 color: foreground(layer, "variant", "hovered"),
257 },
258 },
259 userMenuButton: {
260 buttonWidth: 20,
261 iconWidth: 12,
262 ...titlebarButton,
263 },
264 toggleContactsBadge: {
265 cornerRadius: 3,
266 padding: 2,
267 margin: { top: 3, left: 3 },
268 border: border(layer),
269 background: foreground(layer, "accent"),
270 },
271 shareButton: {
272 ...titlebarButton,
273 },
274 },
275
276 toolbar: {
277 height: 34,
278 background: background(colorScheme.highest),
279 border: border(colorScheme.highest, { bottom: true }),
280 itemSpacing: 8,
281 navButton: {
282 color: foreground(colorScheme.highest, "on"),
283 iconWidth: 12,
284 buttonWidth: 24,
285 cornerRadius: 6,
286 hover: {
287 color: foreground(colorScheme.highest, "on", "hovered"),
288 background: background(
289 colorScheme.highest,
290 "on",
291 "hovered"
292 ),
293 },
294 disabled: {
295 color: foreground(colorScheme.highest, "on", "disabled"),
296 },
297 },
298 padding: { left: 8, right: 8, top: 4, bottom: 4 },
299 },
300 breadcrumbHeight: 24,
301 breadcrumbs: {
302 ...text(colorScheme.highest, "sans", "variant"),
303 cornerRadius: 6,
304 padding: {
305 left: 6,
306 right: 6,
307 },
308 hover: {
309 color: foreground(colorScheme.highest, "on", "hovered"),
310 background: background(colorScheme.highest, "on", "hovered"),
311 },
312 },
313 disconnectedOverlay: {
314 ...text(layer, "sans"),
315 background: withOpacity(background(layer), 0.8),
316 },
317 notification: {
318 margin: { top: 10 },
319 background: background(colorScheme.middle),
320 cornerRadius: 6,
321 padding: 12,
322 border: border(colorScheme.middle),
323 shadow: colorScheme.popoverShadow,
324 },
325 notifications: {
326 width: 400,
327 margin: { right: 10, bottom: 10 },
328 },
329 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
330 }
331}