initiative/specs/028-semantic-hover-tokens/quickstart.md

Quickstart: Semantic Hover Tokens

What This Feature Does

Replaces hardcoded hover colors across UI components with three semantic CSS custom properties (tokens), so all hover colors can be changed from one place in the theme.

Key Files

• Theme: apps/web/src/index.css — define the six new --color-hover-* tokens in the @theme block
• Components to update:
  • apps/web/src/components/combatant-row.tsx — 6× neutral, 1× destructive
  • apps/web/src/components/condition-tags.tsx — neutral text + bg
  • apps/web/src/components/condition-picker.tsx — neutral bg
  • apps/web/src/components/turn-navigation.tsx — 2× action, 1× destructive
  • apps/web/src/components/action-bar.tsx — neutral bg
  • apps/web/src/components/stat-block-panel.tsx — neutral text (close button)
  • apps/web/src/components/bestiary-search.tsx — neutral text + bg
  • apps/web/src/components/ui/button.tsx — outline + ghost variant hovers

Token → Tailwind Class Mapping

Token	Tailwind Text Class	Tailwind BG Class
--color-hover-neutral	hover:text-hover-neutral	—
--color-hover-action	hover:text-hover-action	—
--color-hover-destructive	hover:text-hover-destructive	—
--color-hover-neutral-bg	—	hover:bg-hover-neutral-bg
--color-hover-action-bg	—	hover:bg-hover-action-bg
--color-hover-destructive-bg	—	hover:bg-hover-destructive-bg

How to Verify

1. pnpm --filter web dev — start dev server
2. Hover over editable fields (name, HP, AC, initiative) → should turn blue (primary)
3. Hover over navigation buttons (prev/next, Roll All) → should be blue
4. Hover over remove/clear buttons → should be red
5. Change --color-hover-neutral to a bright color in DevTools → all editable fields should update