1import { ColorScheme } from "../theme/colorScheme"
  2import { withOpacity } from "../theme/color"
  3import { text, border, background, foreground } from "./components"
  4import { toggleable } from "./toggle"
  5import { interactive } from "../element"
  6
  7export default function tabBar(colorScheme: ColorScheme) {
  8    const height = 32
  9
 10    let activeLayer = colorScheme.highest
 11    let layer = colorScheme.middle
 12
 13    const tab = {
 14        height,
 15        text: text(layer, "sans", "variant", { size: "sm" }),
 16        background: background(layer),
 17        border: border(layer, {
 18            right: true,
 19            bottom: true,
 20            overlay: true,
 21        }),
 22        padding: {
 23            left: 8,
 24            right: 12,
 25        },
 26        spacing: 8,
 27
 28        // Tab type icons (e.g. Project Search)
 29        typeIconWidth: 14,
 30
 31        // Close icons
 32        closeIconWidth: 8,
 33        iconClose: foreground(layer, "variant"),
 34        iconCloseActive: foreground(layer, "hovered"),
 35
 36        // Indicators
 37        iconConflict: foreground(layer, "warning"),
 38        iconDirty: foreground(layer, "accent"),
 39
 40        // When two tabs of the same name are open, a label appears next to them
 41        description: {
 42            margin: { left: 8 },
 43            ...text(layer, "sans", "disabled", { size: "2xs" }),
 44        },
 45    }
 46
 47    const activePaneActiveTab = {
 48        ...tab,
 49        background: background(activeLayer),
 50        text: text(activeLayer, "sans", "active", { size: "sm" }),
 51        border: {
 52            ...tab.border,
 53            bottom: false,
 54        },
 55    }
 56
 57    const inactivePaneInactiveTab = {
 58        ...tab,
 59        background: background(layer),
 60        text: text(layer, "sans", "variant", { size: "sm" }),
 61    }
 62
 63    const inactivePaneActiveTab = {
 64        ...tab,
 65        background: background(activeLayer),
 66        text: text(layer, "sans", "variant", { size: "sm" }),
 67        border: {
 68            ...tab.border,
 69            bottom: false,
 70        },
 71    }
 72
 73    const draggedTab = {
 74        ...activePaneActiveTab,
 75        background: withOpacity(tab.background, 0.9),
 76        border: undefined as any,
 77        shadow: colorScheme.popoverShadow,
 78    }
 79
 80    return {
 81        height,
 82        background: background(layer),
 83        activePane: {
 84            activeTab: activePaneActiveTab,
 85            inactiveTab: tab,
 86        },
 87        inactivePane: {
 88            activeTab: inactivePaneActiveTab,
 89            inactiveTab: inactivePaneInactiveTab,
 90        },
 91        draggedTab,
 92        paneButton: toggleable(interactive({
 93            base: {
 94                color: foreground(layer, "variant"),
 95                iconWidth: 12,
 96                buttonWidth: activePaneActiveTab.height,
 97            },
 98            state: {
 99                hovered: {
100                    color: foreground(layer, "hovered"),
101                }
102            }
103        }),
104            {
105                default: {
106                    color: foreground(layer, "accent"),
107                }
108            },
109        ),
110        paneButtonContainer: {
111            background: tab.background,
112            border: {
113                ...tab.border,
114                right: false,
115            },
116        },
117    }
118}