cookie clock: cleaner date indicator, adjust colors

.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml

@@ -26,7 +26,8 @@ Item {
 
     property color colShadow: Appearance.colors.colShadow
     property color colBackground: Appearance.colors.colSecondaryContainer
-    property color colOnBackground: ColorUtils.mix(Appearance.colors.colPrimary, Appearance.colors.colSecondaryContainer, 0.5)
+    property color colOnBackground: ColorUtils.mix(Appearance.colors.colSecondary, Appearance.colors.colSecondaryContainer, 0.3)
+    property color colBackgroundInfo: ColorUtils.mix(Appearance.colors.colPrimary, Appearance.colors.colSecondaryContainer, 0.55)
     property color colHourHand: Appearance.colors.colPrimary
     property color colMinuteHand: Appearance.colors.colSecondary
     property color colSecondHand: Appearance.colors.colTertiary
@@ -75,8 +76,8 @@ Item {
         shown: Config.options.background.clock.cookie.hourMarks
         sourceComponent: HourMarks {
             implicitSize: 135 * (1.75 - 0.75 * hourMarksLoader.opacity)
-            color: root.colTimeIndicators
+            color: root.colOnBackground
-            colOnBackground: root.colOnBackground
+            colOnBackground: ColorUtils.mix(root.colBackgroundInfo, root.colOnBackground, 0.5)
         }
     }
 
@@ -91,14 +92,14 @@ Item {
         }
 
         sourceComponent: TimeColumn {
-            color: root.colOnBackground
+            color: root.colBackgroundInfo
         }
     }
 
     // Hour hand
     FadeLoader {
         anchors.fill: parent
-        z: Config.options.background.clock.cookie.hourHandStyle === "fill" ? 3 : 1
+        z: 1
         shown: Config.options.background.clock.cookie.hourHandStyle !== "hide"
         sourceComponent: HourHand {
             clockHour: root.clockHour
@@ -111,6 +112,7 @@ Item {
     // Minute hand
     FadeLoader {
         anchors.fill: parent
+        z: 2
         shown: Config.options.background.clock.cookie.minuteHandStyle !== "hide"
         sourceComponent: MinuteHand {
             anchors.fill: parent
@@ -124,7 +126,7 @@ Item {
     FadeLoader {
         id: secondHandLoader
         z: (Config.options.background.clock.cookie.secondHandStyle === "line") ? 2 : 3
-        shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "none"
+        shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "hide"
         anchors.fill: parent
         sourceComponent: SecondHand {
             id: secondHand
@@ -141,7 +143,7 @@ Item {
         shown: Config.options.background.clock.cookie.minuteHandStyle !== "bold"
         sourceComponent: Rectangle {
             color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand
-            implicitWidth: 8
+            implicitWidth: 6
             implicitHeight: implicitWidth
             radius: width / 2
         }
@@ -150,7 +152,7 @@ Item {
     // Date
     DateIndicator {
         anchors.fill: parent
-        colOnBackground: root.colOnBackground
+        colOnBackground: root.colBackgroundInfo
         style: Config.options.background.clock.cookie.dateStyle
         dateSquareSize: root.dateSquareSize
     }

.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml

@@ -50,6 +50,7 @@ Item {
                 id: quoteStyledText
                 horizontalAlignment: Text.AlignLeft
                 text: Config.options.background.quote
+                color: Appearance.colors.colOnSecondaryContainer
                 font {
                     family: Appearance.font.family.reading
                     pixelSize: Appearance.font.pixelSize.large

.config/quickshell/ii/modules/background/cookieClock/HourMarks.qml

@@ -13,7 +13,7 @@ Item {
     property real markWidth: 4
     property color color: Appearance.colors.colOnSecondaryContainer
     property color colOnBackground: Appearance.colors.colSecondaryContainer
-    property real padding: 10
+    property real padding: 8
 
     Rectangle {
         color: root.color

.config/quickshell/ii/modules/background/cookieClock/MinuteHand.qml

@@ -13,7 +13,6 @@ Item {
     property real handWidth: style === "bold" ? 18 : style === "medium" ? 12 : 5
     property color color: Appearance.colors.colSecondary
 
-    z: root.style === "thin" ? 1 : 3
     rotation: -90 + (360 / 60) * root.clockMinute
 
     Behavior on rotation {

.config/quickshell/ii/modules/background/cookieClock/dateIndicator/DateIndicator.qml

@@ -9,83 +9,69 @@ import QtQuick
 
 Item {
     id: root
-    readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle
     property string style: "rotating"
     property color colOnBackground: Appearance.colors.colOnSecondaryContainer
     property color colBackground: Appearance.colors.colOnSecondaryContainer
     property real dateSquareSize: 64
 
     // Rotating date
-    Loader {
+    FadeLoader {
         anchors.fill: parent
-        active: opacity > 0
+        shown: Config.options.background.clock.cookie.dateStyle === "rotating"
         sourceComponent: RotatingDate {
-            style: root.style
+            color: root.colOnBackground
         }
     }
 
     // Rectangle date (only today's number) in right side of the clock
-    Loader {
+    FadeLoader {
         id: rectLoader
-
+        shown: root.style === "rect"
-        property real animIndex: root.style === "rect" ? 1.0 : 0.0
+        anchors {
-        Behavior on animIndex {
+            verticalCenter: parent.verticalCenter
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+            right: parent.right
+            rightMargin: 40 - rectLoader.opacity * 30
         }
 
-        active: animIndex > 0
-
-        anchors.right: parent.right
-        anchors.verticalCenter: parent.verticalCenter
-
         sourceComponent: RectangleDate {
             color: Appearance.colors.colSecondaryContainerHover
             radius: Appearance.rounding.small
-            animIndex: rectLoader.animIndex
+            implicitWidth: 45 * rectLoader.opacity
+            implicitHeight: 30 * rectLoader.opacity
         }
     }
 
-    // Date bubble / day
+    // Bubble style: day of month
-    Loader {
+    FadeLoader {
         id: dayBubbleLoader
-        property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
+        shown: root.style === "bubble"
-        Behavior on targetSize {
+        property real targetSize: root.dateSquareSize * opacity
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-
-        active: targetSize > 0
-        width: targetSize
-        height: targetSize
-        
         anchors {
             left: parent.left
-            bottom: parent.bottom
+            top: parent.top
-            topMargin: 50
         }
+        
         sourceComponent: BubbleDate {
+            implicitWidth: dayBubbleLoader.targetSize
+            implicitHeight: dayBubbleLoader.targetSize
             bubbleIndex: 0
             targetSize: dayBubbleLoader.targetSize
         }
     }
 
-    // Date bubble / month
+    // Bubble style: month
-    Loader {
+    FadeLoader {
         id: monthBubbleLoader
-        property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
+        shown: root.style === "bubble"
-        Behavior on targetSize {
+        property real targetSize: root.dateSquareSize * opacity
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-
-        width: targetSize
-        height: targetSize
-        active: targetSize > 0
-        
         anchors {
             right: parent.right
-            top: parent.top
+            bottom: parent.bottom
-            bottomMargin: 50
         }
+
         sourceComponent: BubbleDate {
+            implicitWidth: monthBubbleLoader.targetSize
+            implicitHeight: monthBubbleLoader.targetSize
             bubbleIndex: 1
             targetSize: monthBubbleLoader.targetSize
         }

.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RectangleDate.qml

@@ -8,30 +8,11 @@ import QtQuick
 Rectangle {
     id: rect
     readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle
-    property real animIndex: 0
-    opacity: animIndex
-
-    width: 45 * animIndex
-    height: 30 * animIndex
-    
-    x: root.dialStyle === "numbers" ? -40 : -10
-    y: root.dialStyle === "numbers" ? 55 : 0
-
-    Behavior on x {
-        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-    }
-    Behavior on y {
-        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-    }
 
     StyledText {
-        opacity: root.style === "rect" ? 1.0 : 0
-        Behavior on opacity {
-            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-        }
         anchors.centerIn: parent
         color: Appearance.colors.colSecondaryHover
-        text: DateTime.date.substring(5, 7)
+        text: Qt.locale().toString(DateTime.clock.date, "dd")
         font {
             family: Appearance.font.family.expressive
             pixelSize: 20

.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RotatingDate.qml

@@ -10,6 +10,11 @@ Item {
     id: root
 
     property string style: Config.options.background.clock.cookie.dateStyle
+    property color color: Appearance.colors.colOnSecondaryContainer
+    property real angleStep: 12 * Math.PI / 180
+    property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd")
+    
+    readonly property int clockSecond: DateTime.clock.seconds
     readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle
     readonly property bool timeIndicators: Config.options.background.clock.cookie.timeIndicators
 
@@ -18,20 +23,9 @@ Item {
         animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
     }
 
-    property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd")
-    property real angleStep: Math.PI / 2.35 / dateText.length
-
-    property color dayColor: Appearance.colors.colSecondary
-    property color monthColor: Appearance.colors.colSecondaryHover
-
-    opacity: style === "rotating" ? 1.0 : 0.0
-    Behavior on opacity {
-        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-    }
-
     rotation: {
         if (!Config.options.time.secondPrecision) return 0
-        else return secondHandLoader.item.rotation + 45 // +45 to center the text
+        else return (360 / 60 * clockSecond) + 180 - (angleStep / Math.PI * 180 * dateText.length) / 2
     }
 
     Repeater {
@@ -40,20 +34,18 @@ Item {
         delegate: Text {
             required property int index
             property real angle: index * root.angleStep - Math.PI / 2
-
             x: root.width / 2 + root.radius * Math.cos(angle) - width / 2
             y: root.height / 2 + root.radius * Math.sin(angle) - height / 2
-
-            text: root.dateText.charAt(index)
-
-            font.family: Appearance.font.family.title
-            font.pixelSize: 30
-            font.weight: Font.DemiBold 
-
-            color: index < 3 ? root.dayColor : root.monthColor
-
             rotation: angle * 180 / Math.PI + 90
 
+            color: root.color
+            font {
+                family: Appearance.font.family.title
+                pixelSize: 30
+                weight: Font.DemiBold 
+            }
+
+            text: root.dateText.charAt(index)
         }
     }
 }