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