add: walker theme

apps/matugen/config.toml

@@ -20,3 +20,8 @@ post_hook = "killall -SIGUSR2 .waybar-wrapped"
 input_path = "~/.config/matugen/templates/starship"
 output_path = "~/.config/starship.toml"
 
+[templates.walker]
+input_path = "~/.config/matugen/templates/walker"
+output_path = "~/.config/walker/themes/nixos/matugen.css"
+
+

apps/walker/style.nix

@@ -1,123 +1,131 @@
-{config, ...}: let
-  # Access Stylix colors (Base16)
-  colors = config.lib.stylix.colors.withHashtag;
-in {
+{config, ...}: {
   programs.walker = {
     theme.style = ''
-      * {
-        all: unset;
-      }
+      @import "matugen.css";
+        * {
+          all: unset;
+        }
 
-      * {
-        font-family: monospace;
-        font-size: 18px;
-        color: ${colors.base05};
-      }
+        * {
+          font-family: monospace;
+          font-size: 18px;
+          /* Fixed: Text color must be visible on the background */
+          color: @on_surface;
+        }
 
-      scrollbar {
-        opacity: 0;
-      }
+        scrollbar {
+          opacity: 0;
+        }
 
-      .normal-icons {
-        -gtk-icon-size: 16px;
-      }
+        .normal-icons {
+          -gtk-icon-size: 16px;
+        }
 
-      .large-icons {
-        -gtk-icon-size: 32px;
-      }
+        .large-icons {
+          -gtk-icon-size: 32px;
+        }
 
-      .box-wrapper {
-        background: alpha(${colors.base00}, 0.95);
-        padding: 20px;
-        border: 2px solid ${colors.base0E};
-      }
+        .box-wrapper {
+          /* base00 -> surface */
+          background: alpha(@surface, 0.95);
+          padding: 20px;
+          /* base0E -> secondary (often pink/purple in Firewatch themes) */
+          border: 2px solid @secondary;
+        }
 
-      .preview-box {
-      }
+        .preview-box {
+        }
 
-      .box {
-      }
+        .box {
+        }
 
-      .search-container {
-        background: ${colors.base00};
-        padding: 10px;
-      }
+        .search-container {
+          /* base00 -> surface */
+          background: @surface;
+          padding: 10px;
+        }
 
-      .input placeholder {
-        opacity: 0.5;
-      }
+        .input placeholder {
+          opacity: 0.5;
+        }
 
-      .input {
-      }
+        .input {
+        }
 
-      .input:focus,
-      .input:active {
-        box-shadow: none;
-        outline: none;
-      }
+        .input:focus,
+        .input:active {
+          box-shadow: none;
+          outline: none;
+        }
 
-      .content-container {
-      }
+        .content-container {
+        }
 
-      .placeholder {
-      }
+        .placeholder {
+        }
 
-      .scroll {
-      }
+        .scroll {
+        }
 
-      .list {
-      }
+        .list {
+        }
 
-      child,
-      child > * {
-      }
+        child,
+        child > * {
+        }
 
-      child:hover .item-box {
-      }
+        child:hover .item-box {
+          /* Added hover effect for better usability */
+          background: @surface_bright;
+        }
 
-      child:selected .item-box {
-      }
+        child:selected .item-box {
+          /* Selected background */
+          background: @surface_container_high;
+        }
 
-      child:selected .item-box * {
-        color: ${colors.base0D};
-      }
+        child:selected .item-box * {
+          /* base0D -> primary */
+          color: @primary;
+        }
 
-      .item-box {
-        padding-left: 14px;
-      }
+        .item-box {
+          padding-left: 14px;
+        }
 
-      .item-text-box {
-        all: unset;
-        padding: 14px 0;
-      }
+        .item-text-box {
+          all: unset;
+          padding: 14px 0;
+        }
 
-      .item-text {
-      }
+        .item-text {
+        }
 
-      .item-subtext {
-        font-size: 0px;
-        min-height: 0px;
-        margin: 0px;
-        padding: 0px;
-      }
+        .item-subtext {
+          font-size: 0px;
+          min-height: 0px;
+          margin: 0px;
+          padding: 0px;
+        }
 
-      .item-image {
-        margin-right: 14px;
-        -gtk-icon-transform: scale(0.9);
-      }
+        .item-image {
+          margin-right: 14px;
+          -gtk-icon-transform: scale(0.9);
+        }
 
-      .current {
-        font-style: italic;
-      }
+        .current {
+          font-style: italic;
+        }
 
-      .keybind-hints {
-        background: ${colors.base01};
-        padding: 10px;
-        margin-top: 10px;
-      }
+        .keybind-hints {
+          /* base01 -> surface_container */
+          background: @surface_container;
+          padding: 10px;
+          margin-top: 10px;
+        }
 
-      .preview {
-      }
+        .preview {
+        }
     '';
   };
 }