refactor(ui): address /code-review on .btn-primary — tone family + doc fixes
- Generalize the recipe into a .btn-{tone} family: add .btn-danger / .btn-warn
siblings sharing one hover-dim, and migrate the two hand-rolled tone-action
buttons (ConfirmProvider danger confirm, Banner warning action) onto them, so
primary/danger/warn action paints can't drift.
- Reword the recipe comment: it owns paint + one standard hover-dim (not
'PAINT-ONLY' — that mislabel obscured the hover behaviour).
- Drop the now-redundant hover:opacity-90 from Banner's action-button base (each
tone's recipe supplies the hover).
The 3 previously hover-less primary buttons keep the standard hover-dim gained in
the prior commit (intentional consistency; now accurately documented). Gate green
(tsc/eslint-0/prettier/knip/vitest 79); self-E2E confirmed btn-danger/btn-warn
compute to their tone/tone-fg tokens.
This commit is contained in:
@@ -13,7 +13,7 @@ const TONES: Record<BannerTone, { bar: string; icon: string; action: string }> =
|
||||
warning: {
|
||||
bar: "bg-warn/15 border-warn/30",
|
||||
icon: "text-warn",
|
||||
action: "bg-warn text-warn-fg hover:opacity-90",
|
||||
action: "btn-warn",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -42,7 +42,7 @@ export default function Banner({
|
||||
{action && (
|
||||
<button
|
||||
onClick={action.onClick}
|
||||
className={`ml-1 px-2.5 py-1 rounded-lg font-semibold hover:opacity-90 transition ${c.action}`}
|
||||
className={`ml-1 px-2.5 py-1 rounded-lg font-semibold transition ${c.action}`}
|
||||
>
|
||||
{action.label}
|
||||
</button>
|
||||
|
||||
@@ -116,7 +116,7 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
|
||||
onClick={() => close(c.id)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-semibold transition ${
|
||||
multi ? "w-full" : ""
|
||||
} ${c.danger ? "bg-danger text-danger-fg hover:opacity-90" : "btn-primary"}`}
|
||||
} ${c.danger ? "btn-danger" : "btn-primary"}`}
|
||||
>
|
||||
{c.label || t("common.confirm")}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user