1import Theme from "../themes/common/theme";
  2import { withOpacity } from "../utils/color";
  3import { iconColor, text, border, backgroundColor, draggedShadow } from "./components";
  4
  5export default function tabBar(theme: Theme) {
  6  const height = 32;
  7
  8  const tab = {
  9    height,
 10    background: backgroundColor(theme, 300),
 11    border: border(theme, "primary", {
 12      left: true,
 13      bottom: true,
 14      overlay: true,
 15    }),
 16    iconClose: iconColor(theme, "muted"),
 17    iconCloseActive: iconColor(theme, "active"),
 18    iconConflict: iconColor(theme, "warning"),
 19    iconDirty: iconColor(theme, "info"),
 20    iconWidth: 8,
 21    spacing: 8,
 22    text: text(theme, "sans", "secondary", { size: "sm" }),
 23    padding: {
 24      left: 8,
 25      right: 8,
 26    },
 27    description: {
 28      margin: { left: 6, top: 1 },
 29      ...text(theme, "sans", "muted", { size: "2xs" })
 30    }
 31  };
 32
 33  const activePaneActiveTab = {
 34    ...tab,
 35    background: backgroundColor(theme, 500),
 36    text: text(theme, "sans", "active", { size: "sm" }),
 37    border: {
 38      ...tab.border,
 39      bottom: false
 40    },
 41  };
 42
 43  const inactivePaneInactiveTab = {
 44    ...tab,
 45    background: backgroundColor(theme, 300),
 46    text: text(theme, "sans", "muted", { size: "sm" }),
 47  };
 48
 49  const inactivePaneActiveTab = {
 50    ...tab,
 51    background: backgroundColor(theme, 500),
 52    text: text(theme, "sans", "secondary", { size: "sm" }),
 53    border: {
 54      ...tab.border,
 55      bottom: false
 56    },
 57  }
 58
 59  const draggedTab = {
 60    ...activePaneActiveTab,
 61    background: withOpacity(tab.background, 0.8),
 62    border: {
 63      ...tab.border,
 64      top: false,
 65      left: false,
 66      right: false,
 67      bottom: false,
 68    },
 69    shadow: draggedShadow(theme),
 70  }
 71
 72  return {
 73    height,
 74    background: backgroundColor(theme, 300),
 75    dropTargetOverlayColor: withOpacity(theme.textColor.muted, 0.6),
 76    border: border(theme, "primary", {
 77      left: true,
 78      bottom: true,
 79      overlay: true,
 80    }),
 81    activePane: {
 82      activeTab: activePaneActiveTab,
 83      inactiveTab: tab,
 84    },
 85    inactivePane: {
 86      activeTab: inactivePaneActiveTab,
 87      inactiveTab: inactivePaneInactiveTab,
 88    },
 89    draggedTab,
 90    paneButton: {
 91      color: iconColor(theme, "secondary"),
 92      border: {
 93        ...tab.border,
 94      },
 95      iconWidth: 12,
 96      buttonWidth: activePaneActiveTab.height,
 97      hover: {
 98        color: iconColor(theme, "active"),
 99        background: backgroundColor(theme, 300),
100      },
101    },
102  }
103}