Add colours "color-modes" to ayu_light theme (helix-editor#4109)

* Rename "dark gray" to "light gray"

* Add colours for statusline modes

* Use UI background for inactive panes

runtime/themes/ayu_light.toml

@@ -34,23 +34,22 @@
 
 # Interface
 "ui.background"= { bg = "background" }
-"ui.cursor" = { bg = "yellow", fg = "dark_gray" }
+"ui.cursor" = { bg = "yellow", fg = "light_gray" }
 "ui.cursor.match" = { fg = "orange" }
-"ui.linenr" = { fg = "dark_gray" }
+"ui.linenr" = { fg = "light_gray" }
 "ui.linenr.selected" = { fg = "orange" }
 "ui.cursorline" = { bg = "black" }
-"ui.statusline" = { fg = "foreground", bg = "black" }
 "ui.popup" = { bg = "black" }
-"ui.window" = { fg = "dark_gray" }
+"ui.window" = { fg = "light_gray" }
 "ui.help" = { fg  = "foreground", bg = "black" }
 "ui.text" = { fg = "foreground" }
-"ui.text.focus" = { bg = "dark_gray", fg = "foreground" }
+"ui.text.focus" = { bg = "light_gray", fg = "foreground" }
 "ui.text.info" = { fg = "foreground" }
-"ui.virtual.whitespace" = { fg = "dark_gray" }
+"ui.virtual.whitespace" = { fg = "light_gray" }
 "ui.virtual.ruler" = { bg = "black" }
 "ui.menu" = { fg = "foreground", bg = "black" }
 "ui.menu.selected" = { bg = "orange", fg = "background" }
-"ui.selection" = { bg = "dark_gray" }
+"ui.selection" = { bg = "light_gray" }
 "warning" = { fg = "yellow" }
 "error" = { fg = "red", modifiers = ["bold"] }
 "info" = { fg = "blue", modifiers = ["bold"] }
@@ -59,23 +58,32 @@
 "diagnostic.info"= { fg = "blue", modifiers = ["underlined"] }
 "diagnostic.warning"= { fg = "yellow", modifiers = ["underlined"] }
 "diagnostic.error"= { fg = "red", modifiers = ["underlined"] }
-"ui.bufferline" = { fg = "gray", bg = "dark_gray" }
-"ui.bufferline.active" = { fg = "dark", bg = "background" }
+"ui.bufferline" = { fg = "ui_foreground", bg = "ui_background" }
+"ui.bufferline.active" = { fg = "ui_background", bg = "ui_foreground" }
+"ui.statusline" = { fg = "ui_foreground", bg = "ui_background" }
+"ui.statusline.inactive" = { fg = "ui_foreground", bg = "ui_background" }
+"ui.statusline.normal" = { fg = "white", bg = "light_blue" }
+"ui.statusline.insert" = { fg = "white", bg = "orange" }
+"ui.statusline.select" = { fg = "white", bg = "magenta" }
 
 "special" = { fg = "orange" }
 
 [palette]
 background = "#fcfcfc"
 foreground = "#5c6166"
 
+ui_foreground = "#8a9199"
+ui_background = "#f8f9fa"
+
 black = "#e7eaed"
+white = "#fcfcfc"
 blue = "#399ee6"
+light_blue = "#55b4d4"
 cyan = "#478acc"
-dark_gray = "#e7eaed"
+light_gray = "#e7eaed"
 gray = "#787b8099"
 green = "#86b300"
 magenta = "#a37acc"
 orange = "#fa8d3e"
 red = "#f07171"
 yellow = "#ffaa33"
-dark = "#131721"