1import { ColorScheme } from "../theme/colorScheme"
  2import { withOpacity } from "../theme/color"
  3import { text, border, background, foreground } from "./components"
  4import { toggleable } from "./toggle"
  5import { interactive } from "./interactive"
  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(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      }
103    }),
104      {
105        default: {
106          color: foreground(layer, "accent"),
107        }
108      },
109    ),
110    paneButtonContainer: {
111      background: tab.background,
112      border: {
113        ...tab.border,
114        right: false,
115      },
116    },
117  }
118}