waybar powerline

waybar/config.jsonc

@@ -1,13 +1,47 @@
 {
     "layer": "top", // Waybar at top layer
+    "output": "DP-1", // Only display on on monitor
     "position": "top", // Waybar position (top|bottom|left|right)
     "height": 36, // Waybar height (to be removed for auto height)
     // Choose the order of the modules
-    "modules-left": ["custom/launcher", "wlr/taskbar", "custom/spacer", "niri/workspaces", "custom/spacer", "niri/window"],
+    "modules-left": [
-    "modules-center": ["custom/swaync", "clock"],
+        "custom/logo",
-    "modules-right": ["idle_inhibitor", "cpu", "memory", "temperature", "pulseaudio", "tray", "custom/power"],
+        "wlr/taskbar",
+        "custom/pl-taskbar",
+        "niri/workspaces",
+        "custom/pl-workspaces",
+        "niri/window",
+        "custom/pl-window"
+    ],
+    "modules-center": [
+        "custom/pl-swaync-before",
+        "custom/swaync",
+        "custom/pl-swaync",
+        "clock",
+        "custom/pl-clock"
+    ],
+    "modules-right": [
+        "custom/pl-idle-before",
+        "idle_inhibitor",
+        "custom/pl-idle",
+        "cpu",
+        "memory",
+        "temperature",
+        "custom/pl-stats",
+        "pulseaudio",
+        "custom/pl-pulse",
+        "tray",
+        "custom/pl-tray",
+        "custom/power"
+    ],
     // Modules configuration
+    "custom/logo": {
+        "format": "     ",
+        "on-click": "cosmic-app-library"
+    },
     "wlr/taskbar": {
+        "active-first": true,
+        "icon-size": 24,
         "on-click": "activate",
         "on-click-middle": "close",
         "app_ids-mapping": {
@@ -16,9 +50,6 @@
             "steam_app_2357570": "Overwatch 2.desktop"
         }
     },
-    "custom/spacer": {
-        "format": " "
-    },
     "idle_inhibitor": {
         "format": "{icon}",
         "format-icons": {
@@ -60,7 +91,7 @@
         "on-click-right": "exec wezterm -e btm"
     },
     "memory": {
-        "format": "{}% ",
+        "format": "{percentage}% / {used:0.1f}GiB / {avail:0.1f}GiB ",
         "on-click-right": "exec wezterm -e btm"
     },
     "temperature": {
@@ -85,7 +116,7 @@
             "critical": 15
         },
         "format": "{icon}",
-        "format-charging": "",
+        "format-charging": "󱐋",
         "format-plugged": "",
         "format-alt": "{capacity}% {time}",
         "format-icons": ["", "", "", "", ""]
@@ -124,7 +155,7 @@
         "format-source-muted": "",
         "format-icons": {
             "headphones": "",
-            "handsfree": "",
+            "handsfree": "",
             "headset": "",
             "phone": "",
             "portable": "",
@@ -168,5 +199,38 @@
       "on-click": "sleep 0.1 && swaync-client -t -sw",
       "on-click-right": "swaync-client -d -sw",
       "escape": true,
-  },
+    },
+    "custom/pl-taskbar": {
+        "format": ""
+    },
+    "custom/pl-workspaces": {
+        "format": ""
+    },
+    "custom/pl-window": {
+        "format": ""
+    },
+    "custom/pl-swaync": {
+        "format": ""
+    },
+    "custom/pl-clock": {
+        "format": ""
+    },
+    "custom/pl-idle": {
+        "format": ""
+    },
+    "custom/pl-stats": {
+        "format": ""
+    },
+    "custom/pl-pulse": {
+        "format": ""
+    },
+    "custom/pl-tray": {
+        "format": ""
+    },
+    "custom/pl-swaync-before": {
+        "format": ""
+    },
+    "custom/pl-idle-before": {
+        "format": ""
+    },
 }

waybar/style.css

