feat(11-02): replace 1113 old CSS variable references with Paperclip design tokens
- Replace all bg-[color:var(--old)] with bg-background/bg-card/bg-muted/bg-primary etc. - Replace all text-[color:var(--old)] with text-foreground/text-muted-foreground/text-primary etc. - Replace all border-[color:var(--line)] with border-border - Replace all inline var(--old) with var(--new) equivalents - Replace all rounded-[6px]/rounded-[8px] with rounded-lg - Replace .surface class with bg-card border border-border shadow-sm - Replace .focus-ring class with focus-visible Tailwind utilities - Replace .mono class with font-mono - Replace data-theme attribute with class-based dark mode - 99 files updated, ~1265 lines changed, zero old references remaining
This commit is contained in:
ZacharyZhang-NY committed
1 parent
2ed5dd3388
commit
06ea4c6aec
99 files changed
+1265
-1265
No files matched your search
@@ -29,8 +29,8 @@ interface RunDetailProps {
|
||||
function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<span className="text-[12px] text-[color:var(--muted)]">{label}</span>
|
||||
<span className="text-[13px] text-[color:var(--text)]">{children}</span>
|
||||
<span className="text-[12px] text-muted-foreground">{label}</span>
|
||||
<span className="text-[13px] text-foreground">{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -72,7 +72,7 @@ export function RunDetail({
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<div className="divide-y divide-[color:var(--line)]">
|
||||
<div className="divide-y divide-[color:var(--border)]">
|
||||
<DetailRow label="Status"><StatusPill status={selectedRun.status} /></DetailRow>
|
||||
<DetailRow label="Agent">{agent?.name ?? selectedRun.agentId}</DetailRow>
|
||||
<DetailRow label="Connector">{selectedRun.connectorId}</DetailRow>
|
||||
@@ -82,7 +82,7 @@ export function RunDetail({
|
||||
<DetailRow label="Cost">{formatMoney(selectedRun.costUsd)}</DetailRow>
|
||||
</div>
|
||||
{selectedRun.errorMessage ? (
|
||||
<div className="mt-4 rounded-[8px] border border-[color:var(--danger)] bg-[color:var(--danger-soft)] px-4 py-3 text-[13px] text-[color:var(--danger)]">
|
||||
<div className="mt-4 rounded-lg border border-[color:var(--destructive)] bg-red-100 dark:bg-red-900/50 px-4 py-3 text-[13px] text-destructive">
|
||||
{selectedRun.errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
@@ -118,15 +118,15 @@ export function RunDetail({
|
||||
)}
|
||||
>
|
||||
{logState.error ? (
|
||||
<div className="rounded-[8px] border border-[color:var(--danger)] bg-[color:var(--danger-soft)] px-4 py-3 text-[13px] text-[color:var(--danger)]">
|
||||
<div className="rounded-lg border border-[color:var(--destructive)] bg-red-100 dark:bg-red-900/50 px-4 py-3 text-[13px] text-destructive">
|
||||
{logState.error}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="mb-3 flex items-center justify-between text-[11px] text-[color:var(--muted)]">
|
||||
<div className="mb-3 flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
<span>{logState.loading ? "Refreshing\u2026" : logState.eof ? "At latest tail" : "Tail window loaded"}</span>
|
||||
</div>
|
||||
<div className="max-h-[420px] overflow-auto rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-4 py-3">
|
||||
<pre className="mono whitespace-pre-wrap text-[12px] leading-relaxed text-[color:var(--muted-strong)]">
|
||||
<div className="max-h-[420px] overflow-auto rounded-lg border border-border bg-card px-4 py-3">
|
||||
<pre className="font-mono whitespace-pre-wrap text-[12px] leading-relaxed text-muted-foreground">
|
||||
{logState.content || "No log output captured yet."}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
@@ -71,19 +71,19 @@ export function RunQueue({
|
||||
<ListRow
|
||||
key={run.id}
|
||||
onClick={() => onSelectRun(run.id)}
|
||||
className={selectedRun?.id === run.id ? "bg-[color:var(--accent-soft)]" : "hover:bg-[color:var(--panel-soft)]"}
|
||||
className={selectedRun?.id === run.id ? "bg-accent" : "hover:bg-muted"}
|
||||
>
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-[13px] font-semibold text-[color:var(--text)]">{title}</div>
|
||||
<div className="mt-0.5 truncate text-[11px] text-[color:var(--muted)]">
|
||||
<div className="truncate text-[13px] font-semibold text-foreground">{title}</div>
|
||||
<div className="mt-0.5 truncate text-[11px] text-muted-foreground">
|
||||
{agent?.name ?? "Unknown agent"} via {run.connectorId} {workspace ? `\u00B7 ${workspace.name}` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<StatusPill status={run.status} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3 text-[11px] text-[color:var(--muted)]">
|
||||
<div className="flex items-center justify-between gap-3 text-[11px] text-muted-foreground">
|
||||
<span className="truncate">{supportingText}</span>
|
||||
<span className="shrink-0">{timeAgo(run.updatedAt)}</span>
|
||||
</div>
|
||||
|
||||
@@ -45,16 +45,16 @@ export function RunSummaryCard({
|
||||
tone?: "default" | "danger";
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] px-4 py-4">
|
||||
<div className="rounded-lg border border-border bg-card px-4 py-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.06em] text-[color:var(--muted)]">{label}</div>
|
||||
<div className={`mt-1 text-[28px] font-semibold tracking-[-0.03em] ${tone === "danger" ? "text-[color:var(--danger)]" : "text-[color:var(--text)]"}`}>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.06em] text-muted-foreground">{label}</div>
|
||||
<div className={`mt-1 text-[28px] font-semibold tracking-[-0.03em] ${tone === "danger" ? "text-destructive" : "text-foreground"}`}>
|
||||
{value}
|
||||
</div>
|
||||
<div className="mt-1 text-[12px] text-[color:var(--muted)]">{detail}</div>
|
||||
<div className="mt-1 text-[12px] text-muted-foreground">{detail}</div>
|
||||
</div>
|
||||
<div className={`flex h-10 w-10 items-center justify-center rounded-[8px] ${tone === "danger" ? "bg-[color:var(--danger-soft)] text-[color:var(--danger)]" : "bg-[color:var(--panel-soft)] text-[color:var(--muted-strong)]"}`}>
|
||||
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${tone === "danger" ? "bg-red-100 dark:bg-red-900/50 text-destructive" : "bg-muted text-muted-foreground"}`}>
|
||||
<Icon size={18} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,9 +64,9 @@ export function RunSummaryCard({
|
||||
|
||||
export function RunMeta({ label, value }: { label: string; value: ReactNode }) {
|
||||
return (
|
||||
<div className="rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel-soft)] px-3.5 py-3">
|
||||
<div className="text-[10px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">{label}</div>
|
||||
<div className="mt-1 text-[13px] text-[color:var(--text)]">{value}</div>
|
||||
<div className="rounded-lg border border-border bg-muted px-3.5 py-3">
|
||||
<div className="text-[10px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">{label}</div>
|
||||
<div className="mt-1 text-[13px] text-foreground">{value}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user