fix(words): normalise inspector inputs — one focus frame, framed textarea

Two inspector-input issues:
- The image alt field (eidos <TextArea>) used the GLOBAL neutral skin
  (transparent fill, lighter border) while the URL/caption inputs use the
  words palette — so the textarea looked unframed and out of place.
  Retokenise [data-textarea] in the inspector to --words-border / --words-bg
  / radius-2 / words font-size; now it reads identically to the text inputs
  (verified both render border rgb(232,232,232) + fill rgb(249,249,249)).
- Every field drew an accent border AND a box-shadow ring on focus — two
  stacked frames. Drop the border-accent change; the single accent ring is
  the focus signal, the border stays structural. Applied to text inputs,
  NumberField and TextArea so all inspector fields focus identically.

Scoped to the words inspector (not the global eidos input recipe).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 905ecfdad2
commit b943fa7386

@ -612,8 +612,25 @@ button[data-words-breadcrumb-crumb]:focus-visible {
border-color: var(--words-border-hover); border-color: var(--words-border-hover);
} }
[data-words-inspector] [data-number-field][data-size][data-focused] { [data-words-inspector] [data-number-field][data-size][data-focused] {
border-color: var(--_words-accent); /* Single focus frame — one accent ring; the border stays structural so a
box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 25%, transparent); 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] { [data-words-inspector] [data-number-field-input] {
inline-size: 100%; inline-size: 100%;
@ -720,15 +737,14 @@ button[data-words-breadcrumb-crumb]:focus-visible {
[data-words-inspector-code-language]:hover:not(:focus) { [data-words-inspector-code-language]:hover:not(:focus) {
border-color: var(--words-border-hover); border-color: var(--words-border-hover);
} }
/* Outer ring (box-shadow), NOT an inset `outline` — the old /* Single focus frame — ONE accent ring (box-shadow), NOT an inset `outline`
`outline-offset: -1px` drew the ring on top of the text and made the and NOT also recolouring the border to accent. A field that drew an accent
focused value unreadable. The ring + accent border reads clearly and border AND a ring read as two stacked frames; the ring alone is the focus
matches the number-field focus treatment below. */ signal, the border stays structural. Shared by every inspector field. */
[data-words-inspector-text]:focus-visible, [data-words-inspector-text]:focus-visible,
[data-words-inspector-code-language]:focus-visible { [data-words-inspector-code-language]:focus-visible {
outline: none; outline: none;
border-color: var(--_words-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 40%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--_words-accent) 25%, transparent);
} }
/* Callout intent swatch — small color dot rendered INSIDE the /* Callout intent swatch — small color dot rendered INSIDE the

Loading…
Cancel
Save

Powered by TurnKey Linux.