From 6ad336c3736e31748d993f90ef818b69ac78afb3 Mon Sep 17 00:00:00 2001 From: Dmitry Voronin Date: Wed, 18 Dec 2024 11:44:18 +0300 Subject: [PATCH] Waybar: Rewrite with replaceVars. --- .treefmt.toml | 5 ++ flake.nix | 2 + home/file/waybar/default.nix | 42 +++++++++++++- home/file/waybar/style/Common.css | 7 +++ home/file/waybar/style/Common.nix | 10 ---- home/file/waybar/style/Plugin.css | 94 ++++++++++++++++++++++++++++++ home/file/waybar/style/Plugin.nix | 95 ------------------------------- home/file/waybar/style/Window.css | 16 ++++++ home/file/waybar/style/Window.nix | 17 ------ 9 files changed, 164 insertions(+), 124 deletions(-) create mode 100644 home/file/waybar/style/Common.css delete mode 100644 home/file/waybar/style/Common.nix create mode 100644 home/file/waybar/style/Plugin.css delete mode 100644 home/file/waybar/style/Plugin.nix create mode 100644 home/file/waybar/style/Window.css delete mode 100644 home/file/waybar/style/Window.nix diff --git a/.treefmt.toml b/.treefmt.toml index 2b219780..6aceea5e 100644 --- a/.treefmt.toml +++ b/.treefmt.toml @@ -19,3 +19,8 @@ includes = [ "*.nix" ] command = "shfmt" options = [ "-s", "-w" ] includes = [ "*.sh" ] + +[formatter.prettier] +command = "prettier" +options = [ "-w" ] +includes = [ "*.css" ] diff --git a/flake.nix b/flake.nix index a2dea592..7ddb8ea7 100644 --- a/flake.nix +++ b/flake.nix @@ -156,6 +156,8 @@ nativeBuildInputs = with pkgs; [ nixd nixfmt-rfc-style + nodePackages.prettier + nodePackages.prettier-plugin-toml shfmt treefmt ]; diff --git a/home/file/waybar/default.nix b/home/file/waybar/default.nix index d314fbe7..50252c06 100644 --- a/home/file/waybar/default.nix +++ b/home/file/waybar/default.nix @@ -1,5 +1,43 @@ -{ util, pkgs, ... }@args: +# ISSUE: https://github.com/Alexays/Waybar/issues/3303 +# This way I am forced to apply the padding to children of each group +# instead of the whole group. { + util, + pkgs, + config, + ... +}@args: +let + accent = "#${config.module.style.color.accent}"; + fontSerif = config.module.style.font.serif.name; + fontPropo = "Terminess Nerd Font Propo"; + fontSize = "${toString config.module.style.font.size.desktop}px"; + foreground = "#${config.module.style.color.fg.light}"; + paddingH = "12px"; + paddingV = "0"; + backgroundColor = "rgba(${config.module.style.color.bgR},${config.module.style.color.bgG},${config.module.style.color.bgB},${toString config.module.style.opacity.desktop})"; + borderColor = "rgba(${config.module.style.color.borderR},${config.module.style.color.borderG},${config.module.style.color.borderB},${toString config.module.style.opacity.desktop})"; + border = "${toString config.module.style.window.border}px solid ${borderColor}"; + borderSize = "${toString config.module.style.window.border}px"; + + styleRaw = pkgs.writeText "waybar-style-raw" (util.readFiles (util.ls ./style)); + style = pkgs.replaceVars styleRaw { + inherit + accent + fontSerif + fontPropo + fontSize + foreground + paddingH + paddingV + backgroundColor + borderColor + border + borderSize + ; + }; +in +{ + inherit style; config = (import ./config args).file; - style = pkgs.writeText "WaybarStyle" (util.catText (util.ls ./style) args); } diff --git a/home/file/waybar/style/Common.css b/home/file/waybar/style/Common.css new file mode 100644 index 00000000..f4ed8e86 --- /dev/null +++ b/home/file/waybar/style/Common.css @@ -0,0 +1,7 @@ +* { + font-family: "@fontSerif@", "@fontPropo@"; + /* prettier-ignore */ + font-size: @fontSize@; + /* prettier-ignore */ + color: @foreground@; +} diff --git a/home/file/waybar/style/Common.nix b/home/file/waybar/style/Common.nix deleted file mode 100644 index d9d09cd6..00000000 --- a/home/file/waybar/style/Common.nix +++ /dev/null @@ -1,10 +0,0 @@ -{ config, ... }: -{ - text = '' - * { - font-family: "${config.module.style.font.serif.name}", "Terminess Nerd Font Propo"; - font-size: ${toString config.module.style.font.size.desktop}px; - color: #${config.module.style.color.fg.light}; - } - ''; -} diff --git a/home/file/waybar/style/Plugin.css b/home/file/waybar/style/Plugin.css new file mode 100644 index 00000000..d0a3bef6 --- /dev/null +++ b/home/file/waybar/style/Plugin.css @@ -0,0 +1,94 @@ +/* See the ISSUE. */ +#custom-taghw1, +#custom-tagbt1 { + /* prettier-ignore */ + padding-left: @paddingH@; +} + +#custom-taghw2, +#custom-tagbt2 { + /* prettier-ignore */ + padding-right: @paddingH@; +} + +/* Padding for global widgets. */ +#clock, +#custom-display, +#custom-network, +#mpris, +#pulseaudio, +#scratchpad { + /* prettier-ignore */ + padding: @paddingV@ @paddingH@; +} + +/* Padding for combined widgets. */ +#cpu.load, +#custom-powerlimit, +#custom-powersave, +#memory, +#temperature { + padding-left: 4px; +} + +/* Hover style. */ +#batteryinfo:hover, +#clock:hover, +#custom-display:hover, +#custom-network:hover, +#hardware:hover, +#mpris:hover, +#pulseaudio:hover, +#scratchpad:hover, +#workspaces button:hover { + /* prettier-ignore */ + background-color: @borderColor@; +} + +/* Critical state. */ +#battery, +#cpu.usage, +#custom-display, +#custom-network, +#memory, +#pulseaudio, +#temperature { + /* prettier-ignore */ + border-top: @borderSize@ solid transparent; + /* prettier-ignore */ + border-bottom: @borderSize@ solid transparent; +} + +#battery.critical, +#cpu.usage.critical, +#custom-display.modified, +#custom-network.issue, +#custom-network.vpn, +#custom-network.btlow, +#memory.critical, +#pulseaudio.muted, +#pulseaudio.source-muted, +#temperature.critical { + /* prettier-ignore */ + border-top: @borderSize@ solid @accent@; +} + +/* Widget-specific styling. */ +#workspaces button { + /* prettier-ignore */ + padding: @paddingV@ 4px; + /* prettier-ignore */ + border-top: @borderSize@ solid transparent; + /* prettier-ignore */ + border-bottom: @borderSize@ solid transparent; + border-radius: 0; +} + +#workspaces button.focused { + /* prettier-ignore */ + border-top: @borderSize@ solid @accent@; +} + +#clock { + font-weight: bold; +} diff --git a/home/file/waybar/style/Plugin.nix b/home/file/waybar/style/Plugin.nix deleted file mode 100644 index 21470066..00000000 --- a/home/file/waybar/style/Plugin.nix +++ /dev/null @@ -1,95 +0,0 @@ -{ config, ... }: -let - paddingH = "12px"; - paddingV = "0"; -in -{ - # ISSUE: https://github.com/Alexays/Waybar/issues/3303 - # This way I am forced to apply the padding to children of each group - # instead of the whole group. - text = '' - /* See the ISSUE above. */ - #custom-taghw1, - #custom-tagbt1 { - padding-left: ${paddingH}; - } - - #custom-taghw2, - #custom-tagbt2 { - padding-right: ${paddingH}; - } - - /* Padding for global widgets. */ - #clock, - #custom-display, - #custom-network, - #mpris, - #pulseaudio, - #scratchpad { - padding: ${paddingV} ${paddingH}; - } - - /* Padding for combined widgets. */ - #cpu.load, - #custom-powerlimit, - #custom-powersave, - #memory, - #temperature { - padding-left: 4px; - } - - /* Hover style. */ - #batteryinfo:hover, - #clock:hover, - #custom-display:hover, - #custom-network:hover, - #hardware:hover, - #mpris:hover, - #pulseaudio:hover, - #scratchpad:hover, - #workspaces button:hover { - background-color: rgba(${config.module.style.color.borderR},${config.module.style.color.borderG},${config.module.style.color.borderB},${toString config.module.style.opacity.desktop}); - } - - /* Critical state. */ - #battery, - #cpu.usage, - #custom-display, - #custom-network, - #memory, - #pulseaudio, - #temperature { - border-top: ${toString config.module.style.window.border}px solid transparent; - border-bottom: ${toString config.module.style.window.border}px solid transparent; - } - - #battery.critical, - #cpu.usage.critical, - #custom-display.modified, - #custom-network.issue, - #custom-network.vpn, - #custom-network.btlow, - #memory.critical, - #pulseaudio.muted, - #pulseaudio.source-muted, - #temperature.critical { - border-top: ${toString config.module.style.window.border}px solid #${config.module.style.color.accent}; - } - - /* Widget-specific styling. */ - #workspaces button { - padding: ${paddingV} 4px; - border-top: ${toString config.module.style.window.border}px solid transparent; - border-bottom: ${toString config.module.style.window.border}px solid transparent; - border-radius: 0; - } - - #workspaces button.focused { - border-top: ${toString config.module.style.window.border}px solid #${config.module.style.color.accent}; - } - - #clock { - font-weight: bold; - } - ''; -} diff --git a/home/file/waybar/style/Window.css b/home/file/waybar/style/Window.css new file mode 100644 index 00000000..c5c3a41c --- /dev/null +++ b/home/file/waybar/style/Window.css @@ -0,0 +1,16 @@ +window#waybar { + /* prettier-ignore */ + background-color: @backgroundColor@; + /* prettier-ignore */ + border: @border@; +} + +.modules-left > widget:first-child > #workspaces { + /* prettier-ignore */ + margin-left: @borderSize@; +} + +.modules-right > widget:last-child > #workspaces { + /* prettier-ignore */ + margin-right: @borderSize@; +} diff --git a/home/file/waybar/style/Window.nix b/home/file/waybar/style/Window.nix deleted file mode 100644 index fef9880b..00000000 --- a/home/file/waybar/style/Window.nix +++ /dev/null @@ -1,17 +0,0 @@ -{ config, ... }: -{ - text = '' - window#waybar { - background-color: rgba(${config.module.style.color.bgR},${config.module.style.color.bgG},${config.module.style.color.bgB},${toString config.module.style.opacity.desktop}); - border: ${toString config.module.style.window.border}px solid rgba(${config.module.style.color.borderR},${config.module.style.color.borderG},${config.module.style.color.borderB},${toString config.module.style.opacity.desktop}); - } - - .modules-left > widget:first-child > #workspaces { - margin-left: ${toString config.module.style.window.border}px; - } - - .modules-right > widget:last-child > #workspaces { - margin-right: ${toString config.module.style.window.border}px; - } - ''; -}