From f5b7b9425a9ff48ed74f932d05d06a12bcfd3778 Mon Sep 17 00:00:00 2001 From: Richardson Douglas Date: Fri, 30 Oct 2026 11:26:37 -0300 Subject: [PATCH] UI: no second focus ring inside text fields The app's global :focus-visible rule was unlayered, so it beat the kit's `outline: none` on the inner of TextField (and the other framed controls: TextArea, Select, Combobox, NumberField). A focused field drew its own frame plus a small ring around the bare input inside it. The rule now lives in @layer ca.base, after the kit's base focus rule: plain elements keep LowMail's ring, kit components keep their own focus styling. --- src/app.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/app.css b/src/app.css index 3801131..6e4de95 100644 --- a/src/app.css +++ b/src/app.css @@ -242,10 +242,13 @@ body { inset: calc((var(--lm-resizer) - 1px) / 2) 0; } -/* Visible keyboard focus everywhere. */ -:focus-visible { - outline: var(--lm-stroke) solid var(--lm-signal); - outline-offset: calc(-1 * var(--lm-stroke)); +/* Visible keyboard focus everywhere. Layered so kit components that draw focus on + their own frame (text fields, selects, text areas) keep the inner control clean. */ +@layer ca.base { + :focus-visible { + outline: var(--lm-stroke) solid var(--lm-signal); + outline-offset: calc(-1 * var(--lm-stroke)); + } } kbd,