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    },
39  };
40
41  const inactivePaneInactiveTab = {
42    ...tab,
43    background: backgroundColor(theme, 300),
44    text: text(theme, "sans", "muted", { size: "sm" }),
45  };
46
47  const inactivePaneActiveTab = {
48    ...tab,
49    background: backgroundColor(theme, 500),
50    text: text(theme, "sans", "secondary", { size: "sm" }),
51    border: {
52      ...tab.border,
53    },
54  }
55
56  return {
57    height,
58    background: backgroundColor(theme, 300),
59    border: border(theme, "primary", {
60      left: true,
61      bottom: true,
62      overlay: true,
63    }),
64    activePane: {
65      activeTab: activePaneActiveTab,
66      inactiveTab: tab,
67    },
68    inactivePane: {
69      activeTab: inactivePaneActiveTab,
70      inactiveTab: inactivePaneInactiveTab,
71    },
72    paneButton: {
73      color: iconColor(theme, "secondary"),
74      border: {
75        ...activePaneActiveTab.border,
76      },
77      iconWidth: 12,
78      buttonWidth: activePaneActiveTab.height,
79      hover: {
80        color: iconColor(theme, "active"),
81        background: backgroundColor(theme, 300),
82      },
83    },
84  }
85}