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(
 82      foreground(activeLayerInactiveTab),
 83      0.6
 84    ),
 85    activePane: {
 86      activeTab: activePaneActiveTab,
 87      inactiveTab: tab,
 88    },
 89    inactivePane: {
 90      activeTab: inactivePaneActiveTab,
 91      inactiveTab: inactivePaneInactiveTab,
 92    },
 93    draggedTab,
 94    paneButton: {
 95      color: foreground(activeLayerInactiveTab, "variant"),
 96      iconWidth: 12,
 97      buttonWidth: activePaneActiveTab.height,
 98      hover: {
 99        color: foreground(activeLayerInactiveTab, "hovered"),
100      },
101    },
102    paneButtonContainer: {
103      background: tab.background,
104      border: {
105        ...tab.border,
106        right: false,
107      },
108    },
109  };
110}