Primer branding: fix mismatched RGB tokens for accent/agent colors

[github-actions]

What changed (color)

src/styles/style.css defines --accent-blue-rgb, --agent-purple-rgb, and (light theme) --accent-green-rgb as RGB triplets meant to be used as rgba(var(--...-rgb), alpha) alongside their paired hex custom properties (--accent-blue, --agent-purple, --accent-green). The RGB triplets did not actually match the hex values they were paired with:

Token (theme)	Hex	RGB triplet before	Correct RGB
--accent-blue / --agent-purple (light)	#5f489a	116, 88, 181	95, 72, 154
--accent-blue / --agent-purple (dark)	#c3b5e4	166, 147, 212	195, 181, 228
--accent-green (light)	#1a7f37	46, 160, 67	26, 127, 55

(Dark-theme --accent-green-rgb already matched #2ea043 and was left unchanged.)

I retrieved GitHub's Primer Brand color scale (primer_brand_docs → Color primitives and primer_brand_tokens) and confirmed #5f489a/#c3b5e4 sit in the purple scale and #1a7f37/#2ea043 in the green scale — so the paired hex values were already on-brand, but the stray RGB numbers (closer to --border-focus's own color) meant every semi-transparent overlay using these tokens rendered an incorrect, off-brand tint instead of the intended accent hue.

These mismatched triplets are consumed in ~20 places across style.css: focus rings, hover/active backgrounds on buttons and option cards, the "info callout" tint, the landing-page dithered dot background (radial-gradient(circle, rgba(var(--accent-blue-rgb), 0.28) ...)), the assistant modal's celebration rings/sparks/glow, and the pulsing "completed" step indicator. All of these now render the correct, intended brand accent color in both light and dark themes instead of a slightly-shifted one.

Deviations found but not fixed (documented, not applied)

• Several hand-picked hex values (grays, danger/success/warning, yaml syntax highlighting) are not literal Primer brand tokens, but they map closely to Primer's neutral/red/green scales and are already theme-aware (separate light/dark values with reasonable contrast). Primer Brand's component library (@primer/react-brand) is designed for marketing pages, not for a utility app UI like this wizard, so wholesale token substitution risked a large, risky diff for presentational code this task says to keep small. I left this as a candidate follow-up rather than bundling it here.
• The 999px "pill" radius on .btn-get-started and 50% circular radii elsewhere are intentional shapes (full capsule/circle), not approximations of a square-cornered Primer radius token, so I left them alone.
• The purple "celebration glow" (box-shadow: 0 0 12px rgba(var(--agent-purple-rgb), 0.8)) is a tasteful one-color accent built entirely from the (now-corrected) brand purple token, so per the task's guidance on allowed "tasteful shine," I kept it rather than removing it.

Verification

• npm test — 329/329 tests passed.
• npm run build (via vite build, since the vendor-asset download step is blocked by this sandbox's network policy and unrelated to this change) — built successfully with no errors.

This is a minimal, surgical color-correctness fix: 6 lines changed, no markup/logic changes, no new dependencies.

Warning

Firewall blocked 3 domains

The following domains were blocked by the firewall during workflow execution:

• cdn.jsdelivr.net
• registry.npmjs.org
• unpkg.com

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

network:
  allowed:
    - defaults
    - "cdn.jsdelivr.net"
    - "registry.npmjs.org"
    - "unpkg.com"

See Network Configuration for more information.

Generated by Primer Branding · copilot · auto · 210.4 AIC · ⌖ 7.09 AIC · ⊞ 9.5K · ◷