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