From d7f7df1b80564ede97181acf59ddc9fa55b1b820 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 22 Apr 2026 13:19:08 -0700
Subject: [PATCH] fix(live): subtle focus ring on global-bar icon buttons

Default browser focus-visible ring was a heavy blue outline that
clashed with the dark capsule. Inject a palette-aware inner box-shadow
ring (accentSoft + accent) scoped to the global bar buttons via a
one-time <style> tag. Keeps keyboard focus visible without the
visual noise.
---
 .agents/skills/impeccable/scripts/live-browser.js | 15 +++++++++++++++
 .claude/skills/impeccable/scripts/live-browser.js | 15 +++++++++++++++
 .cursor/skills/impeccable/scripts/live-browser.js | 15 +++++++++++++++
 .gemini/skills/impeccable/scripts/live-browser.js | 15 +++++++++++++++
 .github/skills/impeccable/scripts/live-browser.js | 15 +++++++++++++++
 .kiro/skills/impeccable/scripts/live-browser.js   | 15 +++++++++++++++
 .../skills/impeccable/scripts/live-browser.js     | 15 +++++++++++++++
 .pi/skills/impeccable/scripts/live-browser.js     | 15 +++++++++++++++
 .../skills/impeccable/scripts/live-browser.js     | 15 +++++++++++++++
 .../skills/impeccable/scripts/live-browser.js     | 15 +++++++++++++++
 .trae/skills/impeccable/scripts/live-browser.js   | 15 +++++++++++++++
 source/skills/impeccable/scripts/live-browser.js  | 15 +++++++++++++++
 12 files changed, 180 insertions(+)

diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.agents/skills/impeccable/scripts/live-browser.js
+++ b/.agents/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.claude/skills/impeccable/scripts/live-browser.js
+++ b/.claude/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.cursor/skills/impeccable/scripts/live-browser.js
+++ b/.cursor/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.gemini/skills/impeccable/scripts/live-browser.js
+++ b/.gemini/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.github/skills/impeccable/scripts/live-browser.js
+++ b/.github/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.kiro/skills/impeccable/scripts/live-browser.js
+++ b/.kiro/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.opencode/skills/impeccable/scripts/live-browser.js
+++ b/.opencode/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.pi/skills/impeccable/scripts/live-browser.js
+++ b/.pi/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.rovodev/skills/impeccable/scripts/live-browser.js
+++ b/.rovodev/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.trae-cn/skills/impeccable/scripts/live-browser.js
+++ b/.trae-cn/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/.trae/skills/impeccable/scripts/live-browser.js
+++ b/.trae/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',
diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js
index c943ede91..116e1efa6 100644
--- a/source/skills/impeccable/scripts/live-browser.js
+++ b/source/skills/impeccable/scripts/live-browser.js
@@ -2575,6 +2575,21 @@ void main() {
     const theme = detectPageTheme();
     const P = barPaletteForTheme(theme);
 
+    // Custom focus-visible for bar buttons. Browser default is a heavy
+    // blue ring that looks jarring on the dark capsule. Replace with a
+    // soft accent-tinted inner ring that respects the bar's palette.
+    if (!document.getElementById(PREFIX + '-bar-focus-style')) {
+      const s = document.createElement('style');
+      s.id = PREFIX + '-bar-focus-style';
+      s.textContent =
+        '#' + PREFIX + '-global-bar button:focus { outline: none; }' +
+        '#' + PREFIX + '-global-bar button:focus-visible {' +
+        '  outline: none;' +
+        '  box-shadow: 0 0 0 2px ' + P.accentSoft + ', 0 0 0 3px ' + P.accent + ';' +
+        '}';
+      document.head.appendChild(s);
+    }
+
     globalBarEl = el('div', {
       position: 'fixed', bottom: '14px', left: '50%',
       transform: 'translateX(-50%) translateY(20px)',