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