feat(portal-shell): clean widget design tokens and fix lint:tokens (P1-6)

516 mechanical replacements across 25 widget files:
- spacing xs/sm/md/lg/xl to numeric 1/2/3/4/6
- text-heading-3 to text-lg font-semibold
- bg-danger to bg-destructive
- border border dedup

Fix .eslintrc.tokens.js to use typescript-eslint parser (was importing
uninstalled @typescript-eslint/parser). lint:tokens now passes.
This commit is contained in:
SpecialX
2026-07-22 15:07:38 +08:00
parent 9358372657
commit a28a6bd6ea
27 changed files with 388 additions and 384 deletions

View File

@@ -1,4 +1,4 @@
"use client";
"use client";
/**
* notifications-widgetuniversal / main
@@ -23,20 +23,20 @@ function TypeBadge({ type }: { type: string }): React.ReactElement {
const label = TYPE_LABEL[type] ?? type;
if (type === "urgent") {
return (
<span className="rounded-md bg-danger px-sm py-xs text-xs text-primary-foreground">
<span className="rounded-md bg-destructive px-2 py-1 text-xs text-primary-foreground">
{label}
</span>
);
}
if (type === "warning") {
return (
<span className="rounded-md bg-primary px-sm py-xs text-xs text-primary-foreground">
<span className="rounded-md bg-primary px-2 py-1 text-xs text-primary-foreground">
{label}
</span>
);
}
return (
<span className="rounded-md bg-muted px-sm py-xs text-xs text-muted-foreground">
<span className="rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground">
{label}
</span>
);
@@ -58,26 +58,26 @@ export default function NotificationsWidget(
const total = data?.total ?? 0;
return (
<section className="rounded-xl border border bg-card p-4">
<section className="rounded-xl border bg-card p-4">
<div className="flex">
<h3 className="flex-1 text-heading-3 text-foreground"></h3>
<h3 className="flex-1 text-lg font-semibold text-foreground"></h3>
<span className="text-sm text-muted-foreground"> {total} </span>
</div>
{items.length === 0 ? (
<p className="mt-sm text-sm text-muted-foreground"></p>
<p className="mt-2 text-sm text-muted-foreground"></p>
) : (
<ul className="mt-sm space-y-sm">
<ul className="mt-2 space-y-2">
{items.map((item) => (
<li
key={item.id}
className="border-b border py-xs text-sm text-foreground"
className="border-b border py-1 text-sm text-foreground"
>
<div className="flex items-center gap-4">
<span className="flex-1">{item.title}</span>
<TypeBadge type={item.type} />
</div>
<p className="mt-xs text-xs text-muted-foreground">{item.body}</p>
<p className="mt-xs text-xs text-muted-foreground">
<p className="mt-1 text-xs text-muted-foreground">{item.body}</p>
<p className="mt-1 text-xs text-muted-foreground">
{item.createdAt}
</p>
</li>