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", { size: "xs" }),
40 auto_update_done_message: text(layer, "sans", "variant", { size: "xs" }),
41 lsp_status: interactive({
42 base: {
43 ...diagnostic_status_container,
44 icon_spacing: 4,
45 icon_width: 14,
46 height: 18,
47 message: text(layer, "sans", { size: "xs" }),
48 icon_color: foreground(layer),
49 },
50 state: {
51 hovered: {
52 message: text(layer, "sans", { size: "xs" }),
53 icon_color: foreground(layer),
54 background: background(layer, "hovered"),
55 },
56 },
57 }),
58 diagnostic_message: interactive({
59 base: {
60 ...text(layer, "sans", { size: "xs" }),
61 },
62 state: { hovered: text(layer, "sans", "hovered", { size: "xs" }) },
63 }),
64 diagnostic_summary: interactive({
65 base: {
66 height: 20,
67 icon_width: 16,
68 icon_spacing: 2,
69 summary_spacing: 6,
70 text: text(layer, "sans", { size: "sm" }),
71 icon_color_ok: foreground(layer, "variant"),
72 icon_color_warning: foreground(layer, "warning"),
73 icon_color_error: foreground(layer, "negative"),
74 container_ok: {
75 corner_radius: 6,
76 padding: { top: 3, bottom: 3, left: 7, right: 7 },
77 },
78 container_warning: {
79 ...diagnostic_status_container,
80 background: background(layer, "warning"),
81 border: border(layer, "warning"),
82 },
83 container_error: {
84 ...diagnostic_status_container,
85 background: background(layer, "negative"),
86 border: border(layer, "negative"),
87 },
88 },
89 state: {
90 hovered: {
91 icon_color_ok: foreground(layer, "on"),
92 container_ok: {
93 background: background(layer, "on", "hovered"),
94 },
95 container_warning: {
96 background: background(layer, "warning", "hovered"),
97 border: border(layer, "warning", "hovered"),
98 },
99 container_error: {
100 background: background(layer, "negative", "hovered"),
101 border: border(layer, "negative", "hovered"),
102 },
103 },
104 },
105 }),
106 panel_buttons: {
107 group_left: {},
108 group_bottom: {},
109 group_right: {},
110 button: toggleable({
111 base: interactive({
112 base: {
113 ...status_container,
114 icon_size: 16,
115 icon_color: foreground(layer, "variant"),
116 label: {
117 margin: { left: 6 },
118 ...text(layer, "sans", { size: "xs" }),
119 },
120 },
121 state: {
122 hovered: {
123 icon_color: foreground(layer, "hovered"),
124 background: background(layer, "variant"),
125 },
126 },
127 }),
128 state: {
129 active: {
130 default: {
131 icon_color: foreground(layer, "active"),
132 background: background(layer, "active"),
133 },
134 hovered: {
135 icon_color: foreground(layer, "hovered"),
136 background: background(layer, "hovered"),
137 },
138 clicked: {
139 icon_color: foreground(layer, "pressed"),
140 background: background(layer, "pressed"),
141 },
142 },
143 },
144 }),
145 badge: {
146 corner_radius: 3,
147 padding: 2,
148 margin: { bottom: -1, right: -1 },
149 border: border(layer),
150 background: background(layer, "accent"),
151 },
152 },
153 }
154}