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 logo: {
46 color: border(layer, "active").color,
47 icon: "icons/logo_96.svg",
48 dimensions: {
49 width: 272,
50 height: 272,
51 }
52 },
53 keyboardHints: {
54 margin: {
55 top: 32,
56 // bottom: -8.
57 },
58 padding: {
59 top: 8,
60 left: 8,
61 right: 8,
62 },
63 background: background(colorScheme.lowest),
64 border: border(layer, "active"),
65 cornerRadius: 4,
66 },
67 keyboardHint: {
68 ...text(layer, "sans", "variant", { size: "sm" }),
69 margin: {
70 bottom: 8
71 },
72 hover: {
73 ...text(layer, "sans", "hovered", { size: "sm" }),
74 }
75 },
76 keyboardHintWidth: 272,
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 for overlaid border
117 background: background(layer),
118 border: border(layer, { bottom: true, overlay: 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: 4,
151 bottom: 4,
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 ...titlebarButton,
165 },
166
167 // Offline Indicator
168 offlineIcon: {
169 color: foreground(layer, "variant"),
170 width: 16,
171 margin: {
172 left: itemSpacing,
173 },
174 padding: {
175 right: 4,
176 },
177 },
178
179 // Notice that the collaboration server is out of date
180 outdatedWarning: {
181 ...text(layer, "sans", "warning", { size: "xs" }),
182 background: withOpacity(background(layer, "warning"), 0.3),
183 border: border(layer, "warning"),
184 margin: {
185 left: itemSpacing,
186 },
187 padding: {
188 left: 8,
189 right: 8,
190 },
191 cornerRadius: 6,
192 },
193 callControl: {
194 cornerRadius: 6,
195 color: foreground(layer, "variant"),
196 iconWidth: 12,
197 buttonWidth: 20,
198 hover: {
199 background: background(layer, "variant", "hovered"),
200 color: foreground(layer, "variant", "hovered"),
201 },
202 },
203 toggleContactsButton: {
204 margin: { left: itemSpacing },
205 cornerRadius: 6,
206 color: foreground(layer, "variant"),
207 iconWidth: 8,
208 buttonWidth: 20,
209 active: {
210 background: background(layer, "variant", "active"),
211 color: foreground(layer, "variant", "active"),
212 },
213 clicked: {
214 background: background(layer, "variant", "pressed"),
215 color: foreground(layer, "variant", "pressed"),
216 },
217 hover: {
218 background: background(layer, "variant", "hovered"),
219 color: foreground(layer, "variant", "hovered"),
220 },
221 },
222 userMenuButton: {
223 buttonWidth: 20,
224 iconWidth: 12,
225 ...titlebarButton,
226 },
227 toggleContactsBadge: {
228 cornerRadius: 3,
229 padding: 2,
230 margin: { top: 3, left: 3 },
231 border: border(layer),
232 background: foreground(layer, "accent"),
233 },
234 shareButton: {
235 ...titlebarButton,
236 },
237 },
238
239 toolbar: {
240 height: 34,
241 background: background(colorScheme.highest),
242 border: border(colorScheme.highest, { bottom: true }),
243 itemSpacing: 8,
244 navButton: {
245 color: foreground(colorScheme.highest, "on"),
246 iconWidth: 12,
247 buttonWidth: 24,
248 cornerRadius: 6,
249 hover: {
250 color: foreground(colorScheme.highest, "on", "hovered"),
251 background: background(
252 colorScheme.highest,
253 "on",
254 "hovered"
255 ),
256 },
257 disabled: {
258 color: foreground(colorScheme.highest, "on", "disabled"),
259 },
260 },
261 padding: { left: 8, right: 8, top: 4, bottom: 4 },
262 },
263 breadcrumbs: {
264 ...text(layer, "mono", "variant"),
265 padding: { left: 6 },
266 },
267 disconnectedOverlay: {
268 ...text(layer, "sans"),
269 background: withOpacity(background(layer), 0.8),
270 },
271 notification: {
272 margin: { top: 10 },
273 background: background(colorScheme.middle),
274 cornerRadius: 6,
275 padding: 12,
276 border: border(colorScheme.middle),
277 shadow: colorScheme.popoverShadow,
278 },
279 notifications: {
280 width: 400,
281 margin: { right: 10, bottom: 10 },
282 },
283 dock: {
284 initialSizeRight: 640,
285 initialSizeBottom: 300,
286 wash_color: withOpacity(background(colorScheme.highest), 0.5),
287 panel: {
288 border: border(colorScheme.middle),
289 },
290 maximized: {
291 margin: 32,
292 border: border(colorScheme.highest, { overlay: true }),
293 shadow: colorScheme.modalShadow,
294 },
295 },
296 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
297 }
298}