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