Remove background from borders / Add borders to preview

[Zykatious]

Hey all, have been trying to configure blink to have rounded borders to be consistent with my existing setup, however when I enable them they have the background colour bleeding out beyond the border.
In nvim-cmp that could be got around by having vim.opt.pumblend = 0, but it's not doing the same here.
Also, I can't seem to figure out how to put borders around the preview of the selected item.
Any help would be appreciated!

Have attached a screenshot to show what I mean

[soifou]

To avoid "bleeding" borders, I usually use the following box drawings { '🭽', '▔', '🭾', '▕', '🭿', '▁', '🭼', '▏' }. That's the only one I'm aware of that have a clean look for popups (and floating windows). You'll loose your round corners though.

As for your border problem and by looking at your screenshot, your documentation block must be nested in completion:

completion = {
    documentation = {
        window = {
            border = 'rounded',
        },
    },
},

[idr4n]

I have done with this:

      completion = {
        list = {
          selection = "auto_insert",
        },
        documentation = {
          auto_show = true,
          auto_show_delay_ms = 200,
          window = {
            border = "rounded",
            winhighlight = "Normal:Normal,FloatBorder:FloatBorder,CursorLine:BlinkCmpDocCursorLine,Search:None",
          },
        },
        menu = {
          border = "rounded",
          draw = { gap = 2 },
          winhighlight = "Normal:Normal,FloatBorder:FloatBorder,CursorLine:BlinkCmpMenuSelection,Search:None",
        },

Change FloatBorder:FloatBorder to FloatBorder:<Your Highlight Group>. Note that the default winhighlight is:

-- for menu
winhighlight = 'Normal:BlinkCmpMenu,FloatBorder:BlinkCmpMenuBorder,CursorLine:BlinkCmpMenuSelection,Search:None',
--- for docs
winhighlight = 'Normal:BlinkCmpDoc,FloatBorder:BlinkCmpDocBorder,CursorLine:BlinkCmpDocCursorLine,Search:None',

[Zykatious]

This is perfect, thank you!

[networkydev]

Hint for anyone before you spend 20 minutes debugging - the first code block (menu section) contains a space after ':' in CursorLine: BlinkCmpMenuSelection.

Be sure to strip that space or else it will throw a E5248: Invalid character in group name

[anuragkumar2921]

worked like charm

[DMunkei]

Hey, I don't quiet get what understand how to get this working...? :D I'm using Kanagawa. What do you mean reference your highlight group?

[idr4n]

Hi,
It means that you need to choose the highlight group from your colorscheme that suits your needs in terms of the foreground and background color.

Alternatively, I think you can modify the Blink highlight groups in Kanagawa settings, for example (I haven't tried this though as I don't use Kanagawa):

    overrides = function(colors) -- add/modify highlights
      local palette = colors.palette
      return {
        BlinkCmpMenu = { bg = "none" },
        BlinkCmpDoc = { bg = "none" },
        BlinkCmpMenuBorder = { fg = palette.oniViolet },
        BlinkCmpDocBorder = { fg = palette.oniViolet },
      }
    end,

If you do this, you dont need to add these lines as mentioned in answer above

winhighlight = "Normal:Normal,FloatBorder:FloatBorder,CursorLine:BlinkCmpDocCursorLine,Search:None",

winhighlight = "Normal:Normal,FloatBorder:FloatBorder,CursorLine:BlinkCmpMenuSelection,Search:None",