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