# OpenSpec Tasks: Web UI Foundations — Spacing, Typography & Visual Rhythm

## Change
`web-ui-spacing-typography-rework` — Pass 1: Foundations

## Parent Spec
`openspec/specs/web-ui-spacing-typography-rework.md`

## Status
tasks

---

## Implementation Tasks

- [x] 1. Expand token scale in `apps/web/src/styles/tokens.css`
  - Add `--space-7`, `--space-9`, `--space-12`
  - Add `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, `--radius-full`
  - Add `--line-height-tight`, `--line-height-normal`, `--line-height-relaxed`
  - Add `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-xl`
  - Add `--touch-target`, `--sidebar-width`, `--mobile-nav-height`
  - Add a documentation header comment explaining the token naming convention

- [x] 2. Add button primitives to `apps/web/src/styles/global.css`
  - `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-sm`
  - Include `:focus-visible`, `:hover`, and `:disabled` states

- [x] 3. Add link-button primitive to `apps/web/src/styles/global.css`

- [x] 4. Add form primitives to `apps/web/src/styles/global.css`
  - `.form-input`, `.form-textarea`
  - `.checkbox-label`
  - `.hint`
  - `.form-error`, `.error-message`

- [x] 5. Add alert primitives to `apps/web/src/styles/global.css`
  - `.alert`, `.alert-error`, `.alert-warning`, `.alert-info`

- [x] 6. Add loading-state primitive to `apps/web/src/styles/global.css`

- [x] 7. Add badge primitives to `apps/web/src/styles/global.css`
  - `.badge`, `.badge-success`, `.badge-secondary`

- [x] 8. Add text utility primitives
  - `.text-muted` in `global.css`

- [x] 9. Add mobile detail view styles to `apps/web/src/styles/utilities.css`
  - `.mobile-detail-view`
  - `.mobile-detail-header`
  - `.mobile-detail-header-content`
  - `.mobile-detail-title`
  - `.mobile-detail-subtitle`
  - `.mobile-detail-actions`
  - `.mobile-detail-fields`
  - `.mobile-detail-field`
  - `.mobile-detail-field-label`
  - `.mobile-detail-field-value`
  - `.mobile-detail-code`

- [x] 10. Add mobile list search styles to `apps/web/src/styles/utilities.css`
  - `.mobile-list-search`
  - `.mobile-list-search-input`

- [x] 11. Fix mobile nav / FAB / bottom-sheet collisions
  - Update `--mobile-nav-height` usage in `utilities.css` and `global.css`
  - `.start-tool-fab` uses `calc(var(--mobile-nav-height) + var(--space-3))`
  - `.shell-content.mobile` uses `calc(var(--mobile-nav-height) + var(--space-3))`
  - `.mobile-edit-actions` uses `var(--mobile-nav-height)`

- [x] 12. Add visible focus states
  - Add `:focus-visible` rings for `.nav-item`, `.mobile-nav-item`, `.tab`, `.tree-entry`, `.btn`, `.form-input`, `.form-textarea`, `.link-button`

- [x] 13. Replace critical inline font-size violations
  - Replace `fontSize: "0.7rem"` in `ConfigProfileListSidebar.tsx` with token-based class
  - Audit for other `0.7rem` / `10px` / `11px` inline styles and fix

- [x] 14. Add SSH key page signing/verification styles
  - `.key-signing`, `.key-verification`, `.signature-result`, `.verify-result` in `utilities.css`

- [x] 15. Add profile page avatar styles
  - `.profile-avatar-section`, `.avatar-preview`, `.avatar-image`, `.avatar-placeholder` in `utilities.css`

- [x] 16. Verification
  - Run `cd apps/web && npm run typecheck`
  - Run `cd apps/web && npm run lint`
  - Search for each previously undefined class and confirm it now has a rule
  - Spot-check mobile detail view, SSH keys page, and profile page

---

## Acceptance Criteria

- All tasks above are completed.
- `npm run typecheck` passes.
- `npm run lint` passes.
- No referenced class from the audit remains undefined.
- Mobile nav/FAB/edit-actions no longer collide on devices with safe-area insets.
- All interactive controls have visible `:focus-visible` states.
- Inline `0.7rem` font sizes are replaced with token-based classes.

---

## Notes

- Do not rename or remove existing tokens; only add new ones.
- Do not refactor inline styles in editor components in this pass (Pass 2).
- Do not unify modals/dialogs in this pass (Pass 3).
- Keep each commit focused; prefer one commit per task group.