Implement the 028-semantic-hover-tokens feature that unifies hover colors across all interactive UI components via six CSS custom property tokens (three text, three background) defined in the Tailwind v4 theme, replacing hardcoded hover classes in 9 component files plus the shared Button primitive with semantic token references so all hover colors can be globally reconfigured from one place

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-10 19:50:22 +01:00
parent f029c1a85b
commit 99d1ba1bcd
18 changed files with 542 additions and 23 deletions

View File

@@ -0,0 +1,37 @@
# 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