Files
claudemesh/apps
Alejandro Gutiérrez 8c1540642a
Some checks failed
CI / Tests / 🧪 Test (push) Has been cancelled
fix(web): map shadcn design tokens to claudemesh palette (--cm-*)
Every shadcn/ui component (Button, Card, Input, Dialog, Table, Sidebar,
Form, …) was still rendering with the TurboStarter-inherited oklch
palette from @turbostarter/ui-web — white backgrounds, neutral greys,
turbostarter-orange primary — because we only used --cm-* tokens via
inline styles in the marketing pages and auth layout, never remapped the
shadcn tokens the components actually read.

User flagged this on the live site — BetterAuth forms, dashboard cards,
admin data-tables all off-brand.

Shortest fix: override the shadcn tokens at the :root, [data-theme="orange"],
and .dark selectors in globals.css so they resolve to --cm-* values.
Every shadcn component auto-themes without a single component rewrite.

Mappings:
- --background      → --cm-bg              (#141413)
- --foreground      → --cm-fg              (#faf9f5)
- --card/popover    → --cm-bg-elevated     (#1f1e1d)
- --primary         → --cm-clay            (#d97757)
- --muted           → --cm-bg-elevated
- --muted-foreground → --cm-fg-tertiary
- --border/--input  → --cm-border          (clay @ 20%)
- --ring            → --cm-clay            (clay focus ring)
- --radius          → --cm-radius-md       (0.5rem)
- sidebar tokens    → cm-bg-elevated + cm-clay
- color-scheme      → dark                 (kills white flash)

--destructive / --success left as standard red/green hexes — they
don't need to match claudemesh palette, they need to signal.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 14:29:24 +01:00
..