3 files changed, 82 insertions, 0 deletions
diff --git a/components/effects/Colouriser.qml b/components/effects/Colouriser.qml
new file mode 100644
index 0000000..b621ecd
--- /dev/null
+++ b/components/effects/Colouriser.qml
@@ -0,0 +1,16 @@
+import qs.config
+import QtQuick
+import QtQuick.Effects
+
+MultiEffect {
+    colorization: 1
+    brightness: colorizationColor.hslLightness
+
+    Behavior on colorizationColor {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}
diff --git a/components/effects/Elevation.qml b/components/effects/Elevation.qml
new file mode 100644
index 0000000..999b199
--- /dev/null
+++ b/components/effects/Elevation.qml
@@ -0,0 +1,22 @@
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Effects
+
+RectangularShadow {
+    property int level
+    property real dp: [0, 1, 3, 6, 8, 12][level]
+
+    color: Qt.alpha(Colours.palette.m3shadow, 0.7)
+    blur: (dp * 5) ** 0.7
+    spread: -dp * 0.3 + (dp * 0.1) ** 2
+    offset.y: dp / 2
+
+    Behavior on dp {
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}
diff --git a/components/effects/InnerBorder.qml b/components/effects/InnerBorder.qml
new file mode 100644
index 0000000..e5092ca
--- /dev/null
+++ b/components/effects/InnerBorder.qml
@@ -0,0 +1,44 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Effects
+
+StyledRect {
+    property alias innerRadius: maskInner.radius
+    property alias thickness: maskInner.anchors.margins
+    property alias leftThickness: maskInner.anchors.leftMargin
+    property alias topThickness: maskInner.anchors.topMargin
+    property alias rightThickness: maskInner.anchors.rightMargin
+    property alias bottomThickness: maskInner.anchors.bottomMargin
+
+    anchors.fill: parent
+    color: Colours.palette.m3surfaceContainer
+
+    layer.enabled: true
+    layer.effect: MultiEffect {
+        maskSource: mask
+        maskEnabled: true
+        maskInverted: true
+        maskThresholdMin: 0.5
+        maskSpreadAtMin: 1
+    }
+
+    Item {
+        id: mask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        Rectangle {
+            id: maskInner
+
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.normal
+            radius: Appearance.rounding.small
+        }
+    }
+}