statusBar.ts

  1import { ColorScheme } from "../themes/common/colorScheme"
  2import { background, border, foreground, text } from "./components"
  3
  4export default function statusBar(colorScheme: ColorScheme) {
  5    let layer = colorScheme.lowest
  6
  7    const statusContainer = {
  8        cornerRadius: 6,
  9        padding: { top: 3, bottom: 3, left: 6, right: 6 },
 10    }
 11
 12    const diagnosticStatusContainer = {
 13        cornerRadius: 6,
 14        padding: { top: 1, bottom: 1, left: 6, right: 6 },
 15    }
 16
 17    return {
 18        height: 30,
 19        itemSpacing: 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        cursorPosition: text(layer, "sans", "variant"),
 28        activeLanguage: {
 29            padding: { left: 6, right: 6 },
 30            ...text(layer, "sans", "variant"),
 31            hover: {
 32                ...text(layer, "sans", "on")
 33            }
 34        },
 35        autoUpdateProgressMessage: text(layer, "sans", "variant"),
 36        autoUpdateDoneMessage: text(layer, "sans", "variant"),
 37        lspStatus: {
 38            ...diagnosticStatusContainer,
 39            iconSpacing: 4,
 40            iconWidth: 14,
 41            height: 18,
 42            message: text(layer, "sans"),
 43            iconColor: foreground(layer),
 44            hover: {
 45                message: text(layer, "sans"),
 46                iconColor: foreground(layer),
 47                background: background(layer),
 48            },
 49        },
 50        diagnosticMessage: {
 51            ...text(layer, "sans"),
 52            hover: text(layer, "sans", "hovered"),
 53        },
 54        feedback: {
 55            margin: { left: 2 },
 56            color: foreground(layer, "variant"),
 57            iconWidth: 14,
 58            buttonWidth: 14,
 59            hover: {
 60              color: foreground(layer, "on"),
 61            },
 62        },
 63        diagnosticSummary: {
 64            height: 20,
 65            iconWidth: 16,
 66            iconSpacing: 2,
 67            summarySpacing: 6,
 68            text: text(layer, "sans", { size: "sm" }),
 69            iconColorOk: foreground(layer, "variant"),
 70            iconColorWarning: foreground(layer, "warning"),
 71            iconColorError: foreground(layer, "negative"),
 72            containerOk: {
 73                cornerRadius: 6,
 74                padding: { top: 3, bottom: 3, left: 7, right: 7 },
 75            },
 76            containerWarning: {
 77                ...diagnosticStatusContainer,
 78                background: background(layer, "warning"),
 79                border: border(layer, "warning"),
 80            },
 81            containerError: {
 82                ...diagnosticStatusContainer,
 83                background: background(layer, "negative"),
 84                border: border(layer, "negative"),
 85            },
 86            hover: {
 87                iconColorOk: foreground(layer, "on"),
 88                containerOk: {
 89                    cornerRadius: 6,
 90                    padding: { top: 3, bottom: 3, left: 7, right: 7 },
 91                    background: background(layer, "on", "hovered"),
 92                },
 93                containerWarning: {
 94                    ...diagnosticStatusContainer,
 95                    background: background(layer, "warning", "hovered"),
 96                    border: border(layer, "warning", "hovered"),
 97                },
 98                containerError: {
 99                    ...diagnosticStatusContainer,
100                    background: background(layer, "negative", "hovered"),
101                    border: border(layer, "negative", "hovered"),
102                },
103            },
104        },
105        sidebarButtons: {
106            groupLeft: {},
107            groupRight: {},
108            item: {
109                ...statusContainer,
110                iconSize: 16,
111                iconColor: foreground(layer, "variant"),
112                hover: {
113                    iconColor: foreground(layer, "hovered"),
114                    background: background(layer, "variant"),
115                },
116                active: {
117                    iconColor: foreground(layer, "active"),
118                    background: background(layer, "active"),
119                },
120            },
121            badge: {
122                cornerRadius: 3,
123                padding: 2,
124                margin: { bottom: -1, right: -1 },
125                border: border(layer),
126                background: background(layer, "accent"),
127            },
128        },
129    }
130}