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