waybar for mee<3

modules/user.nix

@@ -11,7 +11,6 @@
     ./user/qt.nix
     ./user/sops.nix
     ./user/ssh.nix
-    ./user/waybar.nix
     ./user/yazi.nix
     ./user/zsh.nix
 

modules/user/waybar.nix

@@ -1,151 +0,0 @@
-{ osConfig, config, pkgs, ... }: {
-  home.packages = with pkgs; [
-    font-awesome
-    nerd-fonts.symbols-only
-    playerctl
-    cava
-  ];
-  
-  programs.waybar = {
-    enable = true;
-    systemd.enable = true;
-
-    settings.mainBar = {
-      modules-left = [
-        "hyprland/workspaces"
-        "hyprland/language"
-        "keyboard-state"
-        "cava"
-      ];
-
-      modules-center = [
-        "mpris"
-      ];
-
-      modules-right = [
-        "tray"
-        "group/system"
-        "pulseaudio"
-        "battery"
-        "clock"
-      ];
-
-      cava = {
-        bars = 14;
-        sleep_timer = 5;
-        hide_on_silence = true;
-        bar_delimiter = 0;
-        input_delay = 0;
-        format-icons = [" " "▁" "▂" "▃" "▄" "▅" "▆" "▇" "█"];
-      };
-
-      clock = {
-        tooltip = false;
-        interval = 5;
-        format = "{:L%d %b - %H:%M %a}";
-      };
-
-      pulseaudio = {
-        format = "{icon} {volume}%";
-        format-icons = {
-          headphone =  "";
-          hands-free =  "";
-          headset =  "";
-          phone =  "";
-          phone-muted =  "";
-          portable =  "";
-          car =  "";
-          default =  ["" ""];
-        };
-        on-click = "ghostty --title=pulsemixer -e pulsemixer";
-      };
-
-      mpris = {
-        format = "{dynamic}";
-        dynamic-len = if osConfig.host.laptop then 32 else 64;
-        dynamic-order = [ "title" "artist" "album" ];
-      };
-
-      battery = {
-        interval = 5;
-        states = {
-          warning = 30;
-          critical = 15;
-        };
-        format = "{icon} {capacity}%";
-        format-icons = {
-          default = ["󰂎" "󰁺" "󰁻" "󰁼" "󰁽" "󰁾" "󰁿" "󰂀" "󰂁" "󰂂" "󰁹"];
-          charging = ["󰢟" "󰢜" "󰂆" "󰂇" "󰂈" "󰢝" "󰂉" "󰢞" "󰂊" "󰂋" "󰂅"];
-        };
-      };
-
-      "keyboard-state" = {
-        capslock = true;
-        format = "{icon}";
-        format-icons = {
-          locked = "CAPS";
-          unlocked = "";
-        };
-      };
-
-      "hyprland/language" = {
-        format-en = "en";
-        format-ru = "ru";
-      };
-
-
-      "group/system" = {
-        orientation = "inherit";
-          drawer = {
-            transition-duration = 500;
-            transition-left-to-right = false;
-          };
-          modules = [
-            "network"
-            "custom/mem"
-            "cpu"
-            "temperature"
-          ];
-      };
-
-	    network = {
-        format = "{ifname}";
-        format-wifi = " {essid} ({signalStrength}%)";
-        format-ethernet = "{ifname}";
-        format-disconnected = "";
-        tooltip-format = "{ipaddr}";
-        max-length = 50;
-        on-click = "ghostty --title=nmtui -e nmtui";
-      };
-
-      "custom/weather" = {
-        format = "{}";
-        tooltip = true;
-        interval = 1800;
-        exec = "python3 $HOME/.config/waybar/scripts/wttr.py";
-        return-type = "json";
-      };
-
-      "custom/mem" = {
-        format = "{} ";
-        interval = 3;
-        exec = "free -h | awk '/Mem:/{printf $3}'";
-        tooltip = false;
-      };
-
-      cpu = {
-        interval = 2;
-        format = "{usage}% ";
-        min-length = 6;
-      };
-
-      temperature = {
-        hwmon-path = "/sys/class/hwmon/hwmon5/temp1_input";
-        critical-threshold = 80;
-        format = "{temperatureC}°C {icon}";
-        format-icons = ["" "" "" "" ""];
-        tooltip = false;
-      };
-    };
-  };
-}

user/chest/modules/waybar.nix

