Figma branch sync + alternative token setup

[sjoerdbeentjes]

What this does

Adds Figma branch support to the token sync script, then applies the redesigned "Alternative token setup" branch token set and migrates the React and Angular buttons to it.

Opened as a draft for review of the token redesign before adopting it.

Changes

1. Branch-aware sync (scripts/sync-figma.ts)

• --branch "<name-or-key>" flag (and FIGMA_BRANCH env var). A branch key from the URL is used directly; a name is resolved to its key via the file's branch metadata.
• Auto-detects the variable layout: the original 3. Mode × 2. Theme collections, or the redesigned single themes collection (modes like SURF Blue - Light). Detection is structural, so it survives the branch renumbering its collections.
• The original sync behaviour is unchanged and was verified to reproduce the existing tokens key-for-key.

2. Applied the branch token set (packages/tokens/src/*)

• Regenerated tokens.json / tokens.dark.json from the branch.
• The redesign renames the color layer from flat shadcn names to a role-based taxonomy (primary to background-primary + foreground-primary, destructive to background-error, etc.), adds hover/selected/error/subtle/alt roles, adds heading-* typography and section-* spacing, and attaches color to shadows.

3. Exposed tokens under their literal Figma names + migrated the buttons (React + Angular)

• Tailwind utilities now read exactly like the Figma tokens: bg-background-primary, text-foreground-primary, hover:bg-background-item-hover, etc. No shadcn-alias bridge.
• React: @theme inline in index.css passes the token variables through under their literal names. Angular: same set added to styles.css (the @spartan-ng preset's old flat names are simply unused).
• Both button components rewritten to the dedicated role tokens. This removes the opacity/dark: hacks the redesign makes unnecessary: primary/80 to background-primary-hover, destructive/10 to background-error-subtle (+ -hover), and the dark:input outline treatment to the theme-aware background-item-hover.

How it was verified

• React: ran the Next.js demo; the default button renders rgb(6,75,203) (--background-primary) with white text (--foreground-primary).
• Angular: compiled styles.css through Tailwind; confirmed bg-background-primary to --background-primary, border-border-default to --border-default, bg-background-error-subtle to --background-error-subtle, etc.
• Both packages type-check; tokens and both libraries build.

Net effect on the button

Default/outline/ghost stay visually close; the redesign gives dedicated tokens for states, so: default hover is a dedicated lighter blue (was primary @ 80%), secondary becomes pale blue, destructive uses the error-subtle role, and the outline dark treatment now comes from the theme-aware tokens rather than dark:input overrides.

Open points / not in scope

• The branch only carries SURF Blue, so the other 10 theme files are removed here. They come back once the branch adds them.
• The branch is a live Figma draft (collections renumber between syncs); not stable as the source of truth yet.
• Only the button is migrated (it is currently the only component). Future components use the literal token utilities directly.
• The React and Angular @theme blocks duplicate the token list by hand; worth generating from @surfnet/tokens later.
• border-radius/rounded-* is emitted verbatim from the branch; can be normalized if preferred.