From 338adf86683901af4daa07644dca3f3f2db6a3b1 Mon Sep 17 00:00:00 2001
From: elpresidank <benjamin@krieg.cloud>
Date: Sat, 11 Apr 2026 23:28:38 -0500
Subject: [PATCH] fix: global focus-visible rings and light-mode border
 contrast

- Add global focus-visible outline for buttons, switches, selects, and
  inputs so all interactive elements show a visible brand-500 ring on
  keyboard focus (not just NavLinks and dialog close)
- Darken light-mode --color-border from #e4e4e7 to #d4d4d8 so input
  borders, dividers, and mode selector outlines are visible on white

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ts/packages/workbench/src/index.css | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/ts/packages/workbench/src/index.css b/ts/packages/workbench/src/index.css
index a26aa838..a07f447f 100644
--- a/ts/packages/workbench/src/index.css
+++ b/ts/packages/workbench/src/index.css
@@ -97,6 +97,23 @@
   }
 }
 
+/* Global focus-visible for interactive elements */
+@layer base {
+  button:focus-visible,
+  [role="switch"]:focus-visible,
+  select:focus-visible {
+    outline: 2px solid var(--color-brand-500);
+    outline-offset: 2px;
+    border-radius: 0.375rem;
+  }
+
+  input:focus-visible,
+  textarea:focus-visible {
+    outline: 2px solid var(--color-brand-500);
+    outline-offset: 0;
+  }
+}
+
 /* Prose overrides for theme-aware markdown rendering */
 @layer base {
   .prose code {
@@ -121,8 +138,8 @@ html.light {
   --color-fg-muted: #52525b;
   --color-fg-subtle: #71717a;
 
-  --color-border: #e4e4e7;
-  --color-border-hover: #d4d4d8;
+  --color-border: #d4d4d8;
+  --color-border-hover: #a1a1aa;
 
   /* Brand adjustments for light backgrounds */
   --color-brand-300: #3b63ed;