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