38 lines
1.9 KiB
Markdown
38 lines
1.9 KiB
Markdown
# 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
|