1import { ColorScheme } from "../theme/colorScheme"
2import { background, border, foreground, text } from "./components"
3import { interactive } from "../element"
4import { toggleable } from "./toggle"
5export default function statusBar(colorScheme: ColorScheme) {
6 let layer = colorScheme.lowest
7
8 const statusContainer = {
9 cornerRadius: 6,
10 padding: { top: 3, bottom: 3, left: 6, right: 6 },
11 }
12
13 const diagnosticStatusContainer = {
14 cornerRadius: 6,
15 padding: { top: 1, bottom: 1, left: 6, right: 6 },
16 }
17
18 return {
19 height: 30,
20 itemSpacing: 8,
21 padding: {
22 top: 1,
23 bottom: 1,
24 left: 6,
25 right: 6,
26 },
27 border: border(layer, { top: true, overlay: true }),
28 cursorPosition: text(layer, "sans", "variant"),
29 activeLanguage: interactive({
30 base: {
31 padding: { left: 6, right: 6 },
32 ...text(layer, "sans", "variant")
33 },
34 state: {
35 hovered: {
36 ...text(layer, "sans", "on"),
37 }
38 }
39 },
40 ),
41 autoUpdateProgressMessage: text(layer, "sans", "variant"),
42 autoUpdateDoneMessage: text(layer, "sans", "variant"),
43 lspStatus: interactive({
44 base: {
45 ...diagnosticStatusContainer,
46 iconSpacing: 4,
47 iconWidth: 14,
48 height: 18,
49 message: text(layer, "sans"),
50 iconColor: foreground(layer)
51 },
52 state: {
53 hovered: {
54 message: text(layer, "sans"),
55 iconColor: foreground(layer),
56 background: background(layer, "hovered"),
57 }
58 }
59 }),
60 diagnosticMessage: interactive({
61 base: {
62 ...text(layer, "sans")
63 },
64 state: { hovered: text(layer, "sans", "hovered") }
65 },
66 ),
67 diagnosticSummary:
68 interactive({
69 base: {
70 height: 20,
71 iconWidth: 16,
72 iconSpacing: 2,
73 summarySpacing: 6,
74 text: text(layer, "sans", { size: "sm" }),
75 iconColorOk: foreground(layer, "variant"),
76 iconColorWarning: foreground(layer, "warning"),
77 iconColorError: foreground(layer, "negative"),
78 containerOk: {
79 cornerRadius: 6,
80 padding: { top: 3, bottom: 3, left: 7, right: 7 },
81 },
82 containerWarning: {
83 ...diagnosticStatusContainer,
84 background: background(layer, "warning"),
85 border: border(layer, "warning"),
86 },
87 containerError: {
88 ...diagnosticStatusContainer,
89 background: background(layer, "negative"),
90 border: border(layer, "negative"),
91 }
92 }, state: {
93 hovered: {
94 iconColorOk: foreground(layer, "on"),
95 containerOk: {
96 background: background(layer, "on", "hovered"),
97 },
98 containerWarning: {
99 background: background(layer, "warning", "hovered"),
100 border: border(layer, "warning", "hovered"),
101 },
102 containerError: {
103 background: background(layer, "negative", "hovered"),
104 border: border(layer, "negative", "hovered"),
105 }
106 }
107 }
108 }
109 ),
110 panelButtons: {
111 groupLeft: {},
112 groupBottom: {},
113 groupRight: {},
114 button: toggleable(interactive({
115 base: {
116 ...statusContainer,
117 iconSize: 16,
118 iconColor: foreground(layer, "variant"),
119 label: {
120 margin: { left: 6 },
121 ...text(layer, "sans", { size: "sm" }),
122 },
123 }, state: {
124 hovered: {
125 iconColor: foreground(layer, "hovered"),
126 background: background(layer, "variant"),
127 }
128 }
129 }),
130 {
131 default: {
132 iconColor: foreground(layer, "active"),
133 background: background(layer, "active"),
134 }
135 }),
136 badge: {
137 cornerRadius: 3,
138 padding: 2,
139 margin: { bottom: -1, right: -1 },
140 border: border(layer),
141 background: background(layer, "accent"),
142 },
143 },
144 }
145}