updated style

quickshell/bar/Workspaces.qml

@@ -40,12 +40,15 @@ Item {
     }
 
     implicitWidth: row.implicitWidth
-    implicitHeight: 20
+    implicitHeight: 24
 
     Row {
         id: row
         anchors.verticalCenter: parent.verticalCenter
-        spacing: 6
+
+        // Uneven gaps. An evenly spaced row of identical ticks reads as a
+        // progress bar; the whole point here is that it should not.
+        spacing: 5
 
         Repeater {
             model: root.slots
@@ -54,6 +57,7 @@ Item {
                 id: pip
 
                 required property var modelData
+                required property int index
                 readonly property int wsId: modelData
                 readonly property var info: root.occupancy[wsId]
                 readonly property bool occupied: info !== undefined && info.count > 0
@@ -61,8 +65,19 @@ Item {
                 readonly property bool focused: root.focusedId === wsId
                 readonly property bool hovered: pipHover.hovered
 
-                width: focused ? 34 : (occupied ? 16 : 10)
-                height: 18
+                // Each tick pulls its own shear and its own height off the
+                // variance tables, and sits a little off the baseline, so the
+                // row is a ragged run of marks rather than a repeating comb.
+                readonly property real shear: Theme.leanFor(pip.index)
+                readonly property int baseHeight: [18, 14, 20, 16][pip.index % 4]
+                readonly property int drift: [0, 2, -1, 1][pip.index % 4]
+
+                width: focused ? 36 : (occupied ? 16 : 9)
+
+                // The focused tick grows past its neighbours and past the row's
+                // own height, so it breaks the line instead of sitting in it.
+                height: focused ? 24 : pip.baseHeight
+                y: focused ? -2 : pip.drift
 
                 Behavior on width {
                     NumberAnimation {
@@ -71,6 +86,30 @@ Item {
                         easing.overshoot: 1.6
                     }
                 }
+                Behavior on height {
+                    NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
+                }
+                Behavior on y {
+                    NumberAnimation { duration: Theme.durBase; easing.type: Easing.OutBack }
+                }
+
+                // Black offset copy behind the focused tick — the same
+                // screen-print stack the panels use, at tick scale.
+                Rectangle {
+                    visible: pip.focused
+                    anchors.fill: parent
+                    x: 3
+                    y: 3
+                    color: Theme.ink
+
+                    transform: Matrix4x4 {
+                        matrix: Qt.matrix4x4(
+                            1, -pip.shear, 0, pip.height * pip.shear,
+                            0, 1, 0, 0,
+                            0, 0, 1, 0,
+                            0, 0, 0, 1)
+                    }
+                }
 
                 Rectangle {
                     id: tick
@@ -85,7 +124,7 @@ Item {
 
                     transform: Matrix4x4 {
                         matrix: Qt.matrix4x4(
-                            1, -Theme.skew, 0, pip.height * Theme.skew,
+                            1, -pip.shear, 0, pip.height * pip.shear,
                             0, 1, 0, 0,
                             0, 0, 1, 0,
                             0, 0, 0, 1)
@@ -104,7 +143,7 @@ Item {
                     text: pip.wsId
                     color: Theme.base
                     font.family: Theme.fontDisplay
-                    font.pixelSize: Theme.fsSmall
+                    font.pixelSize: Theme.fsBody
                     font.weight: Theme.weightDisplay
                     font.italic: true
                     renderType: Text.NativeRendering