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