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

Unify hover effects via semantic theme tokens

Browse Source 
Replace one-off hover colors with hover-neutral/hover-destructive tokens
so all interactive elements respond consistently to theme changes. Fix
hover-neutral-bg token value (was identical to card surface, making hover
invisible on card backgrounds) to a semi-transparent primary tint. Switch
turn nav buttons to outline variant for visible hover feedback. Convert HP
popover damage/heal to plain buttons to avoid ghost variant hover conflict
with tailwind-merge.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-13 16:58:01 +01:00
parent bd39808000
commit f9ef64bb00
7 changed files with 202 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/create-player-modal.tsx
View File

@@ -103,7 +103,7 @@ export function CreatePlayerModal({
<button
type="button"
onClick={onClose}
className="text-muted-foreground hover:text-foreground transition-colors"
className="text-muted-foreground hover:text-hover-neutral transition-colors"
>
<X size={20} />
</button>

17
apps/web/src/components/hp-adjust-popover.tsx
View File

@@ -6,7 +6,6 @@ import {
useRef,
useState,
} from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
interface HpAdjustPopoverProps {
@@ -109,30 +108,26 @@ export function HpAdjustPopover({ onAdjust, onClose }: HpAdjustPopoverProps) {
}}
onKeyDown={handleKeyDown}
/>
<Button
<button
type="button"
variant="ghost"
size="icon"
disabled={!isValid}
className="h-7 w-7 shrink-0 text-red-400 hover:bg-red-950 hover:text-red-300"
className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-red-400 transition-colors hover:bg-red-950 hover:text-red-300 disabled:pointer-events-none disabled:opacity-50"
onClick={() => applyDelta(-1)}
title="Apply damage"
aria-label="Apply damage"
>
<Sword size={14} />
</Button>
<Button
</button>
<button
type="button"
variant="ghost"
size="icon"
disabled={!isValid}
className="h-7 w-7 shrink-0 text-emerald-400 hover:bg-emerald-950 hover:text-emerald-300"
className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-emerald-400 transition-colors hover:bg-emerald-950 hover:text-emerald-300 disabled:pointer-events-none disabled:opacity-50"
onClick={() => applyDelta(1)}
title="Apply healing"
aria-label="Apply healing"
>
<Heart size={14} />
</Button>
</button>
</div>
</div>
);

6
apps/web/src/components/player-management.tsx
View File

@@ -55,7 +55,7 @@ export function PlayerManagement({
<button
type="button"
onClick={onClose}
className="text-muted-foreground hover:text-foreground transition-colors"
className="text-muted-foreground hover:text-hover-neutral transition-colors"
>
<X size={20} />
</button>
@@ -78,7 +78,7 @@ export function PlayerManagement({
return (
<div
key={pc.id}
className="group flex items-center gap-3 rounded-md px-3 py-2 hover:bg-background/50"
className="group flex items-center gap-3 rounded-md px-3 py-2 hover:bg-hover-neutral-bg"
>
{Icon && (
<Icon size={18} style={{ color }} className="shrink-0" />
@@ -95,7 +95,7 @@ export function PlayerManagement({
<button
type="button"
onClick={() => onEdit(pc)}
className="text-muted-foreground hover:text-foreground transition-colors"
className="text-muted-foreground hover:text-hover-neutral transition-colors"
title="Edit"
>
<Pencil size={14} />

2
apps/web/src/components/turn-navigation.tsx
View File

@@ -23,6 +23,7 @@ export function TurnNavigation({
return (
<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
<Button
variant="outline"
size="icon"
onClick={onRetreatTurn}
disabled={!hasCombatants || isAtStart}
@@ -52,6 +53,7 @@ export function TurnNavigation({
className="text-muted-foreground"
/>
<Button
variant="outline"
size="icon"
onClick={onAdvanceTurn}
disabled={!hasCombatants}

2
apps/web/src/components/ui/overflow-menu.tsx
View File

@@ -54,7 +54,7 @@ export function OverflowMenu({ items }: OverflowMenuProps) {
<button
key={item.label}
type="button"
className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-foreground hover:bg-muted/20 disabled:pointer-events-none disabled:opacity-50"
className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-foreground hover:bg-hover-neutral-bg disabled:pointer-events-none disabled:opacity-50"
disabled={item.disabled}
onClick={() => {
item.onClick();