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}