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