💄 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: 18px;
+    border-radius: $radius;
+    padding: 0 $padding;
 
-    // Style widgets
-    & > button,
-    & > eventbox,
+    & > eventbox {
+      &:hover {
+        & > box:not(.workspaces) {
+          background: $color-hover;
+        }
+      }
       & > box {
-      margin: 0 2px;
-
-      &:first-child {
-        margin-left: 0;
+        border-radius: calc($radius - $padding);
+        margin: $padding 0;
+        padding: 0 6px;
       }
-
-      &:last-child {
-        margin-right: 0;
     }
 
     & > button,
-      & > eventbox > box {
-        padding: 4px 8px;
-        border-radius: 12px;
-      }
+    & > box > button {
+      border-radius: calc($radius - $padding);
+      margin: $padding 0;
+      padding: 0 9px;
 
-      & > button:hover,
-      & > eventbox:hover > box {
-        background: colors.$bg-primary;
+      &:hover {
+        background: $color-hover;
       }
     }
   }
 
   .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;
-      transition: 100ms linear;
-      min-width: 28px;
-      padding: 0 4px;
+      min-width: 24px;
+      padding: 0 6px;
 
       & > icon {
         transition: 120ms linear;
         font-size: 14px;
       }
     }
-    &:hover > box,
     &.open > box {
       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,7 +8,9 @@ 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) => {
+    const widgetSpacing = 4;
+    return new Widget.Window({
         namespace: "top-bar",
         anchor: Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT,
         layer: Astal.Layer.TOP,
@@ -27,6 +29,7 @@ export const Bar = (mon: number) => new Widget.Window({
                     className: "widgets-left",
                     homogeneous: false,
                     halign: Gtk.Align.START,
+                    spacing: widgetSpacing,
                     children: [
                         Apps(),
                         Workspaces(),
@@ -36,6 +39,7 @@ export const Bar = (mon: number) => new Widget.Window({
                 centerWidget: new Widget.Box({
                     className: "widgets-center",
                     homogeneous: false,
+                    spacing: widgetSpacing,
                     halign: Gtk.Align.CENTER,
                     children: [
                         Clock(),
@@ -45,6 +49,7 @@ export const Bar = (mon: number) => new Widget.Window({
                 endWidget: new Widget.Box({
                     className: "widgets-right",
                     homogeneous: false,
+                    spacing: widgetSpacing,
                     halign: Gtk.Align.END,
                     children: [
                         Tray(),
@@ -53,4 +58,5 @@ export const Bar = (mon: number) => new Widget.Window({
                 } as Widget.BoxProps)
             } as Widget.CenterBoxProps)
         } as Widget.BoxProps)
-} as Widget.WindowProps);
+    } as Widget.WindowProps);
+}