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