add new date style (bubble)

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

@@ -31,9 +31,8 @@ Item {
     property real secondsHandLength: 100
     property real hourLineSize: 5
     property real minuteLineSize: 2
-
     property real hourNumberSize: 36
-    
+    property real dateSquareSize: 64
 
     property color colShadow: Appearance.colors.colShadow
     property color colBackground: Appearance.colors.colSecondaryContainer
@@ -405,6 +404,74 @@ Item {
             }
         }
     }
+
+    // Date bubble style left side
+    Rectangle{
+        z: 5
+        implicitWidth: Config.options.background.clock.cookie.dateStyle === "bubble" ? dateSquareSize : 0
+        implicitHeight: Config.options.background.clock.cookie.dateStyle === "bubble" ? dateSquareSize : 0
+        color: Appearance.colors.colPrimaryContainerHover
+        radius: Appearance.rounding.large
+        anchors{
+            left: cookie.left
+            bottom: cookie.bottom
+            bottomMargin: 5
+        }
+        Behavior on implicitWidth{
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+        Behavior on implicitHeight{
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+        StyledText{
+            anchors.centerIn: parent
+            text: DateTime.date.substring(5,7)
+            color: Appearance.colors.colPrimary
+            opacity: Config.options.background.clock.cookie.dateStyle === "bubble" ? 1.0 : 0
+            font {
+                family: Appearance.font.family.reading
+                pixelSize: 30
+                weight: 1000
+            }
+            Behavior on opacity{
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+        }
+    }
+
+    // Date bubble style right side
+    Rectangle{
+        z: 5
+        implicitWidth: Config.options.background.clock.cookie.dateStyle === "bubble" ? dateSquareSize : 0
+        implicitHeight: Config.options.background.clock.cookie.dateStyle === "bubble" ? dateSquareSize : 0
+        color: Appearance.colors.colTertiaryContainer
+        radius: Appearance.rounding.verylarge
+        anchors{
+            right: cookie.right
+            top: cookie.top
+            topMargin: 5
+        }
+        Behavior on implicitWidth{
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+        Behavior on implicitHeight{
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+        StyledText{
+            anchors.centerIn: parent
+            text: DateTime.date.substring(8,10)
+            color: Appearance.colors.colTertiary
+            opacity: Config.options.background.clock.cookie.dateStyle === "bubble" ? 1.0 : 0
+            font {
+                family: Appearance.font.family.reading
+                pixelSize: 30
+                weight: 1000
+            }
+            Behavior on opacity{
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+        }
+    }
     
     // Hour Indicator numbers (3-6-9-12)
     Repeater {

.config/quickshell/ii/modules/common/Config.qml

@@ -135,7 +135,7 @@ Singleton {
                         property string hourHandStyle: "fill" // Options:     "classic", "fill", "stroke", "hide"
                         property string minuteHandStyle: "medium" // Options: "classic", "thin", "medium", "bold", "hide"
                         property string secondHandStyle: "dot" // Options:    "dot", "line" , "none" 
-                        property string dateStyle: "rotating" // Options:     "rotating", "square", "none"
+                        property string dateStyle: "rotating" // Options:     "rotating", "square", "bubble" , "none"
                         property bool timeIndicators: true
                         property bool centerGlow: true
                         property bool dateInClock: true

.config/quickshell/ii/modules/settings/InterfaceConfig.qml

@@ -253,6 +253,11 @@ ContentPage {
                             displayName: Translation.tr("Square"),
                             icon: "square",
                             value: "square"
+                        },
+                        {
+                            displayName: Translation.tr("Bubble"),
+                            icon: "bubble_chart",
+                            value: "bubble"
                         }
                     ]
                 }