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