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 toggleContactsBadge: {
201 cornerRadius: 3,
202 padding: 2,
203 margin: { top: 3, left: 3 },
204 border: border(layer),
205 background: foreground(layer, "accent"),
206 },
207 shareButton: {
208 ...titlebarButton,
209 },
210 },
211
212 toolbar: {
213 height: 34,
214 background: background(colorScheme.highest),
215 border: border(colorScheme.highest, { bottom: true }),
216 itemSpacing: 8,
217 navButton: {
218 color: foreground(colorScheme.highest, "on"),
219 iconWidth: 12,
220 buttonWidth: 24,
221 cornerRadius: 6,
222 hover: {
223 color: foreground(colorScheme.highest, "on", "hovered"),
224 background: background(colorScheme.highest, "on", "hovered"),
225 },
226 disabled: {
227 color: foreground(colorScheme.highest, "on", "disabled"),
228 },
229 },
230 padding: { left: 8, right: 8, top: 4, bottom: 4 },
231 },
232 breadcrumbs: {
233 ...text(layer, "mono", "variant"),
234 padding: { left: 6 },
235 },
236 disconnectedOverlay: {
237 ...text(layer, "sans"),
238 background: withOpacity(background(layer), 0.8),
239 },
240 notification: {
241 margin: { top: 10 },
242 background: background(colorScheme.middle),
243 cornerRadius: 6,
244 padding: 12,
245 border: border(colorScheme.middle),
246 shadow: colorScheme.popoverShadow,
247 },
248 notifications: {
249 width: 400,
250 margin: { right: 10, bottom: 10 },
251 },
252 dock: {
253 initialSizeRight: 640,
254 initialSizeBottom: 480,
255 wash_color: withOpacity(background(colorScheme.highest), 0.5),
256 panel: {
257 border: border(colorScheme.middle),
258 },
259 maximized: {
260 margin: 32,
261 border: border(colorScheme.highest, { overlay: true }),
262 shadow: colorScheme.modalShadow,
263 },
264 },
265 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
266 };
267}