home/programs/waybar/default.nix

@@ -1,22 +1,16 @@
 {
   pkgs,
   lib,
-  lib',
   osConfig,
   config,
   ...
 }: let
-  inherit (lib) getExe mkMerge mkIf optionalString;
+  inherit (lib) getExe mkMerge mkIf;
-  inherit (lib') generateGtkColors;
-  inherit (osConfig.theme.scheme) palette;
-  inherit (builtins) readFile;
 in {
+  imports = [./style.nix];
   programs.waybar = {
     enable = true;
     systemd.enable = true;
-    style =
-      optionalString osConfig.theme.enable generateGtkColors lib palette
-      + readFile ./style.css;
     settings = {
       mainBar = mkMerge [
         {

home/programs/waybar/style.css

@@ -1,91 +0,0 @@
-* {
-  /* `otf-font-awesome` is required to be installed for icons */
-  border: none;
-  border-radius: 0px;
-  min-height: 0;
-}
-
-window#waybar {
-  border-radius: 2em;
-  font-family: "Symbols Nerd Font", Inter, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  background: alpha(
-    @base00,
-    0.9999999
-  ); /* niri issue workaround, thanks https://github.com/oatmealine/nix-config/blob/bfdddd2cb36ef659bcddc28e0dbb542b6db8b3bc/modules/desktop/themes/catppuccin/waybar.css#L14 */
-  color: @base05;
-}
-
-#workspaces,
-.modules-right box {
-  background: @base02;
-  padding: 0.15em 0.25em;
-  border-radius: 1em;
-  margin: 0 0.25em;
-}
-
-#workspaces {
-  padding: 0;
-  background: @base02;
-}
-
-#workspaces button:nth-child(1) {
-  border-top-left-radius: 1em;
-  border-bottom-left-radius: 1em;
-}
-#workspaces button:nth-last-child(1) {
-  border-top-right-radius: 1em;
-  border-bottom-right-radius: 1em;
-}
-
-#workspaces button {
-  padding: 0 0.5em;
-  background-color: transparent;
-}
-
-#workspaces button:hover {
-  background: rgba(255, 255, 255, 0.1);
-  box-shadow: none;
-}
-
-#workspaces button.active {
-  background: @base0E;
-  color: @base02;
-}
-
-#workspaces button.urgent {
-  background: @base08;
-}
-
-#window {
-  margin-left: 1em;
-}
-
-.modules-left,
-.modules-right {
-  margin: 0.4em 0.5em;
-}
-
-#battery,
-#clock,
-#network,
-#pulseaudio,
-#tray,
-#power-profiles-daemon {
-  padding: 0 0.5em;
-}
-
-.modules-left,
-.modules-right {
-  margin: 0.4em 0.5em;
-}
-
-#custom-power {
-  padding: 0 1.2em;
-  color: @base08;
-}
-
-#custom-notification {
-  padding: 0 1.2em;
-}

home/programs/waybar/style.nix

