refactor: use whiskers, adjust catppuccin-latte & add comments (#11)

Co-authored-by: sgoudham <sgoudham@gmail.com>

README.md

@@ -36,20 +36,17 @@
 
 ## Usage
 
-> Catppuccin is included in Zellij. More information about the zellij theme can be found in the [theme-gallery](https://zellij.dev/documentation/theme-gallery.html#catppuccin-latte)
+1. Catppuccin is [included in Zellij](https://zellij.dev/documentation/theme-gallery.html#catppuccin-latte)! To set Zellij to your preferred flavor, see https://zellij.dev/documentation/themes#getting-zellij-to-pick-up-the-theme.
 
-1. Edit your zellij [configuration](https://zellij.dev/documentation/configuration.html) file.
-2. Set `theme` to your preferred flavor.
-```kdl
-theme "catppuccin-mocha" // or latte, frappe and macchiato
-```
+### Manual
 
-Or it can be applied via CLI options `zellij options --theme catppuccin-mocha`.
+1. Copy the [`catppuccin.kdl`](catppuccin.kdl) file into your Zellij configuration file or themes directory.
+2. To set Zellij to your preferred flavor, see https://zellij.dev/documentation/themes#getting-zellij-to-pick-up-the-theme.
 
 ## 💝 Thanks to
 
--   [mainrs](https://github.com/mainrs)
--   [jaeheonji](https://github.com/jaeheonji)
+- [mainrs](https://github.com/mainrs)
+- [jaeheonji](https://github.com/jaeheonji)
 
  
 

catppuccin.kdl

@@ -0,0 +1,57 @@
+themes {
+  catppuccin-latte {
+    bg "#acb0be" // Surface2
+    fg "#4c4f69" // Text
+    red "#d20f39"
+    green "#40a02b"
+    blue "#1e66f5"
+    yellow "#df8e1d"
+    magenta "#ea76cb" // Pink
+    orange "#fe640b" // Peach
+    cyan "#04a5e5" // Sky
+    black "#e6e9ef" // Mantle
+    white "#4c4f69" // Text
+  }
+
+  catppuccin-frappe {
+    bg "#626880" // Surface2
+    fg "#c6d0f5" // Text
+    red "#e78284"
+    green "#a6d189"
+    blue "#8caaee"
+    yellow "#e5c890"
+    magenta "#f4b8e4" // Pink
+    orange "#ef9f76" // Peach
+    cyan "#99d1db" // Sky
+    black "#292c3c" // Mantle
+    white "#c6d0f5" // Text
+  }
+
+  catppuccin-macchiato {
+    bg "#5b6078" // Surface2
+    fg "#cad3f5" // Text
+    red "#ed8796"
+    green "#a6da95"
+    blue "#8aadf4"
+    yellow "#eed49f"
+    magenta "#f5bde6" // Pink
+    orange "#f5a97f" // Peach
+    cyan "#91d7e3" // Sky
+    black "#1e2030" // Mantle
+    white "#cad3f5" // Text
+  }
+
+  catppuccin-mocha {
+    bg "#585b70" // Surface2
+    fg "#cdd6f4" // Text
+    red "#f38ba8"
+    green "#a6e3a1"
+    blue "#89b4fa"
+    yellow "#f9e2af"
+    magenta "#f5c2e7" // Pink
+    orange "#fab387" // Peach
+    cyan "#89dceb" // Sky
+    black "#181825" // Mantle
+    white "#cdd6f4" // Text
+  }
+}

justfile

@@ -0,0 +1,5 @@
+_default:
+  @just --list
+
+build:
+  whiskers zellij.tera

zellij.tera

@@ -0,0 +1,25 @@
+---
+whiskers:
+  version: 2.4.0
+  filename: "catppuccin.kdl"
+---
+themes {
+{%- for identifier, flavor in flavors %}
+{%- set palette = flavor.colors %}
+  catppuccin-{{ identifier }} {
+    bg "#{{ palette.surface2.hex }}" // Surface2
+    fg "#{{ palette.text.hex }}" // Text
+    red "#{{ palette.red.hex }}"
+    green "#{{ palette.green.hex }}"
+    blue "#{{ palette.blue.hex }}"
+    yellow "#{{ palette.yellow.hex }}"
+    magenta "#{{ palette.pink.hex }}" // Pink
+    orange "#{{ palette.peach.hex }}" // Peach
+    cyan "#{{ palette.sky.hex }}" // Sky
+    black "#{{ palette.mantle.hex }}" // Mantle
+    white "#{{ palette.text.hex }}" // Text
+  }
+{%- if not loop.last %}
+{% endif -%}
+{%- endfor %}
+}