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