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