Initial commit

widgets/ColoredIcon.qml

@@ -0,0 +1,30 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Qt5Compat.GraphicalEffects
+import Quickshell.Widgets
+import ".."
+
+Item {
+    id: root
+    required property var source
+    property var implicitSize: 0
+    property var color: "white"
+    readonly property real actualSize: Math.min(root.width, root.height)
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    layer.enabled: true
+    layer.effect: OpacityMask {
+        maskSource: IconImage {
+            implicitSize: root.actualSize
+            source: root.source
+        }
+    }
+
+    Rectangle {
+        color: root.color
+        anchors.fill: parent
+    }
+}

widgets/IconButton.qml

@@ -0,0 +1,52 @@
+import QtQuick
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+import ".."
+
+Item {
+    id: root
+    property string source
+    property var implicitSize: 24
+    property var padding: 0
+    property var radius: 20
+    property var activeRectangle: true
+    property var color: ShellSettings.settings.colors["inverse_surface"]
+    property var activeColor: ShellSettings.settings.colors["inverse_primary"]
+    signal clicked
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    Rectangle {
+        id: iconBackground
+        color: ShellSettings.settings.colors["primary"]
+        radius: root.radius
+        visible: iconButton.containsMouse && root.activeRectangle
+        anchors.fill: parent
+    }
+
+    // Figure out a way to color images better 
+    IconImage {
+        id: iconImage
+        source: root.source
+        visible: true 
+        // color: {
+        //     if (!activeRectangle)
+        //         return root.color;
+        //
+        //     return iconButton.containsMouse ? root.activeColor : root.color;
+        // }
+
+        anchors {
+            fill: parent
+            margins: root.padding
+        }
+    }
+
+    MouseArea {
+        id: iconButton
+        hoverEnabled: true
+        anchors.fill: parent
+        onPressed: root.clicked()
+    }
+}

widgets/RoundSlider.qml

@@ -0,0 +1,55 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+import ".."
+
+Slider {
+    id: slider
+    implicitHeight: 8
+    property var accentColor: ShellSettings.settings.colors["primary"]
+
+    background: Rectangle {
+        id: sliderContainer
+        width: slider.availableWidth
+        height: slider.implicitHeight
+        color: ShellSettings.settings.colors["inverse_surface"]
+        radius: 4
+        anchors.verticalCenter: parent.verticalCenter
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            source: Rectangle {
+                width: sliderContainer.width
+                height: sliderContainer.height
+                radius: sliderContainer.radius
+                color: "white"
+            }
+
+            maskSource: Rectangle {
+                width: sliderContainer.width
+                height: sliderContainer.height
+                radius: sliderContainer.radius
+                color: "black"
+            }
+        }
+
+        Rectangle {
+            id: fill
+            width: slider.handle.width / 2 + slider.visualPosition * (sliderContainer.width - slider.handle.width)
+            height: sliderContainer.height
+            color: Qt.color(slider.accentColor ?? "purple").darker(1.2)
+        }
+    }
+
+    handle: Rectangle {
+        id: handleRect
+        x: slider.visualPosition * (slider.availableWidth - width)
+        y: slider.topPadding + slider.availableHeight / 2 - height / 2
+        width: 16
+        height: 16
+        radius: width / 2
+        color: slider.pressed ? Qt.color(slider.accentColor ?? "purple").darker(1.5) : slider.accentColor ?? "purple"
+    }
+}

widgets/Separator.qml

@@ -0,0 +1,9 @@
+import QtQuick
+import ".."
+
+Rectangle {
+    color: ShellSettings.settings.colors["primary"]
+    radius: 5
+    width: 7.5
+    height: 7.5
+}