Theme WIP overhaul

config/modules/home/theme.nix

@@ -1,4 +1,4 @@
-{ config, lib, ... }:
+{ config, pkgs, lib, ... }:
 
 /*
   This module:
@@ -7,12 +7,20 @@
 
 with lib;
 
-let cfg = config.kw; in
+let cfg = config.kw.theme; in
 {
-  options.kw = {
+  options.kw.theme = {
-    hexColors = mkOption {
+    enable = mkEnableOption "kat's theme module";
+    css_style = mkOption {
+      type = types.enum [ "nested" "compressed" "compact" "expanded" ];
+      default = "expanded";
+    };
+    base16 = mkOption {
       type = types.attrsOf types.str;
     };
+    alpha = mkOption {
+      type = types.str;
+    };
     font = {
       name = mkOption {
         type = types.str;
@@ -28,4 +36,26 @@ let cfg = config.kw; in
       };
     };
   };
+  config = mkIf (cfg.enable) {
+    kw.theme = {
+      base16 = lib.mapAttrs' (k: v: lib.nameValuePair k "#${v.hex.rgb}")
+      (lib.filterAttrs (n: _: lib.hasInfix "base" n) config.lib.arc.base16.schemeForAlias.default);
+      alpha = "80";
+    };
+
+    lib.kw.sassTemplate = pkgs.callPackage ({ sass, stdenv }: { name, src }: stdenv.mkDerivation ({
+      inherit name src;
+      nativeBuildInputs = lib.singleton sass;
+      phases = [ "buildPhase" ];
+      buildPhase = ''
+        substituteAll $src sub.sass
+        sass sub.sass $out --sourcemap=none --style=${cfg.css_style}
+      '';
+    } // cfg.base16 // {
+      font = cfg.font.name;
+      font_size = cfg.font.size_css;
+      inherit (cfg) alpha;
+    })) {};
+    _module.args = { inherit (config.lib) kw; };
+  };
 }

config/users/kat/base/base16.nix

@@ -8,7 +8,5 @@
     alias.dark = "atelier.atelier-cave";
   };
 
-
+  kw.theme.enable = true;
-  kw.hexColors = lib.mapAttrs' (k: v: lib.nameValuePair k "#${v.hex.rgb}")
-    (lib.filterAttrs (n: _: lib.hasInfix "base" n) config.lib.arc.base16.schemeForAlias.default);
 }

config/users/kat/gui/firefox.nix

@@ -13,7 +13,7 @@ let
   };
 in
 {
-  home.file.".mozilla/tst.css".source = pkgs.firefox-tst { base16 = config.kw.hexColors; };
+  home.file.".mozilla/tst.css".source = pkgs.firefox-tst { inherit (config.kw.theme) base16; };
 
   programs.zsh.shellAliases = {
     ff-pm = "firefox --ProfileManager";
@@ -65,7 +65,7 @@ in
         id = 0;
         isDefault = true;
         settings = commonSettings;
-        userChrome = builtins.readFile (pkgs.firefox-uc { base16 = config.kw.hexColors; });
+        userChrome = builtins.readFile (pkgs.firefox-uc { inherit (config.kw.theme) base16; });
       };
     };
   };

config/users/kat/gui/foot.nix

@@ -9,10 +9,10 @@ with lib;
       main = {
         term = "foot";
         locked-title = false;
-        font = "${config.kw.font.name}:size=${toString config.kw.font.size}, Twitter Color Emoji:size=8";
+        font = "${config.kw.theme.font.name}:size=${toString config.kw.theme.font.size}, Twitter Color Emoji:size=8";
-        font-bold = "${config.kw.font.name}:size=${toString config.kw.font.size}:style=Bold";
+        font-bold = "${config.kw.theme.font.name}:size=${toString config.kw.theme.font.size}:style=Bold";
-        font-italic = "${config.kw.font.name}:size=${toString config.kw.font.size}:style=Italic";
+        font-italic = "${config.kw.theme.font.name}:size=${toString config.kw.theme.font.size}:style=Italic";
-        font-bold-italic = "${config.kw.font.name}:size=${toString config.kw.font.size}:style=Bold Italic";
+        font-bold-italic = "${config.kw.theme.font.name}:size=${toString config.kw.theme.font.size}:style=Bold Italic";
         dpi-aware = "no";
       };
       cursor = {

config/users/kat/sway/mako.nix

@@ -1,7 +1,7 @@
 { config, pkgs, lib, witch, ... }:
 
 let
-  base16 = config.kw.hexColors;
+  inherit (config.kw.theme) base16;
 in
 {
   systemd.user.services = {
@@ -21,7 +21,7 @@ in
 
   programs.mako = {
     enable = true;
-    font = "${config.kw.font.name} ${toString config.kw.font.size}";
+    font = "${config.kw.theme.font.name} ${toString config.kw.theme.font.size}";
     defaultTimeout = 3000;
     borderColor = base16.base08;
     backgroundColor = "${base16.base00}BF";

config/users/kat/sway/sway.nix

@@ -124,9 +124,9 @@ in
             };
           };
           fonts = {
-            names = [ config.kw.font.name ];
+            names = [ config.kw.theme.font.name ];
             style = "Medium";
-            size = config.kw.font.size;
+            size = config.kw.theme.font.size;
           };
           terminal = "${pkgs.foot}/bin/foot";
           menu = "${pkgs.j4-dmenu-desktop}/bin/j4-dmenu-desktop --no-generic --dmenu=\"${dmenu}\" --term='${footwrap}/bin/footwrap'";
@@ -288,7 +288,7 @@ in
             "${cfg.modifier}+Delete" = ''mode "System (l) lock, (e) logout, (s) suspend, (h) hibernate, (r) reboot, (Shift+s) shutdown"'';
           };
 
-          colors = let base16 = config.kw.hexColors; in
+          colors = let inherit (config.kw.theme) base16; in
             {
               focused = {
                 border = base16.base01;

config/users/kat/sway/waybar.css.nix

@@ -1,127 +0,0 @@
-{ hextorgba, base16, font }:
-
-let
-  bcolor = color: ''
-    background: ${hextorgba color 0.75};
-  '';
-in
-''
-   * {
-    border: none;
-    border-radius: 0;
-    background: none;
-    font-family: "${font.name}";
-    font-size: ${font.size_css};
-    min-height: 12px;
-    text-shadow: none;
-    box-shadow: none;
-   }
-
-   #mode {
-    color: ${base16.base06};
-    padding: 0 4px;
-   }
-
-  #clock, #memory, #cpu, #temperature, #pulseaudio, #network, #mpd, #backlight, #battery, #custom-weather, #custom-konawall, #custom-gpg-status, #idle_inhibitor, #tray {
-    padding: 0 8px;
-    transition: none;
-    color: ${base16.base00};
-  }
-
-  .modules-left, .modules-center, .modules-right {
-    margin: 2px 4px;
-    border-radius: 1em;
-  }
-
-  .modules-left widget label {
-    margin: 0 4px;
-    border-radius: 1em;
-  }
-
-  .modules-left widget:first-child {
-    margin-left: 0px;
-  }
-
-  .modules-left widget:last-child {
-    margin-right: 0px;
-  }
-
-  #workspaces, #window, #clock, #tray {
-    background: ${hextorgba base16.base00 0.75};
-  }
-
-  #workspaces {
-    padding: 0px;
-    border-radius: 1em;
-  }
-
-  #window {
-    padding: 0 8px;
-  }
-
-  .modules-center widget:first-child label, .modules-right widget:first-child label, #workspaces button:first-child {
-    border-top-left-radius: 1em;
-    border-bottom-left-radius: 1em;
-  }
-
-  .modules-center widget:last-child label, .modules-right widget:last-child label, #workspaces button:last-child, #tray {
-    border-top-right-radius: 1em;
-    border-bottom-right-radius: 1em;
-  }
-
-  tooltip, #tray menu {
-    background: ${hextorgba base16.base00 0.75};
-    border-radius: 1em;
-  }
-
-  tooltip label {
-    color: ${base16.base07};
-  }
-
-  #window {
-    color: ${base16.base06};
-    border-bottom: 2px solid transparent;
-  }
-
-  window#waybar.empty #window {
-    opacity: 0;
-  }
-
-  #workspaces button {
-    color: ${base16.base06};
-  }
-
-  #workspaces button.focused {
-      color: ${base16.base07};
-      background: ${base16.base0D};
-  }
-
-  #workspaces button:hover {
-    transition: none;
-    box-shadow: inherit;
-    text-shadow: inherit;
-    background: ${base16.base06};
-    color: ${base16.base0C};
-  }
-
-  #tray { padding: 0 10px 0 8px }
-  #clock { color: ${base16.base07} }
-  #clock.arc { ${bcolor base16.base0B} }
-  #clock.miku { ${bcolor base16.base0C} }
-  #clock.hex { ${bcolor base16.base0F} }
-  #custom-konawall.enabled { ${bcolor base16.base0E} }
-  #custom-konawall.disabled { ${bcolor base16.base0D} }
-  #idle_inhibitor.activated { ${bcolor base16.base0E} }
-  #idle_inhibitor.deactivated { ${bcolor base16.base0D} }
-  #custom-gpg-status.enabled { ${bcolor base16.base0B} }
-  #custom-gpg-status.disabled { ${bcolor base16.base08} }
-  #network { ${bcolor base16.base0C} }
-  #custom-weather { ${bcolor base16.base00} }
-  #pulseaudio { ${bcolor base16.base06} }
-  #temperature { ${bcolor base16.base0B} }
-  #pulseaudio.muted { ${bcolor base16.base03} }
-  #battery { ${bcolor base16.base0C} }
-  #backlight { ${bcolor base16.base0D} }
-  #cpu { ${bcolor base16.base08} }
-  #memory { ${bcolor base16.base09} }
-''

config/users/kat/sway/waybar.nix

@@ -1,16 +1,10 @@
 { config, lib, pkgs, ... }:
 
-let
-  base16 = config.kw.hexColors;
-in
 {
+  xdg.configFile."waybar/style.css".source = pkgs.waybar-style { inherit (config.kw.theme) base16; };
+
   programs.waybar = {
     enable = true;
-    style = import ./waybar.css.nix {
-      inherit base16;
-      inherit (lib) hextorgba;
-      font = config.kw.font;
-    };
     settings = [{
       modules-left = [ "sway/workspaces" "sway/mode" "sway/window" ];
       modules-center = [ "clock" "clock#arc" "clock#miku" "clock#hex" ];

config/users/kat/sway/wofi.nix

@@ -1,42 +1,5 @@
-{ config, lib, ... }:
+{ config, pkgs, ... }:
 
 {
-  xdg.configFile."wofi/wofi.css".text = let base16 = config.kw.hexColors; in
+  xdg.configFile."wofi/wofi.css".source = pkgs.wofi-style { inherit (config.kw.theme) base16; };
-    ''
-      #scroll, #input {
-        background: ${base16.base01};
-        }
-
-        window {
-        font-family: ${config.kw.font.name};
-        background: ${lib.hextorgba base16.base00 0.75};
-        border-radius: 1em;
-        font-size: ${config.kw.font.size_css};
-        color: ${base16.base07};
-        }
-
-      #outer-box {
-        margin: 1em;
-        }
-
-      #scroll {
-        border: 1px solid ${base16.base03};
-        }
-
-      #input {
-        border: 1px solid ${base16.base0C};
-        margin: 1em;
-        background: ${base16.base02};
-        color: ${base16.base04};
-        }
-
-      #entry {
-        border-bottom: 1px dashed ${base16.base04};
-        padding: .75em;
-        }
-
-      #entry:selected {
-        background-color: ${base16.base0D};
-        }
-    '';
 }

overlays/default.nix

@@ -8,9 +8,9 @@ let
       (import ./rustfmt)
       (import ./ff-tst-style)
       (import ./ff-uc-style)
-    /* # TODO: implement these
       (import ./waybar-style)
       (import ./wofi-style)
+    /* # TODO: implement these
       (import ./vimrc)
     */
     ] ++ (map (path: import "${path}/overlay.nix") [

overlays/waybar-style/default.nix

@@ -0,0 +1,22 @@
+final: prev: {
+  waybar-style = final.callPackage ({ stdenv, sass }: { base16 }:
+  stdenv.mkDerivation ({
+    pname = "waybar-style";
+    version = "0.0.1";
+
+    phases = [ "buildPhase" ];
+
+    src = ./waybar.sass;
+
+    nativeBuildInputs = [
+      sass
+    ];
+
+    buildPhase = ''
+      substituteAll $src waybar-sub.sass
+      sass waybar-sub.sass $out --sourcemap=none --style expanded
+    '';
+
+    alpha = "80";
+  } // base16)) {};
+}

overlays/waybar-style/waybar.sass

@@ -0,0 +1,200 @@
+$base00: @base00@
+$base01: @base01@
+$base02: @base02@
+$base03: @base03@
+$base04: @base04@
+$base05: @base05@
+$base06: @base06@
+$base07: @base07@
+$base08: @base08@
+$base09: @base09@
+$base0A: @base0A@
+$base0B: @base0B@
+$base0C: @base0C@
+$base0D: @base0D@
+$base0E: @base0E@
+$base0F: @base0F@
+$alpha: @alpha@
+$font: "Cozette"
+$font_size: 12px
+
+%extend_1
+  padding: 0 8px
+  transition: none
+  color: $base00
+
+*
+  border: none
+  border-radius: 0
+  background: none
+  font-family: $font
+  font-size: $font_size
+  min-height: 12px
+  text-shadow: none
+  box-shadow: none
+
+#mode
+  color: $base06
+  padding: 0 4px
+
+#clock
+  @extend %extend_1
+  background: $base00$alpha
+  color: $base07$alpha
+  &.arc
+    background: $base0B$alpha
+
+  &.miku
+    background: $base0C$alpha
+
+  &.hex
+    background: $base0F$alpha
+
+#memory
+  @extend %extend_1
+  background: $base09$alpha
+
+#cpu
+  @extend %extend_1
+  background: $base08$alpha
+
+#temperature
+  @extend %extend_1
+  background: $base0B$alpha
+
+#pulseaudio
+  @extend %extend_1
+  background: $base06$alpha
+  &.muted
+    background: $base03$alpha
+
+#network
+  @extend %extend_1
+  background: $base0C$alpha
+
+#mpd
+  @extend %extend_1
+
+#backlight
+  @extend %extend_1
+  background: $base0D$alpha
+
+#battery
+  @extend %extend_1
+  background: $base0C$alpha
+
+#custom-weather
+  @extend %extend_1
+  background: $base00$alpha
+
+#custom-konawall
+  @extend %extend_1
+  &.enabled
+    background: $base0E$alpha
+
+  &.disabled
+    background: $base0D$alpha
+
+#custom-gpg-status
+  @extend %extend_1
+  &.enabled
+    background: $base0B$alpha
+
+  &.disabled
+    background: $base08$alpha
+
+#idle_inhibitor
+  @extend %extend_1
+  &.activated
+    background: $base0E$alpha
+
+  &.deactivated
+    background: $base0D$alpha
+
+#tray
+  @extend %extend_1
+  background: $base00$alpha
+  border-top-right-radius: 1em
+  border-bottom-right-radius: 1em
+  padding: 0 10px 0 8px
+  menu
+    background: $base00$alpha
+    border-radius: 1em
+
+.modules-left
+  margin: 2px 4px
+  border-radius: 1em
+  widget
+    label
+      margin: 0 4px
+      border-radius: 1em
+
+    &:first-child
+      margin-left: 0
+
+    &:last-child
+      margin-right: 0
+
+.modules-center
+  margin: 2px 4px
+  border-radius: 1em
+  widget
+    &:first-child label
+      border-top-left-radius: 1em
+      border-bottom-left-radius: 1em
+
+    &:last-child label
+      border-top-right-radius: 1em
+      border-bottom-right-radius: 1em
+
+.modules-right
+  margin: 2px 4px
+  border-radius: 1em
+  widget
+    &:first-child *
+      border-top-left-radius: 1em
+      border-bottom-left-radius: 1em
+
+    &:last-child *
+      border-top-right-radius: 1em
+      border-bottom-right-radius: 1em
+
+#workspaces
+  background: $base00$alpha
+  padding: 0
+  border-radius: 1em
+  button
+    color: $base06
+    &:first-child
+      border-top-left-radius: 1em
+      border-bottom-left-radius: 1em
+
+    &:last-child
+      border-top-right-radius: 1em
+      border-bottom-right-radius: 1em
+
+    &.focused
+      color: $base07
+      background: $base0D
+
+    &:hover
+      transition: none
+      box-shadow: inherit
+      text-shadow: inherit
+      background: $base06
+      color: $base0C
+
+#window
+  background: $base00$alpha
+  padding: 0 8px
+  color: $base06
+  border-bottom: 2px solid transparent
+
+tooltip
+  background: $base00$alpha
+  border-radius: 1em
+  label
+    color: $base07
+
+window#waybar.empty #window
+  opacity: 0

overlays/wofi-style/default.nix

@@ -0,0 +1,22 @@
+final: prev: {
+  wofi-style = final.callPackage ({ stdenv, sass }: { base16 }:
+  stdenv.mkDerivation ({
+    pname = "wofi-style";
+    version = "0.0.1";
+
+    phases = [ "buildPhase" ];
+
+    src = ./wofi.sass;
+
+    nativeBuildInputs = [
+      sass
+    ];
+
+    buildPhase = ''
+      substituteAll $src wofi-sub.sass
+      sass wofi-sub.sass $out --sourcemap=none --style expanded
+    '';
+
+    alpha = "80";
+  } // base16)) {};
+}

overlays/wofi-style/wofi.sass

@@ -0,0 +1,46 @@
+$base00: @base00@
+$base01: @base01@
+$base02: @base02@
+$base03: @base03@
+$base04: @base04@
+$base05: @base05@
+$base06: @base06@
+$base07: @base07@
+$base08: @base08@
+$base09: @base09@
+$base0A: @base0A@
+$base0B: @base0B@
+$base0C: @base0C@
+$base0D: @base0D@
+$base0E: @base0E@
+$base0F: @base0F@
+$alpha: @alpha@
+$font: "Cozette"
+$font_size: 12px
+
+#scroll
+	background: $base01
+	border: 1px solid $base03
+
+#input
+	background: $base01
+	border: 1px solid $base0C
+	margin: 1em
+	background: $base02
+	color: $base04
+
+window
+	font-family: $font
+	background: $base00$alpha
+	border-radius: 1em
+	font-size: $font_size
+	color: $base07
+
+#outer-box
+	margin: 1em
+
+#entry
+	border-bottom: 1px dashed $base04
+	padding: .75em
+	&:selected
+		background-color: $base0D