osobh/clawmates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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]>
This commit is contained in:
Omar Sobh
2026-06-11 22:00:06 -05:00
co-authored by Claude Opus 4.8
parent e6f50c7ecb
commit 5ff2b2ca33
15 changed files with 198 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/sessions/SessionsColumn.tsx
+3 -3
View File
@@ -33,7 +33,7 @@ export function SessionsColumn({
placeholder="Search"
value={query}
onChange={(e) => setQuery(e.target.value)}
className="w-full rounded-(--radius) border border-input bg-background px-2 py-1.5 text-xs outline-none focus:border-accent"
className="w-full rounded-(--radius) border border-input bg-background px-2 py-1.5 text-xs outline-none focus:border-coral"
/>
</div>
<ul aria-label="Sessions" className="flex-1 overflow-y-auto px-2">
@@ -46,7 +46,7 @@ export function SessionsColumn({
aria-current={active ? "true" : undefined}
onClick={() => onOpen(session)}
className={`w-full rounded-(--radius) border-l-2 px-2 py-2 text-left hover:bg-surface-warm ${
active ? "border-accent bg-surface-warm" : "border-transparent"
active ? "border-coral bg-surface-warm" : "border-transparent"
}`}
>
<span className="block truncate text-xs text-foreground">
@@ -64,7 +64,7 @@ export function SessionsColumn({
<button
type="button"
onClick={onNewSession}
className="w-full rounded-(--radius-button) border border-border px-3 py-1.5 text-xs text-muted-foreground hover:border-accent hover:text-foreground"
className="w-full rounded-(--radius-button) border border-border px-3 py-1.5 text-xs text-muted-foreground hover:border-coral hover:text-foreground"
>
+ New session
</button>