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 for overlaid border
130 background: background(layer),
131 border: border(layer, { bottom: true, overlay: 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: 4,
164 bottom: 4,
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 ...titlebarButton,
178 },
179
180 // Offline Indicator
181 offlineIcon: {
182 color: foreground(layer, "variant"),
183 width: 16,
184 margin: {
185 left: itemSpacing,
186 },
187 padding: {
188 right: 4,
189 },
190 },
191
192 // Notice that the collaboration server is out of date
193 outdatedWarning: {
194 ...text(layer, "sans", "warning", { size: "xs" }),
195 background: withOpacity(background(layer, "warning"), 0.3),
196 border: border(layer, "warning"),
197 margin: {
198 left: itemSpacing,
199 },
200 padding: {
201 left: 8,
202 right: 8,
203 },
204 cornerRadius: 6,
205 },
206 callControl: {
207 cornerRadius: 6,
208 color: foreground(layer, "variant"),
209 iconWidth: 12,
210 buttonWidth: 20,
211 hover: {
212 background: background(layer, "variant", "hovered"),
213 color: foreground(layer, "variant", "hovered"),
214 },
215 },
216 toggleContactsButton: {
217 margin: { left: itemSpacing },
218 cornerRadius: 6,
219 color: foreground(layer, "variant"),
220 iconWidth: 14,
221 buttonWidth: 20,
222 active: {
223 background: background(layer, "variant", "active"),
224 color: foreground(layer, "variant", "active"),
225 },
226 clicked: {
227 background: background(layer, "variant", "pressed"),
228 color: foreground(layer, "variant", "pressed"),
229 },
230 hover: {
231 background: background(layer, "variant", "hovered"),
232 color: foreground(layer, "variant", "hovered"),
233 },
234 },
235 userMenuButton: {
236 buttonWidth: 20,
237 iconWidth: 12,
238 ...titlebarButton,
239 },
240 toggleContactsBadge: {
241 cornerRadius: 3,
242 padding: 2,
243 margin: { top: 3, left: 3 },
244 border: border(layer),
245 background: foreground(layer, "accent"),
246 },
247 shareButton: {
248 ...titlebarButton,
249 },
250 },
251
252 toolbar: {
253 height: 34,
254 background: background(colorScheme.highest),
255 border: border(colorScheme.highest, { bottom: true }),
256 itemSpacing: 8,
257 navButton: {
258 color: foreground(colorScheme.highest, "on"),
259 iconWidth: 12,
260 buttonWidth: 24,
261 cornerRadius: 6,
262 hover: {
263 color: foreground(colorScheme.highest, "on", "hovered"),
264 background: background(
265 colorScheme.highest,
266 "on",
267 "hovered"
268 ),
269 },
270 disabled: {
271 color: foreground(colorScheme.highest, "on", "disabled"),
272 },
273 },
274 padding: { left: 8, right: 8, top: 4, bottom: 4 },
275 },
276 breadcrumbs: {
277 ...text(layer, "mono", "variant"),
278 padding: { left: 6 },
279 },
280 disconnectedOverlay: {
281 ...text(layer, "sans"),
282 background: withOpacity(background(layer), 0.8),
283 },
284 notification: {
285 margin: { top: 10 },
286 background: background(colorScheme.middle),
287 cornerRadius: 6,
288 padding: 12,
289 border: border(colorScheme.middle),
290 shadow: colorScheme.popoverShadow,
291 },
292 notifications: {
293 width: 400,
294 margin: { right: 10, bottom: 10 },
295 },
296 dock: {
297 initialSizeRight: 640,
298 initialSizeBottom: 304,
299 wash_color: withOpacity(background(colorScheme.highest), 0.5),
300 panel: {
301 border: border(colorScheme.middle),
302 },
303 maximized: {
304 margin: 32,
305 border: border(colorScheme.highest, { overlay: true }),
306 shadow: colorScheme.modalShadow,
307 },
308 },
309 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
310 }
311}