Bufferline background breaks when Catppuccin is set to transparent background and bufferline style is styled as non-default

[coryshaw1]

Description

I'm trying to use akinsho/bufferline.nvim along with Catppuccin, but using bufferline.nvim's separator style of "slant". When using this and setting transparent_background and term_colors = true, the background of the bufferline tabs is odd and not transparent.

Neovim version

NVIM v0.10.0
Build type: Release
LuaJIT 2.1.1713773202

Terminal and multiplexer

kitty 0.25.2 and tmux 3.4

Catppuccin version / branch / rev

"catppuccin": { "branch": "main", "commit": "d97387aea8264f484bb5d5e74f2182a06c83e0d8" }

Steps to reproduce

Catppuccin opts

{
    transparent_background = true,
    background = {
      light = "latte",
      dark = "macchiato",
    },
    term_colors = true,
    integrations = {
      bufferline = true,
    },
  }
}

Bufferline opts

require("bufferline").setup {
  options = {
    diagnostics = "nvim_lsp",
    middle_mouse_command = "bdelete! %d",
    right_mouse_command = nil,
    numbers = "ordinal",
    separator_style = "slant",
  },
  highlights = require("catppuccin.groups.integrations.bufferline").get(),
}

Expected behavior

The ideal behavior would be for the background of the bufferline's entirety to be transparent with a slightly darker opaque background like the "With transparent_background disabled" screenshot below.

Actual behavior

With transparent_background enabled

With transparent_background disabled

Repro

No response

[command-z-z]

the same problem, have any plans to fix it?

[swit33]

I can confirm that this happens for me too.

[coryshaw1]

For a workaround, I was able to get it somewhat better looking by setting up the dim_inactive in opts and disabling bufferline in integrations. This does require you to manually set the highlights in bufferline if you haven't already.

Catppuccin opts:

dim_inactive = {
  enabled = true,
  shade = "dark",
  percentage = 0.15,
},
integrations = {
  bufferline = false,
},

bufferline opts:

highlights = require("catppuccin.groups.integrations.bufferline").get {
  styles = { "italic", "bold" },
},

I still think it would look better with the separator_bg across the entire bar and opaque, but this may be a limitation of the highlights. I would need someone else with more experience to confirm this.

[ilias777]

I think @coryshaw1 he's right. The slant option is not suitable for transparent background.

This is not an issue, this belongs to the discussion section.

You can still change the separator background like this:

local mocha = require('catppuccin.palettes').get_palette('mocha')
require('bufferline').setup({
    -- Bufferline configuration
    highlights = require('catppuccin.groups.integrations.bufferline').get({
        custom = {
            all = {
                separator = { fg = mocha.crust },
                separator_visible = { fg = mocha.crust },
                separator_selected = { fg = mocha.crust },
            },
        },
    }
}

and it looks like this: