[BUG] Tab color incorrect when hovering

[Still Wu]

after updating catppuccin pugin to v3.8.0, the color comes to incorrect that it displays red but it was light blue before

plugin settings:

{
  "catppuccin.accentColor": "blue",
  "catppuccin.boldKeywords": false,
  "catppuccin.bracketMode": "neovim",
  "catppuccin.colorOverrides": {
    "mocha": {
      "base": "#000000",
      "mantle": "#000000",
      "crust": "#000000"
    }
  },
  "catppuccin.extraBordersEnabled": false,
  "catppuccin.italicKeywords": false,
  "catppuccin.italicComments": false,
}

screenshot:

[winston]

False alarm? 😄

[Still Wu]

@nekowinston Yes, sorry for that. The color of tab.hoverBackground will automatically set to #000000 before so that I didn't notice any discomfort.

Then, after updating the plugin, it seems not to be set #000000, instead of red.

and I set it manually:

"catppuccin.customUIColors": {
    "mocha": {
      "tab.hoverBackground": "#000000"
    }
}

then everything goes fine

[winston]

Interesting, thanks for reporting this!

v3.7.1:

vscode/src/theme/uiColors.ts

Lines 404 to 413 in 4529b09

 // Tab Bar 
 "tab.activeBackground": palette.base, 
 "tab.activeBorder": accent, 
 "tab.activeBorderTop": transparent, 
 "tab.activeForeground": accent, 
 "tab.border": palette.mantle, 
 "tab.inactiveBackground": palette.mantle, 
 "tab.inactiveForeground": palette.overlay0, 
 "tab.activeModifiedBorder": palette.yellow, 
 "tab.inactiveModifiedBorder": opacity(palette.yellow, 0.3), 

v3.8.0:

vscode/src/theme/uiColors.ts

Lines 404 to 421 in 832dbda

 // Tab Bar 
 "tab.activeBackground": palette.base, 
 "tab.activeBorder": transparent, 
 "tab.activeBorderTop": accent, 
 "tab.activeForeground": accent, 
 "tab.activeModifiedBorder": palette.yellow, 
 "tab.border": palette.mantle, 
 "tab.hoverBackground": shade(palette.base, 0.1), 
 "tab.hoverBorder": transparent, 
 "tab.hoverForeground": accent, 
 "tab.inactiveBackground": palette.mantle, 
 "tab.inactiveForeground": palette.overlay0, 
 "tab.inactiveModifiedBorder": opacity(palette.yellow, 0.3), 
 "tab.lastPinnedBorder": accent, 
 "tab.unfocusedActiveBackground": palette.mantle, 
 "tab.unfocusedActiveBorder": transparent, 
 "tab.unfocusedActiveBorderTop": opacity(accent, 0.3), 
 "tab.unfocusedInactiveBackground": shade(palette.mantle, -0.05), 

It seems like

vscode/src/theme/uiColors.ts

Line 411 in 832dbda

 "tab.hoverBackground": shade(palette.base, 0.1), 

shade() potentially has an overflow problem with #000000?

Your tweak shouldn't be necessary, I'll investigate.

[Still Wu]

@nekowinston there is another similar situation that tab.unfocusedInactiveBackground also meets the problem

screenshot:

And I think it also due to the shade()

[winston]

Yeah, I confirmed the bug yesterday, but haven't managed to finish the PR yet, I'll probably do so in a few hours.

[Still Wu]

thank you for the hardworking 😊