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