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