Make lightline lighter

[mambusskruj]

Little play with lightline theming. Please, consider a look.

Before:

After (commit 1):

After (commit 2):

After (commit 3):

[mambusskruj]

Ah, for commit 2 and 3 make run needed to see changes. Sorry.

[cideM]

Thank you for bringing this up. The lightline colors are totally off right now. My general thinking is that this should be tied to the StatusLine HL somehow. I also played around with a bit and tried two things: starting with the statusline HL group for the middle component, getting either darker or brighter towards the outside. Brighter looked strange, darker looks nice.

I also discovered that the order in which lightline groups need to be defined is not intuitive to me. The order of the lightline groups for normal.right for example need to be reversed.

Lastly, using the "light" colors for background for the left most component is maybe a bit more inline with the rest of the theme, but the green color is hard to discern then. I really need to take another look at the colors from the Rams palette and see what kind of green might be better suited to achieve a good contrast.

Anyway, here's what it would look like then:

diff --git a/colors/yui.vim b/colors/yui.vim
index a703000..641082a 100644
--- a/colors/yui.vim
+++ b/colors/yui.vim
@@ -117,7 +117,7 @@ hi SpellCap guifg=NONE ctermfg=NONE guibg=NONE ctermbg=NONE guisp=#f8acac gui=un
 hi SpellLocal guifg=fg ctermfg=fg guibg=NONE ctermbg=NONE
 hi SpellRare guifg=fg ctermfg=fg guibg=NONE ctermbg=NONE
 hi Statement guifg=fg ctermfg=fg guibg=NONE ctermbg=NONE gui=italic cterm=italic
-hi StatusLine guifg=#e0d5ca ctermfg=188 guibg=#453a2c ctermbg=237 gui=reverse cterm=reverse
+hi StatusLine guifg=#453a2c ctermfg=237 guibg=#e0d5ca ctermbg=188 gui=NONE cterm=NONE
 hi StatusLineNC guifg=#ebe4dd ctermfg=254 guibg=#5f503e ctermbg=239
 hi! link StatusLineTerm StatusLine
 hi! link StatusLineTermNC StatusLineNC
@@ -342,54 +342,54 @@ if s:yui_lightline_value ==? v:true
    let s:p = {'normal': {}, 'inactive': {}, 'insert': {}, 'replace': {}, 'visual': {}, 'tabline': {}}
    let s:p.visual.left = [
        \['#dcd7f9', '#6132d7', 189, 62],
-       \['#f6f3f0', '#72604b', 255, 59],
+       \['#453a2c', '#e0d5ca', 237, 188],
        \]
    let s:p.tabline.tabsel = [
-       \['#f6f3f0', '#72604b', 255, 59],
+       \['#453a2c', '#e0d5ca', 237, 188],
        \]
    let s:p.tabline.middle = [
-       \['#5f503e', '#f6f3f0', 239, 255],
+       \['#453a2c', '#ebe4dd', 237, 254],
        \]
    let s:p.tabline.left = [
-       \['#72604b', '#e0d5ca', 59, 188],
+       \['#72604b', '#ebe4dd', 59, 254],
        \]
    let s:p.replace.left = [
        \['#fdfcfb', '#ed3f1c', 231, 202],
-       \['#f6f3f0', '#72604b', 255, 59],
+       \['#453a2c', '#e0d5ca', 237, 188],
        \]
    let s:p.normal.warning = [
        \['#fef0e8', '#7c4f18', 255, 94],
        \]
    let s:p.normal.right = [
-       \['#f6f3f0', '#5f503e', 255, 239],
-       \['#f6f3f0', '#72604b', 255, 59],
-       \['#453a2c', '#867159', 237, 95],
+       \['#453a2c', '#d6c7b6', 237, 187],
+       \['#453a2c', '#d6c7b6', 237, 187],
+       \['#453a2c', '#e0d5ca', 237, 188],
        \]
    let s:p.normal.middle = [
-       \['#5f503e', '#867159', 239, 95],
+       \['#453a2c', '#ebe4dd', 237, 254],
        \]
    let s:p.normal.left = [
-       \['#e2dba3', '#4e4b36', 187, 238],
-       \['#f6f3f0', '#72604b', 255, 59],
+       \['#4e4b36', '#e2dba3', 238, 187],
+       \['#453a2c', '#e0d5ca', 237, 188],
        \]
    let s:p.normal.error = [
-       \['#350303', '#f8acac', 233, 217],
+       \['#f8acac', '#350303', 217, 233],
        \]
    let s:p.insert.left = [
-       \['#d9e0e3', '#4a5054', 253, 239],
-       \['#f6f3f0', '#72604b', 255, 59],
+       \['#4a5054', '#d9e0e3', 239, 253],
+       \['#453a2c', '#e0d5ca', 237, 188],
        \]
    let s:p.inactive.right = [
-       \['#72604b', '#d6c7b6', 59, 187],
-       \['#72604b', '#d6c7b6', 59, 187],
-       \['#72604b', '#d6c7b6', 59, 187],
+       \['#72604b', '#ebe4dd', 59, 254],
+       \['#72604b', '#ebe4dd', 59, 254],
+       \['#72604b', '#ebe4dd', 59, 254],
        \]
    let s:p.inactive.middle = [
-       \['#72604b', '#e0d5ca', 59, 188],
+       \['#72604b', '#ebe4dd', 59, 254],
        \]
    let s:p.inactive.left = [
-       \['#72604b', '#d6c7b6', 59, 187],
-       \['#72604b', '#d6c7b6', 59, 187],
+       \['#72604b', '#ebe4dd', 59, 254],
+       \['#72604b', '#ebe4dd', 59, 254],
        \]
    let g:lightline#colorscheme#yui#palette = s:p
 endif
