60 lines
3.9 KiB
Markdown
60 lines
3.9 KiB
Markdown
# 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.
|