Skip to content

feat: integrate design tokens system #449

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

Open
itskai-dev wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: integrate design tokens system #449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9dcc369
feat: integrate design tokens system for forAgents.dev
itskai-dev Feb 18, 2026
48ec81d
feat: A-class hex cleanup — 1521 arbitrary hex → token classes
itskai-dev Feb 18, 2026
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
26 changes: 13 additions & 13 deletions src/app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,15 @@ function StatCounter({ label, value }: { label: string; value: number }) {

return (
<div className="rounded-xl border border-white/10 bg-card/40 p-6 text-center">
<p className="text-4xl font-bold text-[#06D6A0]">{count.toLocaleString()}+</p>
<p className="text-4xl font-bold text-primary">{count.toLocaleString()}+</p>
<p className="mt-2 text-sm text-muted-foreground">{label}</p>
</div>
);
}

function LoadingState() {
return (
<div className="min-h-screen bg-[#0a0a0a] text-foreground">
<div className="min-h-screen bg-background text-foreground">
<section className="max-w-4xl mx-auto px-4 py-24">
<div className="space-y-4 animate-pulse">
<div className="h-12 rounded-lg bg-white/10" />
Expand All @@ -81,7 +81,7 @@ function LoadingState() {

function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
return (
<div className="min-h-screen bg-[#0a0a0a] text-foreground flex items-center justify-center px-4">
<div className="min-h-screen bg-background text-foreground flex items-center justify-center px-4">
<Card className="max-w-xl w-full bg-card/60 border-red-400/30">
<CardHeader>
<CardTitle className="text-red-300">Couldn't load the About page</CardTitle>
Expand All @@ -91,7 +91,7 @@ function ErrorState({ message, onRetry }: { message: string; onRetry: () => void
<button
type="button"
onClick={onRetry}
className="inline-flex rounded-lg bg-[#06D6A0] px-4 py-2 text-[#0a0a0a] font-semibold hover:brightness-110"
className="inline-flex rounded-lg bg-primary px-4 py-2 text-background font-semibold hover:brightness-110"
>
Try again
</button>
Expand Down Expand Up @@ -140,9 +140,9 @@ export default function AboutPage() {
if (error || !data) return <ErrorState message={error ?? "Unknown error"} onRetry={fetchAboutData} />;

return (
<div className="min-h-screen bg-[#0a0a0a] text-foreground">
<div className="min-h-screen bg-background text-foreground">
<section className="max-w-5xl mx-auto px-4 py-24 text-center">
<Badge variant="outline" className="mb-4 border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10">
<Badge variant="outline" className="mb-4 border-primary/30 text-primary bg-primary/10">
Live platform data
</Badge>
<h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">Built by agents, for agents</h1>
Expand Down Expand Up @@ -195,7 +195,7 @@ export default function AboutPage() {

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{data.team.map((member) => (
<Card key={member.name} className="bg-card/50 border-white/10 hover:border-[#06D6A0]/30 transition-all">
<Card key={member.name} className="bg-card/50 border-white/10 hover:border-primary/30 transition-all">
<CardHeader>
<div className="flex items-center gap-4">
<div
Expand All @@ -204,7 +204,7 @@ export default function AboutPage() {
/>
<div>
<CardTitle className="text-xl">{member.name}</CardTitle>
<p className="text-sm text-[#06D6A0]">{member.role}</p>
<p className="text-sm text-primary">{member.role}</p>
</div>
</div>
</CardHeader>
Expand All @@ -217,7 +217,7 @@ export default function AboutPage() {
href={url}
target="_blank"
rel="noreferrer"
className="text-xs rounded-md border border-white/15 px-2 py-1 text-muted-foreground hover:text-[#06D6A0] hover:border-[#06D6A0]/40"
className="text-xs rounded-md border border-white/15 px-2 py-1 text-muted-foreground hover:text-primary hover:border-primary/40"
>
{platform}
</a>
Expand All @@ -240,9 +240,9 @@ export default function AboutPage() {
<div className="relative border-l border-white/15 pl-8 space-y-8">
{data.milestones.map((milestone) => (
<div key={`${milestone.date}-${milestone.title}`} className="relative">
<span className="absolute -left-[39px] top-1 h-3 w-3 rounded-full bg-[#06D6A0]" />
<span className="absolute -left-[39px] top-1 h-3 w-3 rounded-full bg-primary" />
<div className="rounded-xl border border-white/10 bg-card/40 p-6">
<p className="text-xs text-[#06D6A0] mb-2">{new Date(milestone.date).toLocaleDateString()}</p>
<p className="text-xs text-primary mb-2">{new Date(milestone.date).toLocaleDateString()}</p>
<h3 className="text-xl font-semibold mb-2">{milestone.title}</h3>
<p className="text-muted-foreground">{milestone.description}</p>
</div>
Expand All @@ -261,15 +261,15 @@ export default function AboutPage() {
<div className="flex flex-col sm:flex-row gap-4 items-center justify-center">
<Link
href="/submit"
className="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-lg bg-[#06D6A0] text-[#0a0a0a] font-semibold hover:brightness-110"
className="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-lg bg-primary text-background font-semibold hover:brightness-110"
>
Submit a Skill
</Link>
<Link
href="https://github.com/reflectt/foragents.dev"
target="_blank"
rel="noreferrer"
className="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-lg border border-[#06D6A0]/40 text-[#06D6A0] font-semibold hover:bg-[#06D6A0]/10"
className="inline-flex items-center justify-center gap-2 px-7 py-3 rounded-lg border border-primary/40 text-primary font-semibold hover:bg-primary/10"
>
Contribute on GitHub
</Link>
Expand Down
12 changes: 6 additions & 6 deletions src/app/accessibility/accessibility-page-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@ export function AccessibilityPageClient() {

if (loading) {
return (
<Card className="bg-[#0f0f0f] border-white/10 p-10 text-center">
<Loader2 className="w-7 h-7 mx-auto mb-4 animate-spin text-[#06D6A0]" />
<Card className="bg-background border-white/10 p-10 text-center">
<Loader2 className="w-7 h-7 mx-auto mb-4 animate-spin text-primary" />
<p className="text-gray-300">Loading accessibility audit results...</p>
</Card>
);
Expand All @@ -123,7 +123,7 @@ export function AccessibilityPageClient() {

return (
<div className="space-y-8">
<Card className="bg-[#0f0f0f] border-white/10 p-8">
<Card className="bg-background border-white/10 p-8">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<div>
<h2 className="text-2xl font-semibold mb-2">Accessibility Compliance Snapshot</h2>
Expand All @@ -148,11 +148,11 @@ export function AccessibilityPageClient() {
</div>
</Card>

<Card className="bg-[#0f0f0f] border-white/10 p-8">
<Card className="bg-background border-white/10 p-8">
<h3 className="text-xl font-semibold mb-5">Audit Checks</h3>
<div className="space-y-4">
{data.auditChecks.map((check: AccessibilityAuditCheck) => (
<div key={check.name} className="rounded-lg border border-white/10 bg-[#141414] p-4">
<div key={check.name} className="rounded-lg border border-white/10 bg-background p-4">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-2">
<p className="font-medium">{check.name}</p>
<Badge className={`border capitalize ${statusStyles(check.status)}`}>
Expand All @@ -166,7 +166,7 @@ export function AccessibilityPageClient() {
</div>
</Card>

<Card className="bg-[#0f0f0f] border-white/10 p-8">
<Card className="bg-background border-white/10 p-8">
<h3 className="text-xl font-semibold mb-5">Priority Recommendations</h3>
{failedChecks.length === 0 ? (
<div className="rounded-lg border border-emerald-400/30 bg-emerald-500/10 p-4 text-emerald-200">
Expand Down
4 changes: 2 additions & 2 deletions src/app/accessibility/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ export const metadata: Metadata = {

export default function AccessibilityPage() {
return (
<div className="min-h-screen bg-[#0a0a0a] text-white">
<div className="min-h-screen bg-background text-white">
<div className="max-w-6xl mx-auto px-6 py-16">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold mb-3 text-[#06D6A0]">Accessibility</h1>
<h1 className="text-4xl font-bold mb-3 text-primary">Accessibility</h1>
<p className="text-gray-400 max-w-3xl mx-auto">
We're publishing real accessibility audit data sourced from persistent records through the /api/accessibility endpoint.
</p>
Expand Down
14 changes: 7 additions & 7 deletions src/app/acp/acp-directory-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@ export type AcpProtocol = {
};

const statusStyles: Record<AcpProtocol["status"], { bg: string; text: string; border: string }> = {
stable: { bg: "bg-[#06D6A0]/10", text: "text-[#06D6A0]", border: "border-[#06D6A0]/20" },
beta: { bg: "bg-[#3B82F6]/10", text: "text-[#3B82F6]", border: "border-[#3B82F6]/20" },
draft: { bg: "bg-[#F59E0B]/10", text: "text-[#F59E0B]", border: "border-[#F59E0B]/20" },
deprecated: { bg: "bg-[#EF4444]/10", text: "text-[#EF4444]", border: "border-[#EF4444]/20" },
stable: { bg: "bg-primary/10", text: "text-primary", border: "border-primary/20" },
beta: { bg: "bg-electric-blue/10", text: "text-electric-blue", border: "border-electric-blue/20" },
draft: { bg: "bg-solar/10", text: "text-solar", border: "border-solar/20" },
deprecated: { bg: "bg-destructive/10", text: "text-destructive", border: "border-destructive/20" },
};

const categoryStyles: Record<AcpProtocol["category"], { bg: string; text: string }> = {
messaging: { bg: "bg-cyan/10", text: "text-cyan" },
discovery: { bg: "bg-[#8B5CF6]/10", text: "text-[#8B5CF6]" },
auth: { bg: "bg-[#EC4899]/10", text: "text-[#EC4899]" },
data: { bg: "bg-[#F59E0B]/10", text: "text-[#F59E0B]" },
discovery: { bg: "bg-purple/10", text: "text-purple" },
auth: { bg: "bg-aurora-pink/10", text: "text-aurora-pink" },
data: { bg: "bg-solar/10", text: "text-solar" },
};

export function AcpDirectoryClient({ initialProtocols }: { initialProtocols: AcpProtocol[] }) {
Expand Down
2 changes: 1 addition & 1 deletion src/app/acp/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function AcpPage() {
</div>

<div className="relative max-w-5xl mx-auto px-4 py-16 text-center">
<h1 className="text-[32px] md:text-[42px] font-bold tracking-[-0.02em] text-[#F8FAFC] mb-3">
<h1 className="text-[32px] md:text-[42px] font-bold tracking-[-0.02em] text-foreground mb-3">
🛰️ ACP Protocol Directory
</h1>
<p className="text-lg text-foreground/80 mb-2">
Expand Down
8 changes: 4 additions & 4 deletions src/app/agent-playground/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export default function AgentPlaygroundPage() {
}, [runs]);

return (
<div className="min-h-screen bg-[#0a0a0a]">
<div className="min-h-screen bg-background">
<section className="relative overflow-hidden py-12">
<div className="absolute inset-0">
<div className="absolute top-0 left-1/2 -translate-x-1/2 h-[600px] w-[600px] rounded-full bg-purple-500/5 blur-[120px]" />
Expand Down Expand Up @@ -237,7 +237,7 @@ export default function AgentPlaygroundPage() {
<SelectTrigger id="agent-select" className="border-white/10 bg-white/5 text-white">
<SelectValue placeholder="Select agent" />
</SelectTrigger>
<SelectContent className="border-white/10 bg-[#1a1a1a]">
<SelectContent className="border-white/10 bg-background">
{AGENT_OPTIONS.map((agent) => (
<SelectItem key={agent} value={agent} className="text-white focus:bg-white/10 focus:text-white">
{agent === "all" ? "All agents (filter off)" : agent}
Expand All @@ -253,7 +253,7 @@ export default function AgentPlaygroundPage() {
<SelectTrigger id="model-select" className="border-white/10 bg-white/5 text-white">
<SelectValue placeholder="Select model" />
</SelectTrigger>
<SelectContent className="border-white/10 bg-[#1a1a1a]">
<SelectContent className="border-white/10 bg-background">
{MODEL_OPTIONS.map((model) => (
<SelectItem key={model} value={model} className="text-white focus:bg-white/10 focus:text-white">
{model}
Expand Down Expand Up @@ -311,7 +311,7 @@ export default function AgentPlaygroundPage() {
</Badge>
</div>

<div className="rounded-lg border border-white/10 bg-[#0a0a0a] p-4">
<div className="rounded-lg border border-white/10 bg-background p-4">
<p className="mb-2 text-xs text-muted-foreground">Prompt</p>
<p className="mb-4 whitespace-pre-wrap text-sm text-white">{currentRun.prompt}</p>
<p className="mb-2 text-xs text-muted-foreground">Response</p>
Expand Down
12 changes: 6 additions & 6 deletions src/app/agents/AgentsDirectoryClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ export type AgentDirectoryCard = {
};

const platformColors: Record<string, string> = {
openclaw: "bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20",
openclaw: "bg-primary/10 text-primary border-primary/20",
discord: "bg-[#5865F2]/10 text-[#5865F2] border-[#5865F2]/20",
moltbook: "bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20",
moltbook: "bg-solar/10 text-solar border-solar/20",
twitter: "bg-[#1DA1F2]/10 text-[#1DA1F2] border-[#1DA1F2]/20",
github: "bg-[#8B5CF6]/10 text-[#8B5CF6] border-[#8B5CF6]/20",
github: "bg-purple/10 text-purple border-purple/20",
};

function formatHandle(handle: string, domain: string) {
Expand Down Expand Up @@ -71,7 +71,7 @@ export function AgentsDirectoryClient({ agents }: { agents: AgentDirectoryCard[]
<div className="flex items-start gap-4">
<span className="text-4xl">{agent.avatar}</span>
<div className="flex-1 min-w-0">
<h3 className="text-lg font-semibold text-[#F8FAFC] group-hover:text-cyan transition-colors flex items-center gap-1.5">
<h3 className="text-lg font-semibold text-foreground group-hover:text-cyan transition-colors flex items-center gap-1.5">
{agent.name}
{agent.verifiedAgentJson && (
<Image
Expand All @@ -94,7 +94,7 @@ export function AgentsDirectoryClient({ agents }: { agents: AgentDirectoryCard[]
{agent.installedSkillCount} skills
</Badge>
{agent.activityCount7d > 0 ? (
<Badge variant="outline" className="text-[10px] bg-[#06D6A0]/10 text-[#06D6A0] border-[#06D6A0]/20">
<Badge variant="outline" className="text-[10px] bg-primary/10 text-primary border-primary/20">
Active
</Badge>
) : (
Expand All @@ -103,7 +103,7 @@ export function AgentsDirectoryClient({ agents }: { agents: AgentDirectoryCard[]
</Badge>
)}
{agent.featured && (
<Badge variant="outline" className="text-[10px] bg-[#F59E0B]/10 text-[#F59E0B] border-[#F59E0B]/20">
<Badge variant="outline" className="text-[10px] bg-solar/10 text-solar border-solar/20">
⭐ Featured
</Badge>
)}
Expand Down
Loading
Loading