lock screen: redesign password prompt

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

@@ -146,15 +146,15 @@ Singleton {
         property color colPrimaryHover: ColorUtils.mix(colors.colPrimary, colLayer1Hover, 0.87)
         property color colPrimaryActive: ColorUtils.mix(colors.colPrimary, colLayer1Active, 0.7)
         property color colPrimaryContainer: m3colors.m3primaryContainer
-        property color colPrimaryContainerHover: ColorUtils.mix(colors.colPrimaryContainer, colLayer1Hover, 0.7)
-        property color colPrimaryContainerActive: ColorUtils.mix(colors.colPrimaryContainer, colLayer1Active, 0.6)
+        property color colPrimaryContainerHover: ColorUtils.mix(colors.colPrimaryContainer, colors.colOnPrimaryContainer, 0.9)
+        property color colPrimaryContainerActive: ColorUtils.mix(colors.colPrimaryContainer, colors.colOnPrimaryContainer, 0.8)
         property color colOnPrimaryContainer: m3colors.m3onPrimaryContainer
         property color colSecondary: m3colors.m3secondary
         property color colSecondaryHover: ColorUtils.mix(m3colors.m3secondary, colLayer1Hover, 0.85)
         property color colSecondaryActive: ColorUtils.mix(m3colors.m3secondary, colLayer1Active, 0.4)
         property color colSecondaryContainer: m3colors.m3secondaryContainer
         property color colSecondaryContainerHover: ColorUtils.mix(m3colors.m3secondaryContainer, m3colors.m3onSecondaryContainer, 0.90)
-        property color colSecondaryContainerActive: ColorUtils.mix(m3colors.m3secondaryContainer, colLayer1Active, 0.54)
+        property color colSecondaryContainerActive: ColorUtils.mix(m3colors.m3secondaryContainer, m3colors.m3onSecondaryContainer, 0.54)
         property color colTertiary: m3colors.m3tertiary
         property color colTertiaryHover: ColorUtils.mix(m3colors.m3tertiary, colLayer1Hover, 0.85)
         property color colTertiaryActive: ColorUtils.mix(m3colors.m3tertiary, colLayer1Active, 0.4)

.config/quickshell/ii/modules/common/functions/Session.qml

@@ -0,0 +1,50 @@
+pragma Singleton
+import Quickshell
+import qs.services
+import qs.modules.common
+
+Singleton {
+    id: root
+
+    function closeAllWindows() {
+        HyprlandData.windowList.map(w => w.pid).forEach(pid => {
+            Quickshell.execDetached(["kill", pid]);
+        });
+    }
+
+    function lock() {
+        Quickshell.execDetached(["loginctl", "lock-session"]);
+    }
+
+    function suspend() {
+        Quickshell.execDetached(["bash", "-c", "systemctl suspend || loginctl suspend"]);
+    }
+
+    function logout() {
+        closeAllWindows();
+        Quickshell.execDetached(["pkill", "Hyprland"]);
+    }
+
+    function launchTaskManager() {
+        Quickshell.execDetached(["bash", "-c", `${Config.options.apps.taskManager}`]);
+    }
+
+    function hibernate() {
+        Quickshell.execDetached(["bash", "-c", `systemctl hibernate || loginctl hibernate`]);
+    }
+
+    function poweroff() {
+        closeAllWindows();
+        Quickshell.execDetached(["bash", "-c", `systemctl poweroff || loginctl poweroff`]);
+    }
+
+    function reboot() {
+        closeAllWindows();
+        Quickshell.execDetached(["bash", "-c", `reboot || loginctl reboot`]);
+    }
+
+    function rebootToFirmware() {
+        closeAllWindows();
+        Quickshell.execDetached(["bash", "-c", `systemctl reboot --firmware-setup || loginctl reboot --firmware-setup`]);
+    }
+}

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

@@ -30,11 +30,11 @@ Button {
     property color colRippleToggled: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
 
     opacity: root.enabled ? 1 : 0.4
-    property color buttonColor: root.enabled ? (root.toggled ? 
+    property color buttonColor: ColorUtils.transparentize(root.toggled ? 
         (root.hovered ? colBackgroundToggledHover : 
             colBackgroundToggled) :
         (root.hovered ? colBackgroundHover : 
-            colBackground)) : colBackground
+            colBackground), root.enabled ? 0 : 1)
     property color rippleColor: root.toggled ? colRippleToggled : colRipple
 
     function startRipple(x, y) {

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

@@ -0,0 +1,39 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.widgets
+
+/**
+ * Material 3 expressive style toolbar.
+ * https://m3.material.io/components/toolbars
+ */
+Item {
+    id: root
+
+    property real padding: 6
+    property alias colBackground: background.color
+    default property alias data: toolbarLayout.data
+    implicitWidth: background.implicitWidth
+    implicitHeight: background.implicitHeight
+
+    StyledRectangularShadow {
+        target: background
+    }
+
+    Rectangle {
+        id: background
+        anchors.centerIn: parent
+        color: Appearance.colors.colLayer2
+        implicitHeight: toolbarLayout.implicitHeight + root.padding * 2
+        implicitWidth: toolbarLayout.implicitWidth + root.padding * 2
+        radius: Appearance.rounding.full
+
+        RowLayout {
+            id: toolbarLayout
+            anchors {
+                fill: parent
+                margins: root.padding
+            }
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+
+RippleButton {
+    Layout.fillHeight: true
+    Layout.topMargin: 2
+    Layout.bottomMargin: 2
+    buttonRadius: Appearance.rounding.full
+}

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

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import qs.modules.common
+import qs.modules.common.widgets
+
+TextField {
+    id: filterField
+
+    property alias colBackground: background.color
+
+    Layout.fillHeight: true
+    Layout.topMargin: 2
+    Layout.bottomMargin: 2
+    implicitWidth: 200
+    padding: 10
+
+    placeholderTextColor: Appearance.colors.colSubtext
+    color: Appearance.colors.colOnLayer1
+    font.pixelSize: Appearance.font.pixelSize.small
+    renderType: Text.NativeRendering
+    selectedTextColor: Appearance.colors.colOnSecondaryContainer
+    selectionColor: Appearance.colors.colSecondaryContainer
+
+    background: Rectangle {
+        id: background
+        color: Appearance.colors.colLayer1
+        radius: Appearance.rounding.full
+    }
+}

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

@@ -0,0 +1,10 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.common
+import qs.modules.common.functions
+
+ToolbarButton {
+    colBackground: ColorUtils.transparentize(Appearance.colors.colPrimaryContainer)
+    colBackgroundHover: Appearance.colors.colPrimaryContainerHover
+    colRipple: Appearance.colors.colPrimaryContainerActive
+}