# shadcn Mapping

The shadcn layer maps Mindvalley design tokens to [shadcn/ui](https://ui.shadcn.com) CSS variable conventions, so shadcn components render with MV branding out of the box.

## How it works

Each brand has a static CSS file at `src/themes/{brand}-shadcn.css`. The generate script appends it to the Style Dictionary output, producing a single CSS file per brand with three layers:

1. **Base layer** — raw color scales (`--purple-600`, `--grey-100`, etc.)
2. **Theme layer** — semantic tokens (`--bg-primary`, `--content-primary`, etc.)
3. **shadcn layer** — framework variables (`--background`, `--primary`, etc.)

The shadcn variables reference tokens from the layers above via `var()`.

## Light/dark mode

There are two types of token references:

**Theme-layer tokens** (e.g., `--bg-primary`, `--content-primary`) automatically switch values between `:root` and `.dark`. A single `var()` reference works for both modes — no override needed in `.dark`.

**Base-layer tokens** (e.g., `--purple-600`, `--red-600`) have the same value in both themes. When a shadcn variable needs a different shade in dark mode (e.g., lighter purple for contrast), the `.dark` block overrides it with a different base-layer reference.

## Mindvalley mapping

### Backgrounds & foregrounds

| shadcn variable | Light | Dark | MV token |
| --- | --- | --- | --- |
| `--background` | #f9f9f9 | #181d26 | `var(--bg-primary)` — auto-switches |
| `--foreground` | #0f131a | #ffffff | `var(--content-primary)` — auto-switches |
| `--card` | #ffffff | #292d38 | `var(--card-modal-bg-card-primary)` — auto-switches |
| `--card-foreground` | #0f131a | #ffffff | `var(--content-primary)` |
| `--popover` | #ffffff | #292d38 | `var(--card-modal-bg-card-primary)` |
| `--popover-foreground` | #0f131a | #ffffff | `var(--content-primary)` |

### Brand colors

| shadcn variable | Light | Dark | MV token |
| --- | --- | --- | --- |
| `--primary` | #7a12d4 | #d299fe | `--purple-600` / `--purple-400` |
| `--primary-foreground` | #ffffff | #0f131a | hardcoded / `var(--grey-700)` |
| `--secondary` | #f3f4f6 | #292d38 | `var(--bg-secondary)` — auto-switches |
| `--secondary-foreground` | #0f131a | #ffffff | `var(--content-primary)` |

### Muted & accent

| shadcn variable | Light | Dark | MV token |
| --- | --- | --- | --- |
| `--muted` | #f3f4f6 | #292d38 | `var(--bg-secondary)` — auto-switches |
| `--muted-foreground` | #71767f | #979ca5 | `var(--content-quaternary)` — auto-switches |
| `--accent` | #ebedef | #41464f | `var(--bg-tertiary)` — auto-switches |
| `--accent-foreground` | #0f131a | #ffffff | `var(--content-primary)` |

### Destructive & controls

| shadcn variable | Light | Dark | MV token |
| --- | --- | --- | --- |
| `--destructive` | #d8273a | #f78787 | `--red-600` / `--red-400` |
| `--border` | rgba(0,0,0,0.08) | rgba(255,255,255,0.12) | `var(--border-border-light)` — auto-switches |
| `--input` | rgba(0,0,0,0.12) | rgba(255,255,255,0.18) | `var(--border-border-medium)` — auto-switches |
| `--ring` | #7a12d4 | #d299fe | `--purple-600` / `--purple-400` |
| `--radius` | 0.5rem | 0.5rem | static value |

### Chart colors

| shadcn variable | Light | Dark |
| --- | --- | --- |
| `--chart-1` | `--purple-600` | `--purple-400` |
| `--chart-2` | `--blue-600` | `--blue-400` |
| `--chart-3` | `--green-600` | `--green-400` |
| `--chart-4` | `--orange-600` | `--orange-400` |
| `--chart-5` | `--red-600` | `--red-400` |

### Sidebar

| shadcn variable | Light | Dark | MV token |
| --- | --- | --- | --- |
| `--sidebar` | #ffffff | #0f131a | `var(--surface)` — auto-switches |
| `--sidebar-foreground` | #0f131a | #ffffff | `var(--content-primary)` |
| `--sidebar-primary` | #7a12d4 | #d299fe | `--purple-600` / `--purple-400` |
| `--sidebar-primary-foreground` | #ffffff | #0f131a | hardcoded / `var(--grey-700)` |
| `--sidebar-accent` | #f3f4f6 | #292d38 | `var(--bg-secondary)` |
| `--sidebar-accent-foreground` | #0f131a | #ffffff | `var(--content-primary)` |
| `--sidebar-border` | rgba(0,0,0,0.08) | rgba(255,255,255,0.12) | `var(--border-border-light)` |
| `--sidebar-ring` | #7a12d4 | #d299fe | `--purple-600` / `--purple-400` |

## B2B mapping

B2B uses the same shadcn variable names but with B2B brand colors. Since B2B lacks semantic tokens for backgrounds/content/stroke, most values are hardcoded hex rather than `var()` references.

Key differences from Mindvalley:

- Brand purple: `--purple-600` = #664bdd (vs MV #7a12d4)
- Destructive: `--red-600` = #d03c2f (vs MV #d8273a)
- Chart colors use teal and brown instead of green and orange

## Customizing

Edit `src/themes/{brand}-shadcn.css` to change mappings. Run `nx run @mindvalley/css:generate` to rebuild.

The `@layer base` block at the end of each theme file sets default border color and body background/foreground using plain CSS properties.