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