1import Theme from "../themes/theme";
2import { backgroundColor, border, iconColor, shadow, text } from "./components";
3import statusBar from "./statusBar";
4
5export function workspaceBackground(theme: Theme) {
6 return backgroundColor(theme, 300)
7}
8
9export default function workspace(theme: Theme) {
10
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 return {
43 background: backgroundColor(theme, 300),
44 joiningProjectMessage: {
45 padding: 12,
46 ...text(theme, "sans", "primary", { size: "lg" })
47 },
48 leaderBorderOpacity: 0.7,
49 leaderBorderWidth: 2.0,
50 tab,
51 activeTab,
52 modal: {
53 margin: {
54 bottom: 52,
55 top: 52,
56 },
57 cursor: "Arrow"
58 },
59 sidebarResizeHandle: {
60 background: border(theme, "primary").color,
61 padding: {
62 left: 1,
63 },
64 },
65 paneDivider: {
66 color: border(theme, "secondary").color,
67 width: 1,
68 },
69 statusBar: statusBar(theme),
70 titlebar: {
71 avatarWidth: 18,
72 avatarMargin: 8,
73 height: 33,
74 background: backgroundColor(theme, 100),
75 padding: {
76 left: 80,
77 right: 6,
78 },
79 title: text(theme, "sans", "primary"),
80 avatar: {
81 cornerRadius: 10,
82 border: {
83 color: "#00000088",
84 width: 1,
85 },
86 },
87 avatarRibbon: {
88 height: 3,
89 width: 12,
90 // TODO: The background for this ideally should be
91 // set with a token, not hardcoded in rust
92 },
93 border: border(theme, "primary", { bottom: true, overlay: true }),
94 signInPrompt: {
95 border: border(theme, "primary"),
96 cornerRadius: 6,
97 margin: {
98 top: 1,
99 },
100 padding: {
101 left: 6,
102 right: 6,
103 },
104 ...text(theme, "sans", "secondary", { size: "xs" }),
105 hover: text(theme, "sans", "active", { size: "xs" }),
106 },
107 offlineIcon: {
108 color: iconColor(theme, "secondary"),
109 width: 16,
110 padding: {
111 right: 4,
112 },
113 },
114 shareIcon: {
115 cornerRadius: 6,
116 margin: { top: 3, bottom: 2, left: 6 },
117 color: iconColor(theme, "secondary"),
118 hover: {
119 background: backgroundColor(theme, 100, "hovered"),
120 color: iconColor(theme, "secondary"),
121 },
122 active: {
123 background: backgroundColor(theme, 100, "active"),
124 color: iconColor(theme, "active"),
125 },
126 activeHover: {
127 background: backgroundColor(theme, 100, "hovered"),
128 color: iconColor(theme, "active"),
129 }
130 },
131 outdatedWarning: {
132 ...text(theme, "sans", "warning", { size: "xs" }),
133 background: backgroundColor(theme, "warning"),
134 border: border(theme, "warning"),
135 padding: {
136 left: 6,
137 right: 6,
138 },
139 cornerRadius: 6,
140 },
141 },
142 toolbar: {
143 height: 34,
144 background: backgroundColor(theme, 500),
145 border: border(theme, "secondary", { bottom: true }),
146 itemSpacing: 8,
147 padding: { left: 16, right: 8, top: 4, bottom: 4 },
148 },
149 breadcrumbs: {
150 ...text(theme, "mono", "secondary"),
151 padding: { left: 6 },
152 },
153 disconnectedOverlay: {
154 ...text(theme, "sans", "active"),
155 background: "#000000aa",
156 },
157 notification: {
158 margin: { top: 10 },
159 background: backgroundColor(theme, 300),
160 cornerRadius: 6,
161 padding: 12,
162 border: border(theme, "primary"),
163 shadow: shadow(theme),
164 },
165 notifications: {
166 width: 380,
167 margin: { right: 10, bottom: 10 },
168 }
169 };
170}