1import Theme from "../themes/common/theme";
2import { withOpacity } from "../utils/color";
3import { backgroundColor, border, iconColor, modalShadow, text } from "./components";
4import statusBar from "./statusBar";
5
6export function workspaceBackground(theme: Theme) {
7 return backgroundColor(theme, 300)
8}
9
10export default function workspace(theme: Theme) {
11 const tab = {
12 height: 32,
13 background: workspaceBackground(theme),
14 iconClose: iconColor(theme, "muted"),
15 iconCloseActive: iconColor(theme, "active"),
16 iconConflict: iconColor(theme, "warning"),
17 iconDirty: iconColor(theme, "info"),
18 iconWidth: 8,
19 spacing: 8,
20 text: text(theme, "sans", "secondary", { size: "sm" }),
21 border: border(theme, "primary", {
22 left: true,
23 bottom: true,
24 overlay: true,
25 }),
26 padding: {
27 left: 8,
28 right: 8,
29 },
30 };
31
32 const activeTab = {
33 ...tab,
34 background: backgroundColor(theme, 500),
35 text: text(theme, "sans", "active", { size: "sm" }),
36 border: {
37 ...tab.border,
38 bottom: false,
39 },
40 };
41
42 const titlebarPadding = 6;
43
44 return {
45 background: backgroundColor(theme, 300),
46 joiningProjectAvatar: {
47 cornerRadius: 40,
48 width: 80,
49 },
50 joiningProjectMessage: {
51 padding: 12,
52 ...text(theme, "sans", "primary", { size: "lg" })
53 },
54 leaderBorderOpacity: 0.7,
55 leaderBorderWidth: 2.0,
56 tab,
57 activeTab,
58 modal: {
59 margin: {
60 bottom: 52,
61 top: 52,
62 },
63 cursor: "Arrow"
64 },
65 sidebarResizeHandle: {
66 background: border(theme, "primary").color,
67 padding: {
68 left: 1,
69 },
70 },
71 paneDivider: {
72 color: border(theme, "secondary").color,
73 width: 1,
74 },
75 statusBar: statusBar(theme),
76 titlebar: {
77 avatarWidth: 18,
78 avatarMargin: 8,
79 height: 33,
80 background: backgroundColor(theme, 100),
81 padding: {
82 left: 80,
83 right: titlebarPadding,
84 },
85 title: text(theme, "sans", "primary"),
86 avatar: {
87 cornerRadius: 10,
88 border: {
89 color: "#00000088",
90 width: 1,
91 },
92 },
93 avatarRibbon: {
94 height: 3,
95 width: 12,
96 // TODO: The background for this ideally should be
97 // set with a token, not hardcoded in rust
98 },
99 border: border(theme, "primary", { bottom: true, overlay: true }),
100 signInPrompt: {
101 border: border(theme, "primary"),
102 cornerRadius: 6,
103 margin: {
104 top: 1,
105 },
106 padding: {
107 left: 6,
108 right: 6,
109 },
110 ...text(theme, "sans", "secondary", { size: "xs" }),
111 hover: text(theme, "sans", "active", { size: "xs" }),
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 },
137 toolbar: {
138 height: 34,
139 background: backgroundColor(theme, 500),
140 border: border(theme, "secondary", { bottom: true }),
141 itemSpacing: 8,
142 navButton: {
143 color: iconColor(theme, "primary"),
144 iconWidth: 8,
145 buttonWidth: 12,
146 hover: {
147 color: iconColor(theme, "active"),
148 },
149 disabled: {
150 color: iconColor(theme, "muted")
151 }
152 },
153 padding: { left: 16, right: 8, top: 4, bottom: 4 },
154 },
155 breadcrumbs: {
156 ...text(theme, "mono", "secondary"),
157 padding: { left: 6 },
158 },
159 disconnectedOverlay: {
160 ...text(theme, "sans", "active"),
161 background: withOpacity(theme.backgroundColor[500].base, 0.8),
162 },
163 notification: {
164 margin: { top: 10 },
165 background: backgroundColor(theme, 300),
166 cornerRadius: 6,
167 padding: 12,
168 border: border(theme, "primary"),
169 shadow: modalShadow(theme),
170 },
171 notifications: {
172 width: 380,
173 margin: { right: 10, bottom: 10 },
174 }
175 };
176}