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