1import { ColorScheme } from "../themes/common/colorScheme"
2import { withOpacity } from "../utils/color"
3import { background, border, borderColor, foreground, text } from "./components"
4import statusBar from "./statusBar"
5import tabBar from "./tabBar"
6
7export default function workspace(colorScheme: ColorScheme) {
8 const layer = colorScheme.lowest
9 const itemSpacing = 8
10 const titlebarButton = {
11 cornerRadius: 6,
12 padding: {
13 top: 1,
14 bottom: 1,
15 left: 8,
16 right: 8,
17 },
18 ...text(layer, "sans", "variant", { size: "xs" }),
19 background: background(layer, "variant"),
20 border: border(layer),
21 hover: {
22 ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
23 background: background(layer, "variant", "hovered"),
24 border: border(layer, "variant", "hovered"),
25 },
26 clicked: {
27 ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
28 background: background(layer, "variant", "pressed"),
29 border: border(layer, "variant", "pressed"),
30 },
31 active: {
32 ...text(layer, "sans", "variant", "active", { size: "xs" }),
33 background: background(layer, "variant", "active"),
34 border: border(layer, "variant", "active"),
35 },
36 }
37 const avatarWidth = 18
38 const avatarOuterWidth = avatarWidth + 4
39 const followerAvatarWidth = 14
40 const followerAvatarOuterWidth = followerAvatarWidth + 4
41
42 return {
43 background: background(layer),
44 joiningProjectAvatar: {
45 cornerRadius: 40,
46 width: 80,
47 },
48 joiningProjectMessage: {
49 padding: 12,
50 ...text(layer, "sans", { size: "lg" }),
51 },
52 externalLocationMessage: {
53 background: background(colorScheme.middle, "accent"),
54 border: border(colorScheme.middle, "accent"),
55 cornerRadius: 6,
56 padding: 12,
57 margin: { bottom: 8, right: 8 },
58 ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
59 },
60 leaderBorderOpacity: 0.7,
61 leaderBorderWidth: 2.0,
62 tabBar: tabBar(colorScheme),
63 modal: {
64 margin: {
65 bottom: 52,
66 top: 52,
67 },
68 cursor: "Arrow",
69 },
70 sidebar: {
71 initialSize: 240,
72 border: border(layer, { left: true, right: true }),
73 },
74 paneDivider: {
75 color: borderColor(layer),
76 width: 1,
77 },
78 statusBar: statusBar(colorScheme),
79 titlebar: {
80 itemSpacing,
81 facePileSpacing: 2,
82 height: 33, // 32px + 1px for overlaid border
83 background: background(layer),
84 border: border(layer, { bottom: true, overlay: true }),
85 padding: {
86 left: 80,
87 right: itemSpacing,
88 },
89
90 // Project
91 title: text(layer, "sans", "variant"),
92
93 // Collaborators
94 leaderAvatar: {
95 width: avatarWidth,
96 outerWidth: avatarOuterWidth,
97 cornerRadius: avatarWidth / 2,
98 outerCornerRadius: avatarOuterWidth / 2,
99 },
100 followerAvatar: {
101 width: followerAvatarWidth,
102 outerWidth: followerAvatarOuterWidth,
103 cornerRadius: followerAvatarWidth / 2,
104 outerCornerRadius: followerAvatarOuterWidth / 2,
105 },
106 inactiveAvatarGrayscale: true,
107 followerAvatarOverlap: 8,
108 leaderSelection: {
109 margin: {
110 top: 4,
111 bottom: 4,
112 },
113 padding: {
114 left: 2,
115 right: 2,
116 top: 4,
117 bottom: 4,
118 },
119 cornerRadius: 6,
120 },
121 avatarRibbon: {
122 height: 3,
123 width: 12,
124 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
125 },
126
127 // Sign in buttom
128 // FlatButton, Variant
129 signInPrompt: {
130 ...titlebarButton,
131 },
132
133 // Offline Indicator
134 offlineIcon: {
135 color: foreground(layer, "variant"),
136 width: 16,
137 margin: {
138 left: itemSpacing,
139 },
140 padding: {
141 right: 4,
142 },
143 },
144
145 // Notice that the collaboration server is out of date
146 outdatedWarning: {
147 ...text(layer, "sans", "warning", { size: "xs" }),
148 background: withOpacity(background(layer, "warning"), 0.3),
149 border: border(layer, "warning"),
150 margin: {
151 left: itemSpacing,
152 },
153 padding: {
154 left: 8,
155 right: 8,
156 },
157 cornerRadius: 6,
158 },
159 callControl: {
160 cornerRadius: 6,
161 color: foreground(layer, "variant"),
162 iconWidth: 12,
163 buttonWidth: 20,
164 hover: {
165 background: background(layer, "variant", "hovered"),
166 color: foreground(layer, "variant", "hovered"),
167 },
168 },
169 toggleContactsButton: {
170 margin: { left: itemSpacing },
171 cornerRadius: 6,
172 color: foreground(layer, "variant"),
173 iconWidth: 8,
174 buttonWidth: 20,
175 active: {
176 background: background(layer, "variant", "active"),
177 color: foreground(layer, "variant", "active"),
178 },
179 clicked: {
180 background: background(layer, "variant", "pressed"),
181 color: foreground(layer, "variant", "pressed"),
182 },
183 hover: {
184 background: background(layer, "variant", "hovered"),
185 color: foreground(layer, "variant", "hovered"),
186 },
187 },
188 userMenuButton: {
189 buttonWidth: 20,
190 iconWidth: 12,
191 ...titlebarButton,
192 },
193 toggleContactsBadge: {
194 cornerRadius: 3,
195 padding: 2,
196 margin: { top: 3, left: 3 },
197 border: border(layer),
198 background: foreground(layer, "accent"),
199 },
200 shareButton: {
201 ...titlebarButton,
202 },
203 },
204
205 toolbar: {
206 height: 34,
207 background: background(colorScheme.highest),
208 border: border(colorScheme.highest, { bottom: true }),
209 itemSpacing: 8,
210 navButton: {
211 color: foreground(colorScheme.highest, "on"),
212 iconWidth: 12,
213 buttonWidth: 24,
214 cornerRadius: 6,
215 hover: {
216 color: foreground(colorScheme.highest, "on", "hovered"),
217 background: background(
218 colorScheme.highest,
219 "on",
220 "hovered"
221 ),
222 },
223 disabled: {
224 color: foreground(colorScheme.highest, "on", "disabled"),
225 },
226 },
227 padding: { left: 8, right: 8, top: 4, bottom: 4 },
228 },
229 breadcrumbs: {
230 ...text(layer, "mono", "variant"),
231 padding: { left: 6 },
232 },
233 disconnectedOverlay: {
234 ...text(layer, "sans"),
235 background: withOpacity(background(layer), 0.8),
236 },
237 notification: {
238 margin: { top: 10 },
239 background: background(colorScheme.middle),
240 cornerRadius: 6,
241 padding: 12,
242 border: border(colorScheme.middle),
243 shadow: colorScheme.popoverShadow,
244 },
245 notifications: {
246 width: 400,
247 margin: { right: 10, bottom: 10 },
248 },
249 dock: {
250 initialSizeRight: 640,
251 initialSizeBottom: 480,
252 wash_color: withOpacity(background(colorScheme.highest), 0.5),
253 panel: {
254 border: border(colorScheme.middle),
255 },
256 maximized: {
257 margin: 32,
258 border: border(colorScheme.highest, { overlay: true }),
259 shadow: colorScheme.modalShadow,
260 },
261 },
262 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
263 }
264}