@@ -1,162 +1,190 @@
+@import "themes/catppuccin-macchiato.css";
+
 * {
-  border: none;
-  border-radius: 0;
-  min-height: 0;
   font-family: NotoSans NF SemBd;
-  font-size: 14px;
+  font-size: 15px;
+  margin: 0px;
+  min-height: 0;
+  border-radius: 0;
+  color: @text;
 }
 
-window#waybar {
+#waybar {
-  /* background-color: rgba(30, 30, 46, 0.5); */
+  background-color: alpha(@base, 0.7);
-  background: transparent;
+  /* background: transparent; */
-  transition-property: background-color;
-  transition-duration: 0.5s;
 }
 
-window#waybar.hidden {
+#custom-logo {
-  opacity: 0.5;
+  background-image: url("./icons/pika-logo.svg");
+  background-color: @base;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 24px;
+  padding: 0px 8px 0px 24px;
+}
+
+#custom-pl-taskbar,
+#custom-pl-workspaces,
+#custom-pl-window,
+#custom-pl-swaync,
+#custom-pl-clock,
+#custom-pl-idle,
+#custom-pl-stats,
+#custom-pl-swaync-before,
+#custom-pl-pulse,
+#custom-pl-idle-before,
+#custom-pl-tray {
+  font-size: 26px;
+}
+
+#workspaces *,
+#window *,
+#custom-swaync,
+#clock,
+#idle_inhibitor,
+#cpu,
+#memory,
+#temperature,
+#pulseaudio,
+#custom-power,
+#custom-pl-tray {
+  color: @base;
+}
+
+#taskbar {
+  background-color: @base;
+}
+
+#custom-pl-taskbar {
+  color: @base;
+  background-color: @mauve;
 }
 
 #workspaces {
-  background-color: transparent;
+  background-color: @mauve;
 }
 
 #workspaces button,
 #taskbar button {
-  all: initial;
+  background: transparent;
-  /* Remove GTK theme values (waybar #1351) */
+  box-shadow: inherit;
-  min-width: 0;
+  text-shadow: inherit;
-  /* Fix weird spacing in materia (waybar #450) */
+  border: none;
-  box-shadow: inset 0 -3px transparent;
-  /* Use box-shadow instead of border so the text isn't offset */
-  padding: 6px 18px;
-  margin: 6px 3px;
-  border-radius: 4px;
-  background-color: #1e1e2e;
-  color: #cdd6f4;
 }
 
-#workspaces button.active,
+#workspaces button.active {
-#taskbar button.active {
+  box-shadow: inset 0 -4px @base;
-  color: #1e1e2e;
+  color: @base;
-  background-color: #cdd6f4;
-}
-
-#taskbar button {
-  padding: 6px 8px;
 }
 
 #workspaces button:hover {
+  background: transparent;
   box-shadow: inherit;
   text-shadow: inherit;
-  color: #1e1e2e;
+  box-shadow: inset 0 -4px @base;
-  background-color: #cdd6f4;
+  color: @base;
 }
 
-#workspaces button.urgent {
+#taskbar button.active {
-  background-color: #f38ba8;
+  box-shadow: inset 0 -4px @subtext1;
+  color: @base;
 }
 
-#custom-spacer {
+#taskbar button:hover {
-  margin: 12px;
+  box-shadow: inset 0 -4px @subtext1;
-  border-left: 2px solid white;
+}
+
+#custom-pl-workspaces {
+  color: @mauve;
+  background-color: @lavender;
+}
+
+#window {
+  background-color: @lavender;
+  color: @base;
+}
+
+#custom-pl-window {
+  color: @lavender;
+  background: transparent;
+}
+
+#custom-pl-swaync-before {
+  background: transparent;
+  color: @teal;
+}
+
+#custom-swaync {
+  background-color: @teal;
+}
+
+#custom-pl-swaync {
+  color: @teal;
+  background-color: @green;
+}
+
+#clock {
+  background-color: @green;
+}
+
+#custom-pl-clock {
+  color: @green;
+  background: transparent;
+}
+
+#custom-pl-idle-before {
+  background: transparent;
+  color: @yellow;
+}
+
+#idle_inhibitor {
+  background-color: @yellow;
+}
+
+#custom-pl-idle {
+  background: @peach;
+  color: @yellow;
 }
 
