1import { with_opacity } from "../theme/color"
2import { text, border, background, foreground } from "./components"
3import { interactive, toggleable } from "../element"
4import { useTheme } from "../common"
5
6export default function tab_bar(): any {
7 const theme = useTheme()
8
9 const { is_light } = theme
10
11 const height = 32
12
13 const active_layer = theme.highest
14 const layer = theme.middle
15
16 const tab = {
17 height,
18 text: text(layer, "sans", "variant", { size: "sm" }),
19 background: background(layer),
20 border: border(layer, {
21 right: true,
22 bottom: true,
23 overlay: true,
24 }),
25 padding: {
26 left: 8,
27 right: 12,
28 },
29 spacing: 8,
30
31 // Tab type icons (e.g. Project Search)
32 type_icon_width: 14,
33
34 // Close icons
35 close_icon_width: 8,
36 icon_close: foreground(layer, "variant"),
37 icon_close_active: foreground(layer, "hovered"),
38
39 // Indicators
40 icon_conflict: foreground(layer, "warning"),
41 icon_dirty: foreground(layer, "accent"),
42
43 git: {
44 modified: is_light
45 ? theme.ramps.yellow(0.6).hex()
46 : theme.ramps.yellow(0.5).hex(),
47 inserted: is_light
48 ? theme.ramps.green(0.45).hex()
49 : theme.ramps.green(0.5).hex(),
50 conflict: is_light
51 ? theme.ramps.red(0.6).hex()
52 : theme.ramps.red(0.5).hex(),
53 },
54
55 // When two tabs of the same name are open, a label appears next to them
56 description: {
57 margin: { left: 8 },
58 ...text(layer, "sans", "disabled", { size: "2xs" }),
59 },
60 }
61
62 const active_pane_active_tab = {
63 ...tab,
64 background: background(active_layer),
65 text: text(active_layer, "sans", "active", { size: "sm" }),
66 border: {
67 ...tab.border,
68 bottom: false,
69 },
70 }
71
72 const inactive_pane_inactive_tab = {
73 ...tab,
74 background: background(layer),
75 text: text(layer, "sans", "variant", { size: "sm" }),
76 }
77
78 const inactive_pane_active_tab = {
79 ...tab,
80 background: background(active_layer),
81 text: text(layer, "sans", "variant", { size: "sm" }),
82 border: {
83 ...tab.border,
84 bottom: false,
85 },
86 }
87
88 const dragged_tab = {
89 ...active_pane_active_tab,
90 background: with_opacity(tab.background, 0.9),
91 border: undefined as any,
92 shadow: theme.popover_shadow,
93 }
94
95 return {
96 height,
97 background: background(layer),
98 active_pane: {
99 active_tab: active_pane_active_tab,
100 inactive_tab: tab,
101 },
102 inactive_pane: {
103 active_tab: inactive_pane_active_tab,
104 inactive_tab: inactive_pane_inactive_tab,
105 },
106 dragged_tab,
107 pane_button: toggleable({
108 base: interactive({
109 base: {
110 color: foreground(layer, "variant"),
111 icon_width: 12,
112 button_width: active_pane_active_tab.height,
113 },
114 state: {
115 hovered: {
116 color: foreground(layer, "hovered"),
117 },
118 clicked: {
119 color: foreground(layer, "pressed"),
120 },
121 },
122 }),
123 state: {
124 active: {
125 default: {
126 color: foreground(layer, "accent"),
127 },
128 hovered: {
129 color: foreground(layer, "hovered"),
130 },
131 clicked: {
132 color: foreground(layer, "pressed"),
133 },
134 },
135 },
136 }),
137 pane_button_container: {
138 background: tab.background,
139 border: {
140 ...tab.border,
141 right: false,
142 },
143 },
144 }
145}