Restore old waybar style using stylix to set color

Stylix sets color and font for waybar, custom config imports and uses
those
Update style with more consistent size, new look to the top and
transparency (with blur of course)

Slightly reduce gaps across whole UI to make better use of space without
compromising looks

Add TODO to restyle swaync using new method at some point...

README.org

@@ -1,10 +1,8 @@
 #+title: README
-* [0/3] Tasks
+* Tasks
 ** TODO Re-write Hyprland config
 Convert from linked text file to proper nix expression (using home-manager)
-** TODO Add Hyprland config tree-sitter parser
+** TODO Update swaync style to match hyprland/waybar/etc...
-[[https://github.com/luckasRanarison/tree-sitter-hypr][Source]]
-** TODO Convert midnight commander config to use home-manager properly
 * Password store setup
 ** Transfer GPG key(s)
 #+begin_src bash

home/hyprland/config.nix

@@ -40,8 +40,8 @@ in ''
   }
 
   general {
-      gaps_in = 5
+      gaps_in = 2.5
-      gaps_out = 10
+      gaps_out = 5
       border_size = 1
       cursor_inactive_timeout = 5
       layout = master

home/hyprland/waybar/default.nix

@@ -1,7 +1,30 @@
-{ pkgs, ... }: {
+{ config, lib, pkgs, ... }: {
   home.packages = with pkgs; [ networkmanagerapplet bluez ];
+  stylix.targets.waybar.enable = false;
+  xdg.configFile."waybar/scheme.css".text =
+    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};
+      @define-color base08 ${base08};
+      @define-color base09 ${base09};
+      @define-color base0A ${base0A};
+      @define-color base0B ${base0B};
+      @define-color base0C ${base0C};
+      @define-color base0D ${base0D};
+      @define-color base0E ${base0E};
+      @define-color base0F ${base0F};
+
+      * { font-family: "${config.stylix.fonts.sansSerif.name}" }
+    '';
   programs.waybar = {
     enable = true;
+    style = ./style.css;
     systemd = {
       enable = true;
       target = "hyprland-session.target";

home/hyprland/waybar/modules/tray.nix

@@ -1 +1,5 @@
-{spacing = 10;}
+{
+  icon-size = 14;
+  show-passive-items = true;
+  spacing = 5;
+}

home/hyprland/waybar/style.css

@@ -1,18 +1,28 @@
-* {
+@import "./scheme.css";
-    font-family: "Fira Sans";
+
-    font-size: 18px;
+* { font-size: 14px; }
-}
+
+window { background: transparent; }
 
 window > box {
-    margin-left: 10px;
+    color: @base05;
-    margin-right: 10px;
+    background: alpha(@base00, 0.5);
-    border-top-left-radius: 0px;
+    box-shadow: inset 0 0 0 1px alpha(@base03, 0.1), 0 0 0 1px alpha(@base00, 0.5);
-    border-top-right-radius: 0px;
+    margin: 5px 5px 0px;
-    border-bottom-left-radius: 10px;
+    padding: 0px;
-    border-bottom-right-radius: 10px;
+    border: 1px solid @base03;
+    border-radius: 10px;
 }
 
-tooltip { border-radius: 10px; }
+tooltip {
+    color: @base05;
+    background: alpha(@base00, 0.5);
+    box-shadow: inset 0 0 0 1px alpha(@base0A, 0.1), 0 0 0 1px alpha(@base00, 0.5);
+    border: 1px solid @base0A;
+    border-radius: 10px;
+    padding: 5px;
+    margin: 0px;
+}
 
 #workspaces,
 #cava,
@@ -27,7 +37,22 @@ tooltip { border-radius: 10px; }
 #backlight,
 #battery,
 #tray {
+    color: @base05;
     margin: 0px;
-    padding-left: 10px;
+    padding: 0px 5px;
-    padding-right: 10px;
+}
+
+#workspaces button,
+#tray > .passive {
+    color: @base03;
+}
+
+#workspaces button.active,
+#tray > .active {
+    color: @base05;
+}
+
+#workspaces button.urgent,
+#tray > .needs-attention {
+    color: @base07;
 }

system/desktop.nix

@@ -28,12 +28,6 @@
       terminal = 0.8;
     };
     fonts = rec {
-      sizes = {
-        applications = 12;
-        desktop = 12;
-        popups = 10;
-        terminal = 12;
-      };
       emoji = {
         name = "Noto Color Emoji";
         package = pkgs.noto-fonts-emoji;