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/Banner.qml

@@ -1,27 +1,34 @@
-// An inline warning strip — used for "the backend is gone" and "the helper is
-// not installed", the two states where the app cannot do its job.
+// An inline warning strip for the two states where the app cannot do its job:
+// the backend is unreachable, or the privileged helper is missing.
 import QtQuick
-import QtQuick.Controls.Material
+import QtQuick.Controls
 import QtQuick.Layouts
 
+import ".."
+
 Rectangle {
     id: banner
     property string text: ""
     property string actionText: ""
     signal actionClicked()
 
+    Layout.fillWidth: true
     implicitHeight: visible ? row.implicitHeight + 20 : 0
-    color: "#e34948"
-    opacity: 0.92
+    radius: Theme.radius
+    color: Qt.alpha(Theme.clay, 0.12)
+    border.width: 1
+    border.color: Qt.alpha(Theme.clay, 0.4)
 
     RowLayout {
         id: row
         anchors.fill: parent
-        anchors.margins: 10
+        anchors.margins: 12
         spacing: 12
         Label {
             text: banner.text
-            color: "white"
+            color: Theme.ink
+            font.pixelSize: 12
+            font.family: Theme.sansFamily
             wrapMode: Text.WordWrap
             Layout.fillWidth: true
         }
@@ -29,7 +36,6 @@ Rectangle {
             visible: banner.actionText !== ""
             text: banner.actionText
             flat: true
-            Material.foreground: "white"
             onClicked: banner.actionClicked()
         }
     }