-#memory,
-#custom-power,
-#battery,
-#backlight,
-#wireplumber,
-#network,
-#clock,
 #cpu,
-#bluetooth,
+#memory,
-#pulseaudio,
+#temperature {
-#temperature,
+  background: @peach;
-#window,
+  padding: 0px 6px;
-#idle_inhibitor,
+}
-#custom-swaync,
+
+#custom-pl-stats {
+  color: @peach;
+  background-color: @red;
+}
+
+#pulseaudio {
+  background-color: @red;
+}
+
+#custom-pl-pulse {
+  color: @red;
+  background-color: @base;
+}
+
 #tray {
-  border-radius: 4px;
+  background-color: @base;
-  margin: 6px 3px;
+  padding: 0px 6px;
-  padding: 6px 12px;
+}
-  background-color: #1e1e2e;
+
-  color: #181825;
+#custom-pl-tray,
+#custom-power {
+  background-color: @sky;
 }
 
 #custom-power {
-  margin-right: 6px;
+  padding-right: 6px;
-}
-
-#custom-logo {
-  padding-right: 7px;
-  padding-left: 7px;
-  margin-left: 5px;
-  font-size: 15px;
-  border-radius: 8px 0px 0px 8px;
-  color: #1793d1;
-}
-
-#memory,
-#cpu {
-  background-color: #f5a97f;
-}
-
-#battery {
-  background-color: #f38ba8;
-}
-
-#battery.warning,
-#battery.critical,
-#battery.urgent {
-  background-color: #ff0000;
-  color: #FFFF00;
-}
-
-#battery.charging {
-  background-color: #a6e3a1;
-  color: #181825;
-}
-
-#backlight,
-#bluetooth {
-  background-color: #8aadf4;
-}
-
-#wireplumber,
-#pulseaudio {
-  background-color: #a6da95;
-}
-
-#network,
-#custom-swaync {
-  background-color: #8bd5ca;
-}
-
-#clock,
-#custom-power,
-#idle_inhibitor,
-#window {
-  color: #cdd6f4;
-}
-
-#power,
-#temperature {
-  background-color: #b7bdf8;
-}
-
-tooltip {
-  border-radius: 8px;
-  padding: 15px;
-  background-color: rgba(30, 30, 46, 0.8);
-}
-
-tooltip label {
-  padding: 5px;
 }
 
 menu {
-  border-radius: 8px;
+  background-color: alpha(@base, 0.7);
-  padding: 15px;
+}
-  background-color: rgba(30, 30, 46, 0.8);
+
+menu button:hover {
+  background-color: @sky;
 }

waybar/themes/catppuccin-macchiato.css

@@ -0,0 +1,26 @@
+@define-color rosewater #f4dbd6;
+@define-color flamingo #f0c6c6;
+@define-color pink #f5bde6;
+@define-color mauve #c6a0f6;
+@define-color red #ed8796;
+@define-color maroon #ee99a0;
+@define-color peach #f5a97f;
+@define-color yellow #eed49f;
+@define-color green #a6da95;
+@define-color teal #8bd5ca;
+@define-color sky #91d7e3;
+@define-color sapphire #7dc4e4;
+@define-color blue #8aadf4;
+@define-color lavender #b7bdf8;
+@define-color text #cad3f5;
+@define-color subtext1 #b8c0e0;
+@define-color subtext0 #a5adcb;
+@define-color overlay2 #939ab7;
+@define-color overlay1 #8087a2;
+@define-color overlay0 #6e738d;
+@define-color surface2 #5b6078;
+@define-color surface1 #494d64;
+@define-color surface0 #363a4f;
+@define-color base #24273a;
+@define-color mantle #1e2030;
+@define-color crust #181926;