[Proposal] New theme definition spec

As pointed out in issue #2160, the theme definition spec doesn't follow any rules besides “green is the main colour for some reason”. When scrolling through the theme gallery page, I thought the same image was mistakenly being rendered for all themes. But no, they're all green-biased.

Here's some pictures of what I had to do to restore the dracula theme vibes: (It's important to notice that the current dracula theme absolutely follows a coherent implementation given zellij's interface.)

While it works, it's highly confusing and frustrating, and I believe the dev experience here could be vastly improved. For single file configurations or scripts, I use helix, and I've just noticed that they have a pretty good spec for themes:

# User Interface
# --------------
"ui.background" = { fg = "text", bg = "base" }

"ui.linenr" = { fg = "surface1" }
"ui.linenr.selected" = { fg = "lavender" }

"ui.statusline" = { fg = "text", bg = "mantle" }
"ui.statusline.inactive" = { fg = "surface2", bg = "mantle" }
"ui.statusline.normal" = { fg = "base", bg = "lavender", modifiers = ["bold"] }
"ui.statusline.insert" = { fg = "base", bg = "green", modifiers = ["bold"]  }
"ui.statusline.select" = { fg = "base", bg = "flamingo", modifiers = ["bold"]  }

"ui.popup" = { fg = "text", bg = "surface0" }
"ui.window" = { fg = "crust" }
"ui.help" = { fg = "overlay2", bg = "surface0" }

"ui.bufferline" = { fg = "surface1", bg = "mantle" }
"ui.bufferline.active" = { fg = "text", bg = "base", modifiers = ["bold", "italic"] }
"ui.bufferline.background" = { bg = "surface0" }

"ui.text" = "text" 
"ui.text.focus" = { fg = "text", bg = "surface0", modifiers = ["bold"] }

"ui.virtual" = "overlay0"
"ui.virtual.ruler" = { bg = "surface0" }
"ui.virtual.indent-guide" = "surface0"

"ui.selection" = { bg = "surface1" }

"ui.cursor" = { fg = "base", bg = "secondary_cursor" }
"ui.cursor.primary" = { fg = "base", bg = "rosewater" }
"ui.cursor.match" = { fg = "peach", modifiers = ["bold"] }

"ui.cursorline.primary" = { bg = "cursorline" }

"ui.highlight" = { bg = "surface1", modifiers = ["bold"] }

"ui.menu" = { fg = "overlay2", bg = "surface0" }
"ui.menu.selected" = { fg = "text", bg = "surface1", modifiers = ["bold"] }

"diagnostic.error" = { underline = { color = "red", style = "curl" } }
"diagnostic.warning" = { underline = { color = "yellow", style = "curl" } }
"diagnostic.info" = { underline = { color = "sky", style = "curl" } }
"diagnostic.hint" = { underline = { color = "teal", style = "curl" } }

error = "red"
warning = "yellow"
info = "sky"
hint = "teal"

[palette]
# catppuccin palette colors
rosewater = "#f5e0dc"
flamingo = "#f2cdcd"
pink = "#f5c2e7"
mauve = "#cba6f7"
red = "#f38ba8"
maroon = "#eba0ac"
peach = "#fab387"
yellow = "#f9e2af"
green = "#a6e3a1"
teal = "#94e2d5"
sky = "#89dceb"
sapphire = "#74c7ec"
blue = "#89b4fa"
lavender = "#b4befe"

text = "#cdd6f4"
subtext1 = "#bac2de"
subtext0 = "#a6adc8"
overlay2 = "#9399b2"
overlay1 = "#7f849c"
overlay0 = "#6c7086"
surface2 = "#585b70"
surface1 = "#45475a"
surface0 = "#313244"

base = "#1e1e2e"
mantle = "#181825"
crust = "#11111b"

# derived colors by blending existing palette colors
cursorline = "#2a2b3c"
secondary_cursor = "#b5a6a8"

(code stolen from catppuccin/helix)

I believe it could be greatly improved by stealing helix's interface. I'd be happy to write down a spec that works for zellij's current UI and implement it if the authors/maintainers are happy with my suggestion.