1import Theme from "../themes/common/theme";
2import { withOpacity } from "../utils/color";
3import {
4 backgroundColor,
5 border,
6 iconColor,
7 modalShadow,
8 popoverShadow,
9 text,
10} from "./components";
11import statusBar from "./statusBar";
12import tabBar from "./tabBar";
13
14export function workspaceBackground(theme: Theme) {
15 return backgroundColor(theme, 300);
16}
17
18export default function workspace(theme: Theme) {
19 const titlebarPadding = 6;
20 const titlebarButton = {
21 background: backgroundColor(theme, 100),
22 border: border(theme, "secondary"),
23 cornerRadius: 6,
24 margin: {
25 top: 1,
26 },
27 padding: {
28 top: 1,
29 bottom: 1,
30 left: 7,
31 right: 7,
32 },
33 ...text(theme, "sans", "secondary", { size: "xs" }),
34 hover: {
35 ...text(theme, "sans", "active", { size: "xs" }),
36 background: backgroundColor(theme, "on300", "hovered"),
37 border: border(theme, "primary"),
38 },
39 };
40
41 return {
42 background: backgroundColor(theme, 300),
43 joiningProjectAvatar: {
44 cornerRadius: 40,
45 width: 80,
46 },
47 joiningProjectMessage: {
48 padding: 12,
49 ...text(theme, "sans", "primary", { size: "lg" }),
50 },
51 externalLocationMessage: {
52 padding: 12,
53 ...text(theme, "sans", "primary", { size: "lg" }),
54 },
55 leaderBorderOpacity: 0.7,
56 leaderBorderWidth: 2.0,
57 tabBar: tabBar(theme),
58 modal: {
59 margin: {
60 bottom: 52,
61 top: 52,
62 },
63 cursor: "Arrow",
64 },
65 sidebar: {
66 initialSize: 240,
67 border: {
68 color: border(theme, "primary").color,
69 width: 1,
70 left: true,
71 right: true,
72 }
73 },
74 paneDivider: {
75 color: border(theme, "secondary").color,
76 width: 1,
77 },
78 statusBar: statusBar(theme),
79 titlebar: {
80 avatarWidth: 18,
81 avatarMargin: 8,
82 height: 33,
83 background: backgroundColor(theme, 100),
84 padding: {
85 left: 80,
86 right: titlebarPadding,
87 },
88 title: text(theme, "sans", "primary"),
89 avatar: {
90 cornerRadius: 10,
91 border: {
92 color: "#00000088",
93 width: 1,
94 },
95 },
96 inactiveAvatar: {
97 cornerRadius: 10,
98 opacity: 0.65,
99 },
100 avatarRibbon: {
101 height: 3,
102 width: 12,
103 // TODO: The background for this ideally should be
104 // set with a token, not hardcoded in rust
105 },
106 border: border(theme, "primary", { bottom: true, overlay: true }),
107 signInPrompt: {
108 ...titlebarButton
109 },
110 offlineIcon: {
111 color: iconColor(theme, "secondary"),
112 width: 16,
113 margin: {
114 left: titlebarPadding,
115 },
116 padding: {
117 right: 4,
118 },
119 },
120 outdatedWarning: {
121 ...text(theme, "sans", "warning", { size: "xs" }),
122 background: backgroundColor(theme, "warning"),
123 border: border(theme, "warning"),
124 margin: {
125 left: titlebarPadding,
126 },
127 padding: {
128 left: 6,
129 right: 6,
130 },
131 cornerRadius: 6,
132 },
133 toggleContactsButton: {
134 cornerRadius: 6,
135 color: iconColor(theme, "secondary"),
136 iconWidth: 8,
137 buttonWidth: 20,
138 active: {
139 background: backgroundColor(theme, "on300", "active"),
140 color: iconColor(theme, "active"),
141 },
142 hover: {
143 background: backgroundColor(theme, "on300", "hovered"),
144 color: iconColor(theme, "active"),
145 },
146 },
147 toggleContactsBadge: {
148 cornerRadius: 3,
149 padding: 2,
150 margin: { top: 3, left: 3 },
151 border: { width: 1, color: workspaceBackground(theme) },
152 background: iconColor(theme, "feature"),
153 },
154 shareButton: {
155 ...titlebarButton
156 },
157 contactsPopover: {
158 background: backgroundColor(theme, 300, "base"),
159 cornerRadius: 6,
160 padding: { top: 6 },
161 shadow: popoverShadow(theme),
162 border: border(theme, "primary"),
163 margin: { top: -5 },
164 width: 250,
165 height: 300
166 }
167 },
168 toolbar: {
169 height: 34,
170 background: backgroundColor(theme, 500),
171 border: border(theme, "secondary", { bottom: true }),
172 itemSpacing: 8,
173 navButton: {
174 color: iconColor(theme, "primary"),
175 iconWidth: 12,
176 buttonWidth: 24,
177 cornerRadius: 6,
178 hover: {
179 color: iconColor(theme, "active"),
180 background: backgroundColor(theme, "on500", "hovered"),
181 },
182 disabled: {
183 color: withOpacity(iconColor(theme, "muted"), 0.6),
184 },
185 },
186 padding: { left: 8, right: 8, top: 4, bottom: 4 },
187 },
188 breadcrumbs: {
189 ...text(theme, "mono", "secondary"),
190 padding: { left: 6 },
191 },
192 disconnectedOverlay: {
193 ...text(theme, "sans", "active"),
194 background: withOpacity(theme.backgroundColor[500].base, 0.8),
195 },
196 notification: {
197 margin: { top: 10 },
198 background: backgroundColor(theme, 300),
199 cornerRadius: 6,
200 padding: 12,
201 border: border(theme, "primary"),
202 shadow: modalShadow(theme),
203 },
204 notifications: {
205 width: 400,
206 margin: { right: 10, bottom: 10 },
207 },
208 dock: {
209 initialSizeRight: 640,
210 initialSizeBottom: 480,
211 wash_color: withOpacity(theme.backgroundColor[500].base, 0.5),
212 panel: {
213 border: {
214 ...border(theme, "secondary"),
215 width: 1
216 },
217 },
218 maximized: {
219 margin: 24,
220 border: border(theme, "secondary", { "overlay": true }),
221 shadow: modalShadow(theme),
222 }
223 }
224 };
225}