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 elevation = colorScheme.lowest;
15 const layer = elevation.bottom;
16 const titlebarPadding = 6;
17 const titlebarButton = {
18 cornerRadius: 6,
19 padding: {
20 top: 1,
21 bottom: 1,
22 left: 8,
23 right: 8,
24 },
25 ...text(layer, "sans", { size: "xs" }),
26 background: background(layer),
27 border: border(layer),
28 hover: {
29 ...text(layer, "sans", "hovered", { size: "xs" }),
30 background: background(layer, "hovered"),
31 border: border(elevation.top, "hovered"),
32 },
33 };
34 const avatarWidth = 18;
35
36 return {
37 background: background(layer),
38 joiningProjectAvatar: {
39 cornerRadius: 40,
40 width: 80,
41 },
42 joiningProjectMessage: {
43 padding: 12,
44 ...text(layer, "sans", { size: "lg" }),
45 },
46 externalLocationMessage: {
47 background: background(elevation.middle, "accent"),
48 border: border(elevation.middle, "accent"),
49 cornerRadius: 6,
50 padding: 12,
51 margin: { bottom: 8, right: 8 },
52 ...text(elevation.middle, "sans", "accent", { size: "xs" }),
53 },
54 leaderBorderOpacity: 0.7,
55 leaderBorderWidth: 2.0,
56 tabBar: tabBar(colorScheme),
57 modal: {
58 margin: {
59 bottom: 52,
60 top: 52,
61 },
62 cursor: "Arrow",
63 },
64 sidebar: {
65 initialSize: 240,
66 border: border(layer, { left: true, right: true }),
67 },
68 paneDivider: {
69 color: borderColor(layer),
70 width: 1,
71 },
72 statusBar: statusBar(colorScheme),
73 titlebar: {
74 avatarWidth,
75 avatarMargin: 8,
76 height: 33, // 32px + 1px for overlaid border
77 background: background(layer),
78 border: border(layer, { bottom: true, overlay: true }),
79 padding: {
80 left: 80,
81 right: titlebarPadding,
82 },
83
84 // Project
85 title: text(layer, "sans", "variant"),
86
87 // Collaborators
88 avatar: {
89 cornerRadius: avatarWidth / 2,
90 border: {
91 color: "#00000088",
92 width: 1,
93 },
94 },
95 inactiveAvatar: {
96 cornerRadius: avatarWidth / 2,
97 border: {
98 color: "#00000088",
99 width: 1,
100 },
101 grayscale: true,
102 },
103 avatarRibbon: {
104 height: 3,
105 width: 12,
106 // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded.
107 },
108
109 // Sign in buttom
110 // FlatButton, Variant
111 signInPrompt: {
112 ...titlebarButton
113 },
114
115 // Offline Indicator
116 offlineIcon: {
117 color: foreground(layer, "variant"),
118 width: 16,
119 margin: {
120 left: titlebarPadding,
121 },
122 padding: {
123 right: 4,
124 },
125 },
126
127 // Notice that the collaboration server is out of date
128 outdatedWarning: {
129 ...text(layer, "sans", "warning", { size: "xs" }),
130 background: withOpacity(background(layer, "warning"), 0.3),
131 border: border(layer, "warning"),
132 margin: {
133 left: titlebarPadding,
134 },
135 padding: {
136 left: 8,
137 right: 8,
138 },
139 cornerRadius: 6,
140 },
141 toggleContactsButton: {
142 cornerRadius: 6,
143 color: foreground(layer),
144 iconWidth: 8,
145 buttonWidth: 20,
146 active: {
147 background: background(layer, "active"),
148 color: foreground(layer, "active"),
149 },
150 hover: {
151 background: background(layer, "hovered"),
152 color: foreground(layer, "hovered"),
153 },
154 },
155 toggleContactsBadge: {
156 cornerRadius: 3,
157 padding: 2,
158 margin: { top: 3, left: 3 },
159 border: border(layer),
160 background: foreground(layer, "accent"),
161 },
162 shareButton: {
163 ...titlebarButton
164 }
165 },
166
167 toolbar: {
168 height: 34,
169 background: background(elevation.top),
170 border: border(elevation.top, { bottom: true }),
171 itemSpacing: 8,
172 navButton: {
173 color: foreground(elevation.top, "on"),
174 iconWidth: 12,
175 buttonWidth: 24,
176 cornerRadius: 6,
177 hover: {
178 color: foreground(elevation.top, "on", "hovered"),
179 background: background(elevation.top, "on", "hovered"),
180 },
181 disabled: {
182 color: foreground(elevation.top, "on", "disabled"),
183 },
184 },
185 padding: { left: 8, right: 8, top: 4, bottom: 4 },
186 },
187 breadcrumbs: {
188 ...text(layer, "mono", "variant"),
189 padding: { left: 6 },
190 },
191 disconnectedOverlay: {
192 ...text(layer, "sans"),
193 background: withOpacity(background(layer), 0.8),
194 },
195 notification: {
196 margin: { top: 10 },
197 background: background(elevation.above.middle),
198 cornerRadius: 6,
199 padding: 12,
200 border: border(elevation.above.middle),
201 shadow: elevation.above.shadow,
202 },
203 notifications: {
204 width: 400,
205 margin: { right: 10, bottom: 10 },
206 },
207 dock: {
208 initialSizeRight: 640,
209 initialSizeBottom: 480,
210 wash_color: withOpacity(background(elevation.top), 0.5),
211 panel: {
212 border: border(elevation.top),
213 },
214 maximized: {
215 margin: 32,
216 border: border(elevation.above.top, { overlay: true }),
217 shadow: elevation.above.shadow,
218 },
219 },
220 };
221}