diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 1fc29adbc..eb6103bf0 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -612,8 +612,25 @@ button[data-words-breadcrumb-crumb]:focus-visible { border-color: var(--words-border-hover); } [data-words-inspector] [data-number-field][data-size][data-focused] { - border-color: var(--_words-accent); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 25%, transparent); + /* Single focus frame — one accent ring; the border stays structural so a + focused field shows ONE highlight, not an accent border AND a ring. */ + box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 40%, transparent); +} +/* Eidos TextArea (image alt) shares the inspector input chrome. Retokenise it + to the WORDS palette so it reads identically to the plain text inputs — + same fill + border + radius + size — instead of the global neutral skin + (transparent fill, lighter border) that made it look unframed and odd. */ +[data-words-inspector] [data-textarea] { + --_textarea-border: var(--words-border); + --_textarea-border-hover: var(--words-border-hover); + --_textarea-bg: var(--words-bg); + --_textarea-radius: var(--radius-2, 4px); + --_textarea-font-size: var(--words-font-size-sm); +} +[data-words-inspector] [data-textarea][data-focused] [data-textarea-input] { + /* Same single-ring focus as every other inspector field. */ + border-color: var(--words-border); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 40%, transparent); } [data-words-inspector] [data-number-field-input] { inline-size: 100%; @@ -720,15 +737,14 @@ button[data-words-breadcrumb-crumb]:focus-visible { [data-words-inspector-code-language]:hover:not(:focus) { border-color: var(--words-border-hover); } -/* Outer ring (box-shadow), NOT an inset `outline` — the old - `outline-offset: -1px` drew the ring on top of the text and made the - focused value unreadable. The ring + accent border reads clearly and - matches the number-field focus treatment below. */ +/* Single focus frame — ONE accent ring (box-shadow), NOT an inset `outline` + and NOT also recolouring the border to accent. A field that drew an accent + border AND a ring read as two stacked frames; the ring alone is the focus + signal, the border stays structural. Shared by every inspector field. */ [data-words-inspector-text]:focus-visible, [data-words-inspector-code-language]:focus-visible { outline: none; - border-color: var(--_words-accent); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 25%, transparent); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 40%, transparent); } /* Callout intent swatch — small color dot rendered INSIDE the