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