@@ -0,0 +1,111 @@
+{
+  lib,
+  osConfig,
+  ...
+}: let
+  inherit (osConfig.theme.scheme) palette;
+  inherit (lib) mapAttrsToList concatLines optionalString;
+
+  generateGtkColors = palette: (concatLines
+    (mapAttrsToList
+      (name: color: "@define-color ${name} ${color};")
+      palette));
+in {
+  programs.waybar.style =
+    optionalString osConfig.theme.enable generateGtkColors palette
+    + ''
+      * {
+        /* `otf-font-awesome` is required to be installed for icons */
+        border: none;
+        border-radius: 0px;
+        min-height: 0;
+      }
+
+      window#waybar {
+        border-radius: 2em;
+        font-family: "Symbols Nerd Font", Inter, sans-serif;
+        font-size: 16px;
+        font-style: normal;
+        background: alpha(
+          @base00,
+          0.9999999
+        ); /* niri issue workaround, thanks https://github.com/oatmealine/nix-config/blob/bfdddd2cb36ef659bcddc28e0dbb542b6db8b3bc/modules/desktop/themes/catppuccin/waybar.css#L14 */
+        color: @base05;
+      }
+
+      #workspaces,
+      .modules-right box {
+        background: @base02;
+        padding: 0.15em 0.25em;
+        border-radius: 1em;
+        margin: 0 0.25em;
+      }
+
+      #workspaces {
+        padding: 0;
+        background: @base02;
+      }
+
+      #workspaces button:nth-child(1) {
+        border-top-left-radius: 1em;
+        border-bottom-left-radius: 1em;
+      }
+      #workspaces button:nth-last-child(1) {
+        border-top-right-radius: 1em;
+        border-bottom-right-radius: 1em;
+      }
+
+      #workspaces button {
+        padding: 0 0.5em;
+        background-color: transparent;
+      }
+
+      #workspaces button:hover {
+        background: rgba(255, 255, 255, 0.1);
+        box-shadow: none;
+      }
+
+      #workspaces button.active {
+        background: @base0E;
+        color: @base02;
+      }
+
+      #workspaces button.urgent {
+        background: @base08;
+      }
+
+      #window {
+        margin-left: 1em;
+      }
+
+      .modules-left,
+      .modules-right {
+        margin: 0.4em 0.5em;
+      }
+
+      #battery,
+      #clock,
+      #network,
+      #pulseaudio,
+      #tray,
+      #power-profiles-daemon
+      {
+        padding: 0 0.5em;
+      }
+
+      .modules-left,
+      .modules-right {
+        margin: 0.4em 0.5em;
+      }
+
+
+      #custom-power {
+        padding: 0 1.2em;
+        color: @base08;
+      }
+
+      #custom-notification {
+        padding: 0 1.2em;
+      }
+    '';
+}

home/services/swaync.nix

@@ -0,0 +1,7 @@
+{lib, ...}: {
+  services.swaync = {
+    enable = true;
+  };
+  # systemd.user.services.swaync.Service.Environment = "WAYLAND_DISPLAY=wayland-1";
+  systemd.user.services.swaync.Unit.ConditionEnvironment = lib.mkForce "";
+}

home/services/swaync/default.nix

