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 const nav_button = interactive({
88 base: {
89 color: foreground(theme.highest, "on"),
90 icon_width: 12,
91
92 button_width: active_pane_active_tab.height,
93 },
94 state: {
95 hovered: {
96 color: foreground(theme.highest, "on", "hovered"),
97 background: background(theme.highest, "on", "hovered"),
98 },
99 disabled: {
100 color: foreground(theme.highest, "on", "disabled"),
101 },
102 },
103 })
104 const dragged_tab = {
105 ...active_pane_active_tab,
106 background: with_opacity(tab.background, 0.9),
107 border: undefined as any,
108 shadow: theme.popover_shadow,
109 }
110
111 return {
112 height,
113 background: background(layer),
114 active_pane: {
115 active_tab: active_pane_active_tab,
116 inactive_tab: tab,
117 },
118 inactive_pane: {
119 active_tab: inactive_pane_active_tab,
120 inactive_tab: inactive_pane_inactive_tab,
121 },
122 dragged_tab,
123 pane_button: toggleable({
124 base: interactive({
125 base: {
126 color: foreground(layer, "variant"),
127 icon_width: 12,
128 button_width: active_pane_active_tab.height,
129 },
130 state: {
131 hovered: {
132 color: foreground(layer, "hovered"),
133 },
134 clicked: {
135 color: foreground(layer, "pressed"),
136 },
137 },
138 }),
139 state: {
140 active: {
141 default: {
142 color: foreground(layer, "accent"),
143 },
144 hovered: {
145 color: foreground(layer, "hovered"),
146 },
147 clicked: {
148 color: foreground(layer, "pressed"),
149 },
150 },
151 },
152 }),
153 pane_button_container: {
154 background: tab.background,
155 border: {
156 ...tab.border,
157 right: false,
158 },
159 },
160 nav_button: nav_button
161 }
162}