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 avatarRibbon: {
73 height: 3,
74 width: 12,
75 // TODO: The background for this ideally should be
76 // set with a token, not hardcoded in rust
77 },
78 border: border(theme, "primary", { bottom: true, overlay: true }),
79 signInPrompt: {
80 background: backgroundColor(theme, 100),
81 border: border(theme, "secondary"),
82 cornerRadius: 6,
83 margin: {
84 top: 1,
85 },
86 padding: {
87 top: 1,
88 bottom: 1,
89 left: 7,
90 right: 7,
91 },
92 ...text(theme, "sans", "secondary", { size: "xs" }),
93 hover: {
94 ...text(theme, "sans", "active", { size: "xs" }),
95 background: backgroundColor(theme, "on300", "hovered"),
96 border: border(theme, "primary"),
97 },
98 },
99 offlineIcon: {
100 color: iconColor(theme, "secondary"),
101 width: 16,
102 margin: {
103 left: titlebarPadding,
104 },
105 padding: {
106 right: 4,
107 },
108 },
109 outdatedWarning: {
110 ...text(theme, "sans", "warning", { size: "xs" }),
111 background: backgroundColor(theme, "warning"),
112 border: border(theme, "warning"),
113 margin: {
114 left: titlebarPadding,
115 },
116 padding: {
117 left: 6,
118 right: 6,
119 },
120 cornerRadius: 6,
121 },
122 addParticipantButton: {
123 cornerRadius: 6,
124 color: iconColor(theme, "secondary"),
125 iconWidth: 8,
126 buttonWidth: 20,
127 hover: {
128 background: backgroundColor(theme, "on300", "hovered"),
129 color: iconColor(theme, "active"),
130 },
131 },
132 addParticipantPopover: {
133 background: backgroundColor(theme, 300, "base"),
134 cornerRadius: 6,
135 padding: 6,
136 shadow: popoverShadow(theme),
137 border: border(theme, "primary"),
138 margin: { top: -5 },
139 width: 255,
140 height: 200
141 }
142 },
143 toolbar: {
144 height: 34,
145 background: backgroundColor(theme, 500),
146 border: border(theme, "secondary", { bottom: true }),
147 itemSpacing: 8,
148 navButton: {
149 color: iconColor(theme, "primary"),
150 iconWidth: 12,
151 buttonWidth: 24,
152 cornerRadius: 6,
153 hover: {
154 color: iconColor(theme, "active"),
155 background: backgroundColor(theme, "on500", "hovered"),
156 },
157 disabled: {
158 color: withOpacity(iconColor(theme, "muted"), 0.6),
159 },
160 },
161 padding: { left: 8, right: 8, top: 4, bottom: 4 },
162 },
163 breadcrumbs: {
164 ...text(theme, "mono", "secondary"),
165 padding: { left: 6 },
166 },
167 disconnectedOverlay: {
168 ...text(theme, "sans", "active"),
169 background: withOpacity(theme.backgroundColor[500].base, 0.8),
170 },
171 notification: {
172 margin: { top: 10 },
173 background: backgroundColor(theme, 300),
174 cornerRadius: 6,
175 padding: 12,
176 border: border(theme, "primary"),
177 shadow: modalShadow(theme),
178 },
179 notifications: {
180 width: 400,
181 margin: { right: 10, bottom: 10 },
182 },
183 dock: {
184 initialSizeRight: 640,
185 initialSizeBottom: 480,
186 wash_color: withOpacity(theme.backgroundColor[500].base, 0.5),
187 panel: {
188 border: {
189 ...border(theme, "secondary"),
190 width: 1
191 },
192 },
193 maximized: {
194 margin: 24,
195 border: border(theme, "secondary", { "overlay": true }),
196 shadow: modalShadow(theme),
197 }
198 }
199 };
200}