fix: focus ring invisible on hosts using pre-0.13 theme tokens (Issue epam/ai-dial-admin-frontend#4138)

[dearsimanovich-epam]

Description and UI changes:

Follow-up to #806/#807, same failure mode one layer up — in the token map rather than a component's theme constants.

The focus → focus-black rename in #801 moved the token from --stroke-focus to --stroke-focus-black. The DIAL themes service (epam/ai-dial-chat-themes, static/config.json) still ships only stroke-focus, so on every host themed by it the utility drops straight to the built-in light default:

--stroke-focus         dark #EEF1F7   light #161B2D    <- what the theme actually defines
--stroke-focus-black   (undefined)    -> #161B2D       <- what renders
--bg-layer-2           dark #161B2D   light #EEF1F7    <- the surface behind it

On the dark theme the focus border is painted in exactly the background colour. .dial-input also sets outline-width: 0, so there is no outline to fall back to and the field simply looks inactive when clicked.

This is the failure mode the migration guide itself calls out:

An override left on --stroke-focus is silently ignored — the utility falls back to the built-in #161B2D with no error. This is the one failure mode that neither typecheck nor the compiler will catch.

One line, same legacy-token middle fallback as #806:

-  'focus-black': 'var(--stroke-focus-black, #161B2D)', // grey-1000
+  'focus-black': 'var(--stroke-focus-black, var(--stroke-focus, #161B2D))', // grey-1000

borderColors is spread into borderColor, stroke, divideColor, and extend.outlineColor, so all 24 occurrences in dist/index.css move together — the focus ring on Input, Button, IconButton, FabButton, DropdownIcon, Accordion, Calendar, InlineSelect, Slider, and the markdown-editor toolbar.

--stroke-focus is the contrast focus colour in the legacy palette (near-black on light, near-white on dark), which is exactly what focus-black wants, so the chain is semantically right and restores the pre-0.13 rendering. Light themes and hosts with no theme at all are byte-identical to today (#161B2D either way). focus-blue is left alone — the themes config has no legacy equivalent and #6785FB reads fine on both palettes.

Verification

npm run build:css
grep -o 'var(--stroke-focus-black[^)]*)[^)]*)' dist/index.css | sort -u
# var(--stroke-focus-black,var(--stroke-focus,#161b2d))   (24 occurrences)

npx vitest run — 1935 passed, 2 skipped, 151 files. Button.spec asserts the class name rather than the resolved value, so it is unaffected. npm run typecheck reports 56 pre-existing errors in FileManager specs on development, unchanged by this PR (verified by stashing).

Wider context, not addressed here: ~15 other Colors 2.0 tokens are in the same position — --bg-layer-raised, --bg-layer-sunken, the --bg-control-* family, --text-control-*, --text-accent — each with a clean legacy counterpart in the themes config, each still resolving to a light default on dark-themed hosts. The durable fix is for the themes service to ship the 2.0 token set; happy to open an issue to track the rest rather than let them surface one bug report at a time.

Issues:

• Issue [All Sections] Input field does not display cursor or focus indicator when clicked ai-dial-admin-frontend#4138

Checklist:

• the pull request name complies with Conventional Commits
• the pull request name ends with (Issue #<TICKET_ID>) — the issue lives in epam/ai-dial-admin-frontend, so it is fully qualified

New Component Checklist:

n/a — no new component; one token value changed, no API or behaviour change.

🤖 Generated with Claude Code