dostulata/initiative
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

59
specs/028-semantic-hover-tokens/data-model.md Normal file
View File

@@ -0,0 +1,59 @@
# Data Model: Semantic Hover Tokens
This feature introduces no domain or application entities. The "data model" consists of CSS theme tokens and their mapping to interaction tiers.
## Theme Tokens
| Token | Default Value | Purpose |
|-------|--------------|---------|
| `--color-hover-neutral` | `var(--color-primary)` | Text color for neutral-interactive hover (editable fields, toggles, close buttons) |
| `--color-hover-action` | `var(--color-primary)` | Text color for primary-action hover (navigation, add, roll) |
| `--color-hover-destructive` | `var(--color-destructive)` | Text color for destructive-action hover (remove, clear) |
| `--color-hover-neutral-bg` | `var(--color-card)` | Background color for neutral-interactive hover (condition items, list items) |
| `--color-hover-action-bg` | `var(--color-muted)` | Background color for primary-action hover (navigation buttons) |
| `--color-hover-destructive-bg` | `transparent` | Background color for destructive-action hover (reserved) |
## Interaction Tier Assignments
### Neutral-Interactive (editable fields, data display)
| Component | Element | Current Hover | New Hover (text) | New Hover (bg) |
|-----------|---------|---------------|-------------------|----------------|
| combatant-row | Combatant name | `hover:text-primary` | `hover:text-hover-neutral` | — |
| combatant-row | MaxHpDisplay | `hover:text-primary` | `hover:text-hover-neutral` | — |
| combatant-row | ClickableHp | `hover:text-primary` | `hover:text-hover-neutral` | — |
| combatant-row | Initiative d20 (roll) | `hover:text-primary` | `hover:text-hover-neutral` | — |
| combatant-row | Initiative value | `hover:text-primary` | `hover:text-hover-neutral` | — |
| combatant-row | AC shield | `hover:text-primary` | `hover:text-hover-neutral` | — |
| condition-tags | Condition icon button | `hover:bg-card` | — | `hover:bg-hover-neutral-bg` |
| condition-tags | Add condition (+) | `hover:text-foreground hover:bg-card` | `hover:text-hover-neutral` | `hover:bg-hover-neutral-bg` |
| condition-picker | Condition row | `hover:bg-card` | — | `hover:bg-hover-neutral-bg` |
| action-bar | Bestiary search item | `hover:bg-accent/10` | — | `hover:bg-hover-neutral-bg` |
| stat-block-panel | Close button | `hover:text-foreground` | `hover:text-hover-neutral` | — |
| bestiary-search | Close button | `hover:text-foreground` | `hover:text-hover-neutral` | — |
| bestiary-search | Search result item | `hover:bg-accent/10` | — | `hover:bg-hover-neutral-bg` |
### Primary-Action (navigation, additive actions)
| Component | Element | Current Hover | New Hover (text) | New Hover (bg) |
|-----------|---------|---------------|-------------------|----------------|
| turn-navigation | Previous/Next buttons | `hover:text-primary hover:border-primary hover:bg-muted` | `hover:text-hover-action hover:border-hover-action` | `hover:bg-transparent` |
| turn-navigation | Roll All button | `hover:text-primary` | `hover:text-hover-action` | — |
### Destructive-Action (removal, clearing)
| Component | Element | Current Hover | New Hover (text) | New Hover (bg) |
|-----------|---------|---------------|-------------------|----------------|
| combatant-row | Remove button (X) | `hover:text-destructive` | `hover:text-hover-destructive` | — |
| turn-navigation | Clear button | `hover:text-destructive` | `hover:text-hover-destructive` | — |
### UI Primitives (shared Button component)
| Component | Variant | Current Hover | New Hover (text) | New Hover (bg) |
|-----------|---------|---------------|-------------------|----------------|
| ui/button | outline | `hover:bg-card hover:text-foreground` | `hover:text-hover-neutral` | `hover:bg-hover-neutral-bg` |
| ui/button | ghost | `hover:bg-card hover:text-foreground` | `hover:text-hover-neutral` | `hover:bg-hover-neutral-bg` |
## Out of Scope
- **hp-adjust-popover.tsx**: Damage/healing buttons use domain-semantic colors (red/emerald), not interaction-tier colors.