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