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      left: 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", { 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", "base", "active", { 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", { size: "sm" }),
 50  };
 51
 52  const inactivePaneActiveTab = {
 53    ...tab,
 54    background: background(layer),
 55    text: text(layer, "sans", "base", "active", { 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    border: border(layer, {
 74      left: true,
 75      bottom: true,
 76      overlay: true,
 77    }),
 78    activePane: {
 79      activeTab: activePaneActiveTab,
 80      inactiveTab: tab,
 81    },
 82    inactivePane: {
 83      activeTab: inactivePaneActiveTab,
 84      inactiveTab: inactivePaneInactiveTab,
 85    },
 86    draggedTab,
 87    paneButton: {
 88      color: foreground(layer),
 89      iconWidth: 12,
 90      buttonWidth: activePaneActiveTab.height,
 91      hover: {
 92        color: foreground(layer, "base", "hovered"),
 93      },
 94    },
 95    paneButtonContainer: {
 96      background: tab.background,
 97      border: {
 98        ...tab.border,
 99        right: false,
100      }
101    }
102  }
103}