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