From 2f3a5088eefa9f70b4c40ca36ddfc0bfdde9d6ed Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 2 Oct 2026 16:58:42 +0200
Subject: [PATCH] fix(ui): offset focus ring on highlighted buttons with
 outline gap

Highlighted buttons use the accent color, so the flush box-shadow focus
ring looked like a stray border. Use an offset accent outline instead and
keep the regular depth shadow on focus and hover-focus.
---
 resources/css/app.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/resources/css/app.css b/resources/css/app.css
index 112e162152..ccdac0ed10 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -136,6 +136,20 @@
     box-shadow: var(--button-depth-hover), 0 0 0 1px var(--color-red-500);
 }
 
+/* Highlighted buttons share the accent hue, so a flush ring reads as a stray
+   border. Offset the indicator with an outline to leave a clear gap. */
+.button.button-highlighted:not(:disabled):focus-visible,
+.button[isHighlighted]:not(:disabled):focus-visible {
+    box-shadow: var(--button-depth);
+    outline: 1px solid var(--color-accent);
+    outline-offset: 2px;
+}
+
+.button.button-highlighted:not(:disabled):hover:focus-visible,
+.button[isHighlighted]:not(:disabled):hover:focus-visible {
+    box-shadow: var(--button-depth-hover);
+}
+
 /* Other button-like controls retain the lighter scale feedback. */
 .button,
 .icon-button,