💄 ags(bar): better spacing and default style rules for bar

ags/style/_bar.scss

@@ -17,40 +17,41 @@
 
   // Style widget groups
   & > .bar-centerbox > * {
+    $radius: 18px;
+    $color-hover: colors.$bg-primary;
+    $padding: 4px;
+
     background: rgba(colors.$bg-translucent, .6);
-    padding: 5px;
+    border-radius: $radius;
-    border-radius: 18px;
+    padding: 0 $padding;
+
+    & > eventbox {
+      &:hover {
+        & > box:not(.workspaces) {
+          background: $color-hover;
+        }
+      }
+      & > box {
+        border-radius: calc($radius - $padding);
+        margin: $padding 0;
+        padding: 0 6px;
+      }
+    }
 
-    // Style widgets
     & > button,
-    & > eventbox,
+    & > box > button {
-    & > box {
+      border-radius: calc($radius - $padding);
-      margin: 0 2px;
+      margin: $padding 0;
+      padding: 0 9px;
 
-      &:first-child {
+      &:hover {
-        margin-left: 0;
+        background: $color-hover;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      & > button,
-      & > eventbox > box {
-        padding: 4px 8px;
-        border-radius: 12px;
-      }
-
-      & > button:hover,
-      & > eventbox:hover > box {
-        background: colors.$bg-primary;
       }
     }
   }
 
   .workspaces {
     @include mixins.reset-props;
-    padding: 1px 1px;
 
     & button {
       border-radius: 16px;
@@ -58,7 +59,7 @@
       min-width: 12px;
       padding: 0 6px;
       background: colors.$bg-tertiary;
-      margin: 1px 2px;
+      margin: 3px 0;
 
       &.focus {
         background: colors.$fg-primary;
@@ -119,7 +120,6 @@
 
   .media-eventbox {
     & > .media {
-      border-radius: 12px;
       background: colors.$bg-primary;
       padding: 0 8px;
     }
@@ -196,7 +196,6 @@
 
     & > box {
       padding: 0 8px;
-      border-radius: 12px;
 
       & > * > * {
         margin: 0 2px;
@@ -238,22 +237,19 @@
 
   .apps {
     & > box {
-      border-radius: 12px;
+      min-width: 24px;
-      transition: 100ms linear;
+      padding: 0 6px;
-      min-width: 28px;
-      padding: 0 4px;
 
       & > icon {
         transition: 120ms linear;
         font-size: 14px;
       }
     }
-    &:hover > box,
     &.open > box {
-        background: colors.$bg-primary;
+      background: colors.$bg-primary;
     }
 
-    &:hover > box > icon {
+    &:hover icon {
       -gtk-icon-transform: scale(1.14);
     }
   }

ags/widget/bar/Workspaces.ts

@@ -8,6 +8,8 @@ export const showWorkspaceNumbers = new Variable<boolean>(false);
 
 export function Workspaces(): Gtk.Widget {
 
+    const workspaceSpacing = 4;
+
     return new Widget.EventBox({
         onScroll: (_, event) => 
             event.delta_y > 0 ? hyprland.dispatch("workspace", "e-1") : hyprland.dispatch("workspace", "e+1"),
@@ -15,6 +17,7 @@ export function Workspaces(): Gtk.Widget {
         onHoverLost: () => showWorkspaceNumbers.set(false),
         child: new Widget.Box({
             className: "workspaces",
+            spacing: workspaceSpacing,
             children: bind(hyprland, "workspaces").as((workspaces) => {
                 const sortedWorkspaces = workspaces.filter(ws => ws.id > 0).sort(
                     (a: AstalHyprland.Workspace, b: AstalHyprland.Workspace) => a.get_id() - b.get_id());

ags/window/Bar.ts

@@ -8,49 +8,55 @@ import { Apps } from "../widget/bar/Apps";
 import { Clock } from "../widget/bar/Clock";
 import { Status } from "../widget/bar/Status";
 
-export const Bar = (mon: number) => new Widget.Window({
+export const Bar = (mon: number) => {
-    namespace: "top-bar",
+    const widgetSpacing = 4;
-    anchor: Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT,
+    return new Widget.Window({
-    layer: Astal.Layer.TOP,
+        namespace: "top-bar",
-    exclusivity: Astal.Exclusivity.EXCLUSIVE,
+        anchor: Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT,
-    heightRequest: 46,
+        layer: Astal.Layer.TOP,
-    monitor: mon,
+        exclusivity: Astal.Exclusivity.EXCLUSIVE,
-    visible: true,
+        heightRequest: 46,
-    canFocus: false,
+        monitor: mon,
-    child: new Widget.Box({
+        visible: true,
-        className: "bar-container",
+        canFocus: false,
-        child: new Widget.CenterBox({
+        child: new Widget.Box({
-            className: "bar-centerbox",
+            className: "bar-container",
-            expand: true,
+            child: new Widget.CenterBox({
-            homogeneous: false,
+                className: "bar-centerbox",
-            startWidget: new Widget.Box({
+                expand: true,
-                className: "widgets-left",
                 homogeneous: false,
-                halign: Gtk.Align.START,
+                startWidget: new Widget.Box({
-                children: [
+                    className: "widgets-left",
-                    Apps(),
+                    homogeneous: false,
-                    Workspaces(),
+                    halign: Gtk.Align.START,
-                    FocusedClient()
+                    spacing: widgetSpacing,
-                ]
+                    children: [
-            } as Widget.BoxProps),
+                        Apps(),
-            centerWidget: new Widget.Box({
+                        Workspaces(),
-                className: "widgets-center",
+                        FocusedClient()
-                homogeneous: false,
+                    ]
-                halign: Gtk.Align.CENTER,
+                } as Widget.BoxProps),
-                children: [
+                centerWidget: new Widget.Box({
-                    Clock(),
+                    className: "widgets-center",
-                    Media()
+                    homogeneous: false,
-                ]
+                    spacing: widgetSpacing,
-            } as Widget.BoxProps),
+                    halign: Gtk.Align.CENTER,
-            endWidget: new Widget.Box({
+                    children: [
-                className: "widgets-right",
+                        Clock(),
-                homogeneous: false,
+                        Media()
-                halign: Gtk.Align.END,
+                    ]
-                children: [
+                } as Widget.BoxProps),
-                    Tray(),
+                endWidget: new Widget.Box({
-                    Status()
+                    className: "widgets-right",
-                ]
+                    homogeneous: false,
-            } as Widget.BoxProps)
+                    spacing: widgetSpacing,
-        } as Widget.CenterBoxProps)
+                    halign: Gtk.Align.END,
-    } as Widget.BoxProps)
+                    children: [
-} as Widget.WindowProps);
+                        Tray(),
+                        Status()
+                    ]
+                } as Widget.BoxProps)
+            } as Widget.CenterBoxProps)
+        } as Widget.BoxProps)
+    } as Widget.WindowProps);
+}