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 avatarRibbon: {
120 height: 3,
121 width: 12,
122 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
123 },
124
125 // Sign in buttom
126 // FlatButton, Variant
127 signInPrompt: {
128 ...titlebarButton,
129 },
130
131 // Offline Indicator
132 offlineIcon: {
133 color: foreground(layer, "variant"),
134 width: 16,
135 margin: {
136 left: titlebarPadding,
137 },
138 padding: {
139 right: 4,
140 },
141 },
142
143 // Notice that the collaboration server is out of date
144 outdatedWarning: {
145 ...text(layer, "sans", "warning", { size: "xs" }),
146 background: withOpacity(background(layer, "warning"), 0.3),
147 border: border(layer, "warning"),
148 margin: {
149 left: titlebarPadding,
150 },
151 padding: {
152 left: 8,
153 right: 8,
154 },
155 cornerRadius: 6,
156 },
157 callControl: {
158 cornerRadius: 6,
159 color: foreground(layer, "variant"),
160 iconWidth: 12,
161 buttonWidth: 20,
162 hover: {
163 background: background(layer, "variant", "hovered"),
164 color: foreground(layer, "variant", "hovered"),
165 },
166 },
167 toggleContactsButton: {
168 margin: { left: 6 },
169 cornerRadius: 6,
170 color: foreground(layer, "variant"),
171 iconWidth: 8,
172 buttonWidth: 20,
173 active: {
174 background: background(layer, "variant", "active"),
175 color: foreground(layer, "variant", "active"),
176 },
177 clicked: {
178 background: background(layer, "variant", "pressed"),
179 color: foreground(layer, "variant", "pressed"),
180 },
181 hover: {
182 background: background(layer, "variant", "hovered"),
183 color: foreground(layer, "variant", "hovered"),
184 },
185 },
186 toggleContactsBadge: {
187 cornerRadius: 3,
188 padding: 2,
189 margin: { top: 3, left: 3 },
190 border: border(layer),
191 background: foreground(layer, "accent"),
192 },
193 shareButton: {
194 ...titlebarButton,
195 },
196 },
197
198 toolbar: {
199 height: 34,
200 background: background(colorScheme.highest),
201 border: border(colorScheme.highest, { bottom: true }),
202 itemSpacing: 8,
203 navButton: {
204 color: foreground(colorScheme.highest, "on"),
205 iconWidth: 12,
206 buttonWidth: 24,
207 cornerRadius: 6,
208 hover: {
209 color: foreground(colorScheme.highest, "on", "hovered"),
210 background: background(colorScheme.highest, "on", "hovered"),
211 },
212 disabled: {
213 color: foreground(colorScheme.highest, "on", "disabled"),
214 },
215 },
216 padding: { left: 8, right: 8, top: 4, bottom: 4 },
217 },
218 breadcrumbs: {
219 ...text(layer, "mono", "variant"),
220 padding: { left: 6 },
221 },
222 disconnectedOverlay: {
223 ...text(layer, "sans"),
224 background: withOpacity(background(layer), 0.8),
225 },
226 notification: {
227 margin: { top: 10 },
228 background: background(colorScheme.middle),
229 cornerRadius: 6,
230 padding: 12,
231 border: border(colorScheme.middle),
232 shadow: colorScheme.popoverShadow,
233 },
234 notifications: {
235 width: 400,
236 margin: { right: 10, bottom: 10 },
237 },
238 dock: {
239 initialSizeRight: 640,
240 initialSizeBottom: 480,
241 wash_color: withOpacity(background(colorScheme.highest), 0.5),
242 panel: {
243 border: border(colorScheme.middle),
244 },
245 maximized: {
246 margin: 32,
247 border: border(colorScheme.highest, { overlay: true }),
248 shadow: colorScheme.modalShadow,
249 },
250 },
251 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
252 };
253}