From f7998dd7c456b737f3c308115625927b9d03a232 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Sun, 8 Mar 2026 19:19:10 +0100
Subject: [PATCH] add focus ring to group and ripple buttons

---
 .../ii/modules/common/widgets/GroupButton.qml | 21 ++++++++++++++++---
 .../modules/common/widgets/RippleButton.qml   | 16 ++++++++++++++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/dots/.config/quickshell/ii/modules/common/widgets/GroupButton.qml b/dots/.config/quickshell/ii/modules/common/widgets/GroupButton.qml
index 080439613..031dfe778 100644
--- a/dots/.config/quickshell/ii/modules/common/widgets/GroupButton.qml
+++ b/dots/.config/quickshell/ii/modules/common/widgets/GroupButton.qml
@@ -42,6 +42,7 @@ Button {
     property color colBackgroundToggled: Appearance?.colors.colPrimary ?? "#65558F"
     property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"
     property color colBackgroundToggledActive: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
+    property color colFocusRing: Appearance.colors.colOnSecondaryContainer
 
     property real radius: root.down ? root.buttonRadiusPressed : root.buttonRadius
     property real leftRadius: root.down ? root.buttonRadiusPressed : root.buttonRadius
@@ -117,7 +118,6 @@ Button {
         };
     }
 
-    property bool tabbedTo: root.focus && (focusReason === Qt.TabFocusReason || focusReason === Qt.BacktabFocusReason)
     background: Rectangle {
         id: buttonBackground
         topLeftRadius: root.leftRadius
@@ -130,9 +130,24 @@ Button {
         Behavior on color {
             animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
         }
+    }
 
-        border.width: root.tabbedTo ? 2 : 0
-        border.color: Appearance.colors.colSecondary
+    Rectangle {
+        id: focusRing
+        topLeftRadius: root.leftRadius - anchors.margins
+        topRightRadius: root.rightRadius - anchors.margins
+        bottomLeftRadius: root.leftRadius - anchors.margins
+        bottomRightRadius: root.rightRadius - anchors.margins
+        visible: root.visualFocus
+        color: "transparent"
+        anchors {
+            fill: parent
+            margins: -4
+        }
+        border {
+            color: root.colFocusRing
+            width: 2
+        }
     }
 
     contentItem: StyledText {
diff --git a/dots/.config/quickshell/ii/modules/common/widgets/RippleButton.qml b/dots/.config/quickshell/ii/modules/common/widgets/RippleButton.qml
index 498bfc1cb..408515f7c 100644
--- a/dots/.config/quickshell/ii/modules/common/widgets/RippleButton.qml
+++ b/dots/.config/quickshell/ii/modules/common/widgets/RippleButton.qml
@@ -29,6 +29,7 @@ Button {
     property color colBackgroundToggledHover: Appearance?.colors.colPrimaryHover ?? "#77699C"
     property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
     property color colRippleToggled: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
+    property color colFocusRing: Appearance.colors.colOnSecondaryContainer
 
     opacity: root.enabled ? 1 : 0.4
     property color buttonColor: ColorUtils.transparentize(root.toggled ? 
@@ -180,6 +181,21 @@ Button {
         }
     }
 
+    Rectangle {
+        id: focusRing
+        radius: buttonBackground.radius - anchors.margins
+        visible: root.visualFocus
+        color: "transparent"
+        anchors {
+            fill: parent
+            margins: -4
+        }
+        border {
+            color: root.colFocusRing
+            width: 2
+        }
+    }
+
     contentItem: StyledText {
         text: root.buttonText
     }