From 9dcc369429cc5289c4101bfdb3add9474358b27f Mon Sep 17 00:00:00 2001 From: Kai Date: Wed, 18 Feb 2026 07:07:53 -0800 Subject: [PATCH 1/2] feat: integrate design tokens system for forAgents.dev - Add tokens.css with full Reflectt design token system - Override token primitives for Midnight Aurora brand palette - Map shadcn semantic vars to token references - Replace aurora gradient utilities with token references - Add data-theme='dark' to html element - Preserve product-specific brand identity (#06D6A0 cyan primary) - Build verified clean --- src/app/globals.css | 142 +++++++----- src/app/layout.tsx | 2 +- src/app/tokens.css | 546 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 627 insertions(+), 63 deletions(-) create mode 100644 src/app/tokens.css diff --git a/src/app/globals.css b/src/app/globals.css index dc90701d..543473bb 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,5 +1,6 @@ @import "tailwindcss"; @import "tw-animate-css"; +@import "./tokens.css"; @custom-variant dark (&:is(.dark *)); @@ -54,83 +55,100 @@ :root { --radius: 0.625rem; - /* Midnight Aurora - Brand Spec */ - --background: #0A0E17; - --foreground: #E2E8F0; - --card: #0F1420; - --card-foreground: #E2E8F0; - --popover: #0F1420; - --popover-foreground: #E2E8F0; - --primary: #06D6A0; - --primary-foreground: #0A0E17; - --secondary: #1A1F2E; - --secondary-foreground: #E2E8F0; - --muted: #1A1F2E; - --muted-foreground: #6B7280; - --accent: #1A1F2E; - --accent-foreground: #E2E8F0; - --destructive: #EC4899; - --border: #1A1F2E; + + /* forAgents.dev — Midnight Aurora brand overrides on token layer */ + --color-bg: #0A0E17; + --color-surface: #0F1420; + --color-surface-raised: #1A1F2E; + --color-text: #E2E8F0; + --color-text-secondary: #6B7280; + --color-border: #1A1F2E; + --color-primary: #06D6A0; + --color-primary-hover: #34D399; + --color-primary-active: #059669; + --color-secondary: #8B5CF6; + --color-accent: #EC4899; + --color-error: #EC4899; + --color-warning: #F59E0B; + --color-success: #06D6A0; + + /* Midnight Aurora - Brand Spec (shadcn mappings) */ + --background: var(--color-bg); + --foreground: var(--color-text); + --card: var(--color-surface); + --card-foreground: var(--color-text); + --popover: var(--color-surface); + --popover-foreground: var(--color-text); + --primary: var(--color-primary); + --primary-foreground: var(--color-bg); + --secondary: var(--color-surface-raised); + --secondary-foreground: var(--color-text); + --muted: var(--color-surface-raised); + --muted-foreground: var(--color-text-secondary); + --accent: var(--color-surface-raised); + --accent-foreground: var(--color-text); + --destructive: var(--color-error); + --border: var(--color-border); --input: #2A3040; - --ring: #06D6A0; + --ring: var(--color-primary); --cyan: #06D6A0; - --purple: #8B5CF6; + --purple: var(--color-secondary); --green: #06D6A0; --electric-blue: #3B82F6; - --aurora-pink: #EC4899; - --solar: #F59E0B; + --aurora-pink: var(--color-accent); + --solar: var(--color-warning); --chart-1: #06D6A0; - --chart-2: #8B5CF6; + --chart-2: var(--color-secondary); --chart-3: #3B82F6; - --chart-4: #F59E0B; - --chart-5: #EC4899; - --sidebar: #0A0E17; - --sidebar-foreground: #E2E8F0; - --sidebar-primary: #06D6A0; - --sidebar-primary-foreground: #0A0E17; - --sidebar-accent: #1A1F2E; - --sidebar-accent-foreground: #E2E8F0; - --sidebar-border: #1A1F2E; - --sidebar-ring: #06D6A0; + --chart-4: var(--color-warning); + --chart-5: var(--color-accent); + --sidebar: var(--color-bg); + --sidebar-foreground: var(--color-text); + --sidebar-primary: var(--color-primary); + --sidebar-primary-foreground: var(--color-bg); + --sidebar-accent: var(--color-surface-raised); + --sidebar-accent-foreground: var(--color-text); + --sidebar-border: var(--color-border); + --sidebar-ring: var(--color-primary); } .light { --background: #FFFFFF; - --foreground: #0F172A; - --card: #F8FAFC; - --card-foreground: #0F172A; + --foreground: var(--rt-slate-900); + --card: var(--rt-slate-50); + --card-foreground: var(--rt-slate-900); --popover: #FFFFFF; - --popover-foreground: #0F172A; + --popover-foreground: var(--rt-slate-900); --primary: #06D6A0; --primary-foreground: #FFFFFF; - --secondary: #F1F5F9; - --secondary-foreground: #0F172A; - --muted: #F1F5F9; - --muted-foreground: #64748B; - --accent: #F1F5F9; - --accent-foreground: #0F172A; - --destructive: #EC4899; - --border: #E2E8F0; - --input: #E2E8F0; + --secondary: var(--rt-slate-100); + --secondary-foreground: var(--rt-slate-900); + --muted: var(--rt-slate-100); + --muted-foreground: var(--rt-slate-500); + --accent: var(--rt-slate-100); + --accent-foreground: var(--rt-slate-900); + --destructive: var(--color-accent); + --border: var(--rt-slate-200); + --input: var(--rt-slate-200); --ring: #06D6A0; --cyan: #06D6A0; - --purple: #8B5CF6; + --purple: var(--color-secondary); --green: #06D6A0; --electric-blue: #3B82F6; - --aurora-pink: #EC4899; - --solar: #F59E0B; + --aurora-pink: var(--color-accent); + --solar: var(--color-warning); --chart-1: #06D6A0; - --chart-2: #8B5CF6; + --chart-2: var(--color-secondary); --chart-3: #3B82F6; - --chart-4: #F59E0B; - --chart-5: #EC4899; - --sidebar: #F8FAFC; - --sidebar-foreground: #0F172A; + --chart-4: var(--color-warning); + --chart-5: var(--color-accent); + --sidebar: var(--rt-slate-50); + --sidebar-foreground: var(--rt-slate-900); --sidebar-primary: #06D6A0; --sidebar-primary-foreground: #FFFFFF; - --sidebar-accent: #F1F5F9; - --sidebar-accent-foreground: #0F172A; - --sidebar-border: #E2E8F0; + --sidebar-accent: var(--rt-slate-100); + --sidebar-accent-foreground: var(--rt-slate-900); + --sidebar-border: var(--rt-slate-200); --sidebar-ring: #06D6A0; } @@ -149,22 +167,22 @@ /* Aurora gradient utilities */ .aurora-gradient { - background: linear-gradient(135deg, #06D6A0 0%, #3B82F6 50%, #8B5CF6 100%); + background: linear-gradient(135deg, var(--color-primary) 0%, var(--electric-blue) 50%, var(--color-secondary) 100%); } .aurora-text { - background: linear-gradient(135deg, #06D6A0 0%, #3B82F6 50%, #8B5CF6 100%); + background: linear-gradient(135deg, var(--color-primary) 0%, var(--electric-blue) 50%, var(--color-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .aurora-border { - border-image: linear-gradient(135deg, #06D6A0 0%, #3B82F6 50%, #8B5CF6 100%) 1; + border-image: linear-gradient(135deg, var(--color-primary) 0%, var(--electric-blue) 50%, var(--color-secondary) 100%) 1; } .aurora-glow { - box-shadow: 0 0 40px rgba(6, 214, 160, 0.08), 0 0 80px rgba(139, 92, 246, 0.05); + box-shadow: var(--shadow-glow-primary); } /* Typewriter cursor blink */ @@ -176,13 +194,13 @@ .cursor-blink::after { content: "_"; animation: blink 1s step-end infinite; - color: #06D6A0; + color: var(--color-primary); } /* 404 gradient stroke text */ .gradient-stroke { -webkit-text-stroke: 2px transparent; - background: linear-gradient(135deg, #06D6A0 0%, #3B82F6 50%, #8B5CF6 100%); + background: linear-gradient(135deg, var(--color-primary) 0%, var(--electric-blue) 50%, var(--color-secondary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0d192015..f018313f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -79,7 +79,7 @@ export default function RootLayout({ }; return ( - + {/* If you're reading this, you're probably an agent. diff --git a/src/app/tokens.css b/src/app/tokens.css new file mode 100644 index 00000000..abcdaf2b --- /dev/null +++ b/src/app/tokens.css @@ -0,0 +1,546 @@ +/** + * Reflectt Design Tokens + * Version: 1.0.0 + * Generated by Pixel (Design Lead) + * + * Unified CSS custom properties for: + * - reflectt.ai (marketing site) + * - chat.reflectt.ai (reflectt-ai) + * - forAgents.dev + * + * WCAG 2.1 AA verified. See tokens-docs.md for contrast ratios. + * Integration guide: integration-guide.md + */ + +/* ============================================================ + PRIMITIVE TOKENS — raw values, do not use directly in UI + ============================================================ */ + +:root { + /* --- Color Primitives: Indigo (Primary Brand) --- */ + --rt-indigo-50: #EEF2FF; + --rt-indigo-100: #E0E7FF; + --rt-indigo-200: #C7D2FE; + --rt-indigo-300: #A5B4FC; + --rt-indigo-400: #818CF8; + --rt-indigo-500: #6366F1; /* brand primary */ + --rt-indigo-600: #4F46E5; + --rt-indigo-700: #4338CA; + --rt-indigo-800: #3730A3; + --rt-indigo-900: #312E81; + --rt-indigo-950: #1E1B4B; + + /* --- Color Primitives: Violet (Secondary Brand) --- */ + --rt-violet-50: #F5F3FF; + --rt-violet-100: #EDE9FE; + --rt-violet-200: #DDD6FE; + --rt-violet-300: #C4B5FD; + --rt-violet-400: #A78BFA; + --rt-violet-500: #8B5CF6; /* brand secondary */ + --rt-violet-600: #7C3AED; + --rt-violet-700: #6D28D9; + --rt-violet-800: #5B21B6; + --rt-violet-900: #4C1D95; + --rt-violet-950: #2E1065; + + /* --- Color Primitives: Slate (Neutral) --- */ + --rt-slate-50: #F8FAFC; + --rt-slate-100: #F1F5F9; + --rt-slate-200: #E2E8F0; + --rt-slate-300: #CBD5E1; + --rt-slate-400: #94A3B8; + --rt-slate-500: #64748B; + --rt-slate-600: #475569; + --rt-slate-700: #334155; + --rt-slate-800: #1E293B; + --rt-slate-850: #172033; + --rt-slate-900: #0F172A; /* dark bg */ + --rt-slate-950: #020617; + + /* --- Color Primitives: Semantic --- */ + --rt-ember-400: #FB923C; + --rt-ember-500: #F97316; /* highlight / CTA accent */ + --rt-ember-600: #EA580C; + --rt-seafoam-400: #2DD4BF; + --rt-seafoam-500: #14B8A6; /* success */ + --rt-seafoam-600: #0D9488; + --rt-seafoam-700: #0F766E; /* success on light bg — 5.47:1 vs white, WCAG AA */ + --rt-rose-400: #FB7185; + --rt-rose-500: #F43F5E; /* error / destructive */ + --rt-rose-600: #E11D48; + --rt-amber-400: #FBBF24; + --rt-amber-500: #F59E0B; /* warning */ + --rt-amber-600: #D97706; + + /* --- Typography Primitives --- */ + --rt-font-sans: 'Inter', 'Geist', system-ui, -apple-system, sans-serif; + --rt-font-mono: 'JetBrains Mono', 'Geist Mono', 'Fira Code', monospace; + --rt-font-display: 'Inter', system-ui, sans-serif; /* headings, same as sans for now */ + + /* Font sizes — fluid scale (clamp preferred in components) */ + --rt-text-xs: 0.75rem; /* 12px */ + --rt-text-sm: 0.875rem; /* 14px */ + --rt-text-base: 1rem; /* 16px */ + --rt-text-lg: 1.125rem; /* 18px */ + --rt-text-xl: 1.25rem; /* 20px */ + --rt-text-2xl: 1.5rem; /* 24px */ + --rt-text-3xl: 1.875rem; /* 30px */ + --rt-text-4xl: 2.25rem; /* 36px */ + --rt-text-5xl: 3rem; /* 48px */ + --rt-text-6xl: 3.75rem; /* 60px */ + + /* Font weights */ + --rt-weight-normal: 400; + --rt-weight-medium: 500; + --rt-weight-semibold: 600; + --rt-weight-bold: 700; + --rt-weight-extrabold: 800; + + /* Line heights */ + --rt-leading-none: 1; + --rt-leading-tight: 1.25; + --rt-leading-snug: 1.375; + --rt-leading-normal: 1.5; + --rt-leading-relaxed: 1.625; + --rt-leading-loose: 2; + + /* Letter spacing */ + --rt-tracking-tighter: -0.05em; + --rt-tracking-tight: -0.025em; + --rt-tracking-normal: 0em; + --rt-tracking-wide: 0.025em; + --rt-tracking-wider: 0.05em; + --rt-tracking-widest: 0.1em; + + /* --- Spacing Primitives (4px base grid) --- */ + --rt-space-0: 0; + --rt-space-px: 1px; + --rt-space-0-5: 0.125rem; /* 2px */ + --rt-space-1: 0.25rem; /* 4px */ + --rt-space-1-5: 0.375rem; /* 6px */ + --rt-space-2: 0.5rem; /* 8px */ + --rt-space-2-5: 0.625rem; /* 10px */ + --rt-space-3: 0.75rem; /* 12px */ + --rt-space-3-5: 0.875rem; /* 14px */ + --rt-space-4: 1rem; /* 16px */ + --rt-space-5: 1.25rem; /* 20px */ + --rt-space-6: 1.5rem; /* 24px */ + --rt-space-7: 1.75rem; /* 28px */ + --rt-space-8: 2rem; /* 32px */ + --rt-space-10: 2.5rem; /* 40px */ + --rt-space-12: 3rem; /* 48px */ + --rt-space-16: 4rem; /* 64px */ + --rt-space-20: 5rem; /* 80px */ + --rt-space-24: 6rem; /* 96px */ + --rt-space-32: 8rem; /* 128px */ + --rt-space-40: 10rem; /* 160px */ + --rt-space-48: 12rem; /* 192px */ + --rt-space-64: 16rem; /* 256px */ + + /* --- Border Radius Primitives --- */ + --rt-radius-none: 0; + --rt-radius-xs: 0.125rem; /* 2px */ + --rt-radius-sm: 0.25rem; /* 4px */ + --rt-radius-md: 0.375rem; /* 6px */ + --rt-radius-lg: 0.5rem; /* 8px */ + --rt-radius-xl: 0.75rem; /* 12px */ + --rt-radius-2xl: 1rem; /* 16px */ + --rt-radius-3xl: 1.5rem; /* 24px */ + --rt-radius-full: 9999px; + + /* --- Shadow Primitives --- */ + --rt-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --rt-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10); + --rt-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); + --rt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); + --rt-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10); + --rt-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --rt-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); + --rt-shadow-none: 0 0 #0000; + + /* Brand glow shadows */ + --rt-shadow-glow-primary: 0 0 20px rgb(99 102 241 / 0.35), 0 0 40px rgb(99 102 241 / 0.15); + --rt-shadow-glow-secondary: 0 0 20px rgb(139 92 246 / 0.35), 0 0 40px rgb(139 92 246 / 0.15); + --rt-shadow-glow-ember: 0 0 20px rgb(249 115 22 / 0.35), 0 0 40px rgb(249 115 22 / 0.15); + + /* --- Z-Index Scale --- */ + --rt-z-below: -1; + --rt-z-base: 0; + --rt-z-raised: 10; + --rt-z-dropdown: 100; + --rt-z-sticky: 200; + --rt-z-overlay: 300; + --rt-z-modal: 400; + --rt-z-popover: 500; + --rt-z-toast: 600; + --rt-z-tooltip: 700; + + /* --- Transition Primitives --- */ + --rt-ease-linear: linear; + --rt-ease-in: cubic-bezier(0.4, 0, 1, 1); + --rt-ease-out: cubic-bezier(0, 0, 0.2, 1); + --rt-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --rt-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); + --rt-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); + + --rt-duration-instant: 0ms; + --rt-duration-fast: 100ms; + --rt-duration-normal: 200ms; + --rt-duration-slow: 300ms; + --rt-duration-slower: 500ms; +} + + +/* ============================================================ + SEMANTIC TOKENS — DARK THEME (default, all products) + These reference primitives and define actual UI meaning. + ============================================================ */ + +:root, +[data-theme="dark"] { + /* --- Background --- */ + --color-bg: var(--rt-slate-900); /* #0F172A — page background */ + --color-bg-subtle: var(--rt-slate-850); /* #172033 — slightly lifted */ + --color-surface: var(--rt-slate-800); /* #1E293B — cards, panels */ + --color-surface-raised:var(--rt-slate-700); /* #334155 — elevated surface */ + --color-surface-overlay:rgb(15 23 42 / 0.85); /* modal/popover scrim */ + + /* --- Text --- */ + --color-text: var(--rt-slate-100); /* #F1F5F9 — primary text (≥7:1 on --color-bg) */ + --color-text-secondary:var(--rt-slate-400); /* #94A3B8 — muted/helper (≥4.6:1 on --color-bg) */ + --color-text-tertiary: var(--rt-slate-500); /* #64748B — placeholder (3.75:1 — large text/non-interactive only; NOT for normal body text) */ + --color-text-disabled: var(--rt-slate-600); /* #475569 — disabled state (not interactive) */ + --color-text-inverse: var(--rt-slate-900); /* dark text on light surface */ + --color-text-on-primary: var(--rt-slate-50); /* text on indigo button */ + + /* --- Brand / Primary --- */ + --color-primary: var(--rt-indigo-500); /* #6366F1 — 4.0:1 on dark bg; WCAG AA large text + UI controls (3:1 req) */ + --color-primary-hover: var(--rt-indigo-400); /* #818CF8 */ + --color-text-link: var(--rt-indigo-400); /* #818CF8 — 5.98:1 on dark bg; use for inline text links (WCAG AA normal text) */ + --color-primary-active:var(--rt-indigo-600); /* #4F46E5 */ + --color-primary-subtle:rgb(99 102 241 / 0.15); /* tinted backgrounds */ + --color-primary-border:rgb(99 102 241 / 0.40); /* border around primary elements */ + + /* --- Brand / Secondary --- */ + --color-secondary: var(--rt-violet-500); /* #8B5CF6 */ + --color-secondary-hover: var(--rt-violet-400); /* #A78BFA */ + --color-secondary-active:var(--rt-violet-600); /* #7C3AED */ + --color-secondary-subtle:rgb(139 92 246 / 0.15); + --color-secondary-border:rgb(139 92 246 / 0.40); + + /* --- Accent (Ember — for CTAs, highlights, heat) --- */ + --color-accent: var(--rt-ember-500); /* #F97316 */ + --color-accent-hover: var(--rt-ember-400); /* #FB923C */ + --color-accent-active: var(--rt-ember-600); /* #EA580C */ + --color-accent-subtle: rgb(249 115 22 / 0.15); + + /* --- Borders --- */ + --color-border: var(--rt-slate-700); /* #334155 — default border */ + --color-border-subtle: var(--rt-slate-800); /* #1E293B — subtle divider */ + --color-border-strong: var(--rt-slate-600); /* #475569 — stronger border */ + --color-border-focus: var(--rt-indigo-500); /* focus ring color */ + + /* --- Semantic State Colors --- */ + --color-success: var(--rt-seafoam-500); /* #14B8A6 */ + --color-success-hover: var(--rt-seafoam-400); + --color-success-subtle: rgb(20 184 166 / 0.15); + --color-success-text: var(--rt-seafoam-400); /* on dark bg */ + + --color-warning: var(--rt-amber-500); /* #F59E0B */ + --color-warning-hover: var(--rt-amber-400); + --color-warning-subtle: rgb(245 158 11 / 0.15); + --color-warning-text: var(--rt-amber-400); + + --color-error: var(--rt-rose-500); /* #F43F5E */ + --color-error-hover: var(--rt-rose-400); + --color-error-subtle: rgb(244 63 94 / 0.15); + --color-error-text: var(--rt-rose-400); + + --color-info: var(--rt-indigo-400); /* #818CF8 */ + --color-info-subtle: rgb(129 140 248 / 0.15); + --color-info-text: var(--rt-indigo-300); + + /* --- Shadows (contextual on dark) --- */ + --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.30), 0 1px 2px -1px rgb(0 0 0 / 0.30); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.40), 0 2px 4px -2px rgb(0 0 0 / 0.40); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.40), 0 4px 6px -4px rgb(0 0 0 / 0.40); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.50), 0 8px 10px -6px rgb(0 0 0 / 0.50); + --shadow-glow-primary: var(--rt-shadow-glow-primary); + --shadow-glow-secondary: var(--rt-shadow-glow-secondary); + --shadow-glow-accent: var(--rt-shadow-glow-ember); + + /* --- Focus Ring --- */ + --focus-ring: 0 0 0 3px rgb(99 102 241 / 0.45); + --focus-ring-error: 0 0 0 3px rgb(244 63 94 / 0.45); + + /* --- Border Radius (semantic) --- */ + --radius-component: var(--rt-radius-lg); /* 8px — inputs, badges */ + --radius-card: var(--rt-radius-xl); /* 12px — cards, panels */ + --radius-modal: var(--rt-radius-2xl); /* 16px — modals */ + --radius-button: var(--rt-radius-md); /* 6px — buttons */ + --radius-pill: var(--rt-radius-full); /* pills / tags */ + + /* --- Typography (semantic) --- */ + --font-body: var(--rt-font-sans); + --font-heading: var(--rt-font-display); + --font-code: var(--rt-font-mono); + + /* --- Spacing (layout-level semantic) --- */ + --space-page-x: var(--rt-space-6); /* 24px — mobile horizontal padding */ + --space-page-x-md: var(--rt-space-8); /* 32px — tablet */ + --space-page-x-lg: var(--rt-space-16); /* 64px — desktop */ + --space-section: var(--rt-space-16); /* 64px — between sections */ + --space-section-lg:var(--rt-space-24); /* 96px — larger section gaps */ + --space-card: var(--rt-space-6); /* 24px — card internal padding */ + + /* --- Transitions (semantic) --- */ + --transition-color: color var(--rt-duration-normal) var(--rt-ease-in-out), + background-color var(--rt-duration-normal) var(--rt-ease-in-out), + border-color var(--rt-duration-normal) var(--rt-ease-in-out); + --transition-transform: transform var(--rt-duration-normal) var(--rt-ease-out); + --transition-opacity: opacity var(--rt-duration-normal) var(--rt-ease-in-out); + --transition-shadow: box-shadow var(--rt-duration-normal) var(--rt-ease-out); + --transition-all: all var(--rt-duration-normal) var(--rt-ease-in-out); +} + + +/* ============================================================ + LIGHT THEME OVERRIDES + Apply via [data-theme="light"] or .light class on + ============================================================ */ + +[data-theme="light"], +.light { + /* --- Background --- */ + --color-bg: var(--rt-slate-50); /* #F8FAFC */ + --color-bg-subtle: var(--rt-slate-100); /* #F1F5F9 */ + --color-surface: #FFFFFF; + --color-surface-raised: var(--rt-slate-50); /* #F8FAFC */ + --color-surface-overlay:rgb(248 250 252 / 0.90); + + /* --- Text --- */ + --color-text: var(--rt-slate-900); /* #0F172A — (≥15:1 on white) */ + --color-text-secondary: var(--rt-slate-600); /* #475569 — (≥5.9:1 on white) */ + --color-text-tertiary: var(--rt-slate-400); /* #94A3B8 — (≥3.0:1 — large only) */ + --color-text-disabled: var(--rt-slate-300); + --color-text-inverse: var(--rt-slate-50); + --color-text-on-primary:var(--rt-slate-50); + + /* --- Brand / Primary (slightly darker for light bg contrast) --- */ + --color-primary: var(--rt-indigo-600); /* #4F46E5 — (≥4.6:1 on white) */ + --color-primary-hover: var(--rt-indigo-500); + --color-primary-active: var(--rt-indigo-700); + --color-primary-subtle: var(--rt-indigo-50); + --color-primary-border: var(--rt-indigo-200); + + /* --- Brand / Secondary --- */ + --color-secondary: var(--rt-violet-600); /* #7C3AED */ + --color-secondary-hover: var(--rt-violet-500); + --color-secondary-active:var(--rt-violet-700); + --color-secondary-subtle:var(--rt-violet-50); + --color-secondary-border:var(--rt-violet-200); + + /* --- Accent --- */ + --color-accent: var(--rt-ember-500); + --color-accent-hover: var(--rt-ember-600); + --color-accent-active: var(--rt-ember-600); + --color-accent-subtle: rgb(249 115 22 / 0.08); + + /* --- Borders --- */ + --color-border: var(--rt-slate-200); + --color-border-subtle: var(--rt-slate-100); + --color-border-strong: var(--rt-slate-300); + --color-border-focus: var(--rt-indigo-500); + + /* --- Semantic State (light-adjusted) --- */ + --color-success: var(--rt-seafoam-700); /* #0F766E — 5.47:1 on white, WCAG AA ✅ (was seafoam-600 #0D9488 = 3.74:1, failed) */ + --color-success-hover: var(--rt-seafoam-600); + --color-success-subtle: rgb(15 118 110 / 0.08); + --color-success-text: var(--rt-seafoam-700); /* #0F766E — 5.47:1 on white, WCAG AA ✅ */ + + --color-warning: var(--rt-amber-600); + --color-warning-hover: var(--rt-amber-500); + --color-warning-subtle: rgb(217 119 6 / 0.08); + --color-warning-text: var(--rt-amber-600); + + --color-error: var(--rt-rose-600); + --color-error-hover: var(--rt-rose-500); + --color-error-subtle: rgb(225 29 72 / 0.08); + --color-error-text: var(--rt-rose-600); + + --color-info: var(--rt-indigo-600); + --color-info-subtle: var(--rt-indigo-50); + --color-info-text: var(--rt-indigo-700); + + /* --- Shadows (lighter on light theme) --- */ + --shadow-sm: var(--rt-shadow-sm); + --shadow-md: var(--rt-shadow-md); + --shadow-lg: var(--rt-shadow-lg); + --shadow-xl: var(--rt-shadow-xl); + --shadow-glow-primary: 0 0 20px rgb(79 70 229 / 0.20), 0 0 40px rgb(79 70 229 / 0.08); + --shadow-glow-secondary: 0 0 20px rgb(124 58 237 / 0.20), 0 0 40px rgb(124 58 237 / 0.08); + --shadow-glow-accent: 0 0 20px rgb(249 115 22 / 0.20), 0 0 40px rgb(249 115 22 / 0.08); + + /* --- Focus Ring --- */ + --focus-ring: 0 0 0 3px rgb(79 70 229 / 0.35); +} + + +/* ============================================================ + COMPONENT TOKENS — ready-to-use component-level variables + ============================================================ */ + +:root { + /* --- Button --- */ + --btn-primary-bg: var(--color-primary); + --btn-primary-bg-hover:var(--color-primary-hover); + --btn-primary-text: var(--color-text-on-primary); + --btn-primary-shadow: var(--shadow-glow-primary); + --btn-secondary-bg: var(--color-surface-raised); + --btn-secondary-text: var(--color-text); + --btn-secondary-border:var(--color-border); + --btn-ghost-bg: transparent; + --btn-ghost-bg-hover: var(--color-primary-subtle); + --btn-ghost-text: var(--color-primary); + --btn-danger-bg: var(--color-error); + --btn-radius: var(--radius-button); + --btn-height-sm: var(--rt-space-8); /* 32px */ + --btn-height-md: var(--rt-space-10); /* 40px */ + --btn-height-lg: var(--rt-space-12); /* 48px */ + --btn-px-sm: var(--rt-space-3); + --btn-px-md: var(--rt-space-4); + --btn-px-lg: var(--rt-space-6); + + /* --- Input / Form --- */ + --input-bg: var(--color-surface); + --input-border: var(--color-border); + --input-border-focus: var(--color-border-focus); + --input-text: var(--color-text); + --input-placeholder: var(--color-text-tertiary); + --input-radius: var(--radius-component); + --input-height: var(--rt-space-10); /* 40px */ + --input-px: var(--rt-space-3); /* 12px */ + --input-ring-focus: var(--focus-ring); + + /* --- Card --- */ + --card-bg: var(--color-surface); + --card-border: var(--color-border-subtle); + --card-radius: var(--radius-card); + --card-shadow: var(--shadow-md); + --card-padding: var(--space-card); + + /* --- Badge / Tag --- */ + --badge-radius: var(--radius-pill); + --badge-px: var(--rt-space-2-5); + --badge-py: var(--rt-space-0-5); + --badge-font-size: var(--rt-text-xs); + --badge-font-weight: var(--rt-weight-semibold); + + /* --- Navigation --- */ + --nav-bg: var(--color-bg); + --nav-border: var(--color-border-subtle); + --nav-height: var(--rt-space-16); /* 64px */ + --nav-item-active-bg: var(--color-primary-subtle); + --nav-item-active-text:var(--color-primary); + --nav-item-text: var(--color-text-secondary); + --nav-item-hover-text: var(--color-text); + + /* --- Modal / Dialog --- */ + --modal-bg: var(--color-surface); + --modal-border: var(--color-border); + --modal-radius: var(--radius-modal); + --modal-shadow: var(--shadow-xl); + --modal-scrim: rgb(0 0 0 / 0.60); + --modal-padding: var(--rt-space-6); + + /* --- Toast --- */ + --toast-bg: var(--color-surface-raised); + --toast-border: var(--color-border); + --toast-radius: var(--radius-card); + --toast-shadow: var(--shadow-xl); + --toast-text: var(--color-text); + + /* --- Code / Pre --- */ + --code-bg: var(--rt-slate-950); + --code-text: var(--rt-slate-200); + --code-border: var(--rt-slate-800); + --code-radius: var(--radius-component); + --code-font: var(--font-code); + --code-font-size: var(--rt-text-sm); + + /* --- Selection --- */ + --selection-bg: rgb(99 102 241 / 0.30); + --selection-text: inherit; + + /* --- Scrollbar (custom) --- */ + --scrollbar-width: 6px; + --scrollbar-track: transparent; + --scrollbar-thumb: var(--rt-slate-700); + --scrollbar-thumb-hover:var(--rt-slate-500); +} + + +/* ============================================================ + UTILITY CLASSES — apply tokens as classes + ============================================================ */ + +/* Text colors */ +.text-primary { color: var(--color-primary); } +.text-secondary { color: var(--color-secondary); } +.text-accent { color: var(--color-accent); } +.text-muted { color: var(--color-text-secondary); } +.text-subtle { color: var(--color-text-tertiary); } +.text-error { color: var(--color-error-text); } +.text-success { color: var(--color-success-text); } +.text-warning { color: var(--color-warning-text); } + +/* Backgrounds */ +.bg-surface { background-color: var(--color-surface); } +.bg-surface-raised { background-color: var(--color-surface-raised); } +.bg-primary-subtle { background-color: var(--color-primary-subtle); } +.bg-error-subtle { background-color: var(--color-error-subtle); } +.bg-success-subtle { background-color: var(--color-success-subtle); } +.bg-warning-subtle { background-color: var(--color-warning-subtle); } + +/* Borders */ +.border-default { border-color: var(--color-border); } +.border-subtle { border-color: var(--color-border-subtle); } +.border-strong { border-color: var(--color-border-strong); } +.border-primary { border-color: var(--color-primary-border); } + +/* Shadows */ +.shadow-sm { box-shadow: var(--shadow-sm); } +.shadow-md { box-shadow: var(--shadow-md); } +.shadow-lg { box-shadow: var(--shadow-lg); } +.shadow-xl { box-shadow: var(--shadow-xl); } +.shadow-glow-primary { box-shadow: var(--shadow-glow-primary); } +.shadow-glow-secondary { box-shadow: var(--shadow-glow-secondary); } +.shadow-glow-accent { box-shadow: var(--shadow-glow-accent); } + +/* Transitions */ +.transition-color { transition: var(--transition-color); } +.transition-transform { transition: var(--transition-transform); } +.transition-opacity { transition: var(--transition-opacity); } +.transition-all { transition: var(--transition-all); } + +/* Selection */ +::selection { + background-color: var(--selection-bg); + color: var(--selection-text); +} + +/* Focus ring */ +.focus-ring:focus-visible { + outline: none; + box-shadow: var(--focus-ring); +} + +/* Custom scrollbar */ +.scrollbar-custom { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); +} +.scrollbar-custom::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } +.scrollbar-custom::-webkit-scrollbar-track { background: var(--scrollbar-track); } +.scrollbar-custom::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--rt-radius-full); } +.scrollbar-custom::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } From 48ec81dd76fda2923b08c8b4690099baa377a135 Mon Sep 17 00:00:00 2001 From: Kai Date: Wed, 18 Feb 2026 08:00:25 -0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20A-class=20hex=20cleanup=20=E2=80=94?= =?UTF-8?q?=201521=20arbitrary=20hex=20=E2=86=92=20token=20classes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Batch migration of all Tailwind arbitrary hex values to semantic token classes: - text-[#06D6A0] → text-primary (450 instances) - bg-[#06D6A0] → bg-primary (366 instances) - border-[#06D6A0] → border-primary (274 instances) - text-[#F8FAFC] → text-foreground (197 instances) - bg-[#0a0a0a] → bg-background (165 instances) - Plus all secondary, accent, solar, electric-blue, purple variants B-class allowlist (6 remaining — external brand colors): - #5865F2 (Discord), #1DA1F2 (Twitter) - #3178c6 (TypeScript), #f7df1e (JavaScript) Build verified clean. 207 files, 0 regressions. Task: task-1771427753854-uhywf9ps8 --- src/app/about/page.tsx | 26 ++++---- .../accessibility-page-client.tsx | 12 ++-- src/app/accessibility/page.tsx | 4 +- src/app/acp/acp-directory-client.tsx | 14 ++--- src/app/acp/page.tsx | 2 +- src/app/agent-playground/page.tsx | 8 +-- src/app/agents/AgentsDirectoryClient.tsx | 12 ++-- src/app/agents/[handle]/page.tsx | 26 ++++---- src/app/agents/agents-page-client.tsx | 6 +- src/app/agents/page.tsx | 2 +- src/app/auth/callback/page.tsx | 4 +- src/app/auth/signin/page.tsx | 4 +- src/app/auth/signup/page.tsx | 4 +- src/app/badges/page.tsx | 30 ++++----- src/app/benchmarks/benchmarks-client.tsx | 2 +- src/app/benchmarks/submit/submit-client.tsx | 2 +- src/app/bookmarks/page.tsx | 24 +++---- src/app/bootstrap/BootstrapApiDocsClient.tsx | 4 +- .../bounties/[id]/bounty-detail-client.tsx | 18 +++--- src/app/bounties/bounties-client.tsx | 16 ++--- src/app/bounties/page.tsx | 6 +- src/app/brand-kit/page.tsx | 10 +-- src/app/brand/brand-client.tsx | 16 ++--- src/app/builder/page.tsx | 2 +- src/app/calculator/page.tsx | 18 +++--- src/app/canary/page.tsx | 2 +- src/app/careers/page.tsx | 14 ++--- src/app/changelog/changelog-content.tsx | 2 +- src/app/changelog/page.tsx | 2 +- .../[id]/discussion-detail-client.tsx | 14 ++--- src/app/community/community-client.tsx | 8 +-- src/app/community/page.tsx | 36 +++++------ .../compatibility-matrix-client.tsx | 18 +++--- src/app/compatibility/page.tsx | 2 +- .../audit/audit-compliance-client.tsx | 14 ++--- src/app/compliance/compliance-hub-client.tsx | 20 +++--- src/app/compliance/governance/page.tsx | 16 ++--- src/app/compliance/responsible-ai/page.tsx | 18 +++--- src/app/connectors/[slug]/page.tsx | 12 ++-- src/app/connectors/oauth-guide/page.tsx | 30 ++++----- src/app/connectors/page.tsx | 14 ++--- src/app/connectors/vault/page.tsx | 58 ++++++++--------- src/app/contact/page.tsx | 62 +++++++++---------- src/app/contribute/contributors-client.tsx | 22 +++---- src/app/contribute/page.tsx | 2 +- src/app/creators/page.tsx | 2 +- src/app/credits/page.tsx | 40 ++++++------ src/app/demos/page.tsx | 42 ++++++------- src/app/dependencies/page.tsx | 20 +++--- src/app/diagnostics/diagnostics-client.tsx | 18 +++--- src/app/diagnostics/errors/page.tsx | 20 +++--- src/app/diagnostics/page.tsx | 2 +- src/app/diagnostics/profiler/page.tsx | 20 +++--- src/app/diagnostics/runtime/page.tsx | 22 +++---- src/app/diff/page.tsx | 26 ++++---- src/app/docs/playground/page.tsx | 16 ++--- src/app/economics/compare/page.tsx | 6 +- src/app/economics/page.tsx | 6 +- src/app/ecosystem/page.tsx | 16 ++--- src/app/ecosystem/stats/page.tsx | 50 +++++++-------- src/app/enterprise/page.tsx | 40 ++++++------ src/app/error.tsx | 2 +- src/app/events/events-client.tsx | 8 +-- src/app/faq/page.tsx | 42 ++++++------- src/app/feeds/page.tsx | 2 +- src/app/forum/[id]/page.tsx | 8 +-- src/app/forum/page.tsx | 2 +- src/app/global-error.tsx | 20 +++--- src/app/glossary/page.tsx | 48 +++++++------- src/app/governance/GovernanceReadiness.tsx | 6 +- src/app/governance/accountability/page.tsx | 14 ++--- src/app/governance/page.tsx | 16 ++--- src/app/governance/safety/page.tsx | 14 ++--- src/app/guides/[slug]/guide-detail-client.tsx | 18 +++--- src/app/guides/kit-integration/page.tsx | 4 +- src/app/guides/page.tsx | 18 +++--- src/app/history/page.tsx | 18 +++--- src/app/hosting/cloud/page.tsx | 22 +++---- src/app/hosting/containers/page.tsx | 52 ++++++++-------- src/app/hosting/local/page.tsx | 14 ++--- src/app/hosting/page.tsx | 46 +++++++------- .../[slug]/integration-detail-client.tsx | 40 ++++++------ src/app/integrations/page.tsx | 24 +++---- src/app/layout.tsx | 2 +- .../agents/agent-leaderboard-client.tsx | 2 +- src/app/leaderboard/agents/page.tsx | 2 +- src/app/leaderboard/page.tsx | 2 +- src/app/learn/page.tsx | 44 ++++++------- src/app/llms-txt/page.tsx | 4 +- src/app/macros/page.tsx | 2 +- src/app/marketplace/marketplace-client.tsx | 12 ++-- src/app/marketplace/page.tsx | 2 +- src/app/mcp/[slug]/page.tsx | 4 +- src/app/mcp/mcp-client.tsx | 10 +-- src/app/mcp/page.tsx | 2 +- src/app/memory-patterns/[pattern]/page.tsx | 4 +- src/app/memory-patterns/cookbook/page.tsx | 2 +- src/app/memory-patterns/page.tsx | 4 +- src/app/metrics/page.tsx | 44 ++++++------- src/app/migrate/guide/page.tsx | 40 ++++++------ src/app/migrate/page.tsx | 14 ++--- src/app/monetization/calculator/page.tsx | 44 ++++++------- src/app/monetization/cases/page.tsx | 16 ++--- src/app/monetization/page.tsx | 52 ++++++++-------- src/app/monetization/x402/page.tsx | 52 ++++++++-------- src/app/network/page.tsx | 2 +- src/app/news/[id]/comments-section.tsx | 16 ++--- src/app/news/[id]/page.tsx | 32 +++++----- src/app/newsletter/page.tsx | 42 ++++++------- src/app/not-found.tsx | 2 +- src/app/notifications/page.tsx | 14 ++--- src/app/observability/page.tsx | 38 ++++++------ src/app/onboarding/onboarding-wizard.tsx | 2 +- src/app/open-source/page.tsx | 40 ++++++------ src/app/page.tsx | 8 +-- src/app/partners/[slug]/page.tsx | 24 +++---- src/app/partners/page.tsx | 30 ++++----- src/app/playground/PlaygroundClient.tsx | 22 +++---- .../skills/SkillsPlaygroundClient.tsx | 12 ++-- src/app/press/page.tsx | 24 +++---- src/app/pricing/pricing-content.tsx | 30 ++++----- src/app/privacy/page.tsx | 22 +++---- src/app/protocols/page.tsx | 36 +++++------ src/app/registry/[handle]/page.tsx | 2 +- src/app/registry/page.tsx | 2 +- src/app/registry/registry-client.tsx | 2 +- src/app/releases/page.tsx | 6 +- src/app/releases/releases-client.tsx | 8 +-- src/app/requests/page.tsx | 6 +- src/app/requests/requests-client.tsx | 12 ++-- src/app/resources/page.tsx | 18 +++--- src/app/reviews/page.tsx | 4 +- src/app/roadmap/[id]/page.tsx | 4 +- src/app/roadmap/page.tsx | 8 +-- src/app/sandbox/SandboxClient.tsx | 14 ++--- src/app/search/page.tsx | 4 +- src/app/security/page.tsx | 38 ++++++------ src/app/settings/notifications/page.tsx | 16 ++--- src/app/setup/SetupWizardClient.tsx | 20 +++--- src/app/setup/quick/QuickSetupClient.tsx | 8 +-- src/app/showcase/page.tsx | 4 +- src/app/showcase/showcase-client.tsx | 38 ++++++------ src/app/sitemap-visual/page.tsx | 18 +++--- src/app/skills/[slug]/page.tsx | 20 +++--- src/app/skills/page.tsx | 2 +- src/app/spaces/[id]/page.tsx | 10 +-- src/app/spaces/page.tsx | 22 +++---- src/app/sponsor/page.tsx | 2 +- src/app/sponsor/sponsor-client.tsx | 10 +-- src/app/stats/page.tsx | 2 +- src/app/status/page.tsx | 18 +++--- src/app/submit/page.tsx | 2 +- src/app/support/page.tsx | 24 +++---- src/app/templates/[id]/page.tsx | 24 +++---- .../templates/[id]/template-detail-client.tsx | 4 +- src/app/templates/page.tsx | 2 +- src/app/templates/templates-client.tsx | 2 +- src/app/terms/page.tsx | 18 +++--- src/app/testimonials/page.tsx | 4 +- src/app/testing-hub/benchmarks/page.tsx | 2 +- src/app/testing-hub/cases/page.tsx | 2 +- src/app/testing-hub/ci-cd/page.tsx | 2 +- src/app/testing-hub/page.tsx | 2 +- src/app/testing/page.tsx | 2 +- src/app/testing/testing-client.tsx | 62 +++++++++---------- src/app/trace/trace-client.tsx | 2 +- src/app/trending/trending-page-client.tsx | 2 +- src/app/trust-center/page.tsx | 2 +- src/app/trust-center/trust-center-client.tsx | 20 +++--- src/app/trust/page.tsx | 6 +- src/app/trust/trust-page-client.tsx | 32 +++++----- src/app/updates/page.tsx | 28 ++++----- src/app/use-cases/use-cases-client.tsx | 32 +++++----- src/app/whats-new/page.tsx | 2 +- src/app/workflows/page.tsx | 2 +- src/components/AddCommentForm.tsx | 18 +++--- src/components/CommentThread.tsx | 18 +++--- src/components/CommentsEmptyState.tsx | 4 +- src/components/TestimonialCarousel.tsx | 4 +- src/components/UpgradeCTA.tsx | 10 +-- src/components/agent-bootstrap-panel.tsx | 2 +- .../artifacts/CreateArtifactForm.tsx | 2 +- src/components/back-to-top.tsx | 2 +- src/components/blog/blog-grid.tsx | 4 +- src/components/blog/blog-list-client.tsx | 4 +- src/components/color-swatch.tsx | 2 +- src/components/compare/ComparePageClient.tsx | 2 +- .../compare/CompareToggleButton.tsx | 2 +- src/components/compare/CompareTray.tsx | 2 +- .../compare/SkillComparePageClient.tsx | 2 +- src/components/compatibility-matrix.tsx | 4 +- src/components/forum/ForumThreadList.tsx | 6 +- .../get-started/ActivationChecklist.tsx | 2 +- src/components/global-nav.tsx | 26 ++++---- .../home-skill-discovery-search.tsx | 2 +- src/components/news-feed.tsx | 62 +++++++++---------- src/components/newsletter-signup.tsx | 2 +- src/components/next-best-action-panel.tsx | 2 +- src/components/recent-submissions.tsx | 22 +++---- src/components/recently-viewed.tsx | 8 +-- src/components/related-kits.tsx | 2 +- .../security/security-checklist.tsx | 6 +- src/components/skill-reviews-section.tsx | 6 +- src/components/toast.tsx | 32 +++++----- src/components/ui/checkbox.tsx | 2 +- src/components/ui/tabs.tsx | 2 +- src/lib/sanitize.ts | 2 +- 207 files changed, 1521 insertions(+), 1521 deletions(-) diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 39087a5b..18a610db 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -59,7 +59,7 @@ function StatCounter({ label, value }: { label: string; value: number }) { return (
-

{count.toLocaleString()}+

+

{count.toLocaleString()}+

{label}

); @@ -67,7 +67,7 @@ function StatCounter({ label, value }: { label: string; value: number }) { function LoadingState() { return ( -
+
@@ -81,7 +81,7 @@ function LoadingState() { function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) { return ( -
+
Couldn't load the About page @@ -91,7 +91,7 @@ function ErrorState({ message, onRetry }: { message: string; onRetry: () => void @@ -140,9 +140,9 @@ export default function AboutPage() { if (error || !data) return ; return ( -
+
- + Live platform data

Built by agents, for agents

@@ -195,7 +195,7 @@ export default function AboutPage() {
{data.team.map((member) => ( - +
{member.name} -

{member.role}

+

{member.role}

@@ -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} @@ -240,9 +240,9 @@ export default function AboutPage() {
{data.milestones.map((milestone) => (
- +
-

{new Date(milestone.date).toLocaleDateString()}

+

{new Date(milestone.date).toLocaleDateString()}

{milestone.title}

{milestone.description}

@@ -261,7 +261,7 @@ export default function AboutPage() {
Submit a Skill @@ -269,7 +269,7 @@ export default function AboutPage() { 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 diff --git a/src/app/accessibility/accessibility-page-client.tsx b/src/app/accessibility/accessibility-page-client.tsx index 0db5210f..b8868bfa 100644 --- a/src/app/accessibility/accessibility-page-client.tsx +++ b/src/app/accessibility/accessibility-page-client.tsx @@ -98,8 +98,8 @@ export function AccessibilityPageClient() { if (loading) { return ( - - + +

Loading accessibility audit results...

 ); @@ -123,7 +123,7 @@ export function AccessibilityPageClient() { return (
- +

Accessibility Compliance Snapshot

@@ -148,11 +148,11 @@ export function AccessibilityPageClient() {
- +

Audit Checks

{data.auditChecks.map((check: AccessibilityAuditCheck) => ( -
+

{check.name}

@@ -166,7 +166,7 @@ export function AccessibilityPageClient() {
- +

Priority Recommendations

{failedChecks.length === 0 ? (
diff --git a/src/app/accessibility/page.tsx b/src/app/accessibility/page.tsx index d82b18a0..9ee1ae35 100644 --- a/src/app/accessibility/page.tsx +++ b/src/app/accessibility/page.tsx @@ -18,10 +18,10 @@ export const metadata: Metadata = { export default function AccessibilityPage() { return ( -
+
-

Accessibility

+

Accessibility

We're publishing real accessibility audit data sourced from persistent records through the /api/accessibility endpoint.

diff --git a/src/app/acp/acp-directory-client.tsx b/src/app/acp/acp-directory-client.tsx index 77e921cb..7f377a64 100644 --- a/src/app/acp/acp-directory-client.tsx +++ b/src/app/acp/acp-directory-client.tsx @@ -18,17 +18,17 @@ export type AcpProtocol = { }; const statusStyles: Record = { - 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 = { 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[] }) { diff --git a/src/app/acp/page.tsx b/src/app/acp/page.tsx index 21247611..c70628e6 100644 --- a/src/app/acp/page.tsx +++ b/src/app/acp/page.tsx @@ -32,7 +32,7 @@ export default function AcpPage() {
-

+

🛰️ ACP Protocol Directory

diff --git a/src/app/agent-playground/page.tsx b/src/app/agent-playground/page.tsx index 3f7feb3a..c3287a4d 100644 --- a/src/app/agent-playground/page.tsx +++ b/src/app/agent-playground/page.tsx @@ -166,7 +166,7 @@ export default function AgentPlaygroundPage() { }, [runs]); return ( -

+
@@ -237,7 +237,7 @@ export default function AgentPlaygroundPage() { - + {AGENT_OPTIONS.map((agent) => ( {agent === "all" ? "All agents (filter off)" : agent} @@ -253,7 +253,7 @@ export default function AgentPlaygroundPage() { - + {MODEL_OPTIONS.map((model) => ( {model} @@ -311,7 +311,7 @@ export default function AgentPlaygroundPage() {
-
+

Prompt

{currentRun.prompt}

Response

diff --git a/src/app/agents/AgentsDirectoryClient.tsx b/src/app/agents/AgentsDirectoryClient.tsx index dee73f8a..bd5c2914 100644 --- a/src/app/agents/AgentsDirectoryClient.tsx +++ b/src/app/agents/AgentsDirectoryClient.tsx @@ -23,11 +23,11 @@ export type AgentDirectoryCard = { }; const platformColors: Record = { - 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) { @@ -71,7 +71,7 @@ export function AgentsDirectoryClient({ agents }: { agents: AgentDirectoryCard[]
{agent.avatar}
-

+

{agent.name} {agent.verifiedAgentJson && ( {agent.activityCount7d > 0 ? ( - + Active ) : ( @@ -103,7 +103,7 @@ export function AgentsDirectoryClient({ agents }: { agents: AgentDirectoryCard[] )} {agent.featured && ( - + ⭐ Featured )} diff --git a/src/app/agents/[handle]/page.tsx b/src/app/agents/[handle]/page.tsx index 5b7bd204..4bf6e18b 100644 --- a/src/app/agents/[handle]/page.tsx +++ b/src/app/agents/[handle]/page.tsx @@ -102,11 +102,11 @@ export async function generateMetadata({ params }: { params: Promise<{ handle: s } const platformColors: Record = { - 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", }; export default async function AgentProfilePage({ params }: { params: Promise<{ handle: string }> }) { @@ -176,7 +176,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
{agent.featured && (
- ⭐ Featured + ⭐ Featured
)} @@ -184,7 +184,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h
-

+

{agent.name} {(agent.verified || agent.links?.agentJson) && }

@@ -250,7 +250,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h {/* Installed skills */}
-

🛠️ Installed Skills

+

🛠️ Installed Skills

{installedSkills.length > 0 && ( {installedSkills.length} skills )} @@ -268,7 +268,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h >
-

{skill.name}

+

{skill.name}

{skill.description}

@@ -286,7 +286,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h {/* Platforms */}
-

📡 Platforms

+

📡 Platforms

{agent.platforms.map((platform) => ( -

🗞️ Activity

+

🗞️ Activity

{activity.items.length === 0 ? (

No recent comments or ratings yet.

) : ( @@ -347,7 +347,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h <>
-

📊 Recent Milestones

+

📊 Recent Milestones

{agent.activity.map((item, index) => { const activityIcons: Record = { @@ -389,7 +389,7 @@ export default async function AgentProfilePage({ params }: { params: Promise<{ h {Object.keys(agent.links).length > 0 && ( <>
-

🔗 Links

+

🔗 Links

{agent.links.agentJson && ( -

🔌 API

+

🔌 API

0 && (
-

👥 Other Agents

+

👥 Other Agents

{relatedAgents.map((other) => ( 0 && (
-

+

⭐ Top Trust Agents

@@ -188,7 +188,7 @@ export function AgentsPageClient({ agents: initialAgents }: AgentsPageClientProp {otherAgents.length > 0 && (
-

All Agents

+

All Agents

{otherAgents.map((agent) => ( @@ -215,7 +215,7 @@ function AgentCard({ agent }: { agent: DirectoryAgent }) {
🤖
-

+

{agent.name}

@{agent.handle}

diff --git a/src/app/agents/page.tsx b/src/app/agents/page.tsx index 5469a722..125c7726 100644 --- a/src/app/agents/page.tsx +++ b/src/app/agents/page.tsx @@ -55,7 +55,7 @@ export default function AgentsIndexPage() {
{/* Header */}
-

+

🤖 Agent Directory

diff --git a/src/app/auth/callback/page.tsx b/src/app/auth/callback/page.tsx index e45d7b07..c096f4ec 100644 --- a/src/app/auth/callback/page.tsx +++ b/src/app/auth/callback/page.tsx @@ -4,7 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com export default function AuthCallbackPage() { return ( -

+
@@ -14,7 +14,7 @@ export default function AuthCallbackPage() { - diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx index 8d062fd1..ad839a32 100644 --- a/src/app/auth/signin/page.tsx +++ b/src/app/auth/signin/page.tsx @@ -7,7 +7,7 @@ import { Label } from "@/components/ui/label"; export default function SignInPage() { return ( -
+
@@ -27,7 +27,7 @@ export default function SignInPage() { Use GitHub or your email to enter the platform. - diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx index 0a00ee53..eac709c9 100644 --- a/src/app/auth/signup/page.tsx +++ b/src/app/auth/signup/page.tsx @@ -5,7 +5,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com export default function SignUpPage() { return ( -
+
@@ -15,7 +15,7 @@ export default function SignUpPage() { - diff --git a/src/app/badges/page.tsx b/src/app/badges/page.tsx index 96e2f4ff..d5be3522 100644 --- a/src/app/badges/page.tsx +++ b/src/app/badges/page.tsx @@ -223,15 +223,15 @@ export default function BadgesPage() { }; return ( -
+
-
+
-

+

🏅 Badges & Achievements

@@ -254,7 +254,7 @@ export default function BadgesPage() { id="badge-category" value={category} onChange={(event) => setCategory(event.target.value as "all" | BadgeCategory)} - className="w-full h-10 rounded-md border border-white/10 bg-[#0f0f0f] px-3 text-sm" + className="w-full h-10 rounded-md border border-white/10 bg-background px-3 text-sm" > {categories.map((item) => ( @@ -274,7 +274,7 @@ export default function BadgesPage() { value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search badges by name, criteria, or description" - className="bg-[#0f0f0f] border-white/10" + className="bg-background border-white/10" />

@@ -287,7 +287,7 @@ export default function BadgesPage() { value={agentHandle} onChange={(event) => setAgentHandle(event.target.value)} placeholder="agent-handle" - className="bg-[#0f0f0f] border-white/10" + className="bg-background border-white/10" />
@@ -300,7 +300,7 @@ export default function BadgesPage() { {awardMessage ? ( <> • - {awardMessage} + {awardMessage} ) : null}
@@ -308,9 +308,9 @@ export default function BadgesPage() {
{isLoading ? ( - Loading badges... + Loading badges... ) : error ? ( - +

{error}

-

Criteria

+

Criteria

{badgeDetail.criteria}

-

Earners

+

Earners

{badgeDetail.earners.length === 0 ? (

No earners yet.

) : ( @@ -425,7 +425,7 @@ export default function BadgesPage() {
@@ -459,7 +459,7 @@ export default function BookmarksPage() {
Open Item diff --git a/src/app/bootstrap/BootstrapApiDocsClient.tsx b/src/app/bootstrap/BootstrapApiDocsClient.tsx index 195dd8db..ee9ada85 100644 --- a/src/app/bootstrap/BootstrapApiDocsClient.tsx +++ b/src/app/bootstrap/BootstrapApiDocsClient.tsx @@ -44,7 +44,7 @@ export default function BootstrapApiDocsClient() { } return ( -
+

Agent Bootstrap API

@@ -77,7 +77,7 @@ export default function BootstrapApiDocsClient() { @@ -333,7 +333,7 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) { {timeline.map((event, index) => (
-
+
{event.label}
{formatDate(event.at)}
diff --git a/src/app/bounties/bounties-client.tsx b/src/app/bounties/bounties-client.tsx index 88189f62..15cc1ea3 100644 --- a/src/app/bounties/bounties-client.tsx +++ b/src/app/bounties/bounties-client.tsx @@ -51,7 +51,7 @@ function statusLabel(status: BountyStatus) { function statusBadgeClass(status: BountyStatus) { switch (status) { case "open": - return "border-[#06D6A0]/30 text-[#06D6A0] bg-[#06D6A0]/10"; + return "border-primary/30 text-primary bg-primary/10"; case "claimed": return "border-purple/30 text-purple bg-purple/10"; case "submitted": @@ -210,7 +210,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[] @@ -254,7 +254,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[] />
- @@ -267,7 +267,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[] setTag(e.target.value)} - className="mt-1 w-full px-3 py-2 rounded-lg bg-card border border-white/10 text-foreground focus:outline-none focus:border-[#06D6A0]/40" + className="mt-1 w-full px-3 py-2 rounded-lg bg-card border border-white/10 text-foreground focus:outline-none focus:border-primary/40" > {allTags.map((t) => ( @@ -320,7 +320,7 @@ export function BountiesClient({ initialBounties }: { initialBounties: Bounty[]
{label}
-
+
{value}
diff --git a/src/app/canary/page.tsx b/src/app/canary/page.tsx index 50ec4aa3..70e8b1bf 100644 --- a/src/app/canary/page.tsx +++ b/src/app/canary/page.tsx @@ -120,7 +120,7 @@ export default async function CanaryPage({ searchParams }: CanaryPageProps) { : 0; return ( -
+

Canary Runs

diff --git a/src/app/careers/page.tsx b/src/app/careers/page.tsx index 9a776e9c..4b3fdbcf 100644 --- a/src/app/careers/page.tsx +++ b/src/app/careers/page.tsx @@ -230,7 +230,7 @@ export default function CareersPage() { })); return ( -
+