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