waybar: add color schemes

etc/skel/.config/waybar/colors/frappe.css

@@ -0,0 +1,37 @@
+/*
+*
+* Catppuccin Frappe palette
+* Maintainer: rubyowo
+*
+*/
+
+@define-color base   #303446;
+@define-color mantle #292c3c;
+@define-color crust  #232634;
+
+@define-color text     #c6d0f5;
+@define-color subtext0 #a5adce;
+@define-color subtext1 #b5bfe2;
+
+@define-color surface0 #414559;
+@define-color surface1 #51576d;
+@define-color surface2 #626880;
+
+@define-color overlay0 #737994;
+@define-color overlay1 #838ba7;
+@define-color overlay2 #949cbb;
+
+@define-color blue      #8caaee;
+@define-color lavender  #babbf1;
+@define-color sapphire  #85c1dc;
+@define-color sky       #99d1db;
+@define-color teal      #81c8be;
+@define-color green     #a6d189;
+@define-color yellow    #e5c890;
+@define-color peach     #ef9f76;
+@define-color maroon    #ea999c;
+@define-color red       #e78284;
+@define-color mauve     #ca9ee6;
+@define-color pink      #f4b8e4;
+@define-color flamingo  #eebebe;
+@define-color rosewater #f2d5cf;

etc/skel/.config/waybar/colors/latte.css

@@ -0,0 +1,37 @@
+/*
+*
+* Catppuccin Latte palette
+* Maintainer: rubyowo
+*
+*/
+
+@define-color base   #eff1f5;
+@define-color mantle #e6e9ef;
+@define-color crust  #dce0e8;
+
+@define-color text     #4c4f69;
+@define-color subtext0 #6c6f85;
+@define-color subtext1 #5c5f77;
+
+@define-color surface0 #ccd0da;
+@define-color surface1 #bcc0cc;
+@define-color surface2 #acb0be;
+
+@define-color overlay0 #9ca0b0;
+@define-color overlay1 #8c8fa1;
+@define-color overlay2 #7c7f93;
+
+@define-color blue      #1e66f5;
+@define-color lavender  #7287fd;
+@define-color sapphire  #209fb5;
+@define-color sky       #04a5e5;
+@define-color teal      #179299;
+@define-color green     #40a02b;
+@define-color yellow    #df8e1d;
+@define-color peach     #fe640b;
+@define-color maroon    #e64553;
+@define-color red       #d20f39;
+@define-color mauve     #8839ef;
+@define-color pink      #ea76cb;
+@define-color flamingo  #dd7878;
+@define-color rosewater #dc8a78;

etc/skel/.config/waybar/colors/macchiato.css

@@ -0,0 +1,37 @@
+/*
+*
+* 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;

etc/skel/.config/waybar/colors/mocha.css

@@ -0,0 +1,37 @@
+/*
+*
+* Catppuccin Mocha palette
+* Maintainer: rubyowo
+*
+*/
+
+@define-color base   #1e1e2e;
+@define-color mantle #181825;
+@define-color crust  #11111b;
+
+@define-color text     #cdd6f4;
+@define-color subtext0 #a6adc8;
+@define-color subtext1 #bac2de;
+
+@define-color surface0 #313244;
+@define-color surface1 #45475a;
+@define-color surface2 #585b70;
+
+@define-color overlay0 #6c7086;
+@define-color overlay1 #7f849c;
+@define-color overlay2 #9399b2;
+
+@define-color blue      #89b4fa;
+@define-color lavender  #b4befe;
+@define-color sapphire  #74c7ec;
+@define-color sky       #89dceb;
+@define-color teal      #94e2d5;
+@define-color green     #a6e3a1;
+@define-color yellow    #f9e2af;
+@define-color peach     #fab387;
+@define-color maroon    #eba0ac;
+@define-color red       #f38ba8;
+@define-color mauve     #cba6f7;
+@define-color pink      #f5c2e7;
+@define-color flamingo  #f2cdcd;
+@define-color rosewater #f5e0dc;

etc/skel/.config/waybar/style.css