@@ -1,142 +1,321 @@
-{ config, pkgs, ... }: {
+{ osConfig, config, pkgs, lib, ... }: {
-  programs.waybar.settings.mainBar.spacing = 4;
+  home.packages = with pkgs; [
-  programs.waybar.style = let
+    font-awesome
-    colors = config.lib.stylix.colors.withHashtag;
+    nerd-fonts.symbols-only
-    accent = colors.base0E;
+    playerctl
-    scssFile = pkgs.writeText "waybar.scss" /*scss*/ ''
+    cava
-      window#waybar {
+    pulsemixer
-        background: ${colors.base00}80;
+  ];
-        color: ${colors.base05};
-        font-weight: bold;
-        font-size: .85em;
-      }
 
-      #mpris,
+  programs.waybar = {
-      #pulseaudio,
+    enable = true;
-      #network,
+    systemd.enable = true;
-      #battery,
-      #cpu,
-      #temperature,
-      #custom-mem,
-      #clock {
-        background: ${colors.base01};
-        padding: 8px;
-      }
 
-      #language { padding: 8px; }
+    settings.mainBar = {
+      modules-center = [
+        "group/left"
+        "group/center"
+        "group/right"
+      ];
 
-      #workspaces,
-      #tray {
-        background: ${colors.base01};
-      }
 
-      #workspaces button {
+      "group/left" = {
-        color: ${colors.base05};
+        orientation = "inherit";
-        padding: 0 2px;
+        modules = [
-        border-radius: 999px;
+          "hyprland/workspaces"
-        border: 1pt solid transparent;
+          "custom/sep-left"
-        min-width: 20px;
+          "hyprland/language"
+          "keyboard-state"
+        ];
+      };
 
-        &:hover { background: ${colors.base02}; }
+      "group/center" = {
+        orientation = "inherit";
+        modules = [
+          "cava"
+          "mpris"
+        ];
+      };
 
-        &.active {
+      "group/right" = {
-          background: ${accent};
+        orientation = "inherit";
-          color: ${colors.base00};
+        modules = [
-          min-width: 30px;
+          "tray"
+          "custom/sep-left"
+          "group/system"
+          "custom/sep-left"
+          "pulseaudio"
+          "custom/sep-left"
+          "battery"
+          "clock"
+        ];
+      };
 
-          &:hover {
+
-            border-color: ${accent};
+      cava = {
-            background: ${colors.base02};
+        bars = 9;
-            color: ${accent};
+        bar_delimiter = 0;
-          }
+        stereo = false;
+        input_delay = 0;
+        format-icons = [" " "▁" "▂" "▃" "▄" "▅" "▆" "▇" "█"];
+      };
+
+      clock = {
+        tooltip = false;
+        interval = 5;
+        format = "{:L%d %b - %H:%M %a}";
+      };
+
+      pulseaudio = {
+        format = "{icon} {volume}%";
+        format-icons = {
+          headphone =  "";
+          hands-free =  "";
+          headset =  "";
+          phone =  "";
+          phone-muted =  "";
+          portable =  "";
+          car =  "";
+          default =  ["" ""];
+        };
+        on-click = "ghostty --title=pulsemixer -e pulsemixer";
+      };
+
+      mpris = {
+        format = "{dynamic}";
+        dynamic-len = if osConfig.host.laptop then 16 else 32;
+        dynamic-order = [ "title" "artist" "album" ];
+      };
+
+      battery = {
+        interval = 5;
+        states = {
+          warning = 30;
+          critical = 15;
+        };
+        format = "{icon} {capacity}% | ";
+        format-icons = {
+          default = ["󰂎" "󰁺" "󰁻" "󰁼" "󰁽" "󰁾" "󰁿" "󰂀" "󰂁" "󰂂" "󰁹"];
+          charging = ["󰢟" "󰢜" "󰂆" "󰂇" "󰂈" "󰢝" "󰂉" "󰢞" "󰂊" "󰂋" "󰂅"];
+        };
+      };
+
+      "custom/sep-left" = {
+        format = " | ";
+        tooltip = false;
+      };
+
+      "keyboard-state" = {
+        capslock = true;
+        format = "{icon}";
+        format-icons = {
+          locked = "CAPS";
+          unlocked = "";
+        };
+      };
+
+      "hyprland/language" = {
+        format-en = "en";
+        format-ru = "ru";
+      };
+
+      "group/system" = {
+        orientation = "inherit";
+          drawer = {
+            transition-duration = 500;
+            transition-left-to-right = false;
+          };
+          modules = [
+            "network"
+            "custom/mem"
+            "cpu"
+            "temperature"
+          ];
+      };
+
+      network = {
+        format = "{ifname}";
+        format-wifi = " {essid} ({signalStrength}%)";
+        format-ethernet = "{ifname}";
+        format-disconnected = "";
+        tooltip-format = "{ipaddr}";
+        max-length = 50;
+        on-click = "ghostty --title=nmtui -e nmtui";
+      };
+
+      "custom/weather" = {
+        format = "{}";
+        tooltip = true;
+        interval = 1800;
+        exec = "python3 $HOME/.config/waybar/scripts/wttr.py";
+        return-type = "json";
+      };
+
+      "custom/mem" = {
+        format = "{} ";
+        interval = 3;
+        exec = "free -h | awk '/Mem:/{printf $3}'";
+        tooltip = false;
+      };
+
+      cpu = {
+        interval = 2;
+        format = "{usage}% ";
+        min-length = 6;
+      };
+
+      temperature = {
+        hwmon-path = "/sys/class/hwmon/hwmon5/temp1_input";
+        critical-threshold = 80;
+        format = "{temperatureC}°C {icon}";
+        format-icons = ["" "" "" "" ""];
+        tooltip = false;
+      };
+    };
+
+    style = let
+      colors = config.lib.stylix.colors.withHashtag;
+      accent = colors.base0E;
+      scssFile = pkgs.writeText "waybar.scss" /*scss*/ ''
+        window#waybar {
+          background: transparent;
+          color: ${colors.base05};
+          font-weight: bold;
+          font-size: .85em;
+          & > * { padding: 0 0 6px 0; }
         }
