fix(web): map shadcn design tokens to claudemesh palette (--cm-*)
Some checks failed
CI / Tests / 🧪 Test (push) Has been cancelled

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>
This commit is contained in:
Alejandro Gutiérrez
2026-04-05 14:29:24 +01:00
parent 6fe382763a
commit 8c1540642a

View File

@@ -101,3 +101,56 @@
--cm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--cm-dur: 300ms;
}
/* ============================================================
Map shadcn/ui tokens → claudemesh palette
Overrides the TurboStarter-inherited orange theme so every
Button/Card/Input/Dialog/etc renders in the claudemesh dark
palette, not the white/neutral defaults. Applies to BOTH
the light variant and the dark variant of the active
[data-theme="orange"] selector — we want the same dark
claudemesh look regardless of system preference.
============================================================ */
:root,
[data-theme="orange"],
[data-theme="orange"] .dark,
.dark {
--background: var(--cm-bg);
--foreground: var(--cm-fg);
--card: var(--cm-bg-elevated);
--card-foreground: var(--cm-fg);
--popover: var(--cm-bg-elevated);
--popover-foreground: var(--cm-fg);
--primary: var(--cm-clay);
--primary-foreground: var(--cm-gray-050);
--secondary: var(--cm-bg-elevated);
--secondary-foreground: var(--cm-fg-secondary);
--muted: var(--cm-bg-elevated);
--muted-foreground: var(--cm-fg-tertiary);
--accent: var(--cm-bg-elevated);
--accent-foreground: var(--cm-fg);
--destructive: #dc2626;
--destructive-foreground: var(--cm-gray-050);
--success: #16a34a;
--success-foreground: var(--cm-gray-050);
--border: var(--cm-border);
--input: var(--cm-border);
--ring: var(--cm-clay);
--radius: var(--cm-radius-md);
--sidebar: var(--cm-bg-elevated);
--sidebar-foreground: var(--cm-fg);
--sidebar-primary: var(--cm-clay);
--sidebar-primary-foreground: var(--cm-gray-050);
--sidebar-accent: var(--cm-bg-hover);
--sidebar-accent-foreground: var(--cm-fg);
--sidebar-border: var(--cm-border);
--sidebar-ring: var(--cm-clay);
}
/* Tailwind's @variant light path — when no data-theme or no dark class,
Tailwind emits the light branch. Override it too so there's no
white-background flash on any shadcn surface. */
:root {
color-scheme: dark;
}