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