1import { background, border, foreground, text } from "./components"
2import { interactive, toggleable } from "../element"
3import { useTheme } from "../common"
4import { text_button } from "../component/text_button"
5
6export default function status_bar(): any {
7 const theme = useTheme()
8
9 const layer = theme.lowest
10
11 const status_container = {
12 corner_radius: 6,
13 padding: { top: 3, bottom: 3, left: 6, right: 6 },
14 }
15
16 const diagnostic_status_container = {
17 corner_radius: 6,
18 padding: { top: 1, bottom: 1, left: 6, right: 6 },
19 }
20
21 return {
22 height: 30,
23 item_spacing: 8,
24 padding: {
25 top: 1,
26 bottom: 1,
27 left: 6,
28 right: 6,
29 },
30 border: border(layer, { top: true, overlay: true }),
31 cursor_position: text(layer, "sans", "variant", { size: "xs" }),
32 vim_mode_indicator: {
33 margin: { left: 6 },
34 ...text(layer, "mono", "variant", { size: "xs" }),
35 },
36 active_language: text_button({
37 color: "variant",
38 }),
39 auto_update_progress_message: text(layer, "sans", "variant", {
40 size: "xs",
41 }),
42 auto_update_done_message: text(layer, "sans", "variant", {
43 size: "xs",
44 }),
45 lsp_status: interactive({
46 base: {
47 ...diagnostic_status_container,
48 icon_spacing: 4,
49 icon_width: 14,
50 height: 18,
51 message: text(layer, "sans", { size: "xs" }),
52 icon_color: foreground(layer),
53 },
54 state: {
55 hovered: {
56 message: text(layer, "sans"),
57 icon_color: foreground(layer),
58 background: background(layer, "hovered"),
59 },
60 },
61 }),
62 diagnostic_message: interactive({
63 base: {
64 ...text(layer, "sans", { size: "xs" }),
65 },
66 state: { hovered: text(layer, "sans", "hovered", { size: "xs" }) },
67 }),
68 diagnostic_summary: interactive({
69 base: {
70 height: 20,
71 icon_width: 16,
72 icon_spacing: 2,
73 summary_spacing: 6,
74 text: text(layer, "sans", { size: "sm" }),
75 icon_color_ok: foreground(layer, "variant"),
76 icon_color_warning: foreground(layer, "warning"),
77 icon_color_error: foreground(layer, "negative"),
78 container_ok: {
79 corner_radius: 6,
80 padding: { top: 3, bottom: 3, left: 7, right: 7 },
81 },
82 container_warning: {
83 ...diagnostic_status_container,
84 background: background(layer, "warning"),
85 border: border(layer, "warning"),
86 },
87 container_error: {
88 ...diagnostic_status_container,
89 background: background(layer, "negative"),
90 border: border(layer, "negative"),
91 },
92 },
93 state: {
94 hovered: {
95 icon_color_ok: foreground(layer, "on"),
96 container_ok: {
97 background: background(layer, "on", "hovered"),
98 },
99 container_warning: {
100 background: background(layer, "warning", "hovered"),
101 border: border(layer, "warning", "hovered"),
102 },
103 container_error: {
104 background: background(layer, "negative", "hovered"),
105 border: border(layer, "negative", "hovered"),
106 },
107 },
108 },
109 }),
110 panel_buttons: {
111 group_left: {},
112 group_bottom: {},
113 group_right: {},
114 button: toggleable({
115 base: interactive({
116 base: {
117 ...status_container,
118 icon_size: 16,
119 icon_color: foreground(layer, "variant"),
120 label: {
121 margin: { left: 6 },
122 ...text(layer, "sans", { size: "xs" }),
123 },
124 },
125 state: {
126 hovered: {
127 icon_color: foreground(layer, "hovered"),
128 background: background(layer, "variant"),
129 },
130 },
131 }),
132 state: {
133 active: {
134 default: {
135 icon_color: foreground(layer, "active"),
136 background: background(layer, "active"),
137 },
138 hovered: {
139 icon_color: foreground(layer, "hovered"),
140 background: background(layer, "hovered"),
141 },
142 clicked: {
143 icon_color: foreground(layer, "pressed"),
144 background: background(layer, "pressed"),
145 },
146 },
147 },
148 }),
149 badge: {
150 corner_radius: 3,
151 padding: 2,
152 margin: { bottom: -1, right: -1 },
153 border: border(layer),
154 background: background(layer, "accent"),
155 },
156 },
157 }
158}