v1.5.0: a dark theme derived from the palette (MFB-971)

[benoitberenger]

Adds a dark theme for interfaces with a dark mode, starting with the My First Bitcoin App. It applies the decisions recorded on MFB-971 (2026-10-08). This raises the version to 1.5.0, so merging releases it. Quentin or Patrick decides, and Patrick may object to the purple surface before the merge.

What changes

The new darkTheme group in tokens.json holds twelve colors. Each one is an alias of a palette color, and no color is added.

Token	Color	Contrast
surface	purple-400	white 14.9:1
surface-raised (cards, sheets)	purple-300	white 11.5:1
text	white
text-muted	gray-400	8.3:1 / 6.4:1
line	gray-600	4.3:1 / 3.3:1
link, accent, focus	orange-300	6.5:1 / 5.0:1
on-accent	black	9.2:1 on orange-300
primary	purple-200
on-primary	white	8.7:1
primary-edge	gray-400	see below

Two contrasts in a cell are on surface, then on surface-raised.

• Provenance: a new sourceKind, derived, defined in $verification and in CONTRIBUTING. These tokens sit in their own group, so verify-figma.mjs never looks for them as Figma fills. Its census counts them separately.
• Outputs:
  • --mfb-dark-* variables in brand.css;
  • mfb-dark-* colors in Tailwind 3 and 4 (bg-mfb-dark-surface, text-mfb-dark-text-muted…). The naming gate accepts mfb-dark-<use> next to the <element>-on-<surface> roles;
  • darkTheme in index.js;
  • a new "Dark theme" section in brand-spec.md, with the reason and the contrasts for each token.
• Unchanged: the website's dark sections still use the color roles.

The primary button: a thin outline

Purple-200 on purple-400 is 1.7:1, and 1.3:1 on purple-300. I kept the purple-200 fill and the white label, and added a 1px gray-400 outline (primary-edge). The outline is 8.3:1 on the surface, 6.4:1 on cards and 4.9:1 against the fill, so it clears the 3:1 needed for non-text contrast everywhere.

I did not choose a lighter fill: the palette has no purple lighter than purple-200, and a white fill would give the button the same color as the text.

Checks

node scripts/check.mjs: OK (8 outputs match a fresh build). I have not run verify-figma.mjs, because it needs a Figma token. This PR does not change the palette that check reads.

After the release

The App's styles.css will replace its own dark mapping with these variables (MFB-970).

🤖 Generated with Claude Code