Primer branding: use color tokens in dark theme instead of hardcoded hex

[github-actions]

What changed

Color

• Dark-theme ([data-color-mode="dark"]) CSS custom properties in src/styles/style.css were hardcoded hex values (e.g. --text-primary: #e6edf3;), while the equivalent light-theme properties correctly resolved through Primer CSS variables (e.g. --text-primary: var(--color-fg-default, #24292f);). Every dark-mode token now routes through the matching --color-* Primer variable, with the original hex kept only as the fallback value, so both themes stay in sync with Primer's token system instead of drifting independently.
• No visual values changed — the resolved colors are identical, just token-backed.

Deliberately not changed

• primer_brand_review also flagged hardcoded pixel sizes (e.g. 3px, 24px) and border-radius: 50% circular shapes (avatars, step dots, spinners). These are small circular UI affordances, not pill-shaped buttons/CTAs — the "pill-button" brand rule targets marketing CTAs, and reworking every icon/dot radius and spacing constant into brand size tokens would be a much larger, riskier change than this PR's scope. Left as a known follow-up.
• The wizard's own accent palette (blue/green/purple) and gradient/dither hero decoration are unrelated to Primer Brand marketing components (this is a GitHub-CSS-based utility tool, not a @primer/react-brand page), so left untouched per the "presentational only, don't restructure" instruction.

Brand guidance cited (from the primer-brand MCP server)

• primer_brand_review on src/styles/style.css: hardcoded-hex: Hardcoded hex colors found (#ffffff, #f6f8fa, #24292f, #57606a). Use Primer Brand color tokens.
• primer_brand_tokens confirmed the canonical Primer color-token pattern (--brand-color-canvas-default, --brand-color-text-default, etc.) of resolving through a semantic variable rather than a raw hex.

Testing

• Updated test/a11y.test.js's darkVar() helper regex to extract the hex fallback from var(--token, #hex) in addition to bare #hex, since the dark-theme block now emits token-wrapped values.
• npm test — all 327 tests pass.
• npm run build — succeeds (verified the Vite build itself compiles cleanly; the prebuild vendor-fetch step requires npm registry access, which isn't available in this sandbox — confirmed this failure is pre-existing and unrelated to these changes by reproducing it on main before my edits).

Warning

Firewall blocked 1 domain

The following domain was blocked by the firewall during workflow execution:

• registry.npmjs.org

To allow these domains, add them to the network.allowed list in your workflow frontmatter:

network:
  allowed:
    - defaults
    - "registry.npmjs.org"

See Network Configuration for more information.

Generated by Primer Branding · copilot · auto · 129.7 AIC · ⌖ 6.64 AIC · ⊞ 8.3K · ◷