fix waybar modules (#76)

modules/waybar/base.css

@@ -0,0 +1,65 @@
+window#waybar {
+    background: @base00;
+    color: @base05;
+}
+
+#wireplumber,
+#pulseaudio,
+#sndio {
+    padding: 0 5px;
+}
+#wireplumber.muted,
+#pulseaudio.muted,
+#sndio.muted {
+    padding: 0 5px;
+}
+#upower,
+#battery {
+    padding: 0 5px;
+}
+#upower.charging,
+#battery.Charging {
+    padding: 0 5px;
+}
+#network {
+    padding: 0 5px;
+}
+#network.disconnected {
+    padding: 0 5px;
+}
+#user {
+    padding: 0 5px;
+}
+#clock {
+    padding: 0 5px;
+}
+#backlight {
+    padding: 0 5px;
+}
+#cpu {
+    padding: 0 5px;
+}
+#disk {
+    padding: 0 5px;
+}
+#idle_inhibitor {
+    padding: 0 5px;
+}
+#temperature {
+    padding: 0 5px;
+}
+#mpd {
+    padding: 0 5px;
+}
+#language {
+    padding: 0 5px;
+}
+#keyboard-state {
+    padding: 0 5px;
+}
+#memory {
+    padding: 0 5px;
+}
+#window {
+    padding: 0 5px;
+}

modules/waybar/center.css

@@ -0,0 +1,88 @@
+window .modules-center #workspaces button {
+    background-color: @base07;
+    color: @base00;
+}
+.modules-center #wireplumber,
+.modules-center #pulseaudio,
+.modules-center #sndio {
+    background-color: @base09;
+    color: @base00;
+}
+.modules-center #workspaces button.focused,
+.modules-center #workspaces button.active {
+    background: @base03;
+}
+.modules-center #workspaces button.urgent {
+    background-color: @base08;
+}
+.modules-center #wireplumber.muted,
+.modules-center #pulseaudio.muted,
+.modules-center #sndio.muted {
+    background-color: @base0C;
+}
+.modules-center #upower,
+.modules-center #battery {
+    background-color: @base0D;
+    color: @base00;
+}
+.modules-center #upower.charging,
+.modules-center #battery.Charging {
+    background-color: @base0E;
+}
+.modules-center #network {
+    background-color: @base0B;
+    color: @base00;
+}
+.modules-center #network.disconnected {
+    background-color: @base0C;
+}
+.modules-center #user {
+    background-color: @base0F;
+    color: @base00;
+}
+.modules-center #clock {
+    background-color: @base03;
+    color: @base00;
+}
+.modules-center #backlight {
+    background-color: @base0E;
+    color: @base00;
+}
+.modules-center #cpu {
+    background-color: @base0B;
+    color: @base00;
+}
+.modules-center #disk {
+    background-color: @base02;
+    color: @base00;
+}
+.modules-center #idle_inhibitor {
+    background-color: @base06;
+    color: @base00;
+}
+.modules-center #temperature {
+    background-color: @base07;
+    color: @base00;
+}
+.modules-center #mpd {
+    background-color: @base02;
+    color: @base00;
+}
+.modules-center #language {
+    background-color: @base02;
+    color: @base00;
+}
+
+.modules-center #keyboard-state {
+    background-color: @base03;
+    color: @base00;
+}
+
+.modules-center #memory {
+    background-color: @base09;
+    color: @base00;
+}
+.modules-center #window {
+    background-color: @base0C;
+    color: @base00;
+}

modules/waybar/hm.nix

