waybar: add font option and change default to monospace (#972)

Add font option and change its default to monospace, and reduce the
scope of the 'with' keyword.

Closes: https://github.com/danth/stylix/issues/956
Link: https://github.com/danth/stylix/pull/972

Reviewed-by: NAHO <90870942+trueNAHO@users.noreply.github.com>

modules/waybar/hm.nix

@@ -1,6 +1,4 @@
 { config, lib, ... }:
-with config.lib.stylix.colors.withHashtag;
-with config.stylix.fonts;
 let
   cfg = config.stylix.targets.waybar;
   colorlessModules = place: ''
@@ -16,6 +14,17 @@ in
 {
   options.stylix.targets.waybar = {
     enable = config.lib.stylix.mkEnableTarget "Waybar" true;
+    font = lib.mkOption {
+      type = lib.types.enum [
+        "serif"
+        "sansSerif"
+        "monospace"
+        "emoji"
+      ];
+      default = "monospace";
+      example = "sansSerif";
+      description = "The font for waybar to use";
+    };
     addCss = lib.mkOption {
       type = lib.types.bool;
       default = true;
@@ -40,6 +49,7 @@ in
 
   config = lib.mkIf (config.stylix.enable && cfg.enable) {
     programs.waybar.style =
+      with config.lib.stylix.colors.withHashtag;
       ''
         @define-color base00 ${base00}; @define-color base01 ${base01}; @define-color base02 ${base02}; @define-color base03 ${base03};
         @define-color base04 ${base04}; @define-color base05 ${base05}; @define-color base06 ${base06}; @define-color base07 ${base07};
@@ -48,16 +58,14 @@ in
         @define-color base0C ${base0C}; @define-color base0D ${base0D}; @define-color base0E ${base0E}; @define-color base0F ${base0F};
 
         * {
-            font-family: "${sansSerif.name}";
-            font-size: ${builtins.toString sizes.desktop}pt;
+            font-family: "${config.stylix.fonts.${cfg.font}.name}";
+            font-size: ${builtins.toString config.stylix.fonts.sizes.desktop}pt;
         }
       ''
       + lib.optionalString cfg.addCss (
         ''
           window#waybar, tooltip {
-              background: alpha(@base00, ${
-                with config.stylix.opacity; builtins.toString desktop
-              });
+              background: alpha(@base00, ${builtins.toString config.stylix.opacity.desktop});
               color: @base05;
           }