dynamic color scheme progress

Components/CustomClippingRect.qml

@@ -0,0 +1,13 @@
+import Quickshell.Widgets
+import QtQuick
+import qs.Modules
+
+ClippingRectangle {
+    id: root
+
+    color: "transparent"
+
+    Behavior on color {
+        CAnim {}
+    }
+}

Components/CustomMouseArea.qml

@@ -0,0 +1,19 @@
+import QtQuick
+
+MouseArea {
+    property int scrollAccumulatedY: 0
+
+    function onWheel(event: WheelEvent): void {
+    }
+
+    onWheel: event => {
+        if (Math.sign(event.angleDelta.y) !== Math.sign(scrollAccumulatedY))
+            scrollAccumulatedY = 0;
+        scrollAccumulatedY += event.angleDelta.y;
+
+        if (Math.abs(scrollAccumulatedY) >= 120) {
+            onWheel(event);
+            scrollAccumulatedY = 0;
+        }
+    }
+}

Components/CustomRadioButton.qml

@@ -0,0 +1,56 @@
+import QtQuick
+import QtQuick.Templates
+import qs.Config
+import qs.Modules
+
+RadioButton {
+    id: root
+
+    font.pointSize: 12
+
+    implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin
+    implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
+
+    indicator: Rectangle {
+        id: outerCircle
+
+        implicitWidth: 20
+        implicitHeight: 20
+        radius: 1000
+        color: "transparent"
+        border.color: root.checked ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurfaceVariant
+        border.width: 2
+        anchors.verticalCenter: parent.verticalCenter
+
+        StateLayer {
+            anchors.margins: -7
+            color: root.checked ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3primary
+            z: -1
+
+            function onClicked(): void {
+                root.click();
+            }
+        }
+
+        CustomRect {
+            anchors.centerIn: parent
+            implicitWidth: 8
+            implicitHeight: 8
+
+            radius: 1000
+            color: Qt.alpha(DynamicColors.palette.m3primary, root.checked ? 1 : 0)
+        }
+
+        Behavior on border.color {
+            CAnim {}
+        }
+    }
+
+    contentItem: CustomText {
+        text: root.text
+        font.pointSize: root.font.pointSize
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: outerCircle.right
+        anchors.leftMargin: 10
+    }
+}

Components/CustomRect.qml

@@ -0,0 +1,12 @@
+import QtQuick
+import qs.Modules
+
+Rectangle {
+    id: root
+
+    color: "transparent"
+
+    Behavior on color {
+        CAnim {}
+    }
+}

Components/CustomSlider.qml

@@ -0,0 +1,56 @@
+import QtQuick
+import QtQuick.Templates
+import qs.Config
+import qs.Modules
+
+Slider {
+    id: root
+
+    background: Item {
+        CustomRect {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.topMargin: root.implicitHeight / 3
+            anchors.bottomMargin: root.implicitHeight / 3
+
+            implicitWidth: root.handle.x - root.implicitHeight / 6
+
+            color: DynamicColors.palette.m3primary
+            radius: 1000
+            topRightRadius: root.implicitHeight / 15
+            bottomRightRadius: root.implicitHeight / 15
+        }
+
+        CustomRect {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+            anchors.topMargin: root.implicitHeight / 3
+            anchors.bottomMargin: root.implicitHeight / 3
+
+            implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
+
+            color: DynamicColors.tPalette.m3surfaceContainer
+            radius: 1000
+            topLeftRadius: root.implicitHeight / 15
+            bottomLeftRadius: root.implicitHeight / 15
+        }
+    }
+
+    handle: CustomRect {
+        x: root.visualPosition * root.availableWidth - implicitWidth / 2
+
+        implicitWidth: root.implicitHeight / 4.5
+        implicitHeight: root.implicitHeight
+
+        color: DynamicColors.palette.m3primary
+        radius: 1000
+
+        MouseArea {
+            anchors.fill: parent
+            acceptedButtons: Qt.NoButton
+            cursorShape: Qt.PointingHandCursor
+        }
+    }
+}

Components/CustomText.qml

@@ -0,0 +1,48 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Config
+import qs.Modules
+
+Text {
+    id: root
+
+    property bool animate: false
+    property string animateProp: "scale"
+    property real animateFrom: 0
+    property real animateTo: 1
+    property int animateDuration: 400
+
+    renderType: Text.NativeRendering
+    textFormat: Text.PlainText
+    color: DynamicColors.palette.m3onSurface
+    font.family: "Rubik"
+    font.pointSize: 12
+
+    Behavior on color {
+        CAnim {}
+    }
+
+    Behavior on text {
+        enabled: root.animate
+
+        SequentialAnimation {
+            Anim {
+                to: root.animateFrom
+                easing.bezierCurve: MaterialEasing.standardAccel
+            }
+            PropertyAction {}
+            Anim {
+                to: root.animateTo
+                easing.bezierCurve: MaterialEasing.standardDecel
+            }
+        }
+    }
+
+    component Anim: NumberAnimation {
+        target: root
+        property: root.animateProp
+        duration: root.animateDuration / 2
+        easing.type: Easing.BezierSpline
+    }
+}

Components/StateLayer.qml

@@ -0,0 +1,94 @@
+import qs.Config
+import qs.Modules
+import QtQuick
+
+MouseArea {
+    id: root
+
+    property bool disabled
+    property color color: DynamicColors.palette.m3onSurface
+    property real radius: parent?.radius ?? 0
+    property alias rect: hoverLayer
+
+    function onClicked(): void {
+    }
+
+    anchors.fill: parent
+
+    enabled: !disabled
+    cursorShape: disabled ? undefined : Qt.PointingHandCursor
+    hoverEnabled: true
+
+    onPressed: event => {
+        if (disabled)
+            return;
+
+        rippleAnim.x = event.x;
+        rippleAnim.y = event.y;
+
+        const dist = (ox, oy) => ox * ox + oy * oy;
+        rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
+
+        rippleAnim.restart();
+    }
+
+    onClicked: event => !disabled && onClicked(event)
+
+    SequentialAnimation {
+        id: rippleAnim
+
+        property real x
+        property real y
+        property real radius
+
+        PropertyAction {
+            target: ripple
+            property: "x"
+            value: rippleAnim.x
+        }
+        PropertyAction {
+            target: ripple
+            property: "y"
+            value: rippleAnim.y
+        }
+        PropertyAction {
+            target: ripple
+            property: "opacity"
+            value: 0.08
+        }
+        Anim {
+            target: ripple
+            properties: "implicitWidth,implicitHeight"
+            from: 0
+            to: rippleAnim.radius * 2
+            easing.bezierCurve: MaterialEasing.standardDecel
+        }
+        Anim {
+            target: ripple
+            property: "opacity"
+            to: 0
+        }
+    }
+
+    CustomClippingRect {
+        id: hoverLayer
+
+        anchors.fill: parent
+
+        color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
+        radius: root.radius
+
+        CustomRect {
+            id: ripple
+
+            radius: 1000
+            color: root.color
+            opacity: 0
+
+            transform: Translate {
+                x: -ripple.width / 2
+                y: -ripple.height / 2
+            }
+        }
+    }
+}