fix(web): add focus ring to form inputs #72

New Issue

forbes · 2026-02-13T19:01:11Z

forbes commented

2026-02-13 19:01:11 +00:00

Ref: docs/STYLE.md § Components / Form Inputs

Form inputs should show a mauve focus ring on focus:

border-color: var(--ctp-mauve);
box-shadow: 0 0 0 0.2rem rgba(203, 166, 247, 0.25);

Several form components define inputStyle but have no focus state handling:

web/src/components/items/CreateItemPane.tsx (inputStyle, line ~526)
web/src/components/items/EditItemPane.tsx (inputStyle, line ~126)
web/src/pages/ProjectsPage.tsx (inputStyle, line ~377)
web/src/pages/SettingsPage.tsx (inputStyle, line ~282)

Options:

Add onFocus/onBlur handlers with state-driven inline styles, or
Apply the .silo-input class and add focus rules to silo-base.css (the style guide's recommended approach for pseudo-class styling)

**Ref:** `docs/STYLE.md` § Components / Form Inputs Form inputs should show a mauve focus ring on focus: ```css border-color: var(--ctp-mauve); box-shadow: 0 0 0 0.2rem rgba(203, 166, 247, 0.25); ``` Several form components define `inputStyle` but have no focus state handling: - `web/src/components/items/CreateItemPane.tsx` (inputStyle, line ~526) - `web/src/components/items/EditItemPane.tsx` (inputStyle, line ~126) - `web/src/pages/ProjectsPage.tsx` (inputStyle, line ~377) - `web/src/pages/SettingsPage.tsx` (inputStyle, line ~282) **Options:** 1. Add `onFocus`/`onBlur` handlers with state-driven inline styles, or 2. Apply the `.silo-input` class and add focus rules to `silo-base.css` (the style guide's recommended approach for pseudo-class styling)

forbes referenced this issue from a commit

2026-02-13 19:26:29 +00:00

feat(web): add input focus states via silo-base.css (#72)

forbes referenced this issue

2026-02-13 19:26:43 +00:00

fix: style guide batch 2 — buttons, tables, transitions, inputs, validation #84

forbes closed this issue

2026-02-13 19:28:00 +00:00

Sign in to join this conversation.