From 4e6fe14c179972a3b3576bb94bc0c66c430fce52 Mon Sep 17 00:00:00 2001
From: Severin Kaderli <severin@kaderli.dev>
Date: Fri, 13 Jan 2023 18:43:35 +0100
Subject: [PATCH] Switch to catppuccin theme for Waybar

Signed-off-by: Severin Kaderli <severin@kaderli.dev>
---
 system/.config/waybar/style.css | 70 ++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 27 deletions(-)

diff --git a/system/.config/waybar/style.css b/system/.config/waybar/style.css
index 912ae4f..d2d855e 100644
--- a/system/.config/waybar/style.css
+++ b/system/.config/waybar/style.css
@@ -1,14 +1,17 @@
+@define-color background-color #11111b;
+@define-color foreground-color #cdd6f4;
+
 * {
-    border: none;
-    border-radius: 0;
-    font-family: "Iosevka Nerd Font", sans-serif;
-    font-size: 14px;
-    min-height: 0;
+  border: none;
+  border-radius: 0;
+  font-family: "Iosevka Nerd Font", sans-serif;
+  font-size: 14px;
+  min-height: 0;
 }
 
 #waybar {
-    background-color: #18161d;
-    color: #A4A0AC;
+  background-color: transparent;
+  color: @foreground-color;
 }
 
 #tray,
@@ -17,39 +20,52 @@
 #clock,
 #battery,
 #custom-update,
-#custom-power {
-    padding: 0 10px;
+#custom-power,
+#custom-tauon,
+#window {
+  padding: 0 12px;
+  background: @background-color;
+  border-radius: 6px;
+}
+
+#workspaces button:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+
+#workspaces button:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
 }
 
 button {
-    background-image: none;
-    background-color: #18161d;
-    color: #A4A0AC;
-    padding: 0 20px;
+  background-image: none;
+  background-color: @background-color;
+  color: #cdd6f4;
+  padding: 0 12px;
 }
 
 button,
 button:active,
 button:hover {
-    box-shadow: none;
-    -gtk-icon-shadow: none;
-    background-image: none;
-    font-weight: normal;
-    box-shadow: none;
-    -gtk-icon-shadow: none;
-    text-shadow: none;
-    -gtk-icon-effect: none;
-    transition: background-color 0.1s;
+  box-shadow: none;
+  -gtk-icon-shadow: none;
+  background-image: none;
+  font-weight: normal;
+  box-shadow: none;
+  -gtk-icon-shadow: none;
+  text-shadow: none;
+  -gtk-icon-effect: none;
+  transition: background-color 0.1s;
 }
 
 button:active,
 button:hover {
-    background-color: #A4A0AC;
-    color: #18161d;
-
+  background-color: @foreground-color;
+  color: @background-color;
 }
 
 button.focused.current_output {
-    background-color: #A4A0AC;
-    color: #18161d;
+  background-color: @foreground-color;
+  color: @background-color;
 }