Merge branch 'main' into feat/tray-gtk4

6 files changed, 40 insertions, 26 deletions

diff --git a/examples/js/notifications/notifications/NotificationPopups.tsx b/examples/js/notifications/notifications/NotificationPopups.tsx
index a8088c9..9b84d84 100644
--- a/examples/js/notifications/notifications/NotificationPopups.tsx
+++ b/examples/js/notifications/notifications/NotificationPopups.tsx
@@ -2,7 +2,7 @@ import { Astal, Gtk, Gdk } from "astal/gtk3"
 import Notifd from "gi://AstalNotifd"
 import Notification from "./Notification"
 import { type Subscribable } from "astal/binding"
-import { GLib, Variable, bind, timeout } from "astal"
+import { Variable, bind, timeout } from "astal"
 
 // see comment below in constructor
 const TIMEOUT_DELAY = 5000
@@ -23,7 +23,7 @@ class NotifiationMap implements Subscribable {
         this.var.set([...this.map.values()].reverse())
     }
 
-    private constructor() {
+    constructor() {
         const notifd = Notifd.get_default()
 
         /**
diff --git a/examples/js/simple-bar/style.scss b/examples/js/simple-bar/style.scss
index f98286e..1dcf729 100644
--- a/examples/js/simple-bar/style.scss
+++ b/examples/js/simple-bar/style.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bg: #212223;
 $fg: #f1f1f1;
 $accent: #378DF7;
@@ -16,12 +18,12 @@ window.Bar {
         background-color: transparent;
 
         &:hover label {
-            background-color: transparentize($fg, 0.84);
-            border-color: transparentize($accent, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.84);
+            border-color: color.adjust($accent, $alpha: -0.8);
         }
 
         &:active label {
-            background-color: transparentize($fg, 0.8)
+            background-color: color.adjust($fg, $alpha: -0.8)
         }
     }
 
@@ -64,10 +66,12 @@ window.Bar {
             margin-right: .6em;
         }
 
-        margin: 0 1em;
+        & {
+            margin: 0 1em;
+        }
 
         trough {
-            background-color: transparentize($fg, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.8);
             border-radius: $radius;
         }
 
diff --git a/examples/js/simple-bar/widget/Bar.tsx b/examples/js/simple-bar/widget/Bar.tsx
index 029aca1..f5e96cb 100644
--- a/examples/js/simple-bar/widget/Bar.tsx
+++ b/examples/js/simple-bar/widget/Bar.tsx
@@ -128,15 +128,13 @@ function Time({ format = "%H:%M - %A %e." }) {
 }
 
 export default function Bar(monitor: Gdk.Monitor) {
-    const anchor = Astal.WindowAnchor.TOP
-        | Astal.WindowAnchor.LEFT
-        | Astal.WindowAnchor.RIGHT
+    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
 
     return <window
         className="Bar"
         gdkmonitor={monitor}
         exclusivity={Astal.Exclusivity.EXCLUSIVE}
-        anchor={anchor}>
+        anchor={TOP | LEFT | RIGHT}>
         <centerbox>
             <box hexpand halign={Gtk.Align.START}>
                 <Workspaces />
diff --git a/examples/lua/simple-bar/style.scss b/examples/lua/simple-bar/style.scss
index f98286e..1dcf729 100644
--- a/examples/lua/simple-bar/style.scss
+++ b/examples/lua/simple-bar/style.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bg: #212223;
 $fg: #f1f1f1;
 $accent: #378DF7;
@@ -16,12 +18,12 @@ window.Bar {
         background-color: transparent;
 
         &:hover label {
-            background-color: transparentize($fg, 0.84);
-            border-color: transparentize($accent, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.84);
+            border-color: color.adjust($accent, $alpha: -0.8);
         }
 
         &:active label {
-            background-color: transparentize($fg, 0.8)
+            background-color: color.adjust($fg, $alpha: -0.8)
         }
     }
 
@@ -64,10 +66,12 @@ window.Bar {
             margin-right: .6em;
         }
 
-        margin: 0 1em;
+        & {
+            margin: 0 1em;
+        }
 
         trough {
-            background-color: transparentize($fg, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.8);
             border-radius: $radius;
         }
 
diff --git a/examples/py/simple-bar/style.scss b/examples/py/simple-bar/style.scss
index f98286e..1dcf729 100644
--- a/examples/py/simple-bar/style.scss
+++ b/examples/py/simple-bar/style.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bg: #212223;
 $fg: #f1f1f1;
 $accent: #378DF7;
@@ -16,12 +18,12 @@ window.Bar {
         background-color: transparent;
 
         &:hover label {
-            background-color: transparentize($fg, 0.84);
-            border-color: transparentize($accent, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.84);
+            border-color: color.adjust($accent, $alpha: -0.8);
         }
 
         &:active label {
-            background-color: transparentize($fg, 0.8)
+            background-color: color.adjust($fg, $alpha: -0.8)
         }
     }
 
@@ -64,10 +66,12 @@ window.Bar {
             margin-right: .6em;
         }
 
-        margin: 0 1em;
+        & {
+            margin: 0 1em;
+        }
 
         trough {
-            background-color: transparentize($fg, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.8);
             border-radius: $radius;
         }
 
diff --git a/examples/vala/simple-bar/style.scss b/examples/vala/simple-bar/style.scss
index f98286e..1dcf729 100644
--- a/examples/vala/simple-bar/style.scss
+++ b/examples/vala/simple-bar/style.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bg: #212223;
 $fg: #f1f1f1;
 $accent: #378DF7;
@@ -16,12 +18,12 @@ window.Bar {
         background-color: transparent;
 
         &:hover label {
-            background-color: transparentize($fg, 0.84);
-            border-color: transparentize($accent, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.84);
+            border-color: color.adjust($accent, $alpha: -0.8);
         }
 
         &:active label {
-            background-color: transparentize($fg, 0.8)
+            background-color: color.adjust($fg, $alpha: -0.8)
         }
     }
 
@@ -64,10 +66,12 @@ window.Bar {
             margin-right: .6em;
         }
 
-        margin: 0 1em;
+        & {
+            margin: 0 1em;
+        }
 
         trough {
-            background-color: transparentize($fg, 0.8);
+            background-color: color.adjust($fg, $alpha: -0.8);
             border-radius: $radius;
         }