the great colorscheme migration

3 files changed, 60 insertions, 125 deletions

diff --git a/waybar/config b/waybar/config
index 032c3ed..8da3977 100644
--- a/waybar/config
+++ b/waybar/config
@@ -5,7 +5,7 @@
     // Choose the order of the modules
     "modules-left": ["sway/workspaces", "sway/mode", "sway/scratchpad", "custom/media"],
     "modules-center": ["sway/window"],
-    "modules-right": ["mpd", "idle_inhibitor", "pulseaudio", "backlight", "network", "temperature", "memory", "battery", "clock", "tray"],
+    "modules-right": ["mpd", "idle_inhibitor", "backlight", "pulseaudio", "network", "temperature", "memory", "battery", "clock", "tray"],
 
     // Modules configuration
     "sway/workspaces": {
diff --git a/waybar/macchiato.css b/waybar/macchiato.css
deleted file mode 100644
index 6880473..0000000
--- a/waybar/macchiato.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
-*
-* Catppuccin Macchiato palette
-* Maintainer: rubyowo
-*
-*/
-
-@define-color base   #24273a;
-@define-color mantle #1e2030;
-@define-color crust  #181926;
-
-@define-color text     #cad3f5;
-@define-color subtext0 #a5adcb;
-@define-color subtext1 #b8c0e0;
-
-@define-color surface0 #363a4f;
-@define-color surface1 #494d64;
-@define-color surface2 #5b6078;
-
-@define-color overlay0 #6e738d;
-@define-color overlay1 #8087a2;
-@define-color overlay2 #939ab7;
-
-@define-color blue      #8aadf4;
-@define-color lavender  #b7bdf8;
-@define-color sapphire  #7dc4e4;
-@define-color sky       #91d7e3;
-@define-color teal      #8bd5ca;
-@define-color green     #a6da95;
-@define-color yellow    #eed49f;
-@define-color peach     #f5a97f;
-@define-color maroon    #ee99a0;
-@define-color red       #ed8796;
-@define-color mauve     #c6a0f6;
-@define-color pink      #f5bde6;
-@define-color flamingo  #f0c6c6;
-@define-color rosewater #f4dbd6;
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 {