Add Catppuccin Theme in Draft

[mao-yining]

Related: #285, catppuccin/vim#29

[romainl]

Thank you.

This is not a thorough review, I will need more time for that, but I noticed that the completion menu lacks contrast in "dark" mode:

The contrast is better in "light" mode but the selected line doesn't have a background, which is not very good for usability:

The statusline (both active and inactive) is not optimal either in "light" mode,:

same for the tabline:

It is better in "dark" mode but not by much.

As I said I need more time to play with this but I can already say two things:

• the syntax highlighting proper is pretty nice,
• the UI needs more work.

[mao-yining]

May I ask you weather I can support all four favour of themes in one colorscheme?

[lifepillar]

May I ask you weather I can support all four favour of themes in one colorscheme?

That is possible, but I wouldn't recommend that. The original theme doesn't do that either. FWIW, you could define a discriminator in the Colortemplate template, e.g.:

#const flavor = get(g:, 'captuccin_flavor', 'mocha')

Then define all color palettes:

Color text_mocha ...
Color text_frappe ...
Color base_mocha ...
Color base_frappe ...
...

And finally define variants for each highlight group (the default variant corresponding to “mocha” in my example), e.g.:

Normal  text_mocha  base_mocha
 +flavor "frappe"  text_frappe base_frappe
 +flavor "latte" text_latte base_latte
...

Then, you could choose the flavor of the color scheme by setting the global option:

let g:captuccin_flavor = "latte"
colorscheme catpuccin

It's cleaner to just have four color schemes, imo.

[lifepillar]

Btw, color schemes to be included in Vim should have no options. So, the above is probably ruled out if you want your color scheme to be included in Vim.

[romainl]

Indeed we don't want to add too much complexity to the colorschemes distributed with Vim.

Making one colorscheme work equally well with bg=light and bg=dark is already relatively challenging so don't make it too hard. Moreover, of the four CatPuccin variants, the three dark ones are too similar to warrant the effort. Picking one is more than enough.

Did you have any feedback from the upstream maintainers? If your version is visually/functionally identical to the original one, then you should submit it in the original repo as it will make it easier for you to follow the original.

[mao-yining]

Did you have any feedback from the upstream maintainers? If your version is visually/functionally identical to the original one, then you should submit it in the original repo as it will make it easier for you to follow the original.

Not yet. It seems that the vim repo is less active than the nvim repo, I am considering translate some catppuccin/nvim's features into it.

[mao-yining]

Which one do you think is the best?

ToolbarButton rosewater none bold
ToolbarButton green surface1 bold

[mao-yining]

@romainl Can you help me to test that problem you tested still exist? On my gVim on Windows it don't have the problem as you said.

[habamax]

I believe he is checking it in terminal vim with 256 colors.

[habamax]

Pmenu needs to be addressed:

TODO in diff colors:

Added/Changed/Removed

It is quite hard to quickly see the active window for me, but I guess this is a design choice?

Additionally, we avoid using italic:

Although, it is possible to set it for gui vim only which should be fine.

[mao-yining]

It is quite hard to quickly see the active window for me, but I guess this is a design choice?

Yes. Is it need to be solved?

Pmenu needs to be addressed:

What is the problem?

@habamax Other problems are solved.

[habamax]

Pmenu needs to be addressed:

What is the problem?

PmenuExtra is

[mao-yining]

I noticed that, I'm afraid it is a disign choice.

If seems it as a bug, fixed like that:

diff --git a/colortemplate/catppuccin.colortemplate b/colortemplate/catppuccin.colortemplate
index db1ca34..4b6626d 100644
--- a/colortemplate/catppuccin.colortemplate
+++ b/colortemplate/catppuccin.colortemplate
@@ -143,8 +143,8 @@ ModeMsg              text              none              bold
 MoreMsg              blue              none
 NonText              overlay0          none
 Pmenu                overlay2          mantle
-PmenuExtra           overlay0          none
-PmenuExtraSel        overlay0          none              bold
+PmenuExtra           overlay0          mantle
+PmenuExtraSel        overlay0          surface0          bold
 PmenuSel             none              surface0          bold
 PmenuSbar            none              surface0
 PmenuThumb           none              overlay0

[mao-yining]

Any problems about gui colors?

[habamax]

For quickfix, it is not clear what is the quickfixline what is visual:

[habamax]

The last } is not actually selected, but visually it looks like it is:

MatchParen needs to be distinguishable from Visual

Here it is visually selected and it has no difference with previous screenshot:

[mao-yining]

Thanks for all your reviews. I will deal with these next Friday.

[habamax]

We try to avoid adding non-bundled highlight groups (e.g. lsp, ale, etc).

There is one colorscheme where it kind of slipped in, lunaperche, because I forgot to delete them, but in general -- it is better not to add these highlights to the standard colorschemes.

[habamax]

