1import Theme from "../themes/theme";
2import { backgroundColor, border, iconColor, text } from "./components";
3
4export default function workspace(theme: Theme) {
5 const signInPrompt = {
6 ...text(theme, "sans", "secondary", { size: "xs" }),
7 border: border(theme, "primary"),
8 cornerRadius: 6,
9 margin: {
10 top: 1,
11 right: 6,
12 },
13 padding: {
14 left: 6,
15 right: 6,
16 },
17 };
18
19 const tab = {
20 height: 32,
21 background: backgroundColor(theme, 300),
22 iconClose: iconColor(theme, "muted"),
23 iconCloseActive: iconColor(theme, "active"),
24 iconConflict: iconColor(theme, "warning"),
25 iconDirty: iconColor(theme, "info"),
26 iconWidth: 8,
27 spacing: 8,
28 text: text(theme, "sans", "secondary", { size: "sm" }),
29 border: border(theme, "primary", {
30 left: true,
31 bottom: true,
32 overlay: true,
33 }),
34 padding: {
35 left: 8,
36 right: 8,
37 },
38 };
39
40 const activeTab = {
41 ...tab,
42 background: backgroundColor(theme, 500),
43 text: text(theme, "sans", "active", { size: "sm" }),
44 border: {
45 ...tab.border,
46 bottom: false,
47 },
48 };
49
50 const sidebarItem = {
51 height: 32,
52 iconColor: iconColor(theme, "secondary"),
53 iconSize: 18,
54 };
55 const sidebar = {
56 width: 30,
57 background: backgroundColor(theme, 300),
58 border: border(theme, "primary", { right: true }),
59 item: sidebarItem,
60 activeItem: {
61 ...sidebarItem,
62 iconColor: iconColor(theme, "active"),
63 },
64 resizeHandle: {
65 background: border(theme, "primary").color,
66 padding: {
67 left: 1,
68 },
69 },
70 };
71 const shareIcon = {
72 margin: { top: 3, bottom: 2 },
73 cornerRadius: 6,
74 };
75
76 return {
77 background: backgroundColor(theme, 300),
78 leaderBorderOpacity: 0.7,
79 leaderBorderWidth: 2.0,
80 tab,
81 activeTab,
82 modal: {
83 margin: {
84 bottom: 52,
85 top: 52,
86 },
87 cursor: "Arrow"
88 },
89 leftSidebar: {
90 ...sidebar,
91 border: border(theme, "primary", { right: true }),
92 },
93 rightSidebar: {
94 ...sidebar,
95 border: border(theme, "primary", { left: true }),
96 },
97 paneDivider: {
98 color: border(theme, "secondary").color,
99 width: 1,
100 },
101 status_bar: {
102 height: 24,
103 itemSpacing: 8,
104 padding: {
105 left: 6,
106 right: 6,
107 },
108 border: border(theme, "primary", { top: true, overlay: true }),
109 cursorPosition: text(theme, "sans", "muted"),
110 diagnosticMessage: text(theme, "sans", "muted"),
111 lspMessage: text(theme, "sans", "muted"),
112 autoUpdateProgressMessage: text(theme, "sans", "muted"),
113 autoUpdateDoneMessage: text(theme, "sans", "muted"),
114 },
115 titlebar: {
116 avatarWidth: 18,
117 height: 32,
118 background: backgroundColor(theme, 100),
119 padding: {
120 left: 80,
121 },
122 title: text(theme, "sans", "primary"),
123 avatar: {
124 cornerRadius: 10,
125 border: {
126 color: "#00000088",
127 width: 1,
128 },
129 },
130 avatarRibbon: {
131 height: 3,
132 width: 12,
133 // TODO: The background for this ideally should be
134 // set with a token, not hardcoded in rust
135 },
136 border: border(theme, "primary", { bottom: true }),
137 signInPrompt,
138 hoveredSignInPrompt: {
139 ...signInPrompt,
140 ...text(theme, "sans", "active", { size: "xs" }),
141 },
142 offlineIcon: {
143 color: iconColor(theme, "secondary"),
144 width: 16,
145 padding: {
146 right: 4,
147 },
148 },
149 shareIcon: {
150 ...shareIcon,
151 color: iconColor(theme, "secondary")
152 },
153 hoveredShareIcon: {
154 ...shareIcon,
155 background: backgroundColor(theme, 100, "hovered"),
156 color: iconColor(theme, "secondary"),
157 },
158 hoveredActiveShareIcon: {
159 ...shareIcon,
160 background: backgroundColor(theme, 100, "hovered"),
161 color: iconColor(theme, "active"),
162 },
163 activeShareIcon: {
164 ...shareIcon,
165 background: backgroundColor(theme, 100, "active"),
166 color: iconColor(theme, "active"),
167 },
168 outdatedWarning: {
169 ...text(theme, "sans", "warning"),
170 size: 13,
171 margin: { right: 6 }
172 },
173 },
174 toolbar: {
175 height: 34,
176 background: backgroundColor(theme, 500),
177 border: border(theme, "secondary", { bottom: true }),
178 itemSpacing: 8,
179 padding: { left: 16, right: 8, top: 4, bottom: 4 },
180 },
181 breadcrumbs: {
182 ...text(theme, "mono", "secondary"),
183 padding: { left: 6 },
184 },
185 disconnectedOverlay: {
186 ...text(theme, "sans", "active"),
187 background: "#000000aa",
188 },
189 };
190}