-      }
 
-      #mpris {
+        .modules-center {
-        border-radius: 0 0 20px 20px;
+          background: ${colors.base01}CC;
-        padding: 10px;
+          border-radius: 12px;
-        &:hover { background: ${colors.base02}; }
+          padding: 10px;
-        &.playing {
+          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
-          border: 3px solid ${accent};
-          border-top-color: transparent;
-          padding: calc(10px - 3px);
         }
-      }
 
-      #tray {
+        #left,
-        widget {
+        #right,
+        #center {
+          background: ${colors.base02};
+          padding: 0 2px;
+          margin: 0 8px;
+          border-radius: 8px;
+        }
+        #left { margin-left: 0; }
+        #right { margin-right: 0; }
+
+        #clock { padding-right: 10px; }
+
+        #cava { padding: 0 10px; }
+
+        #language { padding: 8px; }
+
+        #workspaces button {
+          color: ${colors.base05};
+          padding: 0 2px;
+          border-radius: 999px;
           border: 1pt solid transparent;
+          min-width: 20px;
+
+          &:hover { background: ${colors.base03}; }
+
+          &.active {
+            background: ${accent};
+            color: ${colors.base00};
+            min-width: 25px;
+
+            &:hover {
+              border-color: ${accent};
+              background: ${colors.base03};
+              color: ${accent};
+            }
+          }
+        }
+
+        #mpris {
+          border-radius: 8px;
+          padding: 4px;
+          &:hover { background: ${colors.base03}; }
+          &.playing {
+            border: 2px solid ${accent};
+            padding: 2px;
+          }
+        }
+
+        #tray {
+          widget {
+            border: 1pt solid transparent;
+            &:hover { background: ${colors.base03}; }
+            & > image { padding: 8px; }
+          }
+
+          & > .passive { border-color: ${colors.base03}; }
+          & > .needs-attention { border-color: ${colors.base09}; }
+        }
+
+        #pulseaudio {
+          &:hover { background: ${colors.base03}; }
+          &.muted {
+            background: ${colors.base08};
+            color: ${colors.base01};
+
+            &:hover {
+              color: ${colors.base08};
+              background: ${colors.base03};
+            }
+          }
+        }
+
+        #network {
           &:hover { background: ${colors.base02}; }
