1import { with_opacity } from "../theme/color"
2import {
3 background,
4 border,
5 border_color,
6 foreground,
7 svg,
8 text,
9} from "./components"
10import statusBar from "./status_bar"
11import tabBar from "./tab_bar"
12import { interactive } from "../element"
13import { titlebar } from "./titlebar"
14import { useTheme } from "../theme"
15
16export default function workspace(): any {
17 const theme = useTheme()
18
19 const { is_light } = theme
20
21 return {
22 background: background(theme.lowest),
23 blank_pane: {
24 logo_container: {
25 width: 256,
26 height: 256,
27 },
28 logo: svg(
29 with_opacity("#000000", theme.is_light ? 0.6 : 0.8),
30 "icons/logo_96.svg",
31 256,
32 256
33 ),
34
35 logo_shadow: svg(
36 with_opacity(
37 theme.is_light
38 ? "#FFFFFF"
39 : theme.lowest.base.default.background,
40 theme.is_light ? 1 : 0.6
41 ),
42 "icons/logo_96.svg",
43 256,
44 256
45 ),
46 keyboard_hints: {
47 margin: {
48 top: 96,
49 },
50 corner_radius: 4,
51 },
52 keyboard_hint: interactive({
53 base: {
54 ...text(theme.lowest, "sans", "variant", { size: "sm" }),
55 padding: {
56 top: 3,
57 left: 8,
58 right: 8,
59 bottom: 3,
60 },
61 corner_radius: 8,
62 },
63 state: {
64 hovered: {
65 ...text(theme.lowest, "sans", "active", { size: "sm" }),
66 },
67 },
68 }),
69
70 keyboard_hint_width: 320,
71 },
72 joining_project_avatar: {
73 corner_radius: 40,
74 width: 80,
75 },
76 joining_project_message: {
77 padding: 12,
78 ...text(theme.lowest, "sans", { size: "lg" }),
79 },
80 external_location_message: {
81 background: background(theme.middle, "accent"),
82 border: border(theme.middle, "accent"),
83 corner_radius: 6,
84 padding: 12,
85 margin: { bottom: 8, right: 8 },
86 ...text(theme.middle, "sans", "accent", { size: "xs" }),
87 },
88 leader_border_opacity: 0.7,
89 leader_border_width: 2.0,
90 tab_bar: tabBar(),
91 modal: {
92 margin: {
93 bottom: 52,
94 top: 52,
95 },
96 cursor: "Arrow",
97 },
98 zoomed_background: {
99 cursor: "Arrow",
100 background: is_light
101 ? with_opacity(background(theme.lowest), 0.8)
102 : with_opacity(background(theme.highest), 0.6),
103 },
104 zoomed_pane_foreground: {
105 margin: 16,
106 shadow: theme.modal_shadow,
107 border: border(theme.lowest, { overlay: true }),
108 },
109 zoomed_panel_foreground: {
110 margin: 16,
111 border: border(theme.lowest, { overlay: true }),
112 },
113 dock: {
114 left: {
115 border: border(theme.lowest, { right: true }),
116 },
117 bottom: {
118 border: border(theme.lowest, { top: true }),
119 },
120 right: {
121 border: border(theme.lowest, { left: true }),
122 },
123 },
124 pane_divider: {
125 color: border_color(theme.lowest),
126 width: 1,
127 },
128 status_bar: statusBar(),
129 titlebar: titlebar(),
130 toolbar: {
131 height: 34,
132 background: background(theme.highest),
133 border: border(theme.highest, { bottom: true }),
134 item_spacing: 8,
135 nav_button: interactive({
136 base: {
137 color: foreground(theme.highest, "on"),
138 icon_width: 12,
139 button_width: 24,
140 corner_radius: 6,
141 },
142 state: {
143 hovered: {
144 color: foreground(theme.highest, "on", "hovered"),
145 background: background(theme.highest, "on", "hovered"),
146 },
147 disabled: {
148 color: foreground(theme.highest, "on", "disabled"),
149 },
150 },
151 }),
152 padding: { left: 8, right: 8, top: 4, bottom: 4 },
153 },
154 breadcrumb_height: 24,
155 breadcrumbs: interactive({
156 base: {
157 ...text(theme.highest, "sans", "variant"),
158 corner_radius: 6,
159 padding: {
160 left: 6,
161 right: 6,
162 },
163 },
164 state: {
165 hovered: {
166 color: foreground(theme.highest, "on", "hovered"),
167 background: background(theme.highest, "on", "hovered"),
168 },
169 },
170 }),
171 disconnected_overlay: {
172 ...text(theme.lowest, "sans"),
173 background: with_opacity(background(theme.lowest), 0.8),
174 },
175 notification: {
176 margin: { top: 10 },
177 background: background(theme.middle),
178 corner_radius: 6,
179 padding: 12,
180 border: border(theme.middle),
181 shadow: theme.popover_shadow,
182 },
183 notifications: {
184 width: 400,
185 margin: { right: 10, bottom: 10 },
186 },
187 drop_target_overlay_color: with_opacity(
188 foreground(theme.lowest, "variant"),
189 0.5
190 ),
191 }
192}