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 leaderAvatar: {
101 width: avatarWidth,
102 outerWidth: avatarOuterWidth,
103 cornerRadius: avatarWidth / 2,
104 outerCornerRadius: avatarOuterWidth / 2,
105 },
106 followerAvatar: {
107 width: followerAvatarWidth,
108 outerWidth: followerAvatarOuterWidth,
109 cornerRadius: followerAvatarWidth / 2,
110 outerCornerRadius: followerAvatarOuterWidth / 2,
111 },
112 inactiveAvatarGrayscale: true,
113 followerAvatarOverlap: 8,
114 leaderSelection: {
115 margin: {
116 top: 4,
117 bottom: 4,
118 },
119 padding: {
120 left: 2,
121 right: 2,
122 top: 4,
123 bottom: 4,
124 },
125 cornerRadius: 6,
126 },
127 avatarRibbon: {
128 height: 3,
129 width: 12,
130 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
131 },
132
133 // Sign in buttom
134 // FlatButton, Variant
135 signInPrompt: {
136 ...titlebarButton,
137 },
138
139 // Offline Indicator
140 offlineIcon: {
141 color: foreground(layer, "variant"),
142 width: 16,
143 margin: {
144 left: itemSpacing,
145 },
146 padding: {
147 right: 4,
148 },
149 },
150
151 // Notice that the collaboration server is out of date
152 outdatedWarning: {
153 ...text(layer, "sans", "warning", { size: "xs" }),
154 background: withOpacity(background(layer, "warning"), 0.3),
155 border: border(layer, "warning"),
156 margin: {
157 left: itemSpacing,
158 },
159 padding: {
160 left: 8,
161 right: 8,
162 },
163 cornerRadius: 6,
164 },
165 callControl: {
166 cornerRadius: 6,
167 color: foreground(layer, "variant"),
168 iconWidth: 12,
169 buttonWidth: 20,
170 hover: {
171 background: background(layer, "variant", "hovered"),
172 color: foreground(layer, "variant", "hovered"),
173 },
174 },
175 toggleContactsButton: {
176 margin: { left: itemSpacing },
177 cornerRadius: 6,
178 color: foreground(layer, "variant"),
179 iconWidth: 8,
180 buttonWidth: 20,
181 active: {
182 background: background(layer, "variant", "active"),
183 color: foreground(layer, "variant", "active"),
184 },
185 clicked: {
186 background: background(layer, "variant", "pressed"),
187 color: foreground(layer, "variant", "pressed"),
188 },
189 hover: {
190 background: background(layer, "variant", "hovered"),
191 color: foreground(layer, "variant", "hovered"),
192 },
193 },
194 userMenuButton: {
195 buttonWidth: 20,
196 iconWidth: 12,
197 ...titlebarButton,
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}