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