@@ -1,20 +0,0 @@
-{
-  osConfig,
-  lib,
-  lib',
-  ...
-}: let
-  inherit (lib) optionalString;
-  inherit (lib') generateGtkColors;
-  inherit (osConfig.theme.scheme) palette;
-  inherit (builtins) readFile;
-in {
-  services.swaync = {
-    enable = true;
-    style =
-      optionalString osConfig.theme.enable generateGtkColors lib palette
-      + readFile ./style.css;
-  };
-  # systemd.user.services.swaync.Service.Environment = "WAYLAND_DISPLAY=wayland-1";
-  systemd.user.services.swaync.Unit.ConditionEnvironment = lib.mkForce "";
-}

home/services/swaync/style.css

@@ -1,450 +0,0 @@
-* {
-  all: unset;
-  font-size: 14px;
-  font-family: "Ubuntu Nerd Font";
-  transition:
-    background 200ms,
-    border-radius 200ms; /* exclude color from transition so it looks more natural */
-}
-
-trough highlight {
-  background: @base05;
-}
-
-scale trough {
-  margin: 0rem 1rem;
-  background-color: @base02;
-  min-height: 8px;
-  min-width: 70px;
-}
-
-slider {
-  background-color: @base0D;
-}
-
-.floating-notifications.background .notification-row .notification-background {
-  box-shadow:
-    0 0 8px 0 rgba(0, 0, 0, 0.8),
-    inset 0 0 0 1px @base02;
-  border-radius: 12.6px;
-  margin: 18px;
-  background-color: @base00;
-  color: @base05;
-  padding: 0;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification {
-  padding: 7px;
-  border-radius: 12.6px;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification.critical {
-  box-shadow: inset 0 0 7px 0 @base08;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification
-  .notification-content {
-  margin: 7px;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification
-  .notification-content
-  .summary {
-  color: @base05;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification
-  .notification-content
-  .time {
-  color: @base03;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification
-  .notification-content
-  .body {
-  color: @base05;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification
-  > *:last-child
-  > * {
-  min-height: 3.4em;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification
-  > *:last-child
-  > *
-  .notification-action {
-  border-radius: 7px;
-  color: @base05;
-  background-color: @base02;
-  box-shadow: inset 0 0 0 1px @base03;
-  margin: 7px;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification
-  > *:last-child
-  > *
-  .notification-action:hover {
-  box-shadow: inset 0 0 0 1px @base03;
-  background-color: @base02;
-  color: @base05;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .notification
-  > *:last-child
-  > *
-  .notification-action:active {
-  box-shadow: inset 0 0 0 1px @base03;
-  background-color: @base0C;
-  color: @base05;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .close-button {
-  margin: 7px;
-  padding: 2px;
-  border-radius: 6.3px;
-  color: @base00;
-  background-color: @base08;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .close-button:hover {
-  background-color: @base08;
-  color: @base00;
-}
-
-.floating-notifications.background
-  .notification-row
-  .notification-background
-  .close-button:active {
-  background-color: @base08;
-  color: @base00;
-}
-
-.control-center {
-  box-shadow:
-    0 0 8px 0 rgba(0, 0, 0, 0.8),
-    inset 0 0 0 1px @base02;
-  border-radius: 12.6px;
-  margin: 18px;
-  background-color: @base00;
-  color: @base05;
-  padding: 14px;
-}
-
-.control-center .widget-title > label {
-  color: @base05;
-  font-size: 1.3em;
-}
-
-.control-center .widget-title button {
-  border-radius: 7px;
-  color: @base05;
-  background-color: @base02;
-  box-shadow: inset 0 0 0 1px @base03;
-  padding: 8px;
-}
-
-.control-center .widget-title button:hover {
-  box-shadow: inset 0 0 0 1px @base03;
-  background-color: @base04;
-  color: @base05;
-}
-
-.control-center .widget-title button:active {
-  box-shadow: inset 0 0 0 1px @base03;
-  background-color: @base0C;
-  color: @base00;
-}
-
-.control-center .notification-row .notification-background {
-  border-radius: 7px;
-  color: @base05;
-  background-color: @base02;
-  box-shadow: inset 0 0 0 1px @base03;
-  margin-top: 14px;
-}
-
-.control-center .notification-row .notification-background .notification {
-  padding: 7px;
-  border-radius: 7px;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .notification.critical {
-  box-shadow: inset 0 0 7px 0 @base08;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .notification
-  .notification-content {
-  margin: 7px;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .notification
-  .notification-content
-  .summary {
-  color: @base05;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .notification
-  .notification-content
-  .time {
-  color: @base03;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .notification
-  .notification-content
-  .body {
-  color: @base05;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .notification
-  > *:last-child
-  > * {
-  min-height: 3.4em;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .notification
-  > *:last-child
-  > *
-  .notification-action {
-  border-radius: 7px;
-  color: @base05;
-  background-color: @base00;
-  box-shadow: inset 0 0 0 1px @base03;
-  margin: 7px;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .notification
-  > *:last-child
-  > *
-  .notification-action:hover {
-  box-shadow: inset 0 0 0 1px @base03;
-  background-color: @base02;
-  color: @base05;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .notification
-  > *:last-child
-  > *
-  .notification-action:active {
-  box-shadow: inset 0 0 0 1px @base03;
-  background-color: @base0C;
-  color: @base05;
-}
-
-.control-center .notification-row .notification-background .close-button {
-  margin: 7px;
-  padding: 2px;
-  border-radius: 6.3px;
-  color: @base00;
-  background-color: @base08;
-}
-
-.control-center .notification-row .notification-background .close-button:hover {
-  background-color: @base08;
-  color: @base00;
-}
-
-.control-center
-  .notification-row
-  .notification-background
-  .close-button:active {
-  background-color: @base08;
-  color: @base00;
-}
-
-.control-center .notification-row .notification-background:hover {
-  box-shadow: inset 0 0 0 1px @base03;
-  background-color: @base04;
-  color: @base05;
-}
-
-.control-center .notification-row .notification-background:active {
-  box-shadow: inset 0 0 0 1px @base03;
-  background-color: @base0C;
-  color: @base05;
-}
-
-.notification.critical progress {
-  background-color: @base08;
-}
-
-.notification.low progress,
-.notification.normal progress {
-  background-color: @base0D;
-}
-
-.control-center-dnd {
-  margin-top: 5px;
-  border-radius: 8px;
-  background: @base02;
-  border: 1px solid @base03;
-  box-shadow: none;
-}
-
-.control-center-dnd:checked {
-  background: @base0C;
-}
-
-.control-center-dnd slider {
-  background: @base0C;
-  border-radius: 8px;
-}
-
-.widget-dnd {
-  margin: 0px;
-  font-size: 1.1rem;
-}
-
-.widget-dnd > switch {
-  font-size: initial;
-  border-radius: 8px;
-  background: @base02;
-  border: 1px solid @base03;
-  box-shadow: none;
-}
-
-.widget-dnd > switch:checked {
-  background: @base0C;
-  color: @base00;
-}
-
-.widget-dnd > switch slider {
-  background: @base03;
-  border-radius: 8px;
-  border: 1px solid @base03;
-}
-
-.widget-mpris .widget-mpris-player {
-  background: @base02;
-  padding: 7px;
-}
-
-.widget-mpris .widget-mpris-title {
-  font-size: 1.2rem;
-}
-
-.widget-mpris .widget-mpris-subtitle {
-  font-size: 0.8rem;
-}
-
-.widget-menubar > box > .menu-button-bar > button > label {
-  font-size: 3rem;
-  padding: 0.5rem 2rem;
-}
-
-.widget-menubar > box > .menu-button-bar > :last-child {
-  color: @base08;
-}
-
-.power-buttons button:hover,
-.powermode-buttons button:hover,
-.screenshot-buttons button:hover {
-  background: @base02;
-}
-
-.control-center .widget-label > label {
-  color: @base05;
-  font-size: 2rem;
-}
-
-.widget-buttons-grid {
-  padding-top: 1rem;
-}
-
-.widget-buttons-grid > flowbox > flowboxchild > button label {
-  font-size: 2.5rem;
-}
-
-.widget-volume {
-  padding-top: 1rem;
-}
-
-.widget-volume label {
-  font-size: 1.5rem;
-  color: @base0C;
-}
-
-.widget-volume trough highlight {
-  background: @base0C;
-}
-
-.widget-backlight trough highlight {
-  background: @base0A;
-}
-
-.widget-backlight label {
-  font-size: 1.5rem;
-  color: @base0A;
-}
-
-.widget-backlight .KB {
-  padding-bottom: 1rem;
-}
-
-.image {
-  padding-right: 0.5rem;
-}

hosts/vamos/default.nix

@@ -35,7 +35,7 @@ in {
 
       "${home}/programs/niri"
       "${home}/programs/waybar"
-      "${home}/services/swaync"
+      "${home}/services/swaync.nix"
       "${home}/programs/fuzzel.nix"
       "${home}/programs/swaybg.nix"
       "${home}/programs/swaylock.nix"

lib/default.nix

@@ -50,11 +50,6 @@ let
     ''
       magick ${path} -gaussian-blur 0x12 "$out"
     '';
-
-  generateGtkColors = lib: palette: (lib.concatLines
-    (lib.mapAttrsToList
-      (name: color: "@define-color ${name} ${color};")
-      palette));
 in {
-  inherit blurImage generateGtkColors rgba;
+  inherit blurImage rgba;
 }