feat: introduce support for pywal

app.ts

@@ -1,7 +1,8 @@
 import style from "./styles/style.scss"
-import { App, Gtk } from "astal/gtk4"
+import { SHELL } from "./settings.json";
-import { GLib } from "astal";
 
+import { GLib, monitorFile, exec } from "astal";
+import { App, Gtk } from "astal/gtk4"
 import Hyprland from "gi://AstalHyprland";
 
 import QuickSettings from "widget/quick_settings/quick_settings";
@@ -23,10 +24,20 @@ const setupBars = async (monitor_id: number) => {
     return windows;
 };
 
+const STYLES = `${GLib.get_user_config_dir()}/ags/styles`;
+const monitorCSS = () => monitorFile(
+	STYLES + '/colors/index.scss',
+	() => {
+		exec(`sass ${STYLES}/style.scss /tmp/ags-style.css`);
+		App.apply_css('/tmp/ags-style.css', true);
+	}
+);
+
 App.start({
 	css: style,
 	async main() {
 		App.add_icons(`${GLib.get_user_data_dir()}/icons/Astal`);
+		monitorCSS();
 
 		const monitors = App.get_monitors();
 		for (const monitor of monitors) {

styles/_variables.scss

@@ -1,6 +1,2 @@
-$fg-color: #{"@theme_fg_color"};
-$bg-color: #{"@theme_bg_color"};
-$secondary-fg-color: #{"@insensitive_fg_color"};
-$secondary-bg-color: #{"@insensitive_bg_color"};
 $font-family: "SFProText Nerd Font", "SFProDisplay Nerd Font", sans-serif;
-$font-family-monospace: "JetBrains Mono", monospace;
+$font-family-monospace: "JetBrains Mono", monospace;

styles/colors/index.scss

@@ -0,0 +1,52 @@
+// SCSS Variables
+// Generated by 'wal'
+$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_187.jpg";
+
+// Special
+$background: #130f0c;
+$foreground: #e0dfe0;
+$cursor: #e0dfe0;
+
+// Colors
+$color0: #130f0c;
+$color1: #61A7D7;
+$color2: #89888C;
+$color3: #A89DA7;
+$color4: #D3ACA4;
+$color5: #B9BEC8;
+$color6: #A7CBE3;
+$color7: #e0dfe0;
+$color8: #9c9c9c;
+$color9: #61A7D7;
+$color10: #89888C;
+$color11: #A89DA7;
+$color12: #D3ACA4;
+$color13: #B9BEC8;
+$color14: #A7CBE3;
+$color15: #e0dfe0;
+$primary: lighten($color4, 20%);
+$onPrimary: darken($color2, 20%);
+$primaryContainer: darken($color2, 10%);
+$onPrimaryContainer: lighten($color4, 10%);
+$secondary: desaturate(lighten($color5, 20%), 20%);
+$onSecondary: desaturate(darken($color3, 20%), 20%);
+$secondaryContainer: desaturate(darken($color3, 20%), 20%);
+$onSecondaryContainer: desaturate(lighten($color5, 20%), 20%);
+$tertiary: adjust-hue(lighten($color4, 20%), 30deg);
+$onTertiary: adjust-hue(darken($color2, 20%), 30deg);
+$tertiaryContainer: adjust-hue(darken($color2, 10%), 30deg);
+$tertiaryContainer: adjust-hue(lighten($color4, 10%), 30deg);
+$error: #ffb4a9;
+$onError: #680003;
+$errorContainer: #930006;
+$onErrorContainer: #ffb4a9;
+$background: $color0;
+$onBackground: $color7;
+$surface: $color0;
+$onSurface: $color7;
+$surfaceVariant: $color1;
+$onSurfaceVariant: $color7;
+$outline: $color7;
+$inverseSurface: invert($surface);
+$inverseOnSurface: invert($onSurface);
+$inversePrimary: invert($primary);

styles/colors/material.scss

@@ -0,0 +1,26 @@
+$primary: lighten($color4, 20%);
+$onPrimary: darken($color2, 20%);
+$primaryContainer: darken($color2, 10%);
+$onPrimaryContainer: lighten($color4, 10%);
+$secondary: desaturate(lighten($color5, 20%), 20%);
+$onSecondary: desaturate(darken($color3, 20%), 20%);
+$secondaryContainer: desaturate(darken($color3, 20%), 20%);
+$onSecondaryContainer: desaturate(lighten($color5, 20%), 20%);
+$tertiary: adjust-hue(lighten($color4, 20%), 30deg);
+$onTertiary: adjust-hue(darken($color2, 20%), 30deg);
+$tertiaryContainer: adjust-hue(darken($color2, 10%), 30deg);
+$tertiaryContainer: adjust-hue(lighten($color4, 10%), 30deg);
+$error: #ffb4a9;
+$onError: #680003;
+$errorContainer: #930006;
+$onErrorContainer: #ffb4a9;
+$background: $color0;
+$onBackground: $color7;
+$surface: $color0;
+$onSurface: $color7;
+$surfaceVariant: $color1;
+$onSurfaceVariant: $color7;
+$outline: $color7;
+$inverseSurface: invert($surface);
+$inverseOnSurface: invert($onSurface);
+$inversePrimary: invert($primary);

styles/components/_bar.scss

@@ -1,7 +1,7 @@
-@use '../variables' as *;
+@use '../colors' as *;
 
 window.bar {
-    color: $fg-color;
+    color: $foreground;
     font-weight: bold;
 
     >box {
@@ -11,20 +11,21 @@ window.bar {
     >.inner {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        border: 1px solid $fg-color;
+        background: $background;
-        background: $bg-color;
         padding: 0.25rem 1rem;
         margin: 0;
+
+        * { color: $foreground; }
     }
 
     .tray .item {
         padding: 0;
         margin: 0;
-        background: $bg-color;
+        background: $background;
 
         image {
             padding: 0;
             margin: 0;
         }
     }
-}
+}

styles/components/_index.scss

@@ -1,3 +1,3 @@
 @forward '_bar';
 @forward '_launcher';
-@forward '_quick_settings';
+@forward '_quick_settings';

styles/components/_launcher.scss

@@ -1,27 +1,27 @@
-@use '../variables' as *;
+@use '../colors' as *;
 
 .launcher {
     entry {
-        background: $bg-color;
+        background: $background;
-        color: $fg-color;
+        color: $foreground;
         padding: 8px 12px;
         border: none;
 
         margin-bottom: 6px;
         
         &:focus {
-            outline: 2px solid $bg-color;
+            outline: 2px solid $background;
         }
     }
 
     .application {
         padding: 10px;
-        background-color: $bg-color;
+        background: $background;
         border-radius: 8px;
-        transition: background-color 0.2s ease;
+        transition: background 0.2s ease;
 
         &:hover {
-            background-color: $bg-color;
+            background: $background;
         }
 
         image {
@@ -30,24 +30,24 @@
 
         box {
             .name {
-                color: $fg-color;
+                color: $foreground;
                 font-size: 14px;
                 font-weight: 600;
             }
 
             .description {
-                color: $fg-color;
+                color: $foreground;
                 font-size: 12px;
             }
         }
     }
 
     .not-found {
-        color: $fg-color;
+        color: $foreground;
         font-size: 14px;
 
         image {
             margin-bottom: 8px;
         }
     }
-}
+}

styles/components/_quick_settings.scss

@@ -1,7 +1,6 @@
-@use '../variables' as *;
+@use '../colors' as *;
 
 window.quick_settings {
-    color: $fg-color;
     font-weight: bold;
 
     >box {
@@ -12,9 +11,11 @@ window.quick_settings {
     >.inner {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        background: $bg-color;
+        background: $background;
         padding: 0.75rem 3rem;
         margin: 0;
+
+        * { color: $foreground; }
     }
 
     button {
@@ -23,12 +24,12 @@ window.quick_settings {
 }
 
 window.qs_bluetooth {
-    color: $fg-color;
-    
     >.inner {
-        background: $bg-color;
+        background: $background;
         padding: 0.75rem 3rem;
         border-radius: 10px;
+    
+        * { color: $foreground; }
     }
 
     .device {
@@ -41,26 +42,26 @@ window.qs_bluetooth {
 }
 
 window.quick_settings button, window.qs_bluetooth button {
-    background: $bg-color;
+    background: $background;
-    border: 2px solid $fg-color;
+    border: 2px solid $foreground;
     margin: 5px;
 
     transition: 400ms cubic-bezier(0.05, 0.7, 0.1, 1);
 
     &:hover {
-        background: $fg-color;
+        background: $foreground;
 
         * {
-            color: $bg-color;
+            color: $background;
         }
     }
 
     &.active {
-        background: $fg-color;
+        background: $foreground;
-        border: 0.5px solid $bg-color;
+        border: 0.5px solid $background;
 
         * {
-            color: $bg-color;
+            color: $background;
         }
     }
-}
+}

styles/style.scss

@@ -1,4 +1,5 @@
-@use '_variables' as *;
+@use 'variables' as *;
+@use 'colors' as *;
 @use 'mixins';
 @use 'classes';
 @use 'components';
@@ -9,4 +10,4 @@
 
 image {
     padding: 0 0.25rem;
-}
+}