Skip to content

refactor(cloud-ui): design-token compliance sweep — 87 files, ~800 hardcoded values → semantic tokens #13073

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lalalune merged 1 commit into from
Jul 4, 2026
Merged

refactor(cloud-ui): design-token compliance sweep — 87 files, ~800 hardcoded values → semantic tokens #13073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/ui/src/cloud-ui/components/analytics/cost-alerts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ export function CostAlerts({ costTrending }: CostAlertsProps) {
}

const toneClasses: Record<"warning" | "error" | "info", string> = {
warning: "border-[#FF5800]/40 bg-[#FF5800]/10 text-white",
error: "border-[#FF5800] bg-[#FF5800] text-black",
info: "border-[#0B35F1]/40 bg-[#0B35F1]/10 text-white",
warning: "border-[var(--accent)]/40 bg-[var(--accent)]/10 text-white",
error: "border-[var(--accent)] bg-[var(--accent)] text-black",
info: "border-border bg-surface text-txt",
};

const iconMap: Record<"warning" | "error" | "info", ReactNode> = {
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/cloud-ui/components/analytics/cost-insights-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ export function CostInsightsCard({
: `${costTrending.daysUntilBalanceZero}d`;

return (
<BrandCard corners={false} className="border-[#FF5800]/40 bg-[#FF5800]/10">
<BrandCard corners={false} className="border-[var(--accent)]/40 bg-[var(--accent)]/10">
<div className="flex flex-col gap-2 p-6 pb-4">
<div className="flex items-center gap-3">
<h3 className="text-base font-semibold text-white">Cost outlook</h3>
<Badge
variant="outline"
className="border-[#FF5800]/30 bg-[#FF5800]/10 text-xs font-medium text-[#FF5800]"
className="border-[var(--accent)]/30 bg-[var(--accent)]/10 text-xs font-medium text-[var(--accent)]"
>
{costTrending.burnChangePercent > 0 ? "+" : ""}
{costTrending.burnChangePercent.toFixed(1)}%
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/cloud-ui/components/api-key-empty-state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface ApiKeyEmptyStateProps {
export function ApiKeyEmptyState({ onCreateKey }: ApiKeyEmptyStateProps) {
return (
<EmptyState
icon={<KeyRound className="h-7 w-7 text-[#FF5800]" />}
icon={<KeyRound className="h-7 w-7 text-[var(--accent)]" />}
title="No API keys yet"
description="Create your first API key to start authenticating requests and tracking usage across the platform."
action={
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/cloud-ui/components/auth/authorize-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ function AuthorizeFlow({
if (status === "validating" || authLoading) {
return (
<Frame>
<Loader2 className="h-12 w-12 animate-spin text-[#FF5800]" />
<Loader2 className="h-12 w-12 animate-spin text-[var(--accent)]" />
<h3 className="text-lg font-semibold text-white">
Verifying application...
</h3>
Expand All @@ -379,7 +379,7 @@ function AuthorizeFlow({
if (status === "authorizing") {
return (
<Frame>
<Loader2 className="h-12 w-12 animate-spin text-[#FF5800]" />
<Loader2 className="h-12 w-12 animate-spin text-[var(--accent)]" />
<h3 className="text-lg font-semibold text-white">Authorizing...</h3>
<p className="text-sm text-white/60">
Redirecting you back to {appInfo.name}
Expand Down Expand Up @@ -478,7 +478,7 @@ function AppHeader({ appInfo }: { appInfo: AppInfo }) {
unoptimized
/>
) : (
<div className="h-16 w-16 rounded-sm bg-gradient-to-br from-[#FF5800] to-[#FF8800] flex items-center justify-center">
<div className="h-16 w-16 rounded-sm bg-gradient-to-br from-[var(--accent)] to-[#FF8800] flex items-center justify-center">
<span className="text-2xl font-bold text-white">
{appInfo.name.charAt(0)}
</span>
Expand Down Expand Up @@ -614,7 +614,7 @@ function SignedOutActions({
</>
) : (
<div className="flex flex-col items-center gap-3 py-6">
<Loader2 className="h-6 w-6 animate-spin text-[#FF5800]" />
<Loader2 className="h-6 w-6 animate-spin text-[var(--accent)]" />
<p className="text-sm text-white/60">Loading sign-in options...</p>
</div>
)}
Expand Down
18 changes: 14 additions & 4 deletions packages/ui/src/cloud-ui/components/code/code-display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,17 @@ export interface CodeDisplayProps {
className?: string;
}

const elizaCodeTheme = {
/**
* SYNTAX_HIGHLIGHT_PALETTE — DOCUMENTED DESIGN-SYSTEM EXCEPTION.
*
* Per DESIGN-SYSTEM.md §10.5, syntax-highlight token colors are semantic
* constants and are exempt from the raw-hex ban. They intentionally use a
* fixed VS Code (Dark+) palette so highlighted code reads correctly and
* consistently regardless of the app theme. All values are consolidated in
* this single named map (not scattered inline). The CHROME around the code
* block (container border / background) is fully tokenized below.
*/
const SYNTAX_HIGHLIGHT_PALETTE = {
...vscDarkPlus,
comment: { color: "#6A9955" },
prolog: { color: "#6A9955" },
Expand Down Expand Up @@ -45,7 +55,7 @@ const elizaCodeTheme = {
keyword: { color: "#C586C0" },
regex: { color: "#D16969" },
important: { color: "#569CD6", fontWeight: "bold" },
};
} as const;

const codeCustomStyle = {
margin: 0,
Expand All @@ -63,14 +73,14 @@ export const CodeDisplay = memo(function CodeDisplay({
return (
<div
className={cn(
"overflow-hidden rounded-none border border-white/10 bg-black/60",
"overflow-hidden rounded-md border border-border bg-card",
className,
)}
>
<div className="overflow-x-auto">
<SyntaxHighlighter
language={language}
style={elizaCodeTheme}
style={SYNTAX_HIGHLIGHT_PALETTE}
customStyle={codeCustomStyle}
wrapLongLines={false}
showLineNumbers={false}
Expand Down
24 changes: 12 additions & 12 deletions packages/ui/src/cloud-ui/components/dashboard/cloud-dashboard-components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export function DashboardActionCards({
<div className={cn("grid gap-3 sm:grid-cols-2 xl:grid-cols-5", className)}>
<Link
to="/dashboard/my-agents"
className="group relative flex min-h-[148px] flex-col justify-between rounded-sm border border-white/10 bg-[#FF5800] p-5 text-black transition-colors hover:bg-black hover:text-white sm:col-span-2 xl:col-span-1"
className="group relative flex min-h-[148px] flex-col justify-between rounded-sm border border-white/10 bg-[var(--accent)] p-5 text-black transition-colors hover:bg-black hover:text-white sm:col-span-2 xl:col-span-1"
>
<div className="mb-4 flex items-center justify-between">
<Rocket className="h-5 w-5" />
Expand All @@ -102,28 +102,28 @@ export function DashboardActionCards({
<h3 className="text-base font-semibold">My Agent</h3>
</Link>

<div className="group relative flex min-h-[148px] flex-col justify-between rounded-sm border border-white/10 bg-[#0B35F1] p-5 text-white sm:col-span-2 xl:col-span-1">
<div className="group relative flex min-h-[148px] flex-col justify-between rounded-sm border border-border bg-black p-5 text-white sm:col-span-2 xl:col-span-1">
<Code className="h-5 w-5" />
<div>
<h3 className="text-base font-semibold">API Access</h3>
<div className="mt-2 flex flex-wrap items-center gap-3 text-xs font-medium">
<Link
to="/dashboard/api-keys"
className="inline-flex items-center gap-1.5 hover:text-[#FF5800]"
className="inline-flex items-center gap-1.5 hover:text-[var(--accent)]"
>
<KeyRound className="h-3 w-3" />
Keys
</Link>
<Link
to="/docs"
className="inline-flex items-center gap-1.5 hover:text-[#FF5800]"
className="inline-flex items-center gap-1.5 hover:text-[var(--accent)]"
>
<BookOpen className="h-3 w-3" />
Docs
</Link>
<Link
to="/dashboard/api-explorer"
className="inline-flex items-center gap-1.5 hover:text-[#FF5800]"
className="inline-flex items-center gap-1.5 hover:text-[var(--accent)]"
>
<Bot className="h-3 w-3" />
Explorer
Expand All @@ -138,7 +138,7 @@ export function DashboardActionCards({
>
<div className="flex items-center justify-between">
<Wallet className="h-5 w-5" />
<span className="rounded-sm bg-[#FF5800] px-2 py-0.5 text-xs font-semibold text-black">
<span className="rounded-sm bg-[var(--accent)] px-2 py-0.5 text-xs font-semibold text-black">
{formattedBalance}
</span>
</div>
Expand Down Expand Up @@ -254,7 +254,7 @@ export function ContainersEmptyState() {
};

return (
<div className="flex min-h-[400px] flex-col items-center justify-center gap-6 rounded-sm bg-neutral-900 py-12">
<div className="flex min-h-[400px] flex-col items-center justify-center gap-6 rounded-sm bg-card py-12">
<div className="space-y-2 text-center">
<h3 className="text-xl font-medium text-white">No containers yet</h3>
</div>
Expand All @@ -268,19 +268,19 @@ export function ContainersEmptyState() {
index < commands.length - 1 && "border-b border-white/5",
)}
>
<span className="select-none text-neutral-600">$</span>
<code className="flex-1 font-mono text-sm text-neutral-300">
<span className="select-none text-muted">$</span>
<code className="flex-1 font-mono text-sm text-txt">
{cmd}
</code>
<Button
variant="ghost"
type="button"
onClick={() => handleCopy(cmd, index)}
className="rounded-sm text-neutral-600 transition-colors hover:text-neutral-300"
className="rounded-sm text-muted transition-colors hover:text-txt"
aria-label={`Copy ${cmd}`}
>
{copiedIndex === index ? (
<Check className="h-4 w-4 text-green-500" />
<Check className="h-4 w-4 text-status-success" />
) : (
<Copy className="h-4 w-4" />
)}
Expand All @@ -292,7 +292,7 @@ export function ContainersEmptyState() {
<BrandButton
variant="outline"
asChild
className="h-10 border-neutral-700 text-neutral-400 hover:border-neutral-600 hover:text-white"
className="h-10 border-border text-muted hover:border-border-strong hover:text-txt"
>
<a
href="https://elizaos.github.io/eliza/docs/cli"
Expand Down
48 changes: 24 additions & 24 deletions packages/ui/src/cloud-ui/components/data-list/api-keys-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,12 +132,12 @@ export function ApiKeysTable({
{keys.map((key) => (
<div
key={key.id}
className="space-y-3 rounded-sm border border-white/10 bg-black/40 p-4"
className="space-y-3 rounded-sm border border-border bg-card p-4"
>
<div className="flex min-w-0 items-start justify-between gap-3">
<div className="min-w-0 space-y-1">
<div className="flex min-w-0 items-center gap-2">
<span className="truncate font-semibold text-white">
<span className="truncate font-semibold text-txt-strong">
{key.name}
</span>
<StatusBadge
Expand All @@ -146,45 +146,45 @@ export function ApiKeysTable({
/>
</div>
{key.description ? (
<p className="line-clamp-2 text-xs text-white/60">
<p className="line-clamp-2 text-xs text-muted">
{key.description}
</p>
) : null}
</div>
{renderActions(key, handlers)}
</div>

<div className="flex min-w-0 flex-wrap items-center gap-2 text-xs text-white/60">
<span className="rounded-sm border border-white/10 bg-black/60 px-1.5 py-0.5 font-mono text-xs text-white">
<div className="flex min-w-0 flex-wrap items-center gap-2 text-xs text-muted">
<span className="rounded-sm border border-border bg-bg-elevated px-1.5 py-0.5 font-mono text-xs text-muted-strong">
{`${key.keyPrefix}.......`}
</span>
<BrandButton
variant="ghost"
size="sm"
className="h-8 px-2"
className="min-h-touch px-2"
onClick={() => onRegenerateKey?.(key.id)}
>
<RefreshCw className="mr-1 h-3.5 w-3.5" />
Regenerate
</BrandButton>
</div>

<div className="grid grid-cols-2 gap-3 border-t border-white/10 pt-3 text-xs">
<div className="grid grid-cols-2 gap-3 border-t border-border pt-3 text-xs">
<div>
<p className="text-white/40">Usage</p>
<p className="mt-1 font-medium text-white">
<p className="text-muted">Usage</p>
<p className="mt-1 font-medium text-txt-strong tabular-nums">
{key.usageCount.toLocaleString("en-US")} requests
</p>
<p className="mt-0.5 text-white/74">
<p className="mt-0.5 text-muted tabular-nums">
{key.rateLimit.toLocaleString("en-US")} / min
</p>
</div>
<div>
<p className="text-white/40">Timeline</p>
<p className="mt-1 text-white/60">
<p className="text-muted">Timeline</p>
<p className="mt-1 text-muted">
Created {formatDate(key.createdAt)}
</p>
<p className="mt-0.5 text-white/60">
<p className="mt-0.5 text-muted">
Last used {formatDate(key.lastUsedAt)}
</p>
</div>
Expand All @@ -209,7 +209,7 @@ export function ApiKeysTable({
<TableCell>
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<span className="font-semibold text-white">
<span className="font-semibold text-txt-strong">
{key.name}
</span>
<StatusBadge
Expand All @@ -218,16 +218,16 @@ export function ApiKeysTable({
/>
</div>
{key.description ? (
<p className="text-xs text-white/60">{key.description}</p>
<p className="text-xs text-muted">{key.description}</p>
) : null}
<div className="flex items-center gap-2 text-xs text-white/60">
<span className="rounded-sm border border-white/10 bg-black/60 px-1.5 py-0.5 font-mono text-xs text-white">
<div className="flex items-center gap-2 text-xs text-muted">
<span className="rounded-sm border border-border bg-bg-elevated px-1.5 py-0.5 font-mono text-xs text-muted-strong">
{`${key.keyPrefix}.......`}
</span>
<BrandButton
variant="ghost"
size="sm"
className="h-8 px-2"
className="min-h-touch px-2"
onClick={() => onRegenerateKey?.(key.id)}
>
<RefreshCw className="mr-1 h-3.5 w-3.5" />
Expand All @@ -239,27 +239,27 @@ export function ApiKeysTable({

<TableCell>
<div className="flex flex-col gap-2">
<span className="font-medium text-white">
<span className="font-medium text-txt-strong tabular-nums">
{key.usageCount.toLocaleString("en-US")} requests
</span>
<p className="text-xs text-white/74">
<p className="text-xs text-muted tabular-nums">
Rate limit {key.rateLimit.toLocaleString("en-US")} / min
</p>
</div>
</TableCell>

<TableCell>
<div className="flex flex-col gap-2 text-xs text-white/60">
<div className="flex flex-col gap-2 text-xs text-muted">
<div className="flex items-center gap-2">
<CalendarClock className="h-3.5 w-3.5 text-[#FF5800]" />
<CalendarClock className="h-3.5 w-3.5 text-accent" />
<span>Created {formatDate(key.createdAt)}</span>
</div>
<div className="flex items-center gap-2">
<CalendarClock className="h-3.5 w-3.5 text-[#FF5800]" />
<CalendarClock className="h-3.5 w-3.5 text-accent" />
<span>Last used {formatDate(key.lastUsedAt)}</span>
</div>
<div className="flex items-center gap-2">
<CalendarClock className="h-3.5 w-3.5 text-[#FF5800]" />
<CalendarClock className="h-3.5 w-3.5 text-accent" />
<span>
{key.expiresAt
? `Expires ${formatDate(key.expiresAt)}`
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/cloud-ui/components/data-list/apps-list-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export function AppsListView({
{renderAppLink({
app,
className:
"min-w-0 truncate text-sm font-medium text-white transition-colors hover:text-[#FF5800]",
"min-w-0 truncate text-sm font-medium text-white transition-colors hover:text-[var(--accent)]",
children: app.name,
})}
<StatusBadge
Expand All @@ -98,7 +98,7 @@ export function AppsListView({
className="px-1.5 py-0 text-[10px]"
/>
{app.affiliate_code ? (
<Badge className="shrink-0 rounded-sm border-purple-500/30 bg-purple-500/20 px-1.5 py-0 text-[10px] text-purple-400">
<Badge className="shrink-0 rounded-sm border-accent/30 bg-accent-subtle px-1.5 py-0 text-2xs text-accent">
Affiliate
</Badge>
) : null}
Expand Down Expand Up @@ -167,11 +167,11 @@ export function AppsListView({
</span>
<span className="hidden text-white/20 sm:inline">-</span>
<div className="flex shrink-0 items-center gap-1 text-white/50">
<Users className="h-3 w-3 text-white/50" />
<Users className="h-3 w-3 text-muted" />
<span>{app.total_users.toLocaleString()}</span>
</div>
<div className="flex shrink-0 items-center gap-1 text-white/50">
<Activity className="h-3 w-3 text-white/50" />
<Activity className="h-3 w-3 text-muted" />
<span>{app.total_requests.toLocaleString()}</span>
</div>
<span className="text-white/20">-</span>
Expand Down
Loading
Loading