refactor: enhance TimerPage layout and functionality; update theme and tokens for improved design consistency

- Refactored TimerPage component to improve layout and user experience.
- Updated theme configuration to utilize design tokens for better maintainability.
- Introduced new tokens for colors and typography to align with design principles.
- Simplified state management and improved timer functionality.
- Enhanced accessibility and responsiveness of UI elements.

desktop/kadence_desktop/qml/components/BarRow.qml

@@ -1,18 +1,21 @@
-// A tiny bar chart: magnitude over time, one hue, baseline at zero.
-//
-// The ramp step says "did this day clear the goal" without adding a second
-// colour, and every bar carries its own tooltip, so no bar needs a label.
+// Pomodoros per day: magnitude over time, so bars, one hue, baseline at zero.
+// The goal line is the only reference mark; days that cleared it take a darker
+// step of the same ramp, which keeps "did I hit it" readable without a second
+// colour.
 import QtQuick
-import QtQuick.Controls.Material
+import QtQuick.Controls
 import QtQuick.Layouts
 
+import ".."
+
 Item {
     id: chart
-    property var days: []           // [{date, pomodoros, focus_minutes, goal_met}]
+    property var days: []
     property int goal: 8
-    property int barHeight: 110
+    property int barHeight: 108
 
-    implicitHeight: barHeight + 18
+    Layout.fillWidth: true
+    implicitHeight: barHeight + 16
 
     readonly property int maxValue: {
         var top = goal
@@ -25,8 +28,7 @@ Item {
         anchors.right: parent.right
         y: chart.barHeight - (chart.goal / chart.maxValue) * chart.barHeight
         height: 1
-        color: Material.hintTextColor
-        opacity: 0.45
+        color: Theme.rule
         visible: chart.goal > 0
     }
 
@@ -48,15 +50,16 @@ Item {
                     width: parent.width
                     height: Math.max(modelData.pomodoros > 0
                                      ? (modelData.pomodoros / chart.maxValue) * chart.barHeight : 2, 2)
-                    radius: 4
-                    color: modelData.pomodoros === 0 ? Material.dividerColor
-                                                     : (modelData.goal_met ? "#256abf" : "#6da7ec")
+                    radius: 3
+                    color: modelData.pomodoros === 0
+                           ? Theme.rule
+                           : (modelData.goal_met ? Theme.sequential[4] : Theme.sequential[2])
 
                     ToolTip.visible: hover.hovered
-                    ToolTip.text: modelData.date + ": " + modelData.pomodoros
+                    ToolTip.text: modelData.date + " · " + modelData.pomodoros
                                   + " pomodoros · " + modelData.focus_minutes + " min"
                     HoverHandler { id: hover }
-                    Behavior on height { NumberAnimation { duration: 250 } }
+                    Behavior on height { NumberAnimation { duration: 220 } }
                 }
             }
         }
@@ -68,12 +71,12 @@ Item {
         anchors.right: parent.right
         Label {
             text: chart.days.length ? chart.days[0].date.substring(5) : ""
-            font.pixelSize: 10; opacity: 0.6
+            font.pixelSize: 10; color: Theme.faint; font.family: Theme.sansFamily
         }
         Item { Layout.fillWidth: true }
         Label {
             text: chart.days.length ? chart.days[chart.days.length - 1].date.substring(5) : ""
-            font.pixelSize: 10; opacity: 0.6
+            font.pixelSize: 10; color: Theme.faint; font.family: Theme.sansFamily
         }
     }
 }