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
45 return {
46 background: background(layer),
47 joiningProjectAvatar: {
48 cornerRadius: 40,
49 width: 80,
50 },
51 joiningProjectMessage: {
52 padding: 12,
53 ...text(layer, "sans", { size: "lg" }),
54 },
55 externalLocationMessage: {
56 background: background(colorScheme.middle, "accent"),
57 border: border(colorScheme.middle, "accent"),
58 cornerRadius: 6,
59 padding: 12,
60 margin: { bottom: 8, right: 8 },
61 ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
62 },
63 leaderBorderOpacity: 0.7,
64 leaderBorderWidth: 2.0,
65 tabBar: tabBar(colorScheme),
66 modal: {
67 margin: {
68 bottom: 52,
69 top: 52,
70 },
71 cursor: "Arrow",
72 },
73 sidebar: {
74 initialSize: 240,
75 border: border(layer, { left: true, right: true }),
76 },
77 paneDivider: {
78 color: borderColor(layer),
79 width: 1,
80 },
81 statusBar: statusBar(colorScheme),
82 titlebar: {
83 avatarWidth,
84 avatarMargin: 8,
85 height: 33, // 32px + 1px for overlaid border
86 background: background(layer),
87 border: border(layer, { bottom: true, overlay: true }),
88 padding: {
89 left: 80,
90 right: titlebarPadding,
91 },
92
93 // Project
94 title: text(layer, "sans", "variant"),
95
96 // Collaborators
97 avatar: {
98 cornerRadius: avatarWidth / 2,
99 border: {
100 color: "#00000088",
101 width: 1,
102 },
103 },
104 inactiveAvatar: {
105 cornerRadius: avatarWidth / 2,
106 border: {
107 color: "#00000088",
108 width: 1,
109 },
110 grayscale: true,
111 },
112 avatarRibbon: {
113 height: 3,
114 width: 12,
115 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
116 },
117
118 // Sign in buttom
119 // FlatButton, Variant
120 signInPrompt: {
121 ...titlebarButton
122 },
123
124 // Offline Indicator
125 offlineIcon: {
126 color: foreground(layer, "variant"),
127 width: 16,
128 margin: {
129 left: titlebarPadding,
130 },
131 padding: {
132 right: 4,
133 },
134 },
135
136 // Notice that the collaboration server is out of date
137 outdatedWarning: {
138 ...text(layer, "sans", "warning", { size: "xs" }),
139 background: withOpacity(background(layer, "warning"), 0.3),
140 border: border(layer, "warning"),
141 margin: {
142 left: titlebarPadding,
143 },
144 padding: {
145 left: 8,
146 right: 8,
147 },
148 cornerRadius: 6,
149 },
150 callControl: {
151 cornerRadius: 6,
152 color: foreground(layer, "variant"),
153 iconWidth: 12,
154 buttonWidth: 20,
155 hover: {
156 background: background(layer, "variant", "hovered"),
157 color: foreground(layer, "variant", "hovered"),
158 },
159 },
160 toggleCollaboratorsButton: {
161 margin: { left: 6 },
162 cornerRadius: 6,
163 color: foreground(layer, "variant"),
164 width: 12,
165 active: {
166 background: background(layer, "variant", "active"),
167 color: foreground(layer, "variant", "active"),
168 },
169 hover: {
170 background: background(layer, "variant", "hovered"),
171 color: foreground(layer, "variant", "hovered"),
172 },
173 },
174 collaboratorCount: {
175 ...text(layer, "mono", { size: "sm" }),
176 margin: {
177 left: 4,
178 right: 6,
179 },
180 },
181 toggleContactsButton: {
182 margin: { left: 6 },
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(
266 foreground(layer, "variant"),
267 0.5
268 ),
269 };
270}