bar: make circular progresses of filled style

.config/quickshell/ii/modules/bar/Media.qml

@@ -48,24 +48,28 @@ Item {
         spacing: 4
         anchors.fill: parent
 
-        CircularProgress {
+        ClippedFilledCircularProgress {
+            id: mediaCircProg
             Layout.alignment: Qt.AlignVCenter
-            Layout.leftMargin: rowLayout.spacing
-            lineWidth: 2
-            value: activePlayer?.position / activePlayer?.length
-            implicitSize: 26
-            colSecondary: Appearance.colors.colSecondaryContainer
-            colPrimary: Appearance.m3colors.m3onSecondaryContainer
+            lineWidth: Appearance.rounding.unsharpen
+            value: percentage
+            implicitSize: 22
+            colPrimary: Appearance.colors.colOnSecondaryContainer
             enableAnimation: false
 
-            MaterialSymbol {
+            Item {
                 anchors.centerIn: parent
-                fill: 1
-                text: activePlayer?.isPlaying ? "pause" : "music_note"
-                iconSize: Appearance.font.pixelSize.normal
-                color: Appearance.m3colors.m3onSecondaryContainer
+                width: mediaCircProg.implicitSize
+                height: mediaCircProg.implicitSize
+                
+                MaterialSymbol {
+                    anchors.centerIn: parent
+                    fill: 1
+                    text: activePlayer?.isPlaying ? "pause" : "music_note"
+                    iconSize: Appearance.font.pixelSize.normal
+                    color: Appearance.m3colors.m3onSecondaryContainer
+                }
             }
-
         }
 
         StyledText {

.config/quickshell/ii/modules/bar/Resource.qml

@@ -35,21 +35,27 @@ Item {
         spacing: 2
         x: shown ? 0 : -resourceRowLayout.width
 
-        CircularProgress {
+        ClippedFilledCircularProgress {
+            id: resourceCircProg
             Layout.alignment: Qt.AlignVCenter
-            lineWidth: 2
+            lineWidth: Appearance.rounding.unsharpen
             value: percentage
-            implicitSize: 26
-            colSecondary: Appearance.colors.colSecondaryContainer
-            colPrimary: Appearance.m3colors.m3onSecondaryContainer
+            implicitSize: 22
+            colPrimary: Appearance.colors.colOnSecondaryContainer
             enableAnimation: false
 
-            MaterialSymbol {
+            Item {
                 anchors.centerIn: parent
-                fill: 1
-                text: iconName
-                iconSize: Appearance.font.pixelSize.large
-                color: Appearance.m3colors.m3onSecondaryContainer
+                width: resourceCircProg.implicitSize
+                height: resourceCircProg.implicitSize
+                
+                MaterialSymbol {
+                    anchors.centerIn: parent
+                    fill: 1
+                    text: iconName
+                    iconSize: Appearance.font.pixelSize.normal
+                    color: Appearance.m3colors.m3onSecondaryContainer
+                }
             }
         }
 
@@ -61,12 +67,14 @@ Item {
             TextMetrics {
                 id: fullPercentageTextMetrics
                 text: "100"
+                font.pixelSize: Appearance.font.pixelSize.small
             }
 
             StyledText {
                 id: percentageText
                 anchors.centerIn: parent
                 color: Appearance.colors.colOnLayer1
+                font.pixelSize: Appearance.font.pixelSize.small
                 text: `${Math.round(percentage * 100).toString()}`
             }
         }

.config/quickshell/ii/modules/common/widgets/ClippedFilledCircularProgress.qml

@@ -0,0 +1,98 @@
+import qs.modules.common
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Shapes
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+
+    property int implicitSize: 18
+    property int lineWidth: 2
+    property real value: 0
+    property color colPrimary: Appearance?.colors.colOnSecondaryContainer ?? "#685496"
+    property color colSecondary: ColorUtils.transparentize(colPrimary, 0.4) ?? "#F1D3F9"
+    property real gapAngle: 360 / 18
+    property bool fill: true
+    property int fillOverflow: 2
+    property bool enableAnimation: true
+    property int animationDuration: 800
+    property var easingType: Easing.OutCubic
+    default property Item textMask: Item {
+        width: implicitSize
+        height: implicitSize
+        StyledText {
+            anchors.centerIn: parent
+            text: Math.round(root.value * 100)
+            font.pixelSize: 12
+            font.weight: Font.Medium
+        }
+    }
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    // property real degree: value * 360
+    property real degree: 0.65 * 360
+    property real centerX: root.width / 2
+    property real centerY: root.height / 2
+    property real arcRadius: root.implicitSize / 2 - root.lineWidth
+    property real startAngle: -90
+
+    Behavior on degree {
+        enabled: root.enableAnimation
+        NumberAnimation {
+            duration: root.animationDuration
+            easing.type: root.easingType
+        }
+
+    }
+
+    Rectangle {
+        id: contentItem
+        anchors.fill: parent
+        radius: implicitSize / 2
+        color: root.colSecondary
+        visible: false
+        layer.enabled: true
+        layer.smooth: true
+
+        Shape {
+            anchors.fill: parent
+            preferredRendererType: Shape.CurveRenderer
+
+            ShapePath {
+                id: primaryPath
+                pathHints: ShapePath.PathSolid & ShapePath.PathNonIntersecting
+                strokeColor: root.colPrimary
+                strokeWidth: root.lineWidth
+                capStyle: ShapePath.RoundCap
+                fillColor: root.colPrimary
+
+                startX: root.centerX
+                startY: root.centerY
+
+                PathAngleArc {
+                    moveToStart: false
+                    centerX: root.centerX
+                    centerY: root.centerY
+                    radiusX: root.arcRadius
+                    radiusY: root.arcRadius
+                    startAngle: root.startAngle
+                    sweepAngle: root.degree
+                }
+                PathLine {
+                    x: primaryPath.startX
+                    y: primaryPath.startY
+                }
+            }
+        }
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        source: contentItem
+        invert: true
+        maskSource: root.textMask
+    }
+}

.config/quickshell/ii/modules/common/widgets/RoundCorner.qml

@@ -22,8 +22,9 @@ Item {
         ShapePath {
             id: shapePath
             strokeWidth: 0
-
             fillColor: root.color
+            pathHints: ShapePath.PathSolid & ShapePath.PathNonIntersecting
+
             startX: switch (root.corner) {
                 case RoundCorner.CornerEnum.TopLeft: return 0;
                 case RoundCorner.CornerEnum.TopRight: return root.implicitSize;