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 },
158 toolbar: {
159 height: 34,
160 background: backgroundColor(theme, 500),
161 border: border(theme, "secondary", { bottom: true }),
162 itemSpacing: 8,
163 navButton: {
164 color: iconColor(theme, "primary"),
165 iconWidth: 12,
166 buttonWidth: 24,
167 cornerRadius: 6,
168 hover: {
169 color: iconColor(theme, "active"),
170 background: backgroundColor(theme, "on500", "hovered"),
171 },
172 disabled: {
173 color: withOpacity(iconColor(theme, "muted"), 0.6),
174 },
175 },
176 padding: { left: 8, right: 8, top: 4, bottom: 4 },
177 },
178 breadcrumbs: {
179 ...text(theme, "mono", "secondary"),
180 padding: { left: 6 },
181 },
182 disconnectedOverlay: {
183 ...text(theme, "sans", "active"),
184 background: withOpacity(theme.backgroundColor[500].base, 0.8),
185 },
186 notification: {
187 margin: { top: 10 },
188 background: backgroundColor(theme, 300),
189 cornerRadius: 6,
190 padding: 12,
191 border: border(theme, "primary"),
192 shadow: modalShadow(theme),
193 },
194 notifications: {
195 width: 400,
196 margin: { right: 10, bottom: 10 },
197 },
198 dock: {
199 initialSizeRight: 640,
200 initialSizeBottom: 480,
201 wash_color: withOpacity(theme.backgroundColor[500].base, 0.5),
202 panel: {
203 border: {
204 ...border(theme, "secondary"),
205 width: 1
206 },
207 },
208 maximized: {
209 margin: 24,
210 border: border(theme, "secondary", { "overlay": true }),
211 shadow: modalShadow(theme),
212 }
213 }
214 };
215}