Primer branding: replace hard-coded hex colors with existing theme tokens

[github-actions]

What changed

Color

• .landing-glow: replaced the hard-coded rgba(255, 112, 67, ...) (an off-palette orange with no light/dark variants) with rgba(var(--agent-purple-rgb), ...), an existing brand-aligned accent already used consistently across the "agent" UI (buttons, badges, hero glow). This keeps the warm/cool blend on-brand and gives it automatic light/dark parity, which the orange literal lacked.
• .prompt-preview::after / [data-color-mode="dark"] .prompt-preview::after: replaced two hard-coded RGB fade colors (rgba(246, 248, 250, 0) light, rgba(13, 17, 23, 0) dark) with a single transparent stop feeding into var(--code-bg). Both are fully transparent at the top of the gradient, so the color itself is irrelevant — using transparent removes hard-coded hex values entirely and eliminates the need for a separate dark-mode override, since the destination color (--code-bg) is already theme-aware.

Guidance motivating each change

From the primer-brand MCP token/doc lookups performed for this audit:

• Functional accent tokens are defined per-theme (e.g. --brand-color-accent-primary, --brand-color-accent-secondary) rather than as one-off hex values, so custom accent colors should route through a project's existing themed variable rather than introduce a new unreferenced hex.
• This repo already has a light/dark themed accent-color system (--accent-blue, --accent-green, --agent-purple, each with -rgb companions defined in both :root and the dark-mode block). The stray rgba(255, 112, 67, ...) in .landing-glow was the only accent color in the file with no themed variable and no dark-mode counterpart, breaking light/dark parity that the rest of the palette maintains.

Deviations found but not fixed

• The file uses many var(--color-*, #hex) fallback patterns (e.g. --bg-primary: var(--color-canvas-default, #ffffff)). These are intentional CSS custom-property fallbacks for when Primer CSS variables aren't loaded, not off-brand hard-coding, so left as-is.
• Broader gradient/shadow tuning (e.g. thermo drift ellipse sizes, blur radii) was left untouched — it already composes from themed -rgb tokens and didn't need color changes.

Validation

• npm test: 319/319 tests passed.
• npm run build (vite build): succeeded. Note: the repo's prebuild script (fetch-vendor-assets.mjs) requires network access to the npm registry to vendor @primer/css, which is unavailable in this sandboxed environment; vite build itself completed successfully once invoked directly.

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 · 40.3 AIC · ⌖ 10.2 AIC · ⊞ 9.7K · ◷

[Copilot]

🟢 Approval recommended

The changes are localized, use already-defined theme tokens, and remove redundant dark-mode CSS without introducing unresolved references.

Pull request overview

Updates the site’s Primer-aligned styling to eliminate a couple of hard-coded color literals in favor of existing theme-aware tokens, improving light/dark parity and keeping branding consistent across the wizard UI.

Changes:

• Replaced the .prompt-preview::after fade gradient’s hard-coded transparent RGB stop(s) with transparent, relying on the already theme-aware --code-bg end color (and removing the dark-mode override).
• Replaced .landing-glow’s off-palette orange rgba(255, 112, 67, …) with the existing --agent-purple-rgb token.

File summaries

File	Description
src/styles/style.css	Swaps hard-coded gradient/glow color literals for existing theme tokens to ensure consistent branding and light/dark support.

Review details

• Files reviewed: 1/1 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.