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