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 padding: { left: 8, right: 8, top: 4, bottom: 4 },
136 },
137 breadcrumb_height: 24,
138 breadcrumbs: interactive({
139 base: {
140 ...text(theme.highest, "sans", "variant"),
141 corner_radius: 6,
142 padding: {
143 left: 6,
144 right: 6,
145 },
146 },
147 state: {
148 hovered: {
149 color: foreground(theme.highest, "on", "hovered"),
150 background: background(theme.highest, "on", "hovered"),
151 },
152 },
153 }),
154 disconnected_overlay: {
155 ...text(theme.lowest, "sans"),
156 background: with_opacity(background(theme.lowest), 0.8),
157 },
158 notification: {
159 margin: { top: 10 },
160 background: background(theme.middle),
161 corner_radius: 6,
162 padding: 12,
163 border: border(theme.middle),
164 shadow: theme.popover_shadow,
165 },
166 notifications: {
167 width: 400,
168 margin: { right: 10, bottom: 10 },
169 },
170 drop_target_overlay_color: with_opacity(
171 foreground(theme.lowest, "variant"),
172 0.5
173 ),
174 }
175}