diff --git a/template/yui.lua b/template/yui.lua
index 092a246..3f6ee14 100644
--- a/template/yui.lua
+++ b/template/yui.lua
@@ -131,7 +131,7 @@ M.groups = {
        { name = "SpellLocal", guifg = "fg", guibg = "NONE" },
        { name = "SpellRare", guifg = "fg", guibg = "NONE" },
        { name = "Statement", guifg = "fg", guibg = "NONE", gui = "italic" },
-       { name = "StatusLine", guifg = c.white2, guibg = c.black1, gui = "reverse" },
+       { name = "StatusLine", guifg = c.black1, guibg = c.white2, gui = "NONE" },
        { name = "StatusLineNC", guifg = c.white3, guibg = c.black2 },
        { name = "Terminal", guifg = "fg", guibg = "bg" },
        { name = "Todo", link = "WarningMsg" },
@@ -371,27 +371,30 @@ M.groups = {

 local lightline = {
    normal = {
-       left = { { c.light_green, c.dark_green }, { c.white4, c.black3 } },
-       right = { { c.white4, c.black2 }, { c.white4, c.black3 }, { c.black1, c.black4 } },
-       middle = { { c.black2, c.black4 } },
-       error = { { c.dark_red, c.light_red } },
+       left = { { c.dark_green, c.light_green }, { c.black1, c.white2 } },
+       right = { { c.black1, c.white1 }, { c.black1, c.white1 }, { c.black1, c.white2 } },
+    --                ^                         ^
+    --                |                         +-- second to last from the right
+    --                +--- last component on the right
+       middle = { { c.black1, c.white3 } },
+       error = { { c.light_red, c.dark_red } },
        warning = { { c.light_yellow, c.dark_yellow } },
    },
    insert = {
-       left = { { c.light_blue, c.dark_blue }, { c.white4, c.black3 } },
+       left = { { c.dark_blue, c.light_blue }, { c.black1, c.white2 } },
    },
    visual = {
-       left = { { c.accent5, c.accent2 }, { c.white4, c.black3 } },
+       left = { { c.accent5, c.accent2 }, { c.black1, c.white2 } },
    },
    replace = {
-       left = { { c.white5, c.alternative_accent }, { c.white4, c.black3 } },
+       left = { { c.white5, c.alternative_accent }, { c.black1, c.white2 } },
    },
    inactive = {
-       right = { { c.black3, c.white1 }, { c.black3, c.white1 }, { c.black3, c.white1 } },
-       middle = { { c.black3, c.white2 } },
+       right = { { c.black3, c.white3 }, { c.black3, c.white3 }, { c.black3, c.white3 } },
+       middle = { { c.black3, c.white3 } },
    },
    tabline = {
-       middle = { { c.black2, c.white4 } },
+       middle = { { c.black1, c.white3 } },
    },
 }
 lightline.inactive.left = { table.unpack(lightline.inactive.right, 2) }

[cideM]

As you can see, the last two components on the right side actually use the same color. I'll have to add another color for this, because I ran out of darker whites. Maybe those shouldn't be part of the c table but rather be generated dynamically just for the sake of lightline. Could start with white3 and then always dark it by 10 degrees for each component on either side.

[mambusskruj]

My general thinking is that this should be tied to the StatusLine HL somehow.

Right, I see. Because lightline is just an extension to it.

Lastly, using the "light" colors for background for the left most component is maybe a bit more inline with the rest of the theme, but the green color is hard to discern then. I really need to take another look at the colors from the Rams palette and see what kind of green might be better suited to achieve a good contrast.

Yes, contrast is a little weak, but generally it looks nice already.

As you can see, the last two components on the right side actually use the same color. I'll have to add another color for this, because I ran out of darker whites. Maybe those shouldn't be part of the c table but rather be generated dynamically just for the sake of lightline. Could start with white3 and then always dark it by 10 degrees for each component on either side.

So we keep this PR in progress for now, and you'll update it later with few tweaks?

[cideM]

https://github.com/cideM/yui/pull/38