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