Waybar: add catppuccin-style config + fonts

home/sam/config/waybar/config.jsonc

@@ -1,8 +1,13 @@
 {
   "layer": "top",
   "position": "top",
-  "height": 30,
-  "modules-left": ["niri/workspaces"],
+  "height": 32,
+
+  "modules-left": ["wlr/workspaces"],
   "modules-center": ["clock"],
-  "modules-right": ["pulseaudio", "network", "tray"]
+  "modules-right": ["pulseaudio", "network", "tray"],
+
+  "clock": { "format": "{:%a %d %b %H:%M}" },
+  "pulseaudio": { "format": " {volume}%" },
+  "network": { "format-wifi": " {signalStrength}%", "format-ethernet": "󰈀", "format-disconnected": "󰖪" }
 }

home/sam/config/waybar/style.css

@@ -1,11 +1,43 @@
-* { font-size: 14px; }
+@define-color base #24273a;
+@define-color mantle #1e2030;
+@define-color text #cad3f5;
+@define-color blue #8aadf4;
+@define-color green #a6da95;
+@define-color red #ed8796;
+@define-color overlay0 #6e738d;
+
+* {
+  font-family: "JetBrainsMono Nerd Font", "Font Awesome 6 Free", sans-serif;
+  font-size: 14px;
+  border: none;
+  border-radius: 0;
+  min-height: 0;
+}
 
 window#waybar {
-  background: @theme_bg_color;
-  color: @theme_fg_color;
+  background: @mantle;
+  color: @text;
+}
+
+#workspaces button {
+  padding: 0 10px;
+  margin: 6px 4px;
+  background: transparent;
+  color: @overlay0;
 }
 
 #workspaces button.focused {
-  background: @theme_selected_bg_color;
-  color: @theme_selected_fg_color;
+  background: @blue;
+  color: @base;
+  border-radius: 8px;
+}
+
+#clock,
+#pulseaudio,
+#network,
+#tray {
+  padding: 0 12px;
+  margin: 6px 4px;
+  background: @base;
+  border-radius: 8px;
 }