@@ -3,65 +3,66 @@ with config.lib.stylix.colors.withHashtag;
 with config.stylix.fonts;
 
 {
-  options.stylix.targets.waybar.enable = config.lib.stylix.mkEnableTarget "Waybar" true;
+  options.stylix.targets.waybar = {
+      enable = config.lib.stylix.mkEnableTarget "Waybar" true;
+      enableLeftBackColors = lib.mkOption {
+          type = lib.types.bool;
+          default = false;
+          description = lib.mdDoc "enables background colors on the left side of the bar";
+      };
+      enableCenterBackColors = lib.mkOption {
+          type = lib.types.bool;
+          default = false;
+          description = lib.mdDoc "enables background colors on the center of the bar";
+      };
+      enableRightBackColors = lib.mkOption {
+          type = lib.types.bool;
+          default = false;
+          description = lib.mdDoc "enables background colors on the right side of the bar";
+      };
+  };
 
   config = lib.mkIf config.stylix.targets.waybar.enable {
     programs.waybar.style = ''
-      * {
+    @define-color base00 ${base00}; @define-color base01 ${base01}; @define-color base02 ${base02}; @define-color base03 ${base03};
-          border: none;
+    @define-color base04 ${base04}; @define-color base05 ${base05}; @define-color base06 ${base06}; @define-color base07 ${base07};
-          border-radius: 0;
+
-          font-family: ${sansSerif.name};
+    @define-color base08 ${base08}; @define-color base09 ${base09}; @define-color base0A ${base0A}; @define-color base0B ${base0B};
-          font-size: ${builtins.toString sizes.desktop};
+    @define-color base0C ${base0C}; @define-color base0D ${base0D}; @define-color base0E ${base0E}; @define-color base0F ${base0F};
-      }
+    * {
-      window#waybar {
+        border: none;
-          background: ${base00};
+        border-radius: 0;
-          color: ${base05};
+        font-family: ${sansSerif.name};
-      }
+        font-size: ${builtins.toString sizes.desktop};
-      #workspaces button {
+    }
-          padding: 0 5px;
+    ''
-          background-color: ${base01};
+    + (builtins.readFile ./base.css)
-          color: ${base04};
+    + (if config.stylix.targets.waybar.enableLeftBackColors then builtins.readFile ./left.css else ''
-      }
+    .modules-left #workspaces button {
-      #workspaces button.focused, #workspaces button.active {
+        border-bottom: 3px solid transparent;
-          background: ${base02};
+    }
-      }
+    .modules-left #workspaces button.focused,
-      #workspaces button.urgent {
+    .modules-left #workspaces button.active {
-          background-color: ${base08};
+        border-bottom: 3px solid @base05;
-      }
+    }
-      #wireplumber, #pulseaudio, #sndio {
+    '')
-          background-color: ${base09};
+    + (if config.stylix.targets.waybar.enableCenterBackColors then builtins.readFile ./center.css else ''
-          color: ${base04};
+    .modules-center #workspaces button {
-          padding: 0 5px;
+        border-bottom: 3px solid transparent;
-      }
+    }
-      #wireplumber.muted, #pulseaudio.muted, #sndio.muted {
+    .modules-center #workspaces button.focused,
-          background-color: ${base0C};
+    .modules-center #workspaces button.active {
-      }
+        border-bottom: 3px solid @base05;
-      #upower, #battery {
+    }
-          background-color: ${base0D};
+    '')
-          color: ${base04};
+    + (if config.stylix.targets.waybar.enableRightBackColors then builtins.readFile ./right.css else ''
-          padding: 0 5px;
+    .modules-right #workspaces button {
-      }
+        border-bottom: 3px solid transparent;
-      #upower.charging, #battery.Charging {
+    }
-          background-color: ${base0E};
+    .modules-right #workspaces button.focused,
-      }
+    .modules-right #workspaces button.active {
-      #network {
+        border-bottom: 3px solid @base05;
-          background-color: ${base0B};
+    }
-          color: ${base04};
+    '');
-          padding: 0 5px;
-      }
-      #network.disconnected {
-          background-color: ${base0C};
-      }
-      #user {
-          background-color: ${base0F};
-          color: ${base04};
-          padding: 0 5px;
-      }
-      #clock {
-          background-color: ${base03};
-          color: ${base04};
-          padding: 0 5px;
-      }
-    '';
   };
 }

modules/waybar/left.css

