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