-          & > image { padding: 8px; }
+          &.disconnected {
-        }
-
-        & > .passive { border-color: ${colors.base02}; }
-        & > .needs-attention { border-color: ${colors.base09}; }
-      }
-
-      #pulseaudio {
-        &:hover { background: ${colors.base02}; }
-        &.muted {
-          background: ${colors.base08};
-          color: ${colors.base00};
-
-          &:hover {
-            color: ${colors.base08};
-            background: ${colors.base02};
-          }
-        }
-      }
-
-      #network {
-        &:hover { background: ${colors.base02}; }
-        &.disconnected {
-          color: ${colors.base00};
-          background: ${colors.base08};
-        }
-      }
-
-      #system .drawer-child > * {
-        margin-right: 4px
-      }
-
-      #keyboard-state label.locked {
-        color: ${colors.base08};
-      }
-
-      #battery {
-        &.plugged { color: ${colors.base0D}; }
-        &.charging { color: ${colors.base0B}; }
-        &:not(.charging) {
-          &.warning {
             color: ${colors.base00};
-            background-color: ${colors.base09};
+            background: ${colors.base08};
-          }
-          &.critical {
-            background-color: ${colors.base08};
-            color: ${colors.base00};
-            animation-name: blink;
-            animation-duration: 0.5s;
-            animation-timing-function: linear;
-            animation-iteration-count: infinite;
-            animation-direction: alternate;
           }
         }
-        &.full {
-          color: ${colors.base00};
-          background: ${colors.base0B};
-        }
-      }
 
-    	@keyframes blink {
+        #system .drawer-child > * {
-        to {
+          margin-right: 4px
-          background-color: ${colors.base00};
+        }
+
+        #keyboard-state label.locked {
           color: ${colors.base08};
         }
-      }
-    '';
 
-    cssFile = pkgs.runCommand "waybar.css" {
+        #battery {
-      nativeBuildInputs = [ pkgs.dart-sass ];
+          &.plugged { color: ${colors.base0D}; }
-    } "sass ${scssFile} $out";
+          &.charging { color: ${colors.base0B}; }
-  in builtins.readFile cssFile;
+          &:not(.charging) {
+            &.warning {
+              color: ${colors.base00};
+              background-color: ${colors.base09};
+            }
+            &.critical {
+              background-color: ${colors.base08};
+              color: ${colors.base00};
+              animation-name: blink;
+              animation-duration: 0.5s;
+              animation-timing-function: linear;
+              animation-iteration-count: infinite;
+              animation-direction: alternate;
+            }
+          }
+          &.full {
+            color: ${colors.base00};
+            background: ${colors.base0B};
+          }
+        }
+
+      	@keyframes blink {
+          to {
+            background-color: ${colors.base00};
+            color: ${colors.base08};
+          }
+        }
+      '';
+
+      cssFile = pkgs.runCommand "waybar.css" {
+        nativeBuildInputs = [ pkgs.dart-sass ];
+      } "sass ${scssFile} $out";
+    in builtins.readFile cssFile;
+  };
 }

user/sweetbread/modules/waybar.nix

@@ -1,144 +1,296 @@
-{ config, pkgs, ... }: {
+{ osConfig, config, pkgs, lib, ... }: {
-  programs.waybar.settings.mainBar.spacing = 8;
+  home.packages = with pkgs; [
-  programs.waybar.style = let
+    font-awesome
-    colors = config.lib.stylix.colors.withHashtag;
+    nerd-fonts.symbols-only
-    radius = "6px";
+    playerctl
-    scssFile = pkgs.writeText "waybar.scss" /*scss*/ ''
+    cava
-      window#waybar {
+    pulsemixer
-        background: transparent;
+  ];
-        color: ${colors.base05};
-        border-radius: ${radius};
-        font-weight: bold;
-        font-size: .85em;
 
-        & > * { padding: 8px; }
+  programs.waybar = {
-      }
+    enable = true;
+    systemd.enable = true;
 
-      #cava,
+    settings.mainBar = {
-      #language,
+      spacing = 8;
-      #mpris,
-      #pulseaudio,
-      #network,
-      #battery,
-      #cpu,
-      #temperature,
-      #keyboard-state label.locked,
-      #custom-mem,
-      #clock {
-        background: ${colors.base00};
-        border-radius: ${radius};
-        padding: 8px;
-      }
 
-      #workspaces,
+      modules-left = [
-      #tray {
+        "hyprland/workspaces"
-        background: ${colors.base00};
+        "hyprland/language"
-        border-radius: ${radius};
+        "keyboard-state"
-      }
+        "cava"
+      ];
 
-      #workspaces button {
+      modules-center = [
-        color: ${colors.base05};
+        "mpris"
-        padding: 4px;
+      ];
-        border-radius: ${radius};
-        border: 1pt solid transparent;
 
-        &:hover { background: ${colors.base01}; }
+      modules-right = [
+        "tray"
+        "group/system"
+        "pulseaudio"
+        "battery"
+        "clock"
+      ];
 
-        &.active {
+      cava = {
-          background: ${colors.base0B};
+        bars = 14;
-          color: ${colors.base00};
+        sleep_timer = 5;
+        hide_on_silence = true;
+        bar_delimiter = 0;
+        input_delay = 0;
+        format-icons = [" " "▁" "▂" "▃" "▄" "▅" "▆" "▇" "█"];
+      };
 
-          &:hover {
+      clock = {
-            border-color: ${colors.base0B};
+        tooltip = false;
-            background: ${colors.base01};
+        interval = 5;
-            color: ${colors.base0B};
+        format = "{:L%d %b - %H:%M %a}";
-          }
+      };
-        }
-      }
 
