Opacity support (#77)

modules/alacritty/hm.nix

@@ -25,6 +25,7 @@ in
         };
         size = sizes.terminal;
       };
+      window.opacity = with config.stylix.opacity; terminal;
       import = [ themeFile ];
     };
   };

modules/avizo/hm.nix

@@ -2,6 +2,9 @@
 
 with config.lib.stylix.colors.withHashtag;
 with config.stylix.fonts;
+let
+  aviOpacity = lib.toHexString ((((builtins.ceil (config.stylix.opacity.popups * 100)) * 255) / 100));
+in
 {
   options.stylix.targets.avizo.enable =
     config.lib.stylix.mkEnableTarget "Avizo" true;
@@ -11,10 +14,10 @@ with config.stylix.fonts;
     services.avizo = {
         settings = {
             default = {
-                background=base00;
+                background=base00 + aviOpacity;
                 border-color=base0D;
                 bar-fg-color=base05;
-                bar-bg-color=base00;
+                bar-bg-color=base00 + aviOpacity;
             };
         };
     }; 

modules/bemenu/hm.nix

@@ -2,7 +2,9 @@
 
 with config.lib.stylix.colors.withHashtag;
 with config.stylix.fonts;
-{
+let
+  bemenuOpacity = lib.toHexString ((((builtins.ceil (config.stylix.opacity.popups * 100)) * 255) / 100));
+in {
   options.stylix.targets.bemenu = {
     enable = config.lib.stylix.mkEnableTarget "bemenu" true;
 
@@ -26,11 +28,11 @@ with config.stylix.fonts;
   config = lib.mkIf config.stylix.targets.bemenu.enable {
     home.sessionVariables.BEMENU_OPTS = with config.stylix.targets.bemenu; builtins.concatStringsSep " " [
       # Inspired from https://git.sr.ht/~h4n1/base16-bemenu_opts
-      "--tb '${base01}'"
-      "--nb '${base01}'"
-      "--fb '${base01}'"
-      "--hb '${base03}'"
-      "--sb '${base03}'"
+      "--tb '${base01}${bemenuOpacity}'"
+      "--nb '${base01}${bemenuOpacity}'"
+      "--fb '${base01}${bemenuOpacity}'"
+      "--hb '${base03}${bemenuOpacity}'"
+      "--sb '${base03}${bemenuOpacity}'"
       "--hf '${base0A}'"
       "--sf '${base0B}'"
       "--tf '${base05}'"

modules/dunst/hm.nix

@@ -2,8 +2,9 @@
 
 with config.lib.stylix.colors.withHashtag;
 with config.stylix.fonts;
-
-{
+let
+  dunstOpacity = lib.toHexString ((((builtins.ceil (config.stylix.opacity.popups * 100)) * 255) / 100));
+in {
   options.stylix.targets.dunst.enable =
     config.lib.stylix.mkEnableTarget "Dunst" true;
 
@@ -15,19 +16,19 @@ with config.stylix.fonts;
       };
 
       urgency_low = {
-        background = base01;
+        background = base01 + dunstOpacity;
         foreground = base05;
         frame_color = base0B;
       };
 
       urgency_normal = {
-        background = base01;
+        background = base01 + dunstOpacity;
         foreground = base05;
         frame_color = base0E;
       };
 
       urgency_critical = {
-        background = base01;
+        background = base01 + dunstOpacity;
         foreground = base05;
         frame_color = base08;
       };

modules/emacs/hm.nix

@@ -3,6 +3,9 @@
 with config.lib.stylix.colors.withHashtag;
 with config.stylix.fonts;
 
+let
+  emacsOpacity = builtins.toString (builtins.ceil (config.stylix.opacity.applications * 100));
+in
 {
   options.stylix.targets.emacs.enable =
     config.lib.stylix.mkEnableTarget "Emacs" config.programs.emacs.enable;
@@ -62,6 +65,9 @@ with config.stylix.fonts;
         ;; Set font
         (set-face-attribute 'default t :font "${monospace.name}" )
         ;; -----------------------------
+        ;; set opacity
+        (add-to-list 'default-frame-alist '(alpha-background . ${emacsOpacity}))
+        ;; -----------------------------
       '';
     };
   };

modules/foot/hm.nix

@@ -16,11 +16,14 @@ in {
   options.stylix.targets.foot.enable =
     config.lib.stylix.mkEnableTarget "Foot" true;
 
-  config.programs.foot.settings.main = lib.mkIf cfg.enable {
-    include = theme;
-    font =
-      with config.stylix.fonts;
-      "${monospace.name}:size=${toString sizes.terminal}";
-    dpi-aware = "no";
+  config.programs.foot.settings = lib.mkIf cfg.enable {
+    main = {
+        include = theme;
+        font =
+          with config.stylix.fonts;
+          "${monospace.name}:size=${toString sizes.terminal}";
+        dpi-aware = "no";
+    };
+    colors.alpha = with config.stylix.opacity; terminal;
   };
 }

modules/gtk/gtk.mustache

@@ -75,4 +75,4 @@
 @define-color dark_2 #{{base01-hex}};
 @define-color dark_3 #{{base01-hex}};
 @define-color dark_4 #{{base01-hex}};
-@define-color dark_5 #{{base01-hex}};
+@define-color dark_5 #{{base01-hex}};

modules/kitty/hm.nix

@@ -31,6 +31,7 @@ in {
         inherit (config.stylix.fonts.monospace) package name;
         size = config.stylix.fonts.sizes.terminal;
       };
+      settings.background_opacity = with config.stylix.opacity; "${builtins.toString terminal}";
       extraConfig = builtins.readFile theme;
     };
   };

modules/mako/hm.nix

@@ -2,14 +2,16 @@
 
 with config.lib.stylix.colors.withHashtag;
 with config.stylix.fonts;
-{
+let
+  makoOpacity = lib.toHexString ((((builtins.ceil (config.stylix.opacity.popups * 100)) * 255) / 100));
+in {
   options.stylix.targets.mako.enable =
     config.lib.stylix.mkEnableTarget "Mako" true;
 
   # Referenced https://github.com/stacyharper/base16-mako
   config = lib.mkIf config.stylix.targets.mako.enable {
     services.mako = {
-      backgroundColor = base00;
+      backgroundColor = base00 + makoOpacity;
       borderColor = base0D;
       textColor = base05;
       progressColor = "over ${base02}";
@@ -17,12 +19,12 @@ with config.stylix.fonts;
       # I wish the mako hm module was like the dunst one
       extraConfig = ''
         [urgency=low]
-        background-color=${base00}
+        background-color=${base00}${makoOpacity}
         border-color=${base0D}
         text-color=${base0A}
 
         [urgency=high]
-        background-color=${base00}
+        background-color=${base00}${makoOpacity}
         border-color=${base0D}
         text-color=${base08}
       '';

modules/rofi/hm.nix

@@ -3,13 +3,19 @@
 with config.stylix.fonts;
 
 let
-  themeFile = config.lib.stylix.colors {
-    templateRepo = pkgs.fetchFromGitHub {
-      owner = "tinted-theming";
-      repo = "base16-rofi";
-      rev = "3f64a9f8d8cb7db796557b516682b255172c4ab4";
-      sha256 = "sha256-RZpjCQ8KGO3cv9A/lNNoTE+WJ9sNk5sz0zJq02zzxA8=";
-    };
+  rofiOpacity = builtins.toString (builtins.ceil (config.stylix.opacity.popups * 100));
+  finalString = ''
+   * { background: rgba ( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, ${rofiOpacity} % );
+       lightbg: rgba ( {{base01-rgb-r}}, {{base01-rgb-g}}, {{base01-rgb-b}}, ${rofiOpacity} % );
+       red: rgba ( {{base08-rgb-r}}, {{base08-rgb-g}}, {{base08-rgb-b}}, ${rofiOpacity} % );
+       blue: rgba ( {{base0D-rgb-r}}, {{base0D-rgb-g}}, {{base0D-rgb-b}}, ${rofiOpacity} % );
+       lightfg: rgba ( {{base06-rgb-r}}, {{base06-rgb-g}}, {{base06-rgb-b}}, ${rofiOpacity} % );
+       foreground: rgba ( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, ${rofiOpacity} % );
+   }
+   '' + builtins.toString (builtins.readFile ./template.mustache);
+  finalFile = config.lib.stylix.colors {
+      template = finalString;
+      extension = ".rasi";
   };
 in
 {
@@ -19,7 +25,7 @@ in
   config = lib.mkIf config.stylix.targets.rofi.enable {
     programs.rofi = {
       font = "${monospace.name} ${toString sizes.popups}";
-      theme = themeFile;
+      theme = finalFile;
     };
   };
 }

modules/rofi/template.mustache

@@ -0,0 +1,157 @@
+/**
+ * Base16 {{scheme-name}} ROFI Color theme
+ *
+ * Authors
+ *  Scheme: {{scheme-author}}
+ *  Template: Tinted Theming (https://github.com/tinted-theming)
+ */
+
+* {
+    background-color:            rgba ( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, 0 % );
+    separatorcolor:              @foreground;
+    border-color:                @foreground;
+    selected-normal-foreground:  @lightbg;
+    selected-normal-background:  @lightfg;
+    selected-active-foreground:  @background;
+    selected-active-background:  @blue;
+    selected-urgent-foreground:  @background;
+    selected-urgent-background:  @red;
+    normal-foreground:           @foreground;
+    normal-background:           @background;
+    active-foreground:           @blue;
+    active-background:           @background;
+    urgent-foreground:           @red;
+    urgent-background:           @background;
+    alternate-normal-foreground: @foreground;
+    alternate-normal-background: @lightbg;
+    alternate-active-foreground: @blue;
+    alternate-active-background: @lightbg;
+    alternate-urgent-foreground: @red;
+    alternate-urgent-background: @lightbg;
+
+    /* Text Colors */
+    base-text: rgba ( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 100 % );
+    selected-normal-text: rgba ( {{base01-rgb-r}}, {{base01-rgb-g}}, {{base01-rgb-b}}, 100 % );
+    selected-active-text: rgba ( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, 100 % );
+    selected-urgent-text: rgba ( {{base00-rgb-r}}, {{base00-rgb-g}}, {{base00-rgb-b}}, 100 % );
+    normal-text: rgba ( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 100 % );
+    active-text: rgba ( {{base0D-rgb-r}}, {{base0D-rgb-g}}, {{base0D-rgb-b}}, 100 % );
+    urgent-text: rgba ( {{base08-rgb-r}}, {{base08-rgb-g}}, {{base08-rgb-b}}, 100 % );
+    alternate-normal-text: rgba ( {{base05-rgb-r}}, {{base05-rgb-g}}, {{base05-rgb-b}}, 100 % );
+    alternate-active-text: rgba ( {{base0D-rgb-r}}, {{base0D-rgb-g}}, {{base0D-rgb-b}}, 100 % );
+    alternate-urgent-text: rgba ( {{base08-rgb-r}}, {{base08-rgb-g}}, {{base08-rgb-b}}, 100 % );
+
+    spacing: 2;
+}
+window {
+    background-color: @background;
+    border:           1;
+    padding:          5;
+}
+mainbox {
+    border:           0;
+    padding:          0;
+}
+message {
+    border:           1px dash 0px 0px ;
+    border-color:     @separatorcolor;
+    padding:          1px ;
+}
+textbox {
+    text-color:       @base-text;
+}
+listview {
+    fixed-height:     0;
+    border:           2px dash 0px 0px ;
+    border-color:     @separatorcolor;
+    spacing:          2px ;
+    scrollbar:        true;
+    padding:          2px 0px 0px ;
+}
+element-text, element-icon {
+    background-color: inherit;
+    text-color:       inherit;
+}
+element {
+    border:           0;
+    padding:          1px ;
+}
+element normal.normal {
+    background-color: @normal-background;
+    text-color:       @normal-text;
+}
+element normal.urgent {
+    background-color: @urgent-background;
+    text-color:       @urgent-text;
+}
+element normal.active {
+    background-color: @active-background;
+    text-color:       @active-text;
+}
+element selected.normal {
+    background-color: @selected-normal-background;
+    text-color:       @selected-normal-text;
+}
+element selected.urgent {
+    background-color: @selected-urgent-background;
+    text-color:       @selected-urgent-text;
+}
+element selected.active {
+    background-color: @selected-active-background;
+    text-color:       @selected-active-text;
+}
+element alternate.normal {
+    background-color: @alternate-normal-background;
+    text-color:       @alternate-normal-text;
+}
+element alternate.urgent {
+    background-color: @alternate-urgent-background;
+    text-color:       @alternate-urgent-text;
+}
+element alternate.active {
+    background-color: @alternate-active-background;
+    text-color:       @alternate-active-text;
+}
+scrollbar {
+    width:            4px ;
+    border:           0;
+    handle-color:     @normal-foreground;
+    handle-width:     8px ;
+    padding:          0;
+}
+sidebar {
+    border:           2px dash 0px 0px ;
+    border-color:     @separatorcolor;
+}
+button {
+    spacing:          0;
+    text-color:       @normal-text;
+}
+button selected {
+    background-color: @selected-normal-background;
+    text-color:       @selected-normal-text;
+}
+inputbar {
+    spacing:          0px;
+    text-color:       @normal-text;
+    padding:          1px ;
+    children:         [ prompt,textbox-prompt-colon,entry,case-indicator ];
+}
+case-indicator {
+    spacing:          0;
+    text-color:       @normal-text;
+}
+entry {
+    spacing:          0;
+    text-color:       @normal-text;
+}
+prompt {
+    spacing:          0;
+    text-color:       @normal-text;
+}
+textbox-prompt-colon {
+    expand:           false;
+    str:              ":";
+    margin:           0px 0.3000em 0.0000em 0.0000em ;
+    text-color:       inherit;
+}

modules/waybar/base.css

@@ -1,8 +1,3 @@
-window#waybar {
-    background: @base00;
-    color: @base05;
-}
-
 #wireplumber,
 #pulseaudio,
 #sndio {

modules/waybar/hm.nix

@@ -35,6 +35,11 @@ with config.stylix.fonts;
         font-family: ${sansSerif.name};
         font-size: ${builtins.toString sizes.desktop};
     }
+
+    window#waybar {
+        background: alpha(@base00, ${with config.stylix.opacity; builtins.toString desktop});
+        color: @base05;
+    }
     ''
     + (builtins.readFile ./base.css)
     + (if config.stylix.targets.waybar.enableLeftBackColors then builtins.readFile ./left.css else ''

modules/zathura/hm.nix

@@ -1,8 +1,7 @@
 { config, lib, ... }:
 
-let
-  colors = config.lib.stylix.colors;
-in {
+with config.lib.stylix.colors;
+{
   options.stylix.targets.zathura.enable =
     config.lib.stylix.mkEnableTarget "Zathura" true;
 
@@ -10,26 +9,26 @@ in {
     # Taken from here:
     #   https://github.com/doenerkebap/base16-zathura
     programs.zathura.options = {
-      default-bg = "#${colors.base00}";
-      default-fg = "#${colors.base01}";
-      statusbar-fg = "#${colors.base04}";
-      statusbar-bg = "#${colors.base02}";
-      inputbar-bg = "#${colors.base00}";
-      inputbar-fg = "#${colors.base07}";
-      notification-bg = "#${colors.base00}";
-      notification-fg = "#${colors.base07}";
-      notification-error-bg = "#${colors.base00}";
-      notification-error-fg = "#${colors.base08}";
-      notification-warning-bg = "#${colors.base00}";
-      notification-warning-fg = "#${colors.base08}";
-      highlight-color = "#${colors.base0A}";
-      highlight-active-color = "#${colors.base0D}";
-      completion-bg = "#${colors.base01}";
-      completion-fg = "#${colors.base0D}";
-      completion-highlight-fg = "#${colors.base07}";
-      completion-highlight-bg = "#${colors.base0D}";
-      recolor-lightcolor = "#${colors.base00}";
-      recolor-darkcolor = "#${colors.base06}";
+      default-bg = "#${base00}";
+      default-fg = "#${base01}";
+      statusbar-fg = "#${base04}";
+      statusbar-bg = "#${base02}";
+      inputbar-bg = "#${base00}";
+      inputbar-fg = "#${base07}";
+      notification-bg = "#${base00}";
+      notification-fg = "#${base07}";
+      notification-error-bg = "#${base00}";
+      notification-error-fg = "#${base08}";
+      notification-warning-bg = "#${base00}";
+      notification-warning-fg = "#${base08}";
+      highlight-color = "#${base0A}";
+      highlight-active-color = "#${base0D}";
+      completion-bg = "#${base01}";
+      completion-fg = "#${base0D}";
+      completion-highlight-fg = "#${base07}";
+      completion-highlight-bg = "#${base0D}";
+      recolor-lightcolor = "#${base00}";
+      recolor-darkcolor = "#${base06}";
       recolor = false;
       recolor-keephue = false;
     };

stylix/hm/default.nix

@@ -7,6 +7,7 @@ in {
   imports = [
     ../pixel.nix
     ../target.nix
+    ../opacity.nix
     ./fonts.nix
     (import ./palette.nix { inherit palette-generator base16; })
   ] ++ autoload;

stylix/nixos/default.nix

@@ -8,6 +8,7 @@ in {
   imports = [
     ../pixel.nix
     ../target.nix
+    ../opacity.nix
     ./fonts.nix
     (import ./palette.nix { inherit palette-generator base16; })
   ] ++ autoload;

stylix/opacity.nix

@@ -0,0 +1,31 @@
+{ pkgs, config, lib, ... } @ args:
+
+with lib;
+
+let
+  cfg = config.stylix.opacity;
+  fromOs = import ./fromos.nix { inherit lib args; };
+in {
+    options.stylix.opacity = {
+        desktop = mkOption {
+            description = mdDoc "The opacity of the windows of bars/widgets, the amount of applications supported is currently limited";
+            type = types.float;
+            default = fromOs [ "opacity" "desktop" ] 1.0;
+        };
+        applications = mkOption {
+            description = mdDoc "The opacity of the windows of applications, the amount of applications supported is currently limited";
+            type = types.float;
+            default = fromOs [ "opacity" "applications" ] 1.0;
+        };
+        terminal = mkOption {
+            description = mdDoc "The opacity of the windows of terminals, this works across all terminals supported by stylix";
+            type = types.float;
+            default = fromOs [ "opacity" "terminal" ] 1.0;
+        };
+        popups = mkOption {
+            description = mdDoc "The opacity of the windows of notifications/popups, the amount of applications supported is currently limited";
+            type = types.float;
+            default = fromOs [ "opacity" "popups" ] 1.0;
+        };
+    };
+}