From df5f0dbf9f8d548e070fa0e5b3344c05c9a37fd1 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Tue, 23 Jul 2024 19:45:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(keyboard)=20improve=20the=20global?=
 =?UTF-8?q?=20focus=20ring=20selector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

this triggered on a few things we didn't want (labels particularly).
plus, handle the focus ring color via panda, so that it's available in
the JS (will be useful in soon to be commited stuff)
---
 src/frontend/panda.config.ts      | 1 +
 src/frontend/src/styles/index.css | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index 8d4b06d1..bb80f4c6 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -214,6 +214,7 @@ const config: Config = {
           subtle: { value: '{colors.amber.100}' },
           'subtle-text': { value: '{colors.amber.700}' },
         },
+        focusRing: { value: 'rgb(74, 121, 199)' },
       },
       shadows: {
         box: { value: '{shadows.sm}' },
diff --git a/src/frontend/src/styles/index.css b/src/frontend/src/styles/index.css
index b081c857..1d08e3f0 100644
--- a/src/frontend/src/styles/index.css
+++ b/src/frontend/src/styles/index.css
@@ -11,10 +11,11 @@ body,
   outline: none;
 }
 
-[data-rac][data-focus-visible],
-:is(a, button, input, select, textarea):not([data-rac]):focus-visible {
+[data-rac][data-focus-visible]:not(label),
+:is(a, button, input[type='text'], select, textarea):not(
+    [data-rac]
+  ):focus-visible {
   outline: 2px solid black;
   outline-offset: 1px;
-  outline-color: Highlight;
-  outline-color: -webkit-focus-ring-color;
+  outline-color: var(--colors-focus-ring);
 }