zed/styles/src/styleTree/tabBar.ts

107 lines
2.8 KiB
TypeScript
Raw Normal View History

import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { text, border, background, foreground } from "./components"
2022-07-22 21:28:58 +00:00
export default function tabBar(colorScheme: ColorScheme) {
const height = 32
2022-07-22 21:28:58 +00:00
let activeLayer = colorScheme.highest
let layer = colorScheme.middle
const tab = {
height,
text: text(layer, "sans", "variant", { size: "sm" }),
background: background(layer),
border: border(layer, {
right: true,
bottom: true,
overlay: true,
}),
padding: {
left: 8,
right: 12,
},
spacing: 8,
2022-09-28 19:53:06 +00:00
2023-03-01 08:18:45 +00:00
// Tab type icons (e.g. Project Search)
typeIconWidth: 14,
// Close icons
2023-03-02 23:48:31 +00:00
closeIconWidth: 8,
iconClose: foreground(layer, "variant"),
iconCloseActive: foreground(layer, "hovered"),
2022-09-28 19:53:06 +00:00
// Indicators
iconConflict: foreground(layer, "warning"),
iconDirty: foreground(layer, "accent"),
2022-09-28 19:53:06 +00:00
// When two tabs of the same name are open, a label appears next to them
description: {
margin: { left: 8 },
...text(layer, "sans", "disabled", { size: "2xs" }),
},
}
2022-07-22 21:28:58 +00:00
const activePaneActiveTab = {
...tab,
background: background(activeLayer),
text: text(activeLayer, "sans", "active", { size: "sm" }),
border: {
...tab.border,
bottom: false,
},
}
2022-07-22 21:28:58 +00:00
const inactivePaneInactiveTab = {
...tab,
background: background(layer),
text: text(layer, "sans", "variant", { size: "sm" }),
}
2022-07-22 21:28:58 +00:00
const inactivePaneActiveTab = {
...tab,
background: background(activeLayer),
text: text(layer, "sans", "variant", { size: "sm" }),
border: {
...tab.border,
bottom: false,
},
}
2022-07-22 21:28:58 +00:00
const draggedTab = {
...activePaneActiveTab,
background: withOpacity(tab.background, 0.9),
border: undefined as any,
shadow: colorScheme.popoverShadow,
}
2022-08-24 01:02:01 +00:00
return {
height,
background: background(layer),
activePane: {
activeTab: activePaneActiveTab,
inactiveTab: tab,
},
inactivePane: {
activeTab: inactivePaneActiveTab,
inactiveTab: inactivePaneInactiveTab,
},
draggedTab,
paneButton: {
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: activePaneActiveTab.height,
hover: {
color: foreground(layer, "hovered"),
},
},
paneButtonContainer: {
background: tab.background,
border: {
...tab.border,
right: false,
},
},
}
2022-10-09 23:43:06 +00:00
}