feat(oxinoti/oxidash): Adopt styling to theme

modules/programs/oxi/oxidash.nix

@@ -2,8 +2,15 @@
   lib,
   config,
   options,
+  pkgs,
+  inputs,
   ...
-}: {
+}: let
+  # at time of using this here, stylix might not be evaluated yet
+  # hence ensure it is by using base16 mkSchemeAttrs
+  base16 = pkgs.callPackage inputs.base16.lib {};
+  scheme = base16.mkSchemeAttrs config.stylix.base16Scheme;
+in {
   options.mods.oxi.oxidash = {
     enable = lib.mkOption {
       default = true;
@@ -17,52 +24,54 @@
       programs.oxidash.enable = true;
       xdg.configFile."oxidash/style.css" = {
         text = ''
+          @define-color bg #${scheme.base00};
+          @define-color primary #${scheme.base0D};
+
           #MainWindow {
             border-radius: 10px;
+            background-color: transparent;
           }
 
           #MainBox {
             border-radius: 10px;
+            border: 1px solid @primary;
+            background-color: @bg;
           }
 
           #MainButtonBox {
             padding: 10px;
             margin: 5px 0px 5px 0px;
             border-radius: 5px;
-            border: solid 2px #327cd5;
+            border: solid 1px @primary;
           }
 
-          #DoNotDisturbButton {
+          #DoNotDisturbButton {}
-          }
 
-          #ExitButton {
+          #ExitButton {}
-          }
 
-          #ClearNotificationsButton {
+          #ClearNotificationsButton {}
-          }
 
-          #NotificationsWindow {
+          #NotificationsWindow {}
-          }
 
           .debugimage {
-            border: solid 3px blue;
+            border: solid 3px @primary;
           }
 
           .Notification {
             padding: 10px;
             margin: 5px 0px 5px 0px;
-            border: solid 2px #327cd5;
+            border: solid 1px @primary;
             border-radius: 5px;
           }
 
           .CloseNotificationButton {
             margin: 0px 5px 0px 10px;
           }
-          .PictureButtonBox {
+
+          .PictureButtonBox {}
+
+          .BaseBox {}
           }
-          .BaseBox {
-          }
-            }
         '';
       };
     }

modules/programs/oxi/oxinoti.nix

@@ -2,8 +2,15 @@
   lib,
   config,
   options,
+  pkgs,
+  inputs,
   ...
-}: {
+}: let
+  # at time of using this here, stylix might not be evaluated yet
+  # hence ensure it is by using base16 mkSchemeAttrs
+  base16 = pkgs.callPackage inputs.base16.lib {};
+  scheme = base16.mkSchemeAttrs config.stylix.base16Scheme;
+in {
   options.mods.oxi.oxinoti = {
     enable = lib.mkOption {
       default = true;
@@ -19,7 +26,13 @@
         text =
           # css
           ''
-            @import url("/home/${config.conf.username}/.config/gtk-3.0/gtk.css");
+            @import url("/home/dashie/.config/gtk-3.0/gtk.css");
+
+            @define-color bg #${scheme.base00};
+            @define-color bghover #${scheme.base02};
+            @define-color primary #${scheme.base0D};
+            @define-color red #${scheme.base08};
+            @define-color green #${scheme.base0B};
 
             #MainWindow {
               background-color: transparent;
@@ -34,31 +47,37 @@
             }
 
             .NotificationBox {
-              background-color: #353747;
+              background-color: @bg;
               border-radius: 5px;
               border: solid 1px;
               margin: 0px;
-              padding: 5px;
+            }
+
+            .NotificationBox button {
+              background-color: @bg;
+            }
+
+            .NotificationBox button:hover {
+              background-color: @bghover;
             }
 
             .NotificationLow {
-              border-color: green;
+              border-color: @green;
             }
 
             .NotificationNormal {
-              border-color: purple;
+              border-color: @primary;
             }
 
             .NotificationUrgent {
-              border-color: red;
+              border-color: @red;
             }
 
             .miscbox {
               margin: 0px 10px 0px 0px;
             }
 
-            .bodybox {
+            .bodybox {}
-            }
 
             .imagebox {
               margin: 0px 0px 0px 10px;
@@ -84,8 +103,7 @@
               font-size: 2rem;
             }
 
-            .image {
+            .image {}
-            }
 
             .bold {
               font-weight: bold;