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 autoUpdateProgressMessage: text(layer, "sans", "variant"),
41 autoUpdateDoneMessage: text(layer, "sans", "variant"),
42 lspStatus: interactive({
43 base: {
44 ...diagnosticStatusContainer,
45 iconSpacing: 4,
46 iconWidth: 14,
47 height: 18,
48 message: text(layer, "sans"),
49 iconColor: foreground(layer),
50 },
51 state: {
52 hovered: {
53 message: text(layer, "sans"),
54 iconColor: foreground(layer),
55 background: background(layer, "hovered"),
56 },
57 },
58 }),
59 diagnosticMessage: interactive({
60 base: {
61 ...text(layer, "sans"),
62 },
63 state: { hovered: text(layer, "sans", "hovered") },
64 }),
65 diagnosticSummary: interactive({
66 base: {
67 height: 20,
68 iconWidth: 16,
69 iconSpacing: 2,
70 summarySpacing: 6,
71 text: text(layer, "sans", { size: "sm" }),
72 iconColorOk: foreground(layer, "variant"),
73 iconColorWarning: foreground(layer, "warning"),
74 iconColorError: foreground(layer, "negative"),
75 containerOk: {
76 cornerRadius: 6,
77 padding: { top: 3, bottom: 3, left: 7, right: 7 },
78 },
79 containerWarning: {
80 ...diagnosticStatusContainer,
81 background: background(layer, "warning"),
82 border: border(layer, "warning"),
83 },
84 containerError: {
85 ...diagnosticStatusContainer,
86 background: background(layer, "negative"),
87 border: border(layer, "negative"),
88 },
89 },
90 state: {
91 hovered: {
92 iconColorOk: foreground(layer, "on"),
93 containerOk: {
94 background: background(layer, "on", "hovered"),
95 },
96 containerWarning: {
97 background: background(layer, "warning", "hovered"),
98 border: border(layer, "warning", "hovered"),
99 },
100 containerError: {
101 background: background(layer, "negative", "hovered"),
102 border: border(layer, "negative", "hovered"),
103 },
104 },
105 },
106 }),
107 panelButtons: {
108 groupLeft: {},
109 groupBottom: {},
110 groupRight: {},
111 button: toggleable(
112 interactive({
113 base: {
114 ...statusContainer,
115 iconSize: 16,
116 iconColor: foreground(layer, "variant"),
117 label: {
118 margin: { left: 6 },
119 ...text(layer, "sans", { size: "sm" }),
120 },
121 },
122 state: {
123 hovered: {
124 iconColor: foreground(layer, "hovered"),
125 background: background(layer, "variant"),
126 },
127 },
128 }),
129 {
130 default: {
131 iconColor: foreground(layer, "active"),
132 background: background(layer, "active"),
133 },
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}