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 iconWidth: 12,
155 buttonWidth: 20,
156 active: {
157 background: background(layer, "variant", "active"),
158 color: foreground(layer, "variant", "active"),
159 },
160 hover: {
161 background: background(layer, "variant", "hovered"),
162 color: foreground(layer, "variant", "hovered"),
163 },
164 },
165 toggleContactsButton: {
166 margin: { left: 6 },
167 cornerRadius: 6,
168 color: foreground(layer, "variant"),
169 iconWidth: 8,
170 buttonWidth: 20,
171 active: {
172 background: background(layer, "variant", "active"),
173 color: foreground(layer, "variant", "active"),
174 },
175 hover: {
176 background: background(layer, "variant", "hovered"),
177 color: foreground(layer, "variant", "hovered"),
178 },
179 },
180 toggleContactsBadge: {
181 cornerRadius: 3,
182 padding: 2,
183 margin: { top: 3, left: 3 },
184 border: border(layer),
185 background: foreground(layer, "accent"),
186 },
187 shareButton: {
188 ...titlebarButton
189 }
190 },
191
192 toolbar: {
193 height: 34,
194 background: background(colorScheme.highest),
195 border: border(colorScheme.highest, { bottom: true }),
196 itemSpacing: 8,
197 navButton: {
198 color: foreground(colorScheme.highest, "on"),
199 iconWidth: 12,
200 buttonWidth: 24,
201 cornerRadius: 6,
202 hover: {
203 color: foreground(colorScheme.highest, "on", "hovered"),
204 background: background(colorScheme.highest, "on", "hovered"),
205 },
206 disabled: {
207 color: foreground(colorScheme.highest, "on", "disabled"),
208 },
209 },
210 padding: { left: 8, right: 8, top: 4, bottom: 4 },
211 },
212 breadcrumbs: {
213 ...text(layer, "mono", "variant"),
214 padding: { left: 6 },
215 },
216 disconnectedOverlay: {
217 ...text(layer, "sans"),
218 background: withOpacity(background(layer), 0.8),
219 },
220 notification: {
221 margin: { top: 10 },
222 background: background(colorScheme.middle),
223 cornerRadius: 6,
224 padding: 12,
225 border: border(colorScheme.middle),
226 shadow: colorScheme.popoverShadow,
227 },
228 notifications: {
229 width: 400,
230 margin: { right: 10, bottom: 10 },
231 },
232 dock: {
233 initialSizeRight: 640,
234 initialSizeBottom: 480,
235 wash_color: withOpacity(background(colorScheme.highest), 0.5),
236 panel: {
237 border: border(colorScheme.middle),
238 },
239 maximized: {
240 margin: 32,
241 border: border(colorScheme.highest, { overlay: true }),
242 shadow: colorScheme.modalShadow,
243 },
244 },
245 dropTargetOverlayColor: withOpacity(
246 foreground(layer, "variant"),
247 0.5
248 ),
249 };
250}