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

Add explicit text-foreground to ghost and outline button variants

Browse Source 
Buttons should declare their own text color rather than relying on
inheritance, which breaks in contexts like native <dialog>. Remove
the text-foreground workaround from the dialog elements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-16 11:57:27 +01:00
parent 7a87d979bf
commit b6e882add2
3 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -106,7 +106,7 @@ export function CreatePlayerModal({
return ( return (
<dialog <dialog
ref={dialogRef} ref={dialogRef}
className="m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 text-foreground shadow-xl backdrop:bg-black/50" className="m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl backdrop:bg-black/50"
> >
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<h2 className="font-semibold text-foreground text-lg"> <h2 className="font-semibold text-foreground text-lg">

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

@@ -55,7 +55,7 @@ export function PlayerManagement({
return ( return (
<dialog <dialog
ref={dialogRef} ref={dialogRef}
className="m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 text-foreground shadow-xl backdrop:bg-black/50" className="m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl backdrop:bg-black/50"
> >
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<h2 className="font-semibold text-foreground text-lg"> <h2 className="font-semibold text-foreground text-lg">

5
apps/web/src/components/ui/button.tsx
View File

@@ -9,8 +9,9 @@ const buttonVariants = cva(
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90", default: "bg-primary text-primary-foreground hover:bg-primary/90",
outline: outline:
"border border-border bg-transparent hover:bg-hover-neutral-bg hover:text-hover-neutral", "border border-border bg-transparent text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
ghost: "hover:bg-hover-neutral-bg hover:text-hover-neutral", ghost:
"text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
}, },
size: { size: {
default: "h-8 px-3 text-xs", default: "h-8 px-3 text-xs",