[JakeGinnivan]

Upstreamed from dddwa/dddperth#205.

What was broken

The theme builder used flat dotted keys ('border.default'). Panda emits those as --colors-border\.default, but every reference to them ({colors.border.default}, token(colors.border.subtle)) resolves to var(--colors-border-default), which was never defined. Those references silently computed to nothing:

• border="default" | "subtle" | "emphasis", the sponsor border and the admin borders rendered as no border
• every prose colour on MDX/blog pages fell back to the inherited colour
• the bg.*, button.* and link.* aliases were empty
• token(colors.border.subtle) dividers vanished

Utility props like bg="surface.card" kept working, because the class and the definition used the same escaped name. That's why it went unnoticed.

focus-ring was also broken separately: {colors.interactive.focus}33 becomes var(...)33, so the 33 is a stray number rather than a hex alpha, and the whole box-shadow was invalid.

The fix

• themes/theme-builder.ts: a small nest() helper turns the dotted keys into nested groups, so Panda defines the hyphenated names. index.css and hero.tsx move off the hard-coded escaped name.
• Both stub themes: focus-ring alpha via color-mix(... 20%, transparent)
• _layout.voting.tsx, _layout.agenda.($year).tsx, _layout.agenda.my.tsx, _layout.feedback.tsx: remove colorPalette="brand.primary|secondary". It stops type-checking once brand is nested, and was always a no-op: the button recipe reads colorPalette.solid.*, which brand never had, so the buttons inherited gray and still do.
• New app/theme/token-references.test.ts fails on any colour/border/shadow var the generated CSS references but never defines, and on any dot-escaped token name.

What was upstreamed vs left behind

• Copied verbatim from the fork's post-merge state (upstream's copies were byte-identical to the fork's pre-change versions): theme builder, token test, theme-invariant test, index.css, hero.tsx, both stub themes, _layout.agenda.my.tsx, _layout.feedback.tsx
• Prop lines removed by hand: _layout.agenda.($year).tsx and _layout.voting.tsx, which differ from the fork for unrelated reasons
• Fork-owned, not copied: conference/theme/perth*.theme.ts (the stub themes are their counterpart) and the fork's Perth-branded baselines

Baselines

Regenerated against the stub on top of #26 (main's tree is identical to it) with pnpm vr --update-snapshots=all (several changes sit under the 2% tolerance). 54 of 63 changed; I reviewed before/after crops of each route:

• home: the Important Dates row gains its 2px emphasis top border (+2px)
• content page, blog post: prose links and anchor-linked headings take text.highlight (teal)
• sponsors, agenda: sponsor tiles get their border.sponsor frame (slate in the stub, which differs from its page background)
• talk detail: the talk dialog's title divider renders
• blog index: unchanged

Testing

• On top of Upstream 5/5: feedback, talk dialog and a fixture conference year for e2e (dddperth #198–#203) #26 (identical tree to current main): tsc clean, 737 unit tests pass (38 skipped, as on Upstream 5/5: feedback, talk dialog and a fixture conference year for e2e (dddperth #198–#203) #26), eslint clean; pnpm vr passes on the new baselines, including the date-pin guard. The WebKit projects were re-run after timeouts.
• Did not run the axe e2e suite

After this merges, dddperth's next /core-pull should apply cleanly, since its copy is identical.

🤖 Generated with Claude Code