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: undefined as any, // Remove border
63    shadow: draggedShadow(theme),
64  }
65
66  return {
67    height,
68    background: backgroundColor(theme, 300),
69    dropTargetOverlayColor: withOpacity(theme.textColor.muted, 0.6),
70    border: border(theme, "primary", {
71      bottom: true,
72      overlay: true,
73    }),
74    activePane: {
75      activeTab: activePaneActiveTab,
76      inactiveTab: tab,
77    },
78    inactivePane: {
79      activeTab: inactivePaneActiveTab,
80      inactiveTab: inactivePaneInactiveTab,
81    },
82    draggedTab,
83    paneButton: {
84      color: iconColor(theme, "secondary"),
85      iconWidth: 12,
86      buttonWidth: activePaneActiveTab.height,
87      hover: {
88        color: iconColor(theme, "active"),
89      },
90    },
91    paneButtonContainer: {
92      background: tab.background,
93      border: {
94        ...tab.border,
95        right: false,
96      }
97    }
98  }
99}