Linking QuickFixLine to Search might be not good enough, it obviously creates an issue figuring out where on that line Search highlight is:

Or just figure out where QuickFixLine is:

[habamax]

There are some of the Pmenu* highlights missing too:

PmenuMatch/PmenuMatchSel

[habamax]

Could you remove external plugin related highlights?

[habamax]

Spell highlight is absent?

example:

I see you use undercurl -- it is not widely supported at the moment, use underline and/or ctermfg/guifg color.

[habamax]

256 colors inactive statusline is quite bad: nearly impossible to quickly find out where windows are separated:

Looks ok for light, but dark one needs improvement

[habamax]

Shouldn't 256c DiffDelete be closer to gui version (red tinted) instead of gray?

and the light version:

[habamax]

Quickfixline and Visual are indistinctive:

I thought I saw a fix to this but looks like it is not there?

[habamax]

Could you make IncSearch different to Search?

[habamax]

Do you accept this? CurSearch red mantle reverse

What about making foreground the same as in Search and background a bit darker, for example: hi CurSearch guifg=#cdd6f4 guibg=#a35b78?

And similar for light, e.g.:

hi CurSearch guifg=#4c4f69 guibg=#fc8fc3

[mao-yining]

256 Visual and DiffChange are too close, in the screenshots ord is visually selected, but barely visible:

256, 16 and 8 color themes exact performance is highly related to machine. For example I use

of Windows terminal. And it was what I see on my screen.

[habamax]

I would agree for 16 and 8 but 256 should be more or less
The same across different terminals and machines

[mao-yining]

I would agree for 16 and 8 but 256 should be more or less The same across different terminals and machines

Well. As you see that picture. 256 diff and visual is quite different. I can hardly fix the performance on your machine.

[habamax]

On 2 different machines and 2 different terminal emulators 2 different OSes it looks the same unreadable for me.

[mao-yining]

Done

diff --git a/colortemplate/catppuccin.colortemplate b/colortemplate/catppuccin.colortemplate
index 43470f0..b93dbef 100644
--- a/colortemplate/catppuccin.colortemplate
+++ b/colortemplate/catppuccin.colortemplate
@@ -43,11 +43,12 @@ Color: crust	#11111B	16	Black
 
 Color: cursorLine	#2A2B3C	236
 Color: diffAdd	#364143	22	DarkGreen
-Color: diffChange	#25293C	59	DarkYellow
+Color: diffChange	#25293C	235	DarkYellow
 Color: diffDelete	#443244	52	DarkRed
 Color: diffText	#3E4B6B	23	DarkCyan
 Color: search	#3E5767	24	DarkBlue
-Color: quickfixline	#52476A	60	Magenta
+Color: curSearch	#89556B	132	Red
+Color: quickFixLine	#52476A	60	Magenta
 
 Background: light
 
@@ -87,7 +88,8 @@ Color: diffChange	#E0E7F5	254	Yellow
 Color: diffDelete	#EAC8D3	224	Red
 Color: diffText	#B0C7F5	153	Cyan
 Color: search	#A8DAF0	117	Cyan
-Color: quickfixline	#D0BAF3	183	Magenta
+Color: curSearch	#fc8fc3	211	Red
+Color: quickFixLine	#D0BAF3	183	Magenta
 
 Background: any
 
@@ -96,12 +98,10 @@ Background: any
 Normal	text	base
 Visual	surface1	text	reverse
   /gui	none	surface1
-  /256+tgc true	omit	omit
   /16/8	blue	base	bold,reverse
 Conceal	overlay1	none
 ColorColumn	none	mantle
   /8	base	overlay0
-CurSearch	mantle	red
 Cursor	base	rosewater
 lCursor	base	red
 CursorIM	base	mauve
@@ -110,6 +110,7 @@ Directory	blue	none
 EndOfBuffer	surface1	none
 ErrorMsg	red	none	bold
 VertSplit	crust	none
+  /16/8	overlay0	none
 Folded	blue	none
 FoldColumn	overlay0	none
 SignColumn	surface1	none
@@ -166,7 +167,7 @@ Underlined	none	none	underline
 Bold	none	none	bold
 Italic	none	none	italic
 Error	red	none
-Todo	flamingo	base	bold,reverse
+Todo	flamingo	none	bold
 Exception	mauve	none
 String	green	none
 Tag	lavender	none	bold
@@ -202,10 +203,10 @@ DiffText	none	diffText
 DiffDelete	none	diffDelete
   /16/8	base	diffDelete
 Search	text	search
-QuickFixLine	text	quickfixline	bold
-  /gui	none	quickfixline	bold
-  /256+tgc true	omit	omit	bold
-  /16	base	quickfixline	bold
+CurSearch	curSearch	text	reverse
+QuickFixLine	text	quickFixLine	bold
+  /gui	none	quickFixLine	bold
+  /16	base	quickFixLine	bold
 
 ; Links
 Boolean	-> Constant
