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