waybar: use matugen

stow/.config/matugen/templates/colors.css

@@ -0,0 +1,7 @@
+/*
+* Css Colors
+* Generated with Matugen
+*/
+<* for name, value in colors *>
+    @define-color {{name}} {{value.default.hex}};
+<* endfor *>

stow/.config/waybar/.gitignore

@@ -0,0 +1 @@
+colors.css

stow/.config/waybar/style.css

@@ -1,13 +1,4 @@
-@define-color foreground #c0caf5;
-@define-color background #1a1b26;
-
-@define-color black #15161e;
-@define-color red #f7768e;
-@define-color green #9ece6a;
-@define-color yellow #e0af68;
-@define-color blue #7aa2f7;
-@define-color purple #bb9af7;
-@define-color lightblue #7dcfff;
+@import "colors.css";
 
 * {
     /* `otf-font-awesome` is required to be installed for icons */
@@ -24,7 +15,7 @@
 }
 
 window#waybar {
-    color: @foreground;
+    color: @primary;
     background-color: transparent;
     transition-property: background-color;
     transition-duration: .5s;
@@ -59,12 +50,12 @@ button:hover {
 
 #workspaces {
     background-color: @background;
-    color: @foreground;
+    color: @primary;
     border-radius: 10px;
 }
 
 #workspaces button {
-    color: @foreground;
+    color: @primary;
     padding: 0 5px;
 }
 
@@ -100,7 +91,7 @@ button:hover {
 #mpd {
     padding: 0 10px;
     background-color: @background;
-    color: @blue;
+    color: @primary;
 }
 
 #window,
@@ -113,7 +104,7 @@ button:hover {
     margin-right: 0px;
 
     background-color: @background;
-    color: @red;
+    color: @primary;
 }
 
 #custom-swaync {
@@ -121,14 +112,14 @@ button:hover {
     border-bottom-left-radius: 0px;
     margin-left: 0px;
 
-    background-color: @red;
+    background-color: @primary;
     color: @background;
     padding: 10px;
 }
 
 #battery {
     background-color: @background;
-    color: @green;
+    color: @secondary;
 }
 
 #battery.charging, #battery.plugged {
@@ -155,55 +146,55 @@ button:hover {
 }
 
 #cpu {
-    background-color: @blue;
+    background-color: @primary;
     color: #000000;
 }
 
 #memory {
     background-color: @background;
-    color: @green;
+    color: @secondary;
 }
 
 #disk {
     background-color: @background;
-    color: @yellow;
+    color: @tertiary;
 }
 
 #backlight {
     background-color: @background;
-    color: @yellow;
+    color: @tertiary;
 }
 
 #network {
     background-color: @background;
-    color: @purple;
+    color: @secondary;
 }
 
 #network.disconnected {
     background-color: @background;
-    color: @red;
+    color: @error;
 }
 
 #wireplumber {
     background-color: @background;
-    color: @yellow;
-/*    color: @foreground;*/
+    color: @tertiary;
+/*    color: @primary;*/
 }
 
 #wireplumber.muted {
     background-color: @background;
-    color: @red;
+    color: @error;
 }
 
 #custom-media {
     background-color: @background;
-    color: @yellow;
+    color: @tertiary;
     min-width: 100px;
 }
 
 #tray {
     background-color: @background;
-    color: @foreground;
+    color: @primary;
 }
 
 #tray > .passive {
@@ -221,7 +212,7 @@ button:hover {
 
 #privacy-item {
     padding: 0 5px;
-    color: @foreground;
+    color: @primary;
 }
 
 
@@ -230,67 +221,67 @@ button:hover {
  */
 
 #clock:hover {
-    background-color: @red;
+    background-color: @primary;
     color: @background;
 }
 
 #custom-swaync:hover {
     background-color: @background;
-    color: @red;
+    color: @primary;
 }
 
 #battery:hover {
-    background-color: @green;
+    background-color: @secondary;
     color: @background;
 }
 
 #cpu:hover {
-    background-color: @blue;
+    background-color: @primary;
     color: @background;
 }
 
 #memory:hover {
-    background-color: @green;
+    background-color: @secondary;
     color: @background;
 }
 
 #disk:hover {
     background-color: @background;
-    color: @yellow;
+    color: @tertiary;
 }
 
 #backlight:hover {
-    background-color: @yellow;
+    background-color: @tertiary;
     color: @background;
 }
 
 #network:hover {
-    background-color: @purple;
+    background-color: @secondary;
     color: @background;
 }
 
 #network.disconnected:hover {
-    background-color: @red;
+    background-color: @error;
     color: @background;
 }
 
 #wireplumber:hover {
-    background-color: @yellow;
+    background-color: @tertiary;
     color: @background;
 }
 
 #wireplumber.muted:hover {
-    background-color: @red;
+    background-color: @error;
     color: @background;
 }
 
 #custom-media:hover {
-    background-color: @yellow;
+    background-color: @tertiary;
     color: @background;
 }
 
 #tray:hover {
-    background-color: @foreground;
+    background-color: @primary;
     color: @background;
 }
 
@@ -299,6 +290,6 @@ button:hover {
 }
 
 #privacy-item:hover {
-    background-color: @foreground;
+    background-color: @primary;
     color: @background;
 }