@@ -222,7 +223,7 @@ Typedef	-> Type
 
 Terminal	-> Normal
 TabLineSel	-> Normal
-IncSearch	-> Search
+IncSearch	-> CurSearch
 LineNrAbove	-> LineNr
 LineNrBelow	-> LineNr
 StatusLineTerm	-> StatusLine

[habamax]

CurSearch/IncSearch are reversed and still interferes with Visual with gui and/or termguicolors:

With the following example (for dark)

hi CurSearch guibg=#89556b guifg=#cdd6f4 guisp=NONE gui=none ctermfg=96 ctermbg=189 cterm=none term=reverse

It is better:

Note that gui reverse works for gui only and cterm reverse works for termguicolors.
Here is an example of how to make IncSearch reversed in <=256 colors and none in GUI and termguicolors:

IncSearch            incsearch         dark0             reverse
 /gui                none              incsearch
 /256+tgc true       omit              omit

[habamax]

dark/light/256/16/8 invisible ~ EndOfBuffer

[mao-yining]

dark/light/256/16/8 invisible ~ EndOfBuffer

Note that gui reverse works for gui only and cterm reverse works for termguicolors.

DONE. Thanks.

[habamax]

Looks good to me.

@romainl would you test drive this?

If nothing exceptional would be found, I will merge this next week.

[romainl]

Looks good to me.

@romainl would you test drive this?

If nothing exceptional would be found, I will merge this next week.

Will do over the week-end. I have some coding to do so… perfect testing conditions.

[romainl]

So I've used this colorscheme for about 15-20 hours, now, in Terminal.app on macOS, with 256 colors enabled, mostly with :set bg=dark, and… I quite like it.

IMO, there are a couple of usability issues left:

• The status-line and the tab-line have similar looks but they don't use the same values. The differences are small, but using the same values would improve consistency and make the template simpler.

  If it helps, I like to set the status-line highlight groups once and just link other UI highlight groups to them.

• The "non-current" elements of the status-line and the tab-line are too muted. I have a hard time reading tab names and so on.

  I would suggest something like ctermfg=242 ctermbg=232.

[habamax]

IMO, there are a couple of usability issues left:

* The status-line and the tab-line have similar looks but they don't use the same values. The differences are small, but using the same values would improve consistency and make the template simpler.

This would be less readable with current color selection:

as is:

making it the same as statusline:

Conversely, making Statusline background the same as Tabline's:

looks and feels better for me.

* The "non-current" elements of the status-line and the tab-line are too muted. I have a hard time reading tab names and so on.
  I would suggest something like `ctermfg=242 ctermbg=232`.

That is the spirit of the colorscheme, same in GUI. Same in "upstream" version.

I personally would increase the contrast for both GUI and 256, but that is not the hard stop/req for me.

[habamax]

@chrisbra I would like to squeeze this new colorscheme into upcoming 9.2 release. We are really close to have it merged here. Could you give us an estimate so we have time to PR against vim's runtime?

[chrisbra]

I am planning roughly for mid February

[mao-yining]

Changes: @romainl @habamax

M colortemplate/catppuccin.colortemplate
@@ -37,7 +37,7 @@ Color: surface2	#585B70	60	DarkGrey
 Color: surface1	#45475A	240	Black
 Color: surface0	#313244	236	DarkYellow
 
-Color: base	#1E1E2E	234	Black
+Color: base	#1E1E2E	233	Black
 Color: mantle	#181825	232	DarkGrey
 Color: crust	#11111B	16	Black
 
@@ -47,7 +47,7 @@ Color: diffChange	#25293C	235	DarkYellow
 Color: diffDelete	#443244	52	DarkRed
 Color: diffText	#3E4B6B	23	DarkCyan
 Color: search	#3E5767	24	DarkBlue
-Color: curSearch	#89556B	96	Red
+Color: curSearch	#89556B	126	Red
 Color: quickFixLine	#52476A	60	Magenta
 
 Background: light
@@ -143,7 +143,7 @@ SpellLocal	blue	none	underline
   /gui	none	none	s=blue undercurl
 SpellRare	green	none	underline
   /gui	none	none	s=green undercurl
-StatusLine	text	mantle
+StatusLine	text	crust
   /8	text	mantle	reverse,bold
 StatusLineNC	surface1	mantle
   /16	overlay0	mantle

[habamax]

@mao-yining gui and 256 looks good, however you broke 16c

Statusline

Tabline*

I would make them the same as in 8c:

For tabline in 16c, I would again make them same as in 8c -- bold:

[habamax]

Light 16c statusline* should be different for active/inactive:

8c tabline has no difference active/inactive:

[habamax]

for the light, let me doublecheck with another terminal...

[habamax]

Let me merge this and fix the remaining 16c/8c issues