1 files changed, 59 insertions, 87 deletions

diff --git a/waybar/style.css b/waybar/style.css
index f9c9b92..2a1d9f8 100644
--- a/waybar/style.css
+++ b/waybar/style.css
@@ -1,4 +1,4 @@
-@import "macchiato.css";
+@import "colors.css";
 
 * {
     /* `otf-font-awesome` is required to be installed for icons */
@@ -7,8 +7,8 @@
 }
 
 window#waybar {
-    background-color: alpha(@base, 0);
-    color: @text;
+    background-color: alpha(@background, 0.9);
+    color: @foreground;
     transition-property: background-color;
     transition-duration: .5s;
 }
@@ -23,37 +23,44 @@ button {
     /* Avoid rounded borders under each button name */
     border: none;
     border-radius: 0;
-}
-
-/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-button:hover {
-    background: inherit;
-    box-shadow: inset 0 3px @rosewater;
+    color: @foreground;
 }
 
 #workspaces button {
     padding: 0 5px;
-    background-color: transparent;
-    color: @text;
+    /* background-color: transparent; */
+    /* color: @text; */
 }
 
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 #workspaces button:hover {
-    background: rgba(0, 0, 0, 0.2);
+    background: inherit;
+    box-shadow: inset 0 3px @color14;
 }
 
 #workspaces button.focused {
-    background-color: @surface1;
-    box-shadow: inset 0 3px @flamingo;
+    box-shadow: inset 0 3px @color14;
 }
 
 #workspaces button.urgent {
-    background-color: @red;
-    color: @mantle;
+    background-color: @color13;
+    color: @background;
+}
+
+#workspaces button.urgent.focused {
+    box-shadow: inset 0 3px @color0;
+    background-color: @color13;
+    color: @background;
+}
+
+#workspaces button:hover.urgent {
+    box-shadow: inset 0 3px @color0;
+    background-color: @color13;
+    color: @background;
 }
 
 #mode {
-    background-color: @surface1;
-    border-top: 3px solid @rosewater;
+    border-top: 3px solid @color10;
 }
 
 #clock,
@@ -73,7 +80,8 @@ button:hover {
 #scratchpad,
 #mpd {
     padding: 0 10px;
-    color: @text;
+    color: @color15;
+    border-top: 3px solid @color7;
 }
 
 #window,
@@ -91,20 +99,27 @@ button:hover {
     margin-right: 0;
 }
 
+#tray {
+}
+
+#tray > .passive {
+    -gtk-icon-effect: dim;
+}
+
+#tray > .needs-attention {
+    -gtk-icon-effect: highlight;
+    background-color: #eb4d4b;
+}
+
 #clock {
-    border-top: 3px solid @lavender;
-    color: @lavender;
 }
 
 #battery {
-    color: @blue;
-    border-top: 3px solid @blue;
     padding-right: 18px;
 }
 
 #battery.charging, #battery.plugged {
-    color: @surface0;
-    background-color: @green;
+    background-color: @color4;
     border-top: 0;
     padding-right: 11px;
 }
@@ -126,99 +141,56 @@ button:hover {
     animation-direction: alternate;
 }
 
-label:focus {
-    background-color: #000000;
-}
-
-#cpu {
-    border-top: 3px solid @teal;
-    color: @teal;
-
-}
-
 #memory {
-    border-top: 3px solid @sapphire;
     padding-right: 15px;
-    color: @sapphire;
 }
 
-#disk {
-    background-color: #964B00;
+#temperature {
+    padding-right: 12px;
 }
 
-#backlight {
-    border-top: 3px solid @peach;
-    color: @peach;
-    padding-right: 11px;
+#temperature.critical {
+    background-color: #eb4d4b;
+    border-top: 3px solid #eb4d4b;
+    color: #ffffff;
 }
 
 #network {
-    border-top: 3px solid @yellow;
-    color: @yellow;
     padding-right: 15px;
 }
 
 #network.disconnected {
-    border-top: 3px solid @red;
-    color: @red;
 }
 
-#pulseaudio {
-    border-top: 3px solid @maroon;
-    color: @maroon;
-}
-
-#pulseaudio.muted {
-    border-top: 3px solid @flamingo;
-    background-color: @flamingo;
-    color: @mantle;
-}
-
-#temperature {
-    border-top: 3px solid @green;
-    color: @green;
-    padding-right: 12px;
-}
-
-#temperature.critical {
-    background-color: #eb4d4b;
-    border-top: 3px solid #eb4d4b;
-    color: #ffffff;
-}
-
-#tray {
-    border-top: 3px solid @mauve;
+#backlight {
+    padding-right: 11px;
 }
 
-#tray > .passive {
-    -gtk-icon-effect: dim;
+#pulseaudio {
 }
 
-#tray > .needs-attention {
-    -gtk-icon-effect: highlight;
-    background-color: #eb4d4b;
+#pulseaudio.muted {
+    border-top: 3px solid @color14;
+    background-color: @color14;
+    color: @color0;
 }
 
 #idle_inhibitor {
-    border-top: 3px solid @mantle;
     padding-right: 14px;
 }
 
 #idle_inhibitor.activated {
-    background-color: @text;
-    color: @mantle;
-    border-top: 3px solid @subtext0;
+    background-color: @foreground;
+    color: @background;
+    border-top: 3px solid @color7;
 }
 
-#language {
-    color: @sapphire;
-    padding: 0 5px;
-    min-width: 16px;
-    border-top: 3px solid @sapphire;
+label:focus {
+    background-color: #000000;
 }
 
 #scratchpad {
-    background: @mantle;
+    background: @color1;
 }
 
 #scratchpad.empty {