status_bar.ts

  1import { ColorScheme } from "../theme/color_scheme"
  2import { background, border, foreground, text } from "./components"
  3import { interactive, toggleable } from "../element"
  4export default function status_bar(theme: ColorScheme): any {
  5    const layer = theme.lowest
  6
  7    const status_container = {
  8        corner_radius: 6,
  9        padding: { top: 3, bottom: 3, left: 6, right: 6 },
 10    }
 11
 12    const diagnostic_status_container = {
 13        corner_radius: 6,
 14        padding: { top: 1, bottom: 1, left: 6, right: 6 },
 15    }
 16
 17    return {
 18        height: 30,
 19        item_spacing: 8,
 20        padding: {
 21            top: 1,
 22            bottom: 1,
 23            left: 6,
 24            right: 6,
 25        },
 26        border: border(layer, { top: true, overlay: true }),
 27        cursor_position: text(layer, "sans", "variant"),
 28        active_language: interactive({
 29            base: {
 30                padding: { left: 6, right: 6 },
 31                ...text(layer, "sans", "variant"),
 32            },
 33            state: {
 34                hovered: {
 35                    ...text(layer, "sans", "on"),
 36                },
 37            },
 38        }),
 39        auto_update_progress_message: text(layer, "sans", "variant"),
 40        auto_update_done_message: text(layer, "sans", "variant"),
 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"),
 48                icon_color: foreground(layer),
 49            },
 50            state: {
 51                hovered: {
 52                    message: text(layer, "sans"),
 53                    icon_color: foreground(layer),
 54                    background: background(layer, "hovered"),
 55                },
 56            },
 57        }),
 58        diagnostic_message: interactive({
 59            base: {
 60                ...text(layer, "sans"),
 61            },
 62            state: { hovered: text(layer, "sans", "hovered") },
 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: "sm" }),
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}