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(
 93            interactive({
 94                base: {
 95                    color: foreground(layer, "variant"),
 96                    iconWidth: 12,
 97                    buttonWidth: activePaneActiveTab.height,
 98                },
 99                state: {
100                    hovered: {
101                        color: foreground(layer, "hovered"),
102                    },
103                },
104            }),
105            {
106                default: {
107                    color: foreground(layer, "accent"),
108                },
109            }
110        ),
111        paneButtonContainer: {
112            background: tab.background,
113            border: {
114                ...tab.border,
115                right: false,
116            },
117        },
118    }
119}