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 activeLayer = colorScheme.highest;
  9  let layer = colorScheme.middle;
 10
 11  const tab = {
 12    height,
 13    text: text(layer, "sans", "variant", { size: "sm" }),
 14    background: background(layer),
 15    border: border(layer, {
 16      right: true,
 17      bottom: true,
 18      overlay: true,
 19    }),
 20    padding: {
 21      left: 8,
 22      right: 12,
 23    },
 24    spacing: 8,
 25
 26    // Close icons
 27    iconWidth: 8,
 28    iconClose: foreground(layer, "variant"),
 29    iconCloseActive: foreground(layer, "hovered"),
 30
 31    // Indicators
 32    iconConflict: foreground(layer, "warning"),
 33    iconDirty: foreground(layer, "accent"),
 34
 35    // When two tabs of the same name are open, a label appears next to them
 36    description: {
 37      margin: { left: 8 },
 38      ...text(layer, "sans", "disabled", { size: "2xs" }),
 39    },
 40  };
 41
 42  const activePaneActiveTab = {
 43    ...tab,
 44    background: background(activeLayer),
 45    text: text(activeLayer, "sans", "active", { size: "sm" }),
 46    border: {
 47      ...tab.border,
 48      bottom: false,
 49    },
 50  };
 51
 52  const inactivePaneInactiveTab = {
 53    ...tab,
 54    background: background(layer),
 55    text: text(layer, "sans", "variant", { size: "sm" }),
 56  };
 57
 58  const inactivePaneActiveTab = {
 59    ...tab,
 60    background: background(activeLayer),
 61    text: text(layer, "sans", "variant", { size: "sm" }),
 62    border: {
 63      ...tab.border,
 64      bottom: false,
 65    },
 66  };
 67
 68  const draggedTab = {
 69    ...activePaneActiveTab,
 70    background: withOpacity(tab.background, 0.9),
 71    border: undefined as any,
 72    shadow: colorScheme.popoverShadow,
 73  };
 74
 75  return {
 76    height,
 77    background: background(layer),
 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, "variant"),
 89      iconWidth: 12,
 90      buttonWidth: activePaneActiveTab.height,
 91      hover: {
 92        color: foreground(layer, "hovered"),
 93      },
 94    },
 95    paneButtonContainer: {
 96      background: tab.background,
 97      border: {
 98        ...tab.border,
 99        right: false,
100      },
101    },
102  };
103}