From 8c1540642a7bcb806d7942a40d84489c2e144ea2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sun, 5 Apr 2026 14:29:24 +0100
Subject: [PATCH] fix(web): map shadcn design tokens to claudemesh palette
 (--cm-*)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/web/src/assets/styles/globals.css | 53 ++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/apps/web/src/assets/styles/globals.css b/apps/web/src/assets/styles/globals.css
index e3f3146..2c1f546 100644
--- a/apps/web/src/assets/styles/globals.css
+++ b/apps/web/src/assets/styles/globals.css
@@ -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;
+}