3.9 KiB
3.9 KiB
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.