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        // Indicators
 35        iconConflict: foreground(layer, "warning"),
 36        iconDirty: foreground(layer, "accent"),
 37
 38        // When two tabs of the same name are open, a label appears next to them
 39        description: {
 40            margin: { left: 8 },
 41            ...text(layer, "sans", "disabled", { size: "2xs" }),
 42        },
 43    }
 44
 45    const activePaneActiveTab = {
 46        ...tab,
 47        background: background(activeLayer),
 48        text: text(activeLayer, "sans", "active", { size: "sm" }),
 49        border: {
 50            ...tab.border,
 51            bottom: false,
 52        },
 53    }
 54
 55    const inactivePaneInactiveTab = {
 56        ...tab,
 57        background: background(layer),
 58        text: text(layer, "sans", "variant", { size: "sm" }),
 59    }
 60
 61    const inactivePaneActiveTab = {
 62        ...tab,
 63        background: background(activeLayer),
 64        text: text(layer, "sans", "variant", { size: "sm" }),
 65        border: {
 66            ...tab.border,
 67            bottom: false,
 68        },
 69    }
 70
 71    const draggedTab = {
 72        ...activePaneActiveTab,
 73        background: withOpacity(tab.background, 0.9),
 74        border: undefined as any,
 75        shadow: colorScheme.popoverShadow,
 76    }
 77
 78    return {
 79        height,
 80        background: background(layer),
 81        activePane: {
 82            activeTab: activePaneActiveTab,
 83            inactiveTab: tab,
 84        },
 85        inactivePane: {
 86            activeTab: inactivePaneActiveTab,
 87            inactiveTab: inactivePaneInactiveTab,
 88        },
 89        draggedTab,
 90        paneButton: {
 91            color: foreground(layer, "variant"),
 92            iconWidth: 12,
 93            buttonWidth: activePaneActiveTab.height,
 94            hover: {
 95                color: foreground(layer, "hovered"),
 96            },
 97            active: {
 98                color: foreground(layer, "accent"),
 99            }
100        },
101        paneButtonContainer: {
102            background: tab.background,
103            border: {
104                ...tab.border,
105                right: false,
106            },
107        },
108    }
109}