[Bug]: custom separators not using separator_selected highlight as they should and not being at very start or end of bufferline.

[Alan Manning]

Is there an existing issue for this?

• I have searched the existing issues

What happened?

I am trying to get a bubble type header bar but i think there may be a bug with drawing that with the highlihgts.
I have a slope version nicely separated.

however when changing to a rounded look. ( i have tried a load of different configurations of this trying to find the highlight that could make this work and different separators, some of which remain commented out on the code config below).

I think i cant get this to work and look nice because the separator_selected highlight does not affeft anything when defining custom separators. the selected should be green here:

here is the the slope version with that same highlight specified.

Also related to this. The custom separator will not apply to the very end or very start of the buffers. I dont know why this considering this doesn't happen with the slope or anything else ive tried. Is there an option to specify and end if this is
intentional. some pics showing this.

The slope which works as expected.

The custom separator that does not have a start or end.

Any help on figuring this out would be greatly appreciated.
Thank you in advance.

What did you expect to happen?

The separator_selected highlight should apply to the selected buffer even when using custom separators.

Config

return {
	"akinsho/bufferline.nvim",
	dependencies = {
		"nvim-tree/nvim-web-devicons",
		"famiu/bufdelete.nvim",
	},
	version = "*",
	config = function()
		local bufferline = require("bufferline")
		local mocha = require("catppuccin.palettes").get_palette("mocha")

		bufferline.setup({
			highlights = {
				fill = {
					fg = mocha.text,
					bg = mocha.base,
				},
				tab = {
					fg = mocha.blue,
					bg = mocha.rosewater,
				},
				tab_selected = {
					fg = mocha.blue,
					bg = mocha.rosewater,
				},
				background = {
					fg = mocha.text,
					bg = mocha.surface1,
				},
				buffer_visible = {
					fg = mocha.text,
					bg = mocha.surface1,
				},
				buffer_selected = {
					fg = mocha.base,
					bg = mocha.blue,
					bold = true,
					italic = false,
				},
				close_button = {
					fg = mocha.blue,
					bg = mocha.base,
				},
				close_button_visible = {
					fg = mocha.blue,
					bg = mocha.surface1,
				},
				close_button_selected = {
					fg = mocha.base,
					bg = mocha.blue,
				},
				indicator_visible = {
					fg = mocha.surface1,
					bg = mocha.surface1,
				},
				indicator_selected = {
					fg = mocha.base,
					bg = mocha.blue,
				},
				modified = {
					fg = mocha.blue,
					bg = mocha.surface1,
				},
				modified_visible = {
					fg = mocha.blue,
					bg = mocha.surface1,
				},
				modified_selected = {
					fg = mocha.base,
					bg = mocha.blue,
				},
				numbers = {
					fg = mocha.blue,
					bg = mocha.surface1,
				},
				numbers_visible = {
					fg = mocha.blue,
					bg = mocha.surface1,
				},
				numbers_selected = {
					fg = mocha.base,
					bg = mocha.blue,
					bold = false,
					italic = false,
				},
				offset_separator = {
					fg = mocha.blue,
					bg = mocha.base,
				},
				separator_selected = {
					fg = mocha.base,
					bg = mocha.blue,
				},
				separator_visible = {
					fg = mocha.base,
					bg = mocha.surface1,
				},
				separator = {
					fg = mocha.base,
					bg = mocha.surface1,
				},
			},
			options = {
				themable = true,
				numbers = "none", -- | "ordinal" | "buffer_id" | "both" | function({ ordinal, id, lower, raise }): string,
				close_command = "Bdelete! %d", -- can be a string | function, see "Mouse actions"
				right_mouse_command = "Bdelete! %d", -- can be a string | function, see "Mouse actions"
				left_mouse_command = "buffer %d", -- can be a string | function, see "Mouse actions"
				middle_mouse_command = nil, -- can be a string | function, see "Mouse actions"
				indicator = {
					style = "none",
				},
				buffer_close_icon = "",
				modified_icon = "+",
				close_icon = "",
				left_trunc_marker = "",
				right_trunc_marker = "",
				max_name_length = 30,
				max_prefix_length = 30, -- prefix used when a buffer is de-duplicated
				truncate_names = false,
				tab_size = 1,
				diagnostics = false, -- | "nvim_lsp" | "coc",
				diagnostics_update_in_insert = false,
				offsets = {
					{ filetype = "NvimTree", text = "Nvim Tree", separator = false },
					{ filetype = "undotree", text = "Undo Tree", separator = false },
				},
				show_buffer_icons = false,
				show_buffer_close_icons = false,
				show_close_icon = false,
				show_tab_indicators = false,
				show_duplicate_prefix = false, -- whether to show duplicate buffer prefix
				persist_buffer_sort = true, -- whether or not custom sorted buffers should persist

				-- separator_style = { "", "" },
				-- separator_style = { "  ", "  " },
				-- separator_style = { " ", " " },
				-- separator_style = { " ", " " },
				separator_style = "slope",
				-- separator_style = "padded_slope",
				-- separator_style = { "", "" }, --"slope", --{ "  ", "  " }, -- {"",""}, -- "slope" | "thick" | "thin" | { 'any', 'any' },
				enforce_regular_tabs = false,
				always_show_bufferline = true,
				hover = {
					enabled = true,
					delay = 150,
					reveal = { "close" },
				},
				style_preset = {
					bufferline.style_preset.no_italic,
					bufferline.style_preset.no_bold,
				},

				-- vim.cmd [[
				-- hi BufferLineFill guibg='#191724'
				-- hi BufferLineSeparator guibg='#191724'
				-- hi BufferLineSeparatorVisible guibg='#191724'
				-- ]]
			},
		})
	end,
}

The colors used here are from catppuccin but i have tweeked them so i will include here:

{
rosewater = "#f5e0dc",
flamingo = "#f2cdcd",
pink = "#ff7eb6", -- base0C
mauve = "#ce55ff", --
red = "#e05c5c", --
maroon = "#eba0ac",
peach = "#ff6f00",
yellow = "#f9e2af",
green = "#42be65", -- base0D
teal = "#3ddbd9", -- base08
sky = "#82cfff", -- base0F
sapphire = "#74c7ec",
blue = "#33b1ff", -- base0B
lavender = "#be95ff", --base0E
text = "#ddedff",
subtext1 = "#bac2de",
subtext0 = "#a6adc8",
overlay2 = "#9399b2",
overlay1 = "#7f849c",
overlay0 = "#6c7086",
surface2 = "#585b70",
surface1 = "#45475a",
surface0 = "#313244",
base = "#1e1e2e",
mantle = "#181825",
crust = "#11111b",
}

Additional Information

...

commit

No response

[Akin]

@Alan-Manning this might be something you can get working but it's important to clarify that this plugin isn't designed with complete flexibility of separators in mind which is why it actually offers specific options. I wouldn't say it's a bug because the colours that are used are quite specific and ordered quite specifically to work with the provided options. When a users is in the realms of adding their own custom shapes it needs elbow grease from that user to figure out if it's possible.

TLDR: Only the provided options are 100% supported using custom shapes is at your own risk since I prefer a few options which I can control the appearance of rather than hyper flexibility. There are definitely plugins that give users that level of control though like heirline. I built this to be much more out of the box, which involves a certain amount of taking what you get a bit similar to a GUI text editor really.