-      #mpris {
+      pulseaudio = {
-        &:hover { background: ${colors.base01}; }
+        format = "{icon} {volume}%";
-        &.paused { opacity: .5; }
+        format-icons = {
-      }
+          headphone =  "";
+          hands-free =  "";
+          headset =  "";
+          phone =  "";
+          phone-muted =  "";
+          portable =  "";
+          car =  "";
+          default =  ["" ""];
+        };
+        on-click = "ghostty --title=pulsemixer -e pulsemixer";
+      };
 
-      #tray {
+      mpris = {
-        widget {
+        format = "{dynamic}";
-          border: 1pt solid transparent;
+        dynamic-len = if osConfig.host.laptop then 32 else 64;
+        dynamic-order = [ "title" "artist" "album" ];
+      };
+
+      battery = {
+        interval = 5;
+        states = {
+          warning = 30;
+          critical = 15;
+        };
+        format = "{icon} {capacity}%";
+        format-icons = {
+          default = ["󰂎" "󰁺" "󰁻" "󰁼" "󰁽" "󰁾" "󰁿" "󰂀" "󰂁" "󰂂" "󰁹"];
+          charging = ["󰢟" "󰢜" "󰂆" "󰂇" "󰂈" "󰢝" "󰂉" "󰢞" "󰂊" "󰂋" "󰂅"];
+        };
+      };
+
+      "keyboard-state" = {
+        capslock = true;
+        format = "{icon}";
+        format-icons = {
+          locked = "CAPS";
+          unlocked = "";
+        };
+      };
+
+      "hyprland/language" = {
+        format-en = "en";
+        format-ru = "ru";
+      };
+
+
+      "group/system" = {
+        orientation = "inherit";
+          drawer = {
+            transition-duration = 500;
+            transition-left-to-right = false;
+          };
+          modules = [
+            "network"
+            "custom/mem"
+            "cpu"
+            "temperature"
+          ];
+      };
+
+      network = {
+        format = "{ifname}";
+        format-wifi = " {essid} ({signalStrength}%)";
+        format-ethernet = "{ifname}";
+        format-disconnected = "";
+        tooltip-format = "{ipaddr}";
+        max-length = 50;
+        on-click = "ghostty --title=nmtui -e nmtui";
+      };
+
+      "custom/weather" = {
+        format = "{}";
+        tooltip = true;
+        interval = 1800;
+        exec = "python3 $HOME/.config/waybar/scripts/wttr.py";
+        return-type = "json";
+      };
+
+      "custom/mem" = {
+        format = "{} ";
+        interval = 3;
+        exec = "free -h | awk '/Mem:/{printf $3}'";
+        tooltip = false;
+      };
+
+      cpu = {
+        interval = 2;
+        format = "{usage}% ";
+        min-length = 6;
+      };
+
+      temperature = {
+        hwmon-path = "/sys/class/hwmon/hwmon5/temp1_input";
+        critical-threshold = 80;
+        format = "{temperatureC}°C {icon}";
+        format-icons = ["" "" "" "" ""];
+        tooltip = false;
+      };
+    };
+
+    style = let
+      colors = config.lib.stylix.colors.withHashtag;
+      radius = "6px";
+      scssFile = pkgs.writeText "waybar.scss" /*scss*/ ''
+        window#waybar {
+          background: transparent;
+          color: ${colors.base05};
           border-radius: ${radius};
+          font-weight: bold;
+          font-size: .85em;
+
+          & > * { padding: 8px; }
+        }
+
+        #cava,
+        #language,
+        #mpris,
+        #pulseaudio,
+        #network,
+        #battery,
+        #cpu,
+        #temperature,
+        #keyboard-state label.locked,
+        #custom-mem,
+        #clock {
+          background: ${colors.base00};
+          border-radius: ${radius};
+          padding: 8px;
+        }
+
+        #workspaces,
+        #tray {
+          background: ${colors.base00};
+          border-radius: ${radius};
+        }
+
+        #workspaces button {
+          color: ${colors.base05};
+          padding: 4px;
+          border-radius: ${radius};
+          border: 1pt solid transparent;
+
           &:hover { background: ${colors.base01}; }
