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