Adopt WorkClaw's shadcn/ui Neutral token contract (Tailwind v4)

Replace the hand-rolled @theme color block with a real shadcn init shape: bare :root (light) + .dark (dark) tokens mapped to --color-* via @theme inline, plus the missing semantic/chart/radius tokens. --accent is now neutral (#262626) to match WorkClaw; the ~16 coral-via-accent usages migrate to the dedicated `coral` brand token so they stay coral. Adds cn() (clsx + tailwind-merge) and components.json so future `npx shadcn add` works. Clawmates-specific tokens (coral brand, marketing palette, measured shadows, motion, layout, type scale) are preserved verbatim in a separate @theme block. Root <html> gains `dark` (app/login read .dark; marketing stays light via explicit colors). We do NOT add shadcn's Button/Card/etc. — they'd conflict with the existing measured-to-WorkClaw components. Verified value-preserving: typecheck/lint/86 unit/31 E2E all green, and all 6 visual baselines pass with no diff. Compiled + live CSS confirm bg-accent→#262626 (neutral), text-coral→#f96565, chart tokens present. Co-Authored-By: Claude Opus 4.8 <[email protected]>
2026-06-11 22:00:06 -05:00
parent e6f50c7ecb
commit 5ff2b2ca33
15 changed files with 198 additions and 45 deletions
@@ -51,12 +51,12 @@ function AgentMessage({
          {message.status === "streaming" && (
            <span
              aria-hidden
-              className="ml-0.5 inline-block h-4 w-0.5 translate-y-0.5 bg-accent motion-safe:animate-[caret-blink_1s_steps(1)_infinite]"
+              className="ml-0.5 inline-block h-4 w-0.5 translate-y-0.5 bg-coral motion-safe:animate-[caret-blink_1s_steps(1)_infinite]"
            />
          )}
        </p>
        {message.status === "error" && (
-          <p role="alert" className="pt-1 text-xs text-accent">
+          <p role="alert" className="pt-1 text-xs text-coral">
            Something went wrong with this reply.
          </p>
        )}