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:
 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            state:
106            {
107                active: {
108                    default: {
109                        color: foreground(layer, "accent"),
110                    },
111                }
112            }
113        }
114        ),
115        paneButtonContainer: {
116            background: tab.background,
117            border: {
118                ...tab.border,
119                right: false,
120            },
121        },
122    }
123}