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 followerAvatarWidth = 14;
45
46 return {
47 background: background(layer),
48 joiningProjectAvatar: {
49 cornerRadius: 40,
50 width: 80,
51 },
52 joiningProjectMessage: {
53 padding: 12,
54 ...text(layer, "sans", { size: "lg" }),
55 },
56 externalLocationMessage: {
57 background: background(colorScheme.middle, "accent"),
58 border: border(colorScheme.middle, "accent"),
59 cornerRadius: 6,
60 padding: 12,
61 margin: { bottom: 8, right: 8 },
62 ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
63 },
64 leaderBorderOpacity: 0.7,
65 leaderBorderWidth: 2.0,
66 tabBar: tabBar(colorScheme),
67 modal: {
68 margin: {
69 bottom: 52,
70 top: 52,
71 },
72 cursor: "Arrow",
73 },
74 sidebar: {
75 initialSize: 240,
76 border: border(layer, { left: true, right: true }),
77 },
78 paneDivider: {
79 color: borderColor(layer),
80 width: 1,
81 },
82 statusBar: statusBar(colorScheme),
83 titlebar: {
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 width: avatarWidth,
99 cornerRadius: avatarWidth / 2,
100 border: {
101 color: "#00000088",
102 width: 1,
103 },
104 },
105 inactiveAvatar: {
106 width: avatarWidth,
107 cornerRadius: avatarWidth / 2,
108 border: {
109 color: "#00000088",
110 width: 1,
111 },
112 grayscale: true,
113 },
114 followerAvatar: {
115 width: followerAvatarWidth,
116 cornerRadius: followerAvatarWidth / 2,
117 border: {
118 color: "#00000088",
119 width: 1,
120 },
121 },
122 followerAvatarOverlap: 4,
123 avatarRibbon: {
124 height: 3,
125 width: 12,
126 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
127 },
128
129 // Sign in buttom
130 // FlatButton, Variant
131 signInPrompt: {
132 ...titlebarButton,
133 },
134
135 // Offline Indicator
136 offlineIcon: {
137 color: foreground(layer, "variant"),
138 width: 16,
139 margin: {
140 left: titlebarPadding,
141 },
142 padding: {
143 right: 4,
144 },
145 },
146
147 // Notice that the collaboration server is out of date
148 outdatedWarning: {
149 ...text(layer, "sans", "warning", { size: "xs" }),
150 background: withOpacity(background(layer, "warning"), 0.3),
151 border: border(layer, "warning"),
152 margin: {
153 left: titlebarPadding,
154 },
155 padding: {
156 left: 8,
157 right: 8,
158 },
159 cornerRadius: 6,
160 },
161 callControl: {
162 cornerRadius: 6,
163 color: foreground(layer, "variant"),
164 iconWidth: 12,
165 buttonWidth: 20,
166 hover: {
167 background: background(layer, "variant", "hovered"),
168 color: foreground(layer, "variant", "hovered"),
169 },
170 },
171 toggleContactsButton: {
172 margin: { left: 6 },
173 cornerRadius: 6,
174 color: foreground(layer, "variant"),
175 iconWidth: 8,
176 buttonWidth: 20,
177 active: {
178 background: background(layer, "variant", "active"),
179 color: foreground(layer, "variant", "active"),
180 },
181 clicked: {
182 background: background(layer, "variant", "pressed"),
183 color: foreground(layer, "variant", "pressed"),
184 },
185 hover: {
186 background: background(layer, "variant", "hovered"),
187 color: foreground(layer, "variant", "hovered"),
188 },
189 },
190 toggleContactsBadge: {
191 cornerRadius: 3,
192 padding: 2,
193 margin: { top: 3, left: 3 },
194 border: border(layer),
195 background: foreground(layer, "accent"),
196 },
197 shareButton: {
198 ...titlebarButton,
199 },
200 },
201
202 toolbar: {
203 height: 34,
204 background: background(colorScheme.highest),
205 border: border(colorScheme.highest, { bottom: true }),
206 itemSpacing: 8,
207 navButton: {
208 color: foreground(colorScheme.highest, "on"),
209 iconWidth: 12,
210 buttonWidth: 24,
211 cornerRadius: 6,
212 hover: {
213 color: foreground(colorScheme.highest, "on", "hovered"),
214 background: background(colorScheme.highest, "on", "hovered"),
215 },
216 disabled: {
217 color: foreground(colorScheme.highest, "on", "disabled"),
218 },
219 },
220 padding: { left: 8, right: 8, top: 4, bottom: 4 },
221 },
222 breadcrumbs: {
223 ...text(layer, "mono", "variant"),
224 padding: { left: 6 },
225 },
226 disconnectedOverlay: {
227 ...text(layer, "sans"),
228 background: withOpacity(background(layer), 0.8),
229 },
230 notification: {
231 margin: { top: 10 },
232 background: background(colorScheme.middle),
233 cornerRadius: 6,
234 padding: 12,
235 border: border(colorScheme.middle),
236 shadow: colorScheme.popoverShadow,
237 },
238 notifications: {
239 width: 400,
240 margin: { right: 10, bottom: 10 },
241 },
242 dock: {
243 initialSizeRight: 640,
244 initialSizeBottom: 480,
245 wash_color: withOpacity(background(colorScheme.highest), 0.5),
246 panel: {
247 border: border(colorScheme.middle),
248 },
249 maximized: {
250 margin: 32,
251 border: border(colorScheme.highest, { overlay: true }),
252 shadow: colorScheme.modalShadow,
253 },
254 },
255 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
256 };
257}