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