-          & > image { padding: 8px; }
-        }
 
-        & > .passive { border-color: ${colors.base02}; }
+          &.active {
-        & > .needs-attention { border-color: ${colors.base09}; }
+            background: ${colors.base0B};
-      }
-
-      #pulseaudio {
-        &:hover { background: ${colors.base01}; }
-        &.muted {
-          background: ${colors.base08};
-          color: ${colors.base00};
-
-          &:hover {
-            color: ${colors.base08};
-            background: ${colors.base01};
-          }
-        }
-      }
-
-      #network {
-        &:hover { background: ${colors.base01}; }
-        &.disconnected {
-          color: ${colors.base00};
-          background: ${colors.base08};
-        }
-      }
-
-      #system .drawer-child > * {
-        margin-right: 4px
-      }
-
-      #keyboard-state label.locked {
-        background-color: ${colors.base00};
-        color: ${colors.base08};
-      }
-
-      #battery {
-        &.plugged { color: ${colors.base0D}; }
-        &.charging { color: ${colors.base0B}; }
-        &:not(.charging) {
-          &.warning {
             color: ${colors.base00};
-            background-color: ${colors.base09};
-          }
-          &.critical {
-            background-color: ${colors.base08};
-            color: ${colors.base00};
-            animation-name: blink;
-            animation-duration: 0.5s;
-            animation-timing-function: linear;
-            animation-iteration-count: infinite;
-            animation-direction: alternate;
-          }
-        }
-        &.full {
-          color: ${colors.base00};
-          background: ${colors.base0B};
-        }
-      }
 
-    	@keyframes blink {
+            &:hover {
-        to {
+              border-color: ${colors.base0B};
+              background: ${colors.base01};
+              color: ${colors.base0B};
+            }
+          }
+        }
+
+        #mpris {
+          &:hover { background: ${colors.base01}; }
+          &.paused { opacity: .5; }
+        }
+
+        #tray {
+          widget {
+            border: 1pt solid transparent;
+            border-radius: ${radius};
+            &:hover { background: ${colors.base01}; }
+            & > image { padding: 8px; }
+          }
+
+          & > .passive { border-color: ${colors.base02}; }
+          & > .needs-attention { border-color: ${colors.base09}; }
+        }
+
+        #pulseaudio {
+          &:hover { background: ${colors.base01}; }
+          &.muted {
+            background: ${colors.base08};
+            color: ${colors.base00};
+
+            &:hover {
+              color: ${colors.base08};
+              background: ${colors.base01};
+            }
+          }
+        }
+
+        #network {
+          &:hover { background: ${colors.base01}; }
+          &.disconnected {
+            color: ${colors.base00};
+            background: ${colors.base08};
+          }
+        }
+
+        #system .drawer-child > * {
+          margin-right: 4px
+        }
+
+        #keyboard-state label.locked {
           background-color: ${colors.base00};
           color: ${colors.base08};
         }
-      }
-    '';
 
-    cssFile = pkgs.runCommand "waybar.css" {
+        #battery {
-      nativeBuildInputs = [ pkgs.dart-sass ];
+          &.plugged { color: ${colors.base0D}; }
-    } "sass ${scssFile} $out";
+          &.charging { color: ${colors.base0B}; }
-  in builtins.readFile cssFile;
+          &:not(.charging) {
+            &.warning {
+              color: ${colors.base00};
+              background-color: ${colors.base09};
+            }
+            &.critical {
+              background-color: ${colors.base08};
+              color: ${colors.base00};
+              animation-name: blink;
+              animation-duration: 0.5s;
+              animation-timing-function: linear;
+              animation-iteration-count: infinite;
+              animation-direction: alternate;
+            }
+          }
+          &.full {
+            color: ${colors.base00};
+            background: ${colors.base0B};
+          }
+        }
+
+      	@keyframes blink {
+          to {
+            background-color: ${colors.base00};
+            color: ${colors.base08};
+          }
+        }
+      '';
+
+      cssFile = pkgs.runCommand "waybar.css" {
+        nativeBuildInputs = [ pkgs.dart-sass ];
+      } "sass ${scssFile} $out";
+    in builtins.readFile cssFile;
+  };
 
   wayland.windowManager.hyprland.settings.layerrule = [
     "blur on, match:namespace waybar"