Normalize bar icon size and alignment

shell/plugins/bar/README.md

@@ -78,6 +78,16 @@ The `omarchy.indicators` widget loads individual bar indicators from `indicators
 
 All widgets work in `top`, `bottom`, `left`, and `right` positions. Popups anchor on the side opposite the bar edge, sliding into the workspace. Vertical bars use 28px width; widgets that show text fall back to compact icon-only forms (e.g. `media` hides its scrolling label).
 
+## Icon geometry
+
+Use `BarIconButton` from `qs.Ui` for bar icons. It fits the visible glyph bounds to `Style.bar.iconSize` and centers them on both axes. It preserves each glyph's aspect ratio. Set `labelText` for an adjacent text label, such as the battery percentage.
+
+The `[bar]` section of a theme's `shell.toml` supplies the shared dimensions. `icon-size` sets the visual target, with a default of 12 logical pixels. `icon-canvas` sets the canvas, with a default of 16 logical pixels. `icon-slot` and `status-slot` set the button extent. These dimensions follow the font scale unless `scale-with-font` is false.
+
+Custom `iconComponent` content also fits the shared target. Its source dimensions can be 15px or another size. The bar measures its glyph, image, or vector bounds and applies one scale without changing its aspect ratio. A source `iconSize` override does not change the rendered target. Image padding remains part of an application's tray asset.
+
+`WidgetButton` also uses the shared renderer for a single icon glyph. This covers custom command widgets and existing plugins that use `WidgetButton` with a different `fontSize`. Text labels retain their text size. Custom widgets must use `WidgetButton` or `BarIconButton` for this icon contract.
+
 ## Custom user modules
 
 The schema accepts arbitrary module ids that you provide. Set `type` to `command` for shell-driven output or `qml` for a custom QML widget. Both still go under `bar.layout.<section>` in `shell.json`.

shell/plugins/bar/widgets/SystemUpdate.qml

@@ -58,7 +58,6 @@ BarWidget {
     bar: root.bar
     text: "\uf021"
     slotSize: Style.bar.statusSlot
-    fontSize: Style.font.caption
     tooltipText: "Pending Omarchy Updates"
     onPressed: root.runUpdate()
   }

shell/plugins/bar/widgets/Tray.qml

@@ -810,9 +810,10 @@ BarWidget {
     }
 
     TrayIcon {
-      anchors.centerIn: parent
-      width: Style.space(12)
-      height: Style.space(12)
+      x: (parent.width - width) / 2
+      y: (parent.height - height) / 2
+      width: Style.bar.iconSize
+      height: Style.bar.iconSize
       icon: trayItemRoot.modelData.icon
     }
 

shell/plugins/menu/BarWidget.qml

@@ -8,14 +8,12 @@ BarWidget {
   implicitWidth: button.implicitWidth
   implicitHeight: button.implicitHeight
 
-  WidgetButton {
+  BarIconButton {
     id: button
     anchors.fill: parent
     bar: root.bar
     text: "\ue900"
     fontFamily: "omarchy"
-    centerFigures: false
-    horizontalMargin: 7.5
     onPressed: function(button) {
       if (!root.bar) return
       if (button === Qt.RightButton) root.bar.run("xdg-terminal-exec")

shell/plugins/panels/dropbox/DropboxIcon.qml

@@ -7,11 +7,13 @@ Item {
   id: root
 
   property real iconSize: Style.font.icon
+  readonly property real aspectRatio: 1.18
+  property real artworkScale: 0.95
   property color color: Commons.Color.foreground
 
-  width: iconSize * 1.18
+  width: iconSize * aspectRatio
   height: iconSize
-  implicitWidth: iconSize * 1.18
+  implicitWidth: iconSize * aspectRatio
   implicitHeight: iconSize
 
   Shape {
@@ -19,7 +21,7 @@ Item {
     antialiasing: true
     layer.enabled: true
     layer.samples: 4
-    scale: 0.95
+    scale: root.artworkScale
 
     Tile { cx: root.width * 0.25; cy: root.height * 0.188 }
     Tile { cx: root.width * 0.75; cy: root.height * 0.188 }

shell/plugins/panels/dropbox/Panel.qml

@@ -175,8 +175,10 @@ Panel {
     iconComponent: Component {
       Item {
         DropboxIcon {
-          anchors.centerIn: parent
-          iconSize: Style.space(12)
+          x: (parent.width - width) / 2
+          y: (parent.height - height) / 2
+          iconSize: button.iconSize / aspectRatio
+          artworkScale: 1
           color: root.barIconColor
           opacity: dropbox.active ? 1.0 : 0.6
         }

shell/plugins/panels/power/Panel.qml

@@ -278,9 +278,8 @@ Panel {
     id: button
     anchors.fill: parent
     bar: root.bar
-    text: root.showPercentage && !vertical
-      ? Math.round(root.batteryFraction * 100) + "% " + root.batteryIcon()
-      : root.batteryIcon()
+    text: root.batteryIcon()
+    labelText: root.showPercentage && !vertical ? Math.round(root.batteryFraction * 100) + "%" : ""
     slotSize: Style.bar.iconSlot * (root.showPercentage && !vertical ? 2 : 1)
     tooltipText: ""
     onPressed: function(b) {

shell/plugins/panels/tailscale/Panel.qml

@@ -385,8 +385,9 @@ Panel {
     iconComponent: Component {
       Item {
         TailscaleIcon {
-          anchors.centerIn: parent
-          iconSize: Style.space(11)
+          x: (parent.width - width) / 2
+          y: (parent.height - height) / 2
+          iconSize: button.iconSize
           color: root.barIconColor
           badgeColor: root.urgent
           crossed: !tailscale.active && !tailscale.needsLogin