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 titlebarPadding = 6;
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 avatarMargin: 8,
87 height: 33, // 32px + 1px for overlaid border
88 background: background(layer),
89 border: border(layer, { bottom: true, overlay: true }),
90 padding: {
91 left: 80,
92 right: titlebarPadding,
93 },
94
95 // Project
96 title: text(layer, "sans", "variant"),
97
98 // Collaborators
99 avatar: {
100 width: avatarWidth,
101 outerWidth: avatarOuterWidth,
102 cornerRadius: avatarWidth / 2,
103 outerCornerRadius: avatarOuterWidth / 2,
104 },
105 inactiveAvatar: {
106 width: avatarWidth,
107 outerWidth: avatarOuterWidth,
108 cornerRadius: avatarWidth / 2,
109 outerCornerRadius: avatarOuterWidth / 2,
110 grayscale: true,
111 },
112 followerAvatar: {
113 width: followerAvatarWidth,
114 outerWidth: followerAvatarOuterWidth,
115 cornerRadius: followerAvatarWidth / 2,
116 outerCornerRadius: followerAvatarOuterWidth / 2,
117 },
118 followerAvatarOverlap: 8,
119 leaderSelection: {
120 margin: {
121 top: 4,
122 bottom: 4,
123 },
124 padding: {
125 left: 2,
126 right: 2,
127 top: 4,
128 bottom: 4,
129 },
130 cornerRadius: 6,
131 },
132 avatarRibbon: {
133 height: 3,
134 width: 12,
135 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
136 },
137
138 // Sign in buttom
139 // FlatButton, Variant
140 signInPrompt: {
141 ...titlebarButton,
142 },
143
144 // Offline Indicator
145 offlineIcon: {
146 color: foreground(layer, "variant"),
147 width: 16,
148 margin: {
149 left: titlebarPadding,
150 },
151 padding: {
152 right: 4,
153 },
154 },
155
156 // Notice that the collaboration server is out of date
157 outdatedWarning: {
158 ...text(layer, "sans", "warning", { size: "xs" }),
159 background: withOpacity(background(layer, "warning"), 0.3),
160 border: border(layer, "warning"),
161 margin: {
162 left: titlebarPadding,
163 },
164 padding: {
165 left: 8,
166 right: 8,
167 },
168 cornerRadius: 6,
169 },
170 callControl: {
171 cornerRadius: 6,
172 color: foreground(layer, "variant"),
173 iconWidth: 12,
174 buttonWidth: 20,
175 hover: {
176 background: background(layer, "variant", "hovered"),
177 color: foreground(layer, "variant", "hovered"),
178 },
179 },
180 toggleContactsButton: {
181 margin: { left: 6 },
182 cornerRadius: 6,
183 color: foreground(layer, "variant"),
184 iconWidth: 8,
185 buttonWidth: 20,
186 active: {
187 background: background(layer, "variant", "active"),
188 color: foreground(layer, "variant", "active"),
189 },
190 clicked: {
191 background: background(layer, "variant", "pressed"),
192 color: foreground(layer, "variant", "pressed"),
193 },
194 hover: {
195 background: background(layer, "variant", "hovered"),
196 color: foreground(layer, "variant", "hovered"),
197 },
198 },
199 toggleContactsBadge: {
200 cornerRadius: 3,
201 padding: 2,
202 margin: { top: 3, left: 3 },
203 border: border(layer),
204 background: foreground(layer, "accent"),
205 },
206 shareButton: {
207 ...titlebarButton,
208 },
209 },
210
211 toolbar: {
212 height: 34,
213 background: background(colorScheme.highest),
214 border: border(colorScheme.highest, { bottom: true }),
215 itemSpacing: 8,
216 navButton: {
217 color: foreground(colorScheme.highest, "on"),
218 iconWidth: 12,
219 buttonWidth: 24,
220 cornerRadius: 6,
221 hover: {
222 color: foreground(colorScheme.highest, "on", "hovered"),
223 background: background(colorScheme.highest, "on", "hovered"),
224 },
225 disabled: {
226 color: foreground(colorScheme.highest, "on", "disabled"),
227 },
228 },
229 padding: { left: 8, right: 8, top: 4, bottom: 4 },
230 },
231 breadcrumbs: {
232 ...text(layer, "mono", "variant"),
233 padding: { left: 6 },
234 },
235 disconnectedOverlay: {
236 ...text(layer, "sans"),
237 background: withOpacity(background(layer), 0.8),
238 },
239 notification: {
240 margin: { top: 10 },
241 background: background(colorScheme.middle),
242 cornerRadius: 6,
243 padding: 12,
244 border: border(colorScheme.middle),
245 shadow: colorScheme.popoverShadow,
246 },
247 notifications: {
248 width: 400,
249 margin: { right: 10, bottom: 10 },
250 },
251 dock: {
252 initialSizeRight: 640,
253 initialSizeBottom: 480,
254 wash_color: withOpacity(background(colorScheme.highest), 0.5),
255 panel: {
256 border: border(colorScheme.middle),
257 },
258 maximized: {
259 margin: 32,
260 border: border(colorScheme.highest, { overlay: true }),
261 shadow: colorScheme.modalShadow,
262 },
263 },
264 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
265 };
266}