1import { ColorScheme } from "../theme/colorScheme"
2import { withOpacity } from "../theme/color"
3import {
4 background,
5 border,
6 borderColor,
7 foreground,
8 svg,
9 text,
10} from "./components"
11import statusBar from "./statusBar"
12import tabBar from "./tabBar"
13import { interactive } from "../element"
14
15import { titlebar } from "./titlebar"
16export default function workspace(colorScheme: ColorScheme) {
17 const layer = colorScheme.lowest
18 const isLight = colorScheme.isLight
19
20 return {
21 background: background(colorScheme.lowest),
22 blankPane: {
23 logoContainer: {
24 width: 256,
25 height: 256,
26 },
27 logo: svg(
28 withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
29 "icons/logo_96.svg",
30 256,
31 256
32 ),
33
34 logoShadow: svg(
35 withOpacity(
36 colorScheme.isLight
37 ? "#FFFFFF"
38 : colorScheme.lowest.base.default.background,
39 colorScheme.isLight ? 1 : 0.6
40 ),
41 "icons/logo_96.svg",
42 256,
43 256
44 ),
45 keyboardHints: {
46 margin: {
47 top: 96,
48 },
49 cornerRadius: 4,
50 },
51 keyboardHint: interactive({
52 base: {
53 ...text(layer, "sans", "variant", { size: "sm" }),
54 padding: {
55 top: 3,
56 left: 8,
57 right: 8,
58 bottom: 3,
59 },
60 cornerRadius: 8,
61 },
62 state: {
63 hovered: {
64 ...text(layer, "sans", "active", { size: "sm" }),
65 },
66 },
67 }),
68
69 keyboardHintWidth: 320,
70 },
71 joiningProjectAvatar: {
72 cornerRadius: 40,
73 width: 80,
74 },
75 joiningProjectMessage: {
76 padding: 12,
77 ...text(layer, "sans", { size: "lg" }),
78 },
79 externalLocationMessage: {
80 background: background(colorScheme.middle, "accent"),
81 border: border(colorScheme.middle, "accent"),
82 cornerRadius: 6,
83 padding: 12,
84 margin: { bottom: 8, right: 8 },
85 ...text(colorScheme.middle, "sans", "accent", { size: "xs" }),
86 },
87 leaderBorderOpacity: 0.7,
88 leaderBorderWidth: 2.0,
89 tabBar: tabBar(colorScheme),
90 modal: {
91 margin: {
92 bottom: 52,
93 top: 52,
94 },
95 cursor: "Arrow",
96 },
97 zoomedBackground: {
98 cursor: "Arrow",
99 background: isLight
100 ? withOpacity(background(colorScheme.lowest), 0.8)
101 : withOpacity(background(colorScheme.highest), 0.6),
102 },
103 zoomedPaneForeground: {
104 margin: 16,
105 shadow: colorScheme.modalShadow,
106 border: border(colorScheme.lowest, { overlay: true }),
107 },
108 zoomedPanelForeground: {
109 margin: 16,
110 border: border(colorScheme.lowest, { overlay: true }),
111 },
112 dock: {
113 left: {
114 border: border(layer, { right: true }),
115 },
116 bottom: {
117 border: border(layer, { top: true }),
118 },
119 right: {
120 border: border(layer, { left: true }),
121 },
122 },
123 paneDivider: {
124 color: borderColor(layer),
125 width: 1,
126 },
127 statusBar: statusBar(colorScheme),
128 titlebar: titlebar(colorScheme),
129 toolbar: {
130 height: 34,
131 background: background(colorScheme.highest),
132 border: border(colorScheme.highest, { bottom: true }),
133 itemSpacing: 8,
134 navButton: interactive({
135 base: {
136 color: foreground(colorScheme.highest, "on"),
137 iconWidth: 12,
138 buttonWidth: 24,
139 cornerRadius: 6,
140 },
141 state: {
142 hovered: {
143 color: foreground(colorScheme.highest, "on", "hovered"),
144 background: background(
145 colorScheme.highest,
146 "on",
147 "hovered"
148 ),
149 },
150 disabled: {
151 color: foreground(
152 colorScheme.highest,
153 "on",
154 "disabled"
155 ),
156 },
157 },
158 }),
159 padding: { left: 8, right: 8, top: 4, bottom: 4 },
160 },
161 breadcrumbHeight: 24,
162 breadcrumbs: interactive({
163 base: {
164 ...text(colorScheme.highest, "sans", "variant"),
165 cornerRadius: 6,
166 padding: {
167 left: 6,
168 right: 6,
169 },
170 },
171 state: {
172 hovered: {
173 color: foreground(colorScheme.highest, "on", "hovered"),
174 background: background(
175 colorScheme.highest,
176 "on",
177 "hovered"
178 ),
179 },
180 },
181 }),
182 disconnectedOverlay: {
183 ...text(layer, "sans"),
184 background: withOpacity(background(layer), 0.8),
185 },
186 notification: {
187 margin: { top: 10 },
188 background: background(colorScheme.middle),
189 cornerRadius: 6,
190 padding: 12,
191 border: border(colorScheme.middle),
192 shadow: colorScheme.popoverShadow,
193 },
194 notifications: {
195 width: 400,
196 margin: { right: 10, bottom: 10 },
197 },
198 dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5),
199 }
200}