From 760e5c67529e7de16224d8218bfe48d327faaa6f Mon Sep 17 00:00:00 2001 From: Amirhossein Khalili Date: Thu, 20 Aug 2026 23:07:31 +0330 Subject: [PATCH] fix: simplify form focus treatment --- DESIGN.md | 3 ++- src/app.css | 12 ++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index de8f099..a8f190f 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -132,6 +132,7 @@ The approved Persian-first baseline remains authoritative where the shipped arti | Version | Date | Decision | | ------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 0.9.3 | 2026-08-20 | Replaced stacked field focus outlines with one narrow semantic-blue border across text fields, textareas, native selects, and custom select triggers; other keyboard targets retain a subtle 1px outline. | | 0.9.2 | 2026-08-20 | Pinned the initialization skeleton sidebar to the physical right and reserved matching right-side content space so loading and loaded shells share the same geometry. | | 0.9.1 | 2026-08-20 | Distributed the desktop period-type group and exact-period control across the available filter-bar width while preserving the compact mobile sheet layout. | | 0.9.0 | 2026-08-20 | Added labeled X/Y axes and Persian ticks to the payment-history chart, and made the fee-share donut fluidly fill its dedicated visual column on larger viewports. | @@ -269,7 +270,7 @@ The form language is low-radius and precise. Data cards, filter bars, inputs, se ### Inputs / Fields - **Style:** Transparent or workspace-toned field, 1px input border, 6–8px radius, 32–36px desktop height, 44px touch height, and compact 12–14px text. Terminal and status selects use the same RTL popover primitive rather than the browser-native menu. -- **Focus:** Border shifts to the ring color and gains a restrained 1px low-opacity blue ring. +- **Focus:** Text fields, textareas, native selects, and custom select triggers use one narrow semantic-blue border without a second outer ring. Other keyboard-focusable controls use a restrained 1px outline. - **Error / Disabled:** Error uses danger border plus ring; disabled fields reduce opacity and preserve legible text. ### Navigation diff --git a/src/app.css b/src/app.css index d6e45fd..7bdaa85 100644 --- a/src/app.css +++ b/src/app.css @@ -132,8 +132,16 @@ select { -webkit-tap-highlight-color: transparent; } :focus-visible { - outline: 3px solid var(--focus); - outline-offset: 3px; + outline: 1px solid var(--focus); + outline-offset: 2px; +} +input:focus-visible, +textarea:focus-visible, +select:focus-visible, +[data-slot='select-trigger']:focus-visible { + border-color: var(--ring); + outline: none; + box-shadow: none; } ::selection { background: #ffd400;