@@ -0,0 +1,86 @@
+window .modules-left #workspaces button {
+    background-color: @base07;
+    color: @base00;
+}
+.modules-left #wireplumber,
+.modules-left #pulseaudio,
+.modules-left #sndio {
+    background-color: @base09;
+    color: @base00;
+}
+.modules-left #workspaces button.focused,
+.modules-left #workspaces button.active {
+    background: @base03;
+}
+.modules-left #workspaces button.urgent {
+    background-color: @base08;
+}
+.modules-left #wireplumber.muted,
+.modules-left #pulseaudio.muted,
+.modules-left #sndio.muted {
+    background-color: @base0C;
+}
+.modules-left #upower,
+.modules-left #battery {
+    background-color: @base0D;
+    color: @base00;
+}
+.modules-left #upower.charging,
+.modules-left #battery.Charging {
+    background-color: @base0E;
+}
+.modules-left #network {
+    background-color: @base0B;
+    color: @base00;
+}
+.modules-left #network.disconnected {
+    background-color: @base0C;
+}
+.modules-left #user {
+    background-color: @base0F;
+    color: @base00;
+}
+.modules-left #clock {
+    background-color: @base03;
+    color: @base00;
+}
+.modules-left #backlight {
+    background-color: @base0E;
+    color: @base00;
+}
+.modules-left #cpu {
+    background-color: @base0B;
+    color: @base00;
+}
+.modules-left #disk {
+    background-color: @base02;
+    color: @base00;
+}
+.modules-left #idle_inhibitor {
+    background-color: @base06;
+    color: @base00;
+}
+.modules-left #temperature {
+    background-color: @base07;
+    color: @base00;
+}
+.modules-left #mpd {
+    background-color: @base02;
+    color: @base00;
+}
+.modules-left #language {
+    background-color: @base02;
+    color: @base00;
+}
+.modules-left #keyboard-state {
+    background-color: @base03;
+    color: @base00;
+}
+.modules-left #memory {
+    background-color: @base09;
+    color: @base00;
+}
+.modules-left #window {
+    background-color: @base0C;
+    color: @base00;
+}

modules/waybar/right.css

@@ -0,0 +1,86 @@
+window .modules-right #workspaces button {
+    background-color: @base07;
+    color: @base00;
+}
+.modules-right #wireplumber,
+.modules-right #pulseaudio,
+.modules-right #sndio {
+    background-color: @base09;
+    color: @base00;
+}
+.modules-right #workspaces button.focused,
+.modules-right #workspaces button.active {
+    background: @base03;
+}
+.modules-right #workspaces button.urgent {
+    background-color: @base08;
+}
+.modules-right #wireplumber.muted,
+.modules-right #pulseaudio.muted,
+.modules-right #sndio.muted {
+    background-color: @base0C;
+}
+.modules-right #upower,
+.modules-right #battery {
+    background-color: @base0D;
+    color: @base00;
+}
+.modules-right #upower.charging,
+.modules-right #battery.Charging {
+    background-color: @base0E;
+}
+.modules-right #network {
+    background-color: @base0B;
+    color: @base00;
+}
+.modules-right #network.disconnected {
+    background-color: @base0C;
+}
+.modules-right #user {
+    background-color: @base0F;
+    color: @base00;
+}
+.modules-right #clock {
+    background-color: @base03;
+    color: @base00;
+}
+.modules-right #backlight {
+    background-color: @base0E;
+    color: @base00;
+}
+.modules-right #cpu {
+    background-color: @base0B;
+    color: @base00;
+}
+.modules-right #disk {
+    background-color: @base02;
+    color: @base00;
+}
+.modules-right #idle_inhibitor {
+    background-color: @base06;
+    color: @base00;
+}
+.modules-right #temperature {
+    background-color: @base07;
+    color: @base00;
+}
+.modules-right #mpd {
+    background-color: @base02;
+    color: @base00;
+}
+.modules-right #language {
+    background-color: @base02;
+    color: @base00;
+}
+.modules-right #keyboard-state {
+    background-color: @base03;
+    color: @base00;
+}
+.modules-right #memory {
+    background-color: @base09;
+    color: @base00;
+}
+.modules-right #window {
+    background-color: @base0C;
+    color: @base00;
+}