@@ -1,3 +1,5 @@
+@import "colors/macchiato.css";
+
 @keyframes blink-warning {
     70% {
         color: @wm_icon_bg;
@@ -5,7 +7,7 @@
 
     to {
         color: @wm_icon_bg;
-        background-color: @warning_color;
+        background-color: @yellow;
     }
 }
 
@@ -16,7 +18,7 @@
 
     to {
         color: @wm_icon_bg;
-        background-color: @error_color;
+        background-color: @red;
     }
 }
 
@@ -24,7 +26,7 @@
 * {
     border: 0px;
     border-radius: 0px;
-    color: #cad3f5;
+    color: @text;
     padding: 0 0;
     margin-right: 2px;
     margin-left: 2px;
@@ -38,7 +40,7 @@
 }
 
 window#waybar {
-    background: #24273a;
+    background: @base;
 }
 
 window#waybar.hidden {
@@ -47,30 +49,30 @@ window#waybar.hidden {
 
 #tags button {
     border-bottom: 2px;
-    border-color: #24273a;
+    border-color: @base;
     border-style: solid;
     margin-bottom: 3px;
     transition-property: none;
 }
 
 #tags button.focused {
-    color: #7dc4e4;
+    color: @sapphire;
-    border-color: #7dc4e4;
+    border-color: @sapphire;
 }
 
 #tags button.focused.occupied {
-    color: #7dc4e4;
+    color: @sapphire;
-    border-color: #7dc4e4;
+    border-color: @sapphire;
 }
 
 #tags button.occupied {
-    color: #939ab7;
+    color: @overlay2;
-    border-color: #939ab7;
+    border-color: @overlay2;
 }
 
 #tags button.urgent {
-    color: #ed8796;
+    color: @red;
-    border-color: #ed8796;
+    border-color: @red;
 }
 
 #clock,
@@ -95,39 +97,58 @@ window#waybar.hidden {
     margin-bottom: 3px;
 }
 
-#clock {
+#custom-menu {
-    color: #b7bdf8;
+    color: @green;
 }
 
-#custom-wlsunset {
+#custom-wf-recorder {
-    color: #f5bde6;
+    color: @red;
+    padding-right: 10px;
+}
+
+#clock {
+    color: @lavender;
+}
+
+#tray {
+    padding-left: 5px;
+    padding-right: 5px;
+    color: @rosewater;
 }
 
 #custom-playerctl {
-    color: #f0c6c6;
+    color: @flamingo;
 }
 
-#custom-power {
+#custom-wlsunset {
-    color: #cad3f5;
+    color: @pink;
 }
 
-#custom-clipboard {
+#idle_inhibitor {
-    color: #f5a97f;
+    color: @mauve;
-}
-
-#custom-menu {
-    color: #a6da95;
 }
 
 #custom-dunst {
-    color: #ed8796;
+    color: @red;
+}
+
+#custom-clipboard {
+    color: @maroon;
+}
+
+#cpu {
+    color: @peach;
+}
+
+#memory {
+    color: @yellow;
 }
 
 #battery {
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-direction: alternate;
-    color: #8bd5ca;
+    color: @green;
 }
 
 #battery.warning {
@@ -152,48 +173,30 @@ label:focus {
     background-color: #000000;
 }
 
-#cpu {
-    color: #eed49f;
-}
-
-#memory {
-    color: #a6da95;
-}
-
 #network {
-    color: #91d7e3;
+    color: @teal;
-}
-
-#bluetooth {
-    color: #7dc4e4;
-}
-
-#bluetooth.disabled {
-    color: @wm_icon_bg;
 }
 
 #network.disconnected {
     color: @wm_icon_bg
 }
 
+#bluetooth {
+    color: @sky;
+}
+
+#bluetooth.disabled {
+    color: @wm_icon_bg;
+}
+
 #pulseaudio {
-    color: #8aadf4;
+    color: @sapphire;
 }
 
 #pulseaudio.muted {
     color: @wm_icon_bg;
 }
 
-#custom-wf-recorder {
+#custom-power {
-    color: @error_color;
+    color: @lavender;
-    padding-right: 10px;
-}
-
-#tray {
-    padding-left: 5px;
-    padding-right: 5px;
-}
-
-#idle_inhibitor {
-    color: #c6a0f6;
 }