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 sidebarResizeHandle: {
41 background: border(theme, "primary").color,
42 padding: {
43 left: 1,
44 },
45 },
46 paneDivider: {
47 color: border(theme, "secondary").color,
48 width: 1,
49 },
50 statusBar: statusBar(theme),
51 titlebar: {
52 avatarWidth: 18,
53 avatarMargin: 8,
54 height: 33,
55 background: backgroundColor(theme, 100),
56 padding: {
57 left: 80,
58 right: titlebarPadding,
59 },
60 title: text(theme, "sans", "primary"),
61 avatar: {
62 cornerRadius: 10,
63 border: {
64 color: "#00000088",
65 width: 1,
66 },
67 },
68 avatarRibbon: {
69 height: 3,
70 width: 12,
71 // TODO: The background for this ideally should be
72 // set with a token, not hardcoded in rust
73 },
74 border: border(theme, "primary", { bottom: true, overlay: true }),
75 signInPrompt: {
76 background: backgroundColor(theme, 100),
77 border: border(theme, "secondary"),
78 cornerRadius: 6,
79 margin: {
80 top: 1,
81 },
82 padding: {
83 top: 1,
84 bottom: 1,
85 left: 7,
86 right: 7,
87 },
88 ...text(theme, "sans", "secondary", { size: "xs" }),
89 hover: {
90 ...text(theme, "sans", "active", { size: "xs" }),
91 background: backgroundColor(theme, "on300", "hovered"),
92 border: border(theme, "primary"),
93 },
94 },
95 offlineIcon: {
96 color: iconColor(theme, "secondary"),
97 width: 16,
98 margin: {
99 left: titlebarPadding,
100 },
101 padding: {
102 right: 4,
103 },
104 },
105 outdatedWarning: {
106 ...text(theme, "sans", "warning", { size: "xs" }),
107 background: backgroundColor(theme, "warning"),
108 border: border(theme, "warning"),
109 margin: {
110 left: titlebarPadding,
111 },
112 padding: {
113 left: 6,
114 right: 6,
115 },
116 cornerRadius: 6,
117 },
118 },
119 toolbar: {
120 height: 34,
121 background: backgroundColor(theme, 500),
122 border: border(theme, "secondary", { bottom: true }),
123 itemSpacing: 8,
124 navButton: {
125 color: iconColor(theme, "primary"),
126 iconWidth: 12,
127 buttonWidth: 24,
128 cornerRadius: 6,
129 hover: {
130 color: iconColor(theme, "active"),
131 background: backgroundColor(theme, "on500", "hovered"),
132 },
133 disabled: {
134 color: withOpacity(iconColor(theme, "muted"), 0.6),
135 },
136 },
137 padding: { left: 8, right: 8, top: 4, bottom: 4 },
138 },
139 breadcrumbs: {
140 ...text(theme, "mono", "secondary"),
141 padding: { left: 6 },
142 },
143 disconnectedOverlay: {
144 ...text(theme, "sans", "active"),
145 background: withOpacity(theme.backgroundColor[500].base, 0.8),
146 },
147 notification: {
148 margin: { top: 10 },
149 background: backgroundColor(theme, 300),
150 cornerRadius: 6,
151 padding: 12,
152 border: border(theme, "primary"),
153 shadow: modalShadow(theme),
154 },
155 notifications: {
156 width: 400,
157 margin: { right: 10, bottom: 